.radio-inputs {
     position: relative;
     display: flex;
     flex-wrap: wrap;
     border-radius: 0.5rem;
     background-color: #EEE;
     box-sizing: border-box;
     box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
     padding: 0.25rem;
     font-size: 14px;
 }

 .radio-inputs .radio {
     flex: 1 1 auto;
     text-align: center;
 }

 .radio-inputs .radio input {
     display: none;
 }

 .radio-inputs .radio .name {
     display: flex;
     cursor: pointer;
     align-items: center;
     justify-content: center;
     border-radius: 5px;
     border: none;
     padding: 8px 0px;
     color: rgba(51, 65, 85, 1);
     transition: all .15s ease-in-out;
 }

 .radio-inputs .radio .name.start {
     border-radius: 6px 0px 0px 6px
 }

 .radio-inputs .radio .name.end {
     border-radius: 0px 6px 6px 0px
 }

 .radio-inputs .radio input:checked+.name.meInitiate {
     background-color: #79e389;
     font-weight: 600;
     border: 2px solid #059c568c;
 }

 .radio-inputs .radio input:checked+.name.partnerInitiate {
     background-color: #a9baff;
     font-weight: 600;
     border: 2px solid #2260ff63;
 }

 .radio-inputs .radio input:checked+.name.bothInitiate {
     background-color: #90f1ef;
     font-weight: 600;
     border: 2px solid #09b2e585;
 }




 .radio-inputs .radio input:checked+.name.yesOrgasm {
     background-color: #4cff42cc;
     font-weight: 600;
     color: green;

     i {
         color: green
     }
 }

 .radio-inputs .radio input:not(checked)+.name.yesOrgasm i {
     color: rgb(126, 126, 126);
 }

 .radio-inputs .radio input:checked+.name.noOrgasm {
     background-color: #dc35454f;
     font-weight: 600;
     color: red;
 }

 .radio-inputs .radio input:checked+.name.yesPartnerOrgasm {
     background-color: #4cff42cc;
     font-weight: 600;
     color: green;

     i {
         color: green
     }
 }

 .radio-inputs .radio input:not(checked)+.name.yesPartnerOrgasm i {
     color: rgb(126, 126, 126);
 }

 .radio-inputs .radio input:checked+.name.noPartnerOrgasm {
     background-color: #dc35454f;
     font-weight: 600;
     color: red;
 }

 .radio-inputs .radio input:checked+.name.yesQuickie {
     background-color: #4cff42cc;
     font-weight: 600;
     color: green;
 }

 .radio-inputs .radio input:checked+.name.noQuickie {
     background-color: #79777761;
     font-weight: 600;
     color: red;
 }

 .radio-inputs .radio input:checked+.name.yesToys {
     background-color: #4cff42cc;
     font-weight: 600;
     color: green;
 }

 .radio-inputs .radio input:checked+.name.noToys {
     background-color: #79777761;
     font-weight: 600;
     color: red;
 }

 /* label {
     margin-bottom: 0px !important;
 } */



 /* SWITCH TOGGLE */

 * {
     box-sizing: border-box;
 }

 :root {
     --switches-bg-color: rgb(32, 72, 218);
     --switches-label-color: white;
     --switch-bg-color: rgb(255, 255, 255);
     --switch-text-color: rgb(41, 32, 218);
 }

 /* container for all of the switch elements 
    - adjust "width" to fit the content accordingly 
*/
 .switches-container {
     /* width: 16rem; */
     position: relative;
     display: flex;
     padding: 0;
     position: relative;
     background: var(--switches-bg-color);
     line-height: 2.5em;
     border-radius: 10px;
     margin-left: auto;
     margin-right: auto;
 }

 /* input (radio) for toggling. hidden - use labels for clicking on */
 .switches-container input {
     visibility: hidden;
     position: absolute;
     top: 0;
 }

 /* labels for the input (radio) boxes - something to click on */
 .switches-container label {
     width: 50%;
     padding: 0;
     margin: 0;
     text-align: center;
     cursor: pointer;
     color: var(--switches-label-color);
 }

 /* switch highlighters wrapper (sliding left / right) 
    - need wrapper to enable the even margins around the highlight box
*/
 .switch-wrapper {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 50%;
     padding: 0.15rem;
     z-index: 3;
     transition: transform .5s cubic-bezier(.77, 0, .175, 1);
     /* transition: transform 1s; */
 }

 /* switch box highlighter */
 .switch {
     border-radius: 7px;
     background: var(--switch-bg-color);
     height: 100%;
     width: 80px;
 }

 /* switch box labels
    - default setup
    - toggle afterwards based on radio:checked status 
*/
 .switch div {
     width: 100%;
     text-align: center;
     opacity: 0;
     display: block;
     color: var(--switch-text-color);
     transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
     will-change: opacity;
     position: absolute;
     top: 0;
     left: 0;
 }

 /* slide the switch box from right to left */
 .switches-container input:nth-of-type(1):checked~.switch-wrapper {
     transform: translateX(0%);
 }

 /* slide the switch box from left to right */
 .switches-container input:nth-of-type(2):checked~.switch-wrapper {
     transform: translateX(100%);
 }

 /* toggle the switch box labels - first checkbox:checked - show first switch div */
 .switches-container input:nth-of-type(1):checked~.switch-wrapper .switch div:nth-of-type(1) {
     opacity: 1;
 }

 /* toggle the switch box labels - second checkbox:checked - show second switch div */
 .switches-container input:nth-of-type(2):checked~.switch-wrapper .switch div:nth-of-type(2) {
     opacity: 1;
 }


 /* SCORE ICONS */



 .iconSelect2 .custom-control-input:checked~.custom-control-label.good {
     background: #91939100;
     color: #fff;
     font-size: 155%;
 }

 .iconSelect2 .custom-control-input:checked~.custom-control-label.neutralDay {
     background: #91939100;
     color: #fff;
     font-size: 155%;
 }

 .iconSelect2 .custom-control-input:checked~.custom-control-label.good .fa {
     color: #03aa2a !important;
 }

 .iconSelect2 .custom-control-input:checked~.custom-control-label.neutralDay .fa {
     color: #495057 !important;
 }

 .iconSelect2 .custom-control-input:checked~.custom-control-label.bad .fa {
     color: #f70202 !important;
 }

 .iconSelect2 .custom-control-input:checked~.custom-control-label.bad {
     background: #91939100;
     color: #fff;
     font-size: 155%;
 }

 .custom-control-label::after {
     cursor: pointer;
     pointer-events: none;
     display: none;
 }

 .custom-control-label::before {
     cursor: pointer;
     pointer-events: none;
     display: none;
 }