/* ======================= FORM ========================= */

.entry-content:has(.frm_forms) {
    background-color: var(--body-bg);
}

.frm_pro_form {
    position: relative;
    width: 600px;
    max-width: 100%;
    margin: 20px auto 0;
    color: var(--text-color);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.frm_form_field input:focus,
.frm_form_field select:focus {
    outline: 1px solid var(--primary-color);
}

.frm_forms .frm_form_field:not(:has(.frm_submit)) {
    margin-bottom: 56px;
}

@media (max-width: 767px) {
    .frm_forms .frm_form_field:not(:has(.frm_submit)) {
        margin-bottom: 35px;
    }
}

.frm_primary_label {
    display: block;
    margin-bottom: 8px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;

}

.frm_forms .frm_submit .frm_prev_page {
    position: absolute;
    top: 130px;
    left: 0;
    border: none;
    padding: 0 0 0 15px;
}

.frm_forms .frm_submit .frm_prev_page:hover {
    border: none;
    padding: 0 0 0 15px;    
}

.frm_forms .frm_submit .frm_prev_page::before {
    content: "";
    display: block;
    width: 20px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" fill="none"><path fill="%23474D54" fill-rule="evenodd" d="M6.942.558a.625.625 0 0 1 0 .884L2.384 6l4.558 4.558a.625.625 0 1 1-.884.884l-5-5a.625.625 0 0 1 0-.884l5-5a.625.625 0 0 1 .884 0Z" clip-rule="evenodd"/></svg>') left center no-repeat;
    background-size: auto 11px;
}

.frm_forms  + p {
    font-size: 90%;
}

@media (max-width: 767px) {
    .frm_forms  + p {
        margin-top: 20px;
    }
}

/* ======================= PROGRESS BAR ======================= */

.frm_pro_form .frm_rootline_group {
    margin-bottom: 56px;
}

ul.frm_page_bar {
    position: relative;
    gap: 2px;
}

.frm_progress .frm_rootline_single {
    align-items: flex-start;
    pointer-events: none;
}

.frm_forms .frm_progress_line.frm_show_lines li span {
    position: absolute;
    left: 0;
    top: -20px;
    display: none;
    padding: 0;
    color: #474D54;
}

.frm_forms .frm_progress_line.frm_show_lines .frm_current_page span {
    display: block;
}

.frm_forms .frm_progress_line.frm_show_lines li input[type="button"] {
    height: 4px;
    border-radius: 50px;
    background-color: #E0E7ED;
}

.frm_forms .frm_progress_line.frm_show_lines .frm_current_page input[type="button"] {
    background-color: var(--primary-color);
    pointer-events: none;
}

.frm_forms .frm_progress_line.frm_show_lines:has(.frm_current_page:nth-child(2)) .frm_rootline_single:first-child input[type="button"],
.frm_forms .frm_progress_line.frm_show_lines:has(.frm_current_page:nth-child(3)) .frm_rootline_single:first-child input[type="button"],
.frm_forms .frm_progress_line.frm_show_lines:has(.frm_current_page:nth-child(3)) .frm_rootline_single:nth-child(2) input[type="button"],
.frm_forms .frm_progress_line.frm_show_lines:has(.frm_current_page:nth-child(4)) .frm_rootline_single:first-child input[type="button"],
.frm_forms .frm_progress_line.frm_show_lines:has(.frm_current_page:nth-child(4)) .frm_rootline_single:nth-child(2) input[type="button"],
.frm_forms .frm_progress_line.frm_show_lines:has(.frm_current_page:nth-child(4)) .frm_rootline_single:nth-child(3) input[type="button"] {
    background-color: var(--primary-color);
}

.frm_rootline_group .frm_percent_complete {
    display: none;
}

.frm_rootline_group .frm_pages_complete {
    float: none;
    text-align: left;    
    font-size: 12px;
    color: #70767A;
}

.frm_pages_complete::before {
    content: "Étape "
}

.frm_pro_form > .frm_error_style {
    display: none !important;
}

@media (min-width: 768px) {
    .frm_pro_form .frm_page_num_2 .frm_rootline_group,
    .frm_pro_form .frm_page_num_3 .frm_rootline_group {
        margin-bottom: 160px;
    }
}

@media (max-width: 767px) {
    .frm_pro_form .frm_page_num_2,
    .frm_pro_form .frm_page_num_3 {
        padding-top: 30px;
    }
    .frm_forms .frm_submit .frm_prev_page {
        top: -16px;
    }
    .frm_pro_form .frm_rootline_group {        
        position: fixed;
        bottom: 0;
        z-index: 9;
        background: #ffF;
        padding: 40px 20px 20px;
        left: 0;
        width: 100vw;
        margin: 0;
    }
}

/* ===================== FORM DESCRIPTION ===================== */

.frm_form_field:has(.frm_description) {
    display: flex;
    flex-direction: column;
}

.frm_form_field:has(.frm_description) label {
    order: -2;
}

.frm_form_field:has(.frm_description) .frm_description {
    order: -1;
    margin-bottom: 8px;
    font-size: 90%;
    color: var(--primary-color);
    padding: 4px 18px;
    background: url(../images/info-sign.png) left top 8px no-repeat;
    background-size: auto 14px;
}

.frm_html_container p {
    margin: 0;
    font-weight: 600;
}

.frm_html_container strong,
.frm_html_container b {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
}

/* ===================== RADIO BUTTONS ===================== */

.horizontal_radio .frm_opt_container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vertical_radio .frm_opt_container + .frm_error {
    padding-left: 44px;
}

.vertical_radio:has(.frm_error) input[type="checkbox"] {
    box-shadow: 0 0 1px 1px red;
}

.horizontal_radio .frm_radio {
    flex-basis: 50%;
}

.horizontal_radio .frm_radio label {
    position: relative;
    display: block;
    padding: 10px;
    outline: 1px solid #97A1AB;
    border-radius: 4px;
    background-color: #FFF;
    text-align: center;
    cursor: pointer;
    color: #474D54;
}

.horizontal_radio .frm_radio input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    outline: 2px solid transparent;
    transition: outline 0.3s ease;
}

