/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* Ninja Forms Adjustments */

.label-right .checkbox-wrap .nf-field-element { /* Gets rid of a static width on the checkbox, which doesn't fit with the flex container. */
    width: 4.25% !important;
    max-width: 20px;
}

.nf-cell[style*="width:100%;"] .label-right .checkbox-wrap .nf-field-element {
    width: 2.125% !important;
}

.checkbox-container label { /* Aligns the label with the checkbox in standalone or floated checkboxes. */
    position: relative;
    top: -3px;
}


/*

Custom Checkboxes
Note:
This worked really well with standard checkboxes, but needs some JS to trigger the standalone or floated checkboxes. Seemed like overkill.
It will work as a catch-all once :has is standard.

*/

/* .nf-multi-cell .nf-cell:last-child {
    padding: 0;
}

.nf-form-layout .nf-field-element li {
    position: relative;
    margin: 10px 0 0 !important;
    color: #3b4a53;
}

.list-checkbox-wrap .nf-field-element li label,
.list-radio-wrap .nf-field-element li label {
    margin-top: 0 !important;
}

.nf-form-layout input[type="checkbox"] + label {
    margin-left: 0 !important;
    padding-left: 30px !important;
}

.label-right .nf-field-label {
    display: inline-block !important;
    margin-top: 0.9em;
    padding-left: 30px !important;
}

.label-right .nf-field-element {
    position: absolute;
    left: -9999px;
}

.nf-form-layout input[type="checkbox"]:not(:checked),
.nf-form-layout input[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

.nf-form-layout input[type="checkbox"]:not(:checked) + label::before,
.nf-form-layout input[type="checkbox"]:checked + label::before,
.nf-form-layout .checkbox-container label::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #ddd;
    background: #fff;
    transition: border 0.2s;
}

.nf-form-layout input[type="checkbox"]:checked + label::before {
    border: 1px solid #005f9d;
}

.nf-form-layout input[type="checkbox"]:not(:checked) + label::after,
.nf-form-layout input[type="checkbox"]:checked + label::after {
    display: block;
    content: "";
    position: absolute;
    top: 21px;
    left: 2px;
    width: 11px;
    height: 11px;
    background: #10206b;
    transition: all 0.2s;
}

.nf-form-layout input[type="checkbox"]:not(:checked) + label::after,
.nf-form-layout .checkbox-container label::after {
    opacity: 0;
    transform: scale(0);
}

.nf-form-layout input[type="checkbox"]:checked + label::after {
    opacity: 1;
    transform: scale(1);
}

.nf-form-layout label:hover::before {
    border: 1px solid #10206b !important;
}

*/




@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}