/*********************************************
 * Custom checkbox grid
**********************************************/
@media only screen and (min-width:768px) {
    .twc-gf-checkbox {position:relative; padding-left:20%;}
    .twc-gf-checkbox .ginput_container {display:flex; flex-wrap:wrap;}

    /* label */
    .twc-gf-checkbox .gfield_label {width:19%; padding-right:10px;}

    /* grid */
    .twc-gf-checkbox__inner {width:81%; display:flex; flex-wrap:wrap;}
    .twc-gf-checkbox__inner > div:nth-child(odd) {width:40%;}
    .twc-gf-checkbox__inner > div:nth-child(even) {width:60%;}
}


/*********************************************
 * Custom checkbox
**********************************************/
.gform_wrapper input[type="checkbox"] {position:absolute; opacity:0;}
.gform_wrapper input[type="checkbox"] + label {padding-left:30px; position:relative;}
.gform_wrapper input[type="checkbox"] + label:before {
    position:absolute; top:1px; left:0;
    content:""; display:inline-block;
    width:17px; height:17px; border-radius:5px;
    background:var(--twc-color-light-blue); backdrop-filter:blur(16px);
    transition:var(--twc-transition);
}
.gform_wrapper input[type="checkbox"] + label:after {
    position:absolute; top:2px; left:3px;
    content:"\e932"; font-family:var(--twc-font-icomoon); font-size:.7em; color:var(--twc-color-primary); font-weight:600;
    width:17px; height:17px; line-height:17px;
    transition:all .1s ease;
}


/* checked */
.gform_wrapper input[type="checkbox"]:not(:checked) + label:after {
    transform:translateY(-4px) rotate(-25deg) scale(.5);
    opacity:0;
}

/* hover */
.gform_wrapper input[type="checkbox"]:hover + label:before {background:var(--twc-color-gray);}

/* focus */
.gform_wrapper input[type="checkbox"]:focus + label:before {background:var(--twc-color-gray);}

/* error */
.gfield_error input[type="checkbox"] + label:before {box-shadow:0 0 0 2px var(--gf-color-error); background:var(--gf-color-error);}

/* a11y: support for checkbox */
.gform_wrapper input[type="checkbox"]:focus-visible + label:before {box-shadow:0 0 0 2px var(--twc-color-primary);}


/*********************************************
 * Custom radio
**********************************************/
.gform_wrapper input[type="radio"] {position:absolute; opacity:0;}
.gform_wrapper input[type="radio"] + label {padding-left:30px; position:relative;}
.gform_wrapper input[type="radio"] + label:before {
    position:absolute; top:0; left:0;
    content:""; display:inline-block;
    width:17px; height:17px; background:var(--twc-color-light-blue); border-radius:50%;
    transition:var(--twc-transition);
}
.gform_wrapper input[type="radio"] + label:after {
    content:""; position:absolute; top:5px; left:5px;
    width:7px; height:7px; background:var(--twc-color-primary); border-radius:50%;
    transition:all .1s ease;
}


/* checked */
.gform_wrapper input[type="radio"]:not(:checked) + label:after {transform:scale(0);}

/* hover */
.gform_wrapper input[type="radio"]:hover + label:before {background:var(--twc-color-gray);}

/* focus */
.gform_wrapper input[type="radio"]:focus + label:before {background:var(--twc-color-gray);}

/* error */
.gfield_error input[type="radio"] + label:before {box-shadow:0 0 0 2px var(--gf-color-error); background:var(--gf-color-error);}

/* a11y: support for checkbox */
.gform_wrapper input[type="radio"]:focus-visible + label:before {box-shadow:0 0 0 2px var(--twc-color-primary);}