.horizontal_radio .frm_radio label:hover,
.horizontal_radio .frm_radio:has(input:checked) label {
    outline: 2px solid var(--primary-color);
}

@media screen and (min-width: 768px) {
    .horizontal_radio .frm_opt_container {
        flex-direction: row;
    }
}

/* ======================= HTML FIELD ======================= */

.frm_html_container p:not(:has(strong)) {
    font-size: 16px;
}

/* ======================= CHECKBOX ======================= */

.checkbox-as-btn {
    text-align: center;
}

.checkbox-as-btn:has(input:checked),
.checkbox-as-btn:not(:has(input:checked)) + .frm_form_field {
    display: none !important;
}

.checkbox-as-btn input {
    display: none;
}

.frm_add_form_row,
.checkbox-as-btn label {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #474D54;
    color: #474D54;
    background-color: #FFF;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.frm_add_form_row:hover,
.checkbox-as-btn label:hover {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.frm_add_form_row svg {
    display: none;
}

/* ======================= SELECT ======================= */

.frm_form_field select {
    padding: 8px;
    width: 100%;
    height: 40px;
    border: 1px solid #97A1AB;
    border-radius: 4px;
    appearance: none;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAAAgCAYAAABeiFVOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADzSURBVHgB7dixCoJAHMfxv13SUtAjuDS2NuukQ4EQvU+P0KM4trm7NNRWoO8hdnlUUGHwLxX+HL/PeB7ifVHukAgAAAB6lp0uOQkzIGm09kgYeZEEQiQGRGJAJAarIvl+PO1y3pNVkUZjtQ1XmzyKYu/bHHNtNFGHcLneEZNVkZxhVS/8Stp106ZQZky7KjXLvs/lsSrSPkkKR1VBU6i3QKoMzFzufR0SJjue9WI+a/VcUVwHqR5ByjIwY/8GMqzc3T7fqDaBDGuPAK+h2gQSyXxu1DE//m3LF6+PSG3hxM2ASAyIxIBIDBL/TBYEAAAAPbsBYq1X874A7/YAAAAASUVORK5CYII=');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: auto 32px;
}

/* ========================= OPT ======================== */

.frm_form_field.vertical_radio:not(.checkbox-as-btn) .frm_opt_container label {
    display: grid;
    grid-template-columns: 20px auto;
    grid-gap: 24px;
    align-items: flex-start;
}

.frm_form_field.vertical_radio:not(.checkbox-as-btn) .frm_opt_container label input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
}

/* ======================= INPUTS ======================= */

.frm_input_group {
    position: relative;
}

.frm_form_field input[type="text"],
.frm_form_field input[type="number"],
.frm_form_field input[type="tel"],
.frm_form_field input[type="email"],
.frm_form_field input[type="date"] {
    border: 1px solid #97A1AB;
    border-radius: 4px;
    padding: 8px;
    height: 40px;
    width: 100%;
    appearance: none;
}

/* Hide number input spinners */
.frm_form_field input[type="number"]::-webkit-inner-spin-button,
.frm_form_field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.frm_form_field input[type="number"] {
    -moz-appearance: textfield;
}

.frm_form_field:has(.frm_inline_box) input {
    padding-right: 48px;
}   

.frm_form_field .frm_inline_box {
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    height: 40px;
    line-height: 40px;
    opacity: 0.65;
}   

.horizontal_radio:has(.frm_error) .frm_radio label {
    outline: 1px solid #FF0000 !important;
}

.frm_form_field:has(.frm_error) input[type="text"], 
.frm_form_field:has(.frm_error) input[type="number"], 
.frm_form_field:has(.frm_error) input[type="tel"], 
.frm_form_field:has(.frm_error) input[type="email"], 
.frm_form_field:has(.frm_error) input[type="date"],
.frm_form_field:has(.frm_error) select {
    border-color: #FF0000 !important;
}

.frm_error {
    color: #FF0000 !important;
}

input[type="hidden"] + div:has(.frm_verify) {
    display: none !important;
}

/* ======================= DATE PICKER ======================= */

.ui-datepicker .ui-widget-header, 
.ui-datepicker .ui-datepicker-header {
    background-color: transparent !important;
}

.ui-datepicker td .ui-state-hover {
    background-color: #006871 !important;
}
.ui-datepicker td .ui-state-active {
    background-color: #97BF0D !important;
}

/* ======================= SUBMIT ======================= */

.frm_submit {
    justify-content: space-between;
}

.frm_submit button {
    background-color: var(--submit-btn-bg);
    border-radius: 80px;
    padding: 8px 16px;
    border: none;
    color: var(--submit-btn-color);
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.frm_submit button:hover {
    background-color: var(--submit-btn-bg-hover);
}

.frm_submit .frm_prev_page {
    background-color: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
}

.frm_submit .frm_prev_page:hover {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

@media screen and (min-width: 768px) {
    .frm_pro_form .frm_submit {
        flex-direction: row-reverse;
    }
}

@media screen and (max-width: 767px) {
    .frm_submit .frm_button_submit {
        width: 100%;
    }
}


/* ======================= REPEATABLES ======================= */

.frm_repeat_buttons:not(.frm_hidden) {
    display: contents;
}

.frm_repeat_buttons a {
    grid-column: span 12 / span 12;
}

.frm_repeat_buttons .frm_add_form_row  {
    justify-self: center;
}


.frm_repeat_buttons .frm_remove_form_row  {
    order: -1;
}

.frm_repeat_buttons .frm_remove_form_row {
    margin-bottom: 25px;
    justify-self: center;
    background: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.225 5.88476C2.56497 5.82499 2.88902 6.05213 2.94879 6.39209L4.61126 15.8473C4.69883 16.3454 5.1315 16.7087 5.63718 16.7087H12.3627C12.8683 16.7087 13.301 16.3454 13.3885 15.8474L15.051 6.39209C15.1108 6.05213 15.4348 5.82499 15.7748 5.88476C16.1148 5.94454 16.3419 6.26859 16.2821 6.60855L14.6196 16.0638C14.6196 16.0638 14.6196 16.0638 14.6196 16.0638C14.427 17.1595 13.4752 17.9587 12.3627 17.9587H5.63718C4.52462 17.9587 3.5728 17.1595 3.38014 16.0638L1.71768 6.60855C1.6579 6.26859 1.88504 5.94454 2.225 5.88476Z" fill="%23474D54"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.85417 1.29199C7.27887 1.29199 6.8125 1.75836 6.8125 2.33366V3.37533H11.1875V2.33366C11.1875 1.75836 10.7211 1.29199 10.1458 1.29199H7.85417ZM5.5625 3.37533V2.33366C5.5625 1.06801 6.58851 0.0419922 7.85417 0.0419922H10.1458C11.4115 0.0419922 12.4375 1.06801 12.4375 2.33366V3.37533H16.5C16.8452 3.37533 17.125 3.65515 17.125 4.00033C17.125 4.3455 16.8452 4.62533 16.5 4.62533H1.5C1.15482 4.62533 0.875 4.3455 0.875 4.00033C0.875 3.65515 1.15482 3.37533 1.5 3.37533H5.5625Z" fill="%23474D54"/></svg>') left center no-repeat;
    background-size: auto 18px;
    padding-left: 30px;
    color: #474D54;
}

.frm_repeat_buttons .frm_remove_form_row:hover {
    color: rgb(175, 17, 17);
    background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.225 5.88476C2.56497 5.82499 2.88902 6.05213 2.94879 6.39209L4.61126 15.8473C4.69883 16.3454 5.1315 16.7087 5.63718 16.7087H12.3627C12.8683 16.7087 13.301 16.3454 13.3885 15.8474L15.051 6.39209C15.1108 6.05213 15.4348 5.82499 15.7748 5.88476C16.1148 5.94454 16.3419 6.26859 16.2821 6.60855L14.6196 16.0638C14.6196 16.0638 14.6196 16.0638 14.6196 16.0638C14.427 17.1595 13.4752 17.9587 12.3627 17.9587H5.63718C4.52462 17.9587 3.5728 17.1595 3.38014 16.0638L1.71768 6.60855C1.6579 6.26859 1.88504 5.94454 2.225 5.88476Z" fill="%23af1111"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.85417 1.29199C7.27887 1.29199 6.8125 1.75836 6.8125 2.33366V3.37533H11.1875V2.33366C11.1875 1.75836 10.7211 1.29199 10.1458 1.29199H7.85417ZM5.5625 3.37533V2.33366C5.5625 1.06801 6.58851 0.0419922 7.85417 0.0419922H10.1458C11.4115 0.0419922 12.4375 1.06801 12.4375 2.33366V3.37533H16.5C16.8452 3.37533 17.125 3.65515 17.125 4.00033C17.125 4.3455 16.8452 4.62533 16.5 4.62533H1.5C1.15482 4.62533 0.875 4.3455 0.875 4.00033C0.875 3.65515 1.15482 3.37533 1.5 3.37533H5.5625Z" fill="%23af1111"/></svg>');
}

.frm_repeat_buttons .frm_remove_form_row svg {
    display: none;
}

@media screen and (min-width: 768px) {
    .frm_repeat_buttons .frm_remove_form_row {
        justify-self: flex-end;
    }
}

/* ======================= VALIDATION ======================= */

.frm_pro_form.validated input[type="text"],
.frm_pro_form.validated input[type="number"],
.frm_pro_form.validated input[type="tel"],
.frm_pro_form.validated input[type="email"],
.frm_pro_form.validated input[type="date"],
.frm_pro_form.validated select,
.frm_pro_form.validated label:has(input[type="radio"]),
.frm_pro_form.validated label:has(input[type="checkbox"]) {
    background-color: #e5e5e5;
    opacity: 0.5;
}