@font-face {
    font-family: "Proxima Nova";
    font-weight: 700;
    src: url('../fonts/proxima/ProximaNova-Bold.woff2');
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova";
    font-weight: 600;
    src: url('../fonts/proxima/ProximaNova-Semibold.woff2');
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova";
    font-weight: 500;
    src: url('../fonts/proxima/ProximaNova-Medium.woff2');
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova";
    font-weight: 400;
    src: url('../fonts/proxima/ProximaNova-Regular.woff2');
    font-display: swap;
}

:root {
    interpolate-size: allow-keywords;
    --nextbuttoncolor: #5c9278;
    --nextbuttonbackgroundcolor: #dbf7e8;
    --nextbuttoncolorhover: #393939;
    --nextbuttonbackgroundcolorhover: #99d5b5;
    --paddingsmcontainer: 1.2rem;
}

:host, html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-feature-settings: normal;
    font-variation-settings: normal;
}

*, :after, :before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
}

*, :host, html, body, a, button, label {
    -webkit-tap-highlight-color: transparent;
}

html, body {
    overscroll-behavior: none;
}

body {
    margin: 0;
    line-height: inherit;
    color: #393939;
    font-family: Proxima Nova, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}


a {
    color: inherit;
    text-decoration: inherit;
}

b, strong {
    font-weight: bolder
}

code, kbd, pre, samp {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: initial
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre, fieldset, legend, label {
    padding: 0;
    margin: 0;
}

audio, canvas, embed, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle;
}

img, video {
    max-width: 100%;
    height: auto
}


:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: initial
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}


[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

summary {
    display: list-item
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
    margin: 0
}

menu, ol, ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}


[role=button], button {
    cursor: pointer;
}

button, select {
    text-transform: none;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: initial;
    background-image: none;
}

[multiple], [type=date], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], select, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0;
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

[multiple]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, select:focus, textarea:focus {
    outline: 2px solid #0000;
    outline-offset: 2px;
    box-shadow: none;
    border-color: #2563eb
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color: #6b7280;
    opacity: 1
}

input::placeholder, textarea::placeholder {
    color: #6b7280;
    opacity: 1
}

::-webkit-datetime-edit-fields-wrapper {
    padding: 0
}

::-webkit-date-and-time-value {
    min-height: 1.5em
}

textarea {
    resize: vertical;
}

select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    color-adjust: exact
}

[multiple] {
    background-image: none;
    background-position: 0 0;
    background-repeat: unset;
    background-size: initial;
    padding-right: .75rem;
    -webkit-print-color-adjust: unset;
    color-adjust: unset
}


[type=checkbox], [type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #2563eb;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
}

[type=checkbox] {
    border-radius: 0
}

[type=radio] {
    border-radius: 100%
}

[type=checkbox]:focus, [type=radio]:focus {
    outline: 2px solid #0000;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/ );
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
}

[type=checkbox]:checked, [type=radio]:checked {
    border-color: #0000;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: 50%;
    background-repeat: no-repeat
}

[type=checkbox]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")
}

[type=radio]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")
}

[type=checkbox]:checked:focus, [type=checkbox]:checked:hover, [type=checkbox]:indeterminate, [type=radio]:checked:focus, [type=radio]:checked:hover {
    border-color: #0000;
    background-color: currentColor
}

[type=checkbox]:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: 50%;
    background-repeat: no-repeat
}

[type=checkbox]:indeterminate:focus, [type=checkbox]:indeterminate:hover {
    border-color: #0000;
    background-color: currentColor
}

[type=file] {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit
}

[type=file]:focus {
    outline: 1px auto -webkit-focus-ring-color
}





.gap-2 {
    gap: .5rem;
}

.grid {
    display: grid;
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.w-6 {
    width: 1.5rem;
}

.h-6 {
    height: 1.5rem;
}

.ml-2 {
    margin-left: .5rem;
}

.w-5 {
    width: 1.25rem;
}

.h-5 {
    height: 1.25rem;
}

.mr-2 {
    margin-right: .5rem;
}

.-ml-1 {
    margin-left: -.25rem;
}

.hidden {
    display: none;
}




.wrapper-survey-form-app {
    position: relative;
}

.container-survey-form-app:has(.modal-survey-form-validation.show) {
    min-height: 500px;
}

.survey-form-section-list {
    position: relative;
}

.survey-form-section-list .survey-form-section-list-speed-access-actions {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    padding: 1.2rem 1.2rem;
    user-select: none;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/*si clip pas supporté alors le sticky ne va pas fonctionner, donc autant ne rien afficher*/
@supports (not (overflow: clip)) {
    .survey-form-section-list .survey-form-section-list-speed-access-actions {
        display: none;
    }
}

@media (min-width: 1024px) {
    .survey-form-section-list .survey-form-section-list-speed-access-actions {
        padding: 1.2rem 1.7rem;
    }
}

.modal-survey-form .survey-form-section-list .survey-form-section-list-speed-access-actions {
    padding: 1.2rem 1.25rem;
}

.survey-form-section-list .survey-form-section-list-speed-access-actions.show {
    transform: translateX(0px);
    opacity: 1;
}

.survey-form-section-list .survey-form-section-list-speed-access-actions .survey-form-section-list-speed-access-actions-container {
    margin-top: auto;
    position: sticky;
    bottom: 15px;
    bottom: calc(env(safe-area-inset-bottom) + 15px);
    bottom: calc(max(env(safe-area-inset-bottom), var(--app-safe-area-inset-bottom)) + 15px);
    display: flex;
    gap: 6px;
}

.survey-form-section-list .survey-form-section-list-speed-access-actions .survey-form-section-list-speed-access-actions-container .prev,
.survey-form-section-list .survey-form-section-list-speed-access-actions .survey-form-section-list-speed-access-actions-container .survey-form-switch-section {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: .33rem;
    padding: .35rem .75rem;
    border-radius: 4px;
    user-select: auto;
    pointer-events: auto;
    box-shadow: none;
    transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.survey-form-section-list .survey-form-section-list-speed-access-actions.show .survey-form-section-list-speed-access-actions-container .prev,
.survey-form-section-list .survey-form-section-list-speed-access-actions.show .survey-form-section-list-speed-access-actions-container .survey-form-switch-section {
    box-shadow: 0 5px 5px #9aa0b94a, 0 -5px 12px #a6adc94a;
}

.survey-form-section-list .survey-form-section-list-speed-access-actions .survey-form-section-list-speed-access-actions-container .survey-form-switch-section.valid {
    background-color: var(--nextbuttonbackgroundcolor);
    border-color: var(--nextbuttonbackgroundcolor);
    color: var(--nextbuttoncolor);
}

.survey-form-section-list .survey-form-section-list-speed-access-actions .survey-form-section-list-speed-access-actions-container .survey-form-switch-section.position-is-changing {
    background-color: #cecece;
    color: #838383;
    border-color: #cecece;
    box-shadow: none;
    cursor: not-allowed;
}

.question-mt-small {
    margin-top: 0.5rem !important;
}

.question-appear {
    animation-name: question-appear;
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(.26,.53,.74,1.48);
}

@keyframes question-appear {
    0% {
        opacity: 0.5;
        transform: scale3d(0.98, 0.98, 1);
    }

    60% {
        opacity: 0.5;
        transform: scale3d(1.02, 1.02, 1);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.question-disappear {
    animation-name: question-disappear;
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(.26,.53,.74,1.48);
}

@keyframes question-disappear {
    0% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }

    60% {
        opacity: 0.5;
        transform: scale3d(0.5, 0.5, 1);
    }

    100% {
        opacity: 0.3;
        transform: scale3d(0, 0, 1);
    }
}


.button-shake {
    animation-name: button-shake;
    animation-duration: 0.82s;
    animation-timing-function: cubic-bezier(.36,.07,.19,.97);
}

@keyframes button-shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

/*MAIN*/

main {
    flex: 1;
    position: relative;
    display: none;
}

.survey-container.survey main {
    display: block;
}


main .container {
    padding-left: var(--paddingsmcontainer);
    padding-right: var(--paddingsmcontainer);
    padding-bottom: var(--paddingsmcontainer);
    overflow: hidden;
    max-width: 100%;
    width: 100%;
}

form {
    position: relative;
}

@media(min-width:1024px) {
    .survey-container .survey-app-container .survey-app main {
        box-shadow: 0 5px 10px rgba(154,160,185,.05), 0 -5px 20px rgba(166,173,201,.2);
        background-color: #ffffff;
        height: max-content;
        margin-left: var(--LGS-Margin-left);
        margin-top: 90px;
        margin-bottom: 80px;
        margin-right: var(--LGS-Margin-right);
        max-width: var(--LGS-Survey-app-width);
        width: var(--LGS-Survey-app-width);
        border-radius: 0px;
        overflow: clip;
    }

    .survey-container .survey-content-container .survey-content header .container {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }

    header .draft-survey-init-container {
        padding-left: 1.7rem;
    }

    header .container .review-question-container {
        padding-left: 1.7rem;
        padding-right: 33px;
    }


    .survey-container .survey-content-container .survey-content header .container .header-intro {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding-left: 1.7rem;
        padding-right: 33px;
        opacity: 1;
        height: calc-size(auto, size);
        transition: height 0.25s ease, opacity 0.20s ease;
        transition-delay: 0.05s, 0ms;
    }

    .survey-container.survey:not(.pro-mode) .survey-content-container .survey-content header .container .header-intro,
    .survey-container.validation:not(.pro-mode) .survey-content-container .survey-content header .container .header-intro {
        height: 0px;
        opacity: 0;
    }
}

@media(min-width:1215px) {
    .survey-container .survey-app-container .survey-app main {
        margin-left: var(--LG-Margin-left);
        margin-top: 90px;
        margin-bottom: 80px;
        margin-right: var(--LG-Margin-right);
        max-width: var(--Lg-Survey-app-width);
        width: var(--Lg-Survey-app-width);
    }
}

form label, form legend, form h3 {
    font-weight: 600;
    font-size: 17.5px;
    line-height: 1.1;
    margin-bottom: 5px;
    display: block;
}

form label .question-title-prefix, form legend .question-title-prefix, form h3 .question-title-prefix {
    font-weight: 600;
    font-size: 14px;
    display: inline;
    color: #484848;
    margin-right: 4px;
}

form p {
    display: block;
}

/*form .grid-cols-2 label, form .grid-cols-2 legend, form .grid-cols-2 h3, form .grid-cols-2 p {
    grid-column: span 2 / span 2;
}
*/

form .label-multiple-choice {
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    margin-top: 0px;
    display: block;
}

form .error-message-list {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    margin-top: 7px;
    display: none;
    flex-direction: column;
    color: #fb6f6f;
    gap: 2px;
}

form .error-message-list .error-message:before {
    content: "";
    position: absolute;
    left: -5px;
    top: 5px;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #fb6f6f;
}

form .error-message-list .error-message {
    margin-left: 5px;
    position: relative;
}

form.submited .error-message-list {
    display: flex;
}

form .error-message-list:empty {
    display: none;
}

form .description {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    margin-top: 7px;
    display: block;
}

form .questions-group.boxed .description {
    margin-top: 4px;
}

form .description a {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    margin-top: 7px;
    display: inline;
    color: #3579d2;
    text-decoration: underline;
}

form .description a[target=_blank]:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='14px' width='14px' viewBox='0 0 24 24' stroke-width='1.5' stroke='#3579d2' class='w-6 h-6'%3E %3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25' /%3E %3C/svg%3E");
    margin-left: 3px;
    align-items: baseline;
    position: relative;
}

form label.checkbox {
    margin-bottom: 0;
}

form select {
    display: block;
    appearance: none;
    height: calc(1rem * 1.1 + 0.5rem * 2);
    width: 100%;
    border-width: 1px;
    border-color: #ebebeb;
    border-radius: 4px;
    background-color: #fdfdfd;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 30px; /*pour dépasser la flèche*/
    color: #3f3f3f;
    font-weight: 400;
    line-height: 1.1rem;
    font-size: 1.1rem;
    transition: 180ms box-shadow ease-in-out;
}

form select optgroup {
    font-weight: 600;
}

form .questions-group label.image-upload, form .questions-group label.file-upload {
    margin-bottom: 0px;
}

form label.image-upload, form label.file-upload {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    border-width: 1px;
    border-color: #ebebeb;
    border-radius: 4px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-weight: 400;
    line-height: 1.1rem;
    background-color: #f1f1f1;
    color: #3f3f3f;
    cursor: pointer;
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    transition: background-color 0.35s ease, border-color 0.35s ease;
    width: 100%;
    font-size: 1.1rem;
    transition: 180ms box-shadow ease-in-out;
}

form input[type="file"] {
    display: block;
    position: absolute;
    padding: 0;
    margin: 0;
    opacity: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 0;
}

form input[type='text'], form input[type='number'], form input[type='date'], form input[type='time'], form input[type='datetime-local'], form input[type='email'], form input[type='password'] {
    display: block;
    appearance: none;
    height: calc(1rem * 1.1 + 0.5rem * 2);
    width: 100%;
    border-width: 1px;
    border-color: #ebebeb;
    border-radius: 4px;
    background-color: #fdfdfd;
    line-height: 1.1rem;
    font-size: 1.1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: 180ms box-shadow ease-in-out;
}

form textarea {
    display: block;
    appearance: none;
    width: 100%;
    border-width: 1px;
    border-color: #ebebeb;
    background-color: #fdfdfd;
    border-radius: 4px;
    line-height: 1.2rem;
    font-size: 1.1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: 180ms box-shadow ease-in-out;
}


form input[type=checkbox] {
    border-radius: 3px;
    background-color: #fff;
    border-color: #838383;
    border-width: 1px;
    width: 1.14rem;
    height: 1.14rem;
}

form .input-group {
    display: flex;
}

form .input-group input[type=text], form .input-group input[type=number] {
    flex: 1;
}

form .input-group .input-group-prepend ~ input[type=text], form .input-group .input-group-prepend ~ input[type=number] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

form .input-group input[type=text]:not(:last-child), form .input-group input[type=number]:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


form .input-group-prepend {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background-color: #e9ecef;
    border: 1px solid #ebebeb;
    line-height: 1.1rem;
    font-size: 1.1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    height: 2.1rem;
}

form .input-group-append {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background-color: #e9ecef;
    border: 1px solid #ebebeb;
    line-height: 1.1rem;
    font-size: 1.1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 2.1rem;
}

form .input-geo {
    position: relative;
}

form .input-geo input {
    padding-left: 30px;
}

form .input-geo svg {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    color: #bfbfbf;
}

form fieldset {
    display: flex;
    flex-direction: column;
}

form .answer-list-max-height {
    max-height: 350px;
    overflow-y: auto;
    overscroll-behavior: none;
}

form .answer-list-max-height::-webkit-scrollbar {
    width: 11px
}

form .answer-list-max-height::-webkit-scrollbar-thumb {
    background-color: #9b9b9b;
    border-radius: 6px;
    border-color: #ffffff;
    border-style: solid;
    border-width: 3px
}

form .answer-list-max-height::-webkit-scrollbar-track {
    background: #0000
}

.box-card {
    border-width: 1px;
    border-style: solid;
    border-color: #edf2f9;
    box-shadow: 0 0.25rem 1.3rem #12263f1a;
    border-radius: 6px;
    overflow: hidden;
    background-color: white;
}

.box-card-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 19px;
}

.box-card-header h1 {
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
}

.box-card-header p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #595959;
}

form .form-content {
    padding-top: 1.35rem;
    padding-bottom: 1.35rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

form .form-content .form-spacing {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* gap: 1.75rem;*/
}

form .form-content .question {
    position: relative;
}

form .form-content .question .question-container { /* pas forcément utilisé partout*/
    position: relative;
}

form .form-content .question .question-container .question-text-counter { /* pas forcément utilisé partout*/
    position: relative;
    background-color: #ececec;
    color: #6d6d6d;
    font-size: 10px;
    font-weight: 600;
    border-radius: 99px;
    line-height: 1;
    padding: 2px 8px;
    display: inline-block;
    float: right;
    margin-right: 22px;
    height: 14px;
    margin-top: -7px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

form .form-content .question .question-container .question-text-counter .question-text-counter-small {
    font-weight: 400;
}

form .form-content .question .question-container .question-text-counter.question-text-counter-max {
    background-color: #fae2e2;
    color: #8f2021;
    border-color: #fae2e2;
}


form .form-content .question .question-is-required {
    position: absolute;
    left: -11px;
    color: #ffacbf;
    height: 9px;
    width: 9px;
    top: 4px;
}

form .form-content .questions-group.boxed .question .question-is-required {
    position: absolute;
    left: -6px;
    color: #ffacbf;
    height: 6px;
    width: 6px;
    top: 4px;
}




form .form-content .question .question-review {
    margin-top: 8px;
    color: rgb(185, 28, 28);
    background-color: rgb(254, 226, 226);
    display: inline-flex;
    flex-direction: column;
    border-image: initial;
    border-radius: 4px;
    padding: 6px 8px;
    gap: 3px;
}

form .form-content .questions-group .questions-group-content .question .question-review {
    margin-top: 6px;
}

form .form-content .question .question-review .question-review-state {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

form .form-content .question .question-review .question-review-comment {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}



@media(min-width: 1024px) {
    form .form-content {
        padding-top: 1.65rem;
        padding-bottom: 1.65rem;
        padding-left: 1.7rem;
        padding-right: 1.7rem;
    }

    .box-card {
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-right-width: 1px;
        border-top-width: 1px;
        border-style: solid;
        border-color: #edf2f9;
        box-shadow: 0 0.25rem 1.3rem #12263f1a;
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        overflow: hidden;
        background-color: white;
    }
}


.counter-input {
    position: relative;
    display: flex;
    gap: .5rem;
}

.counter-input-button {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 1px;
    border-color: #ebebeb;
    border-radius: 4px;
    padding: .5rem .75rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    background-color: #ebebeb;
    color: #3f3f3f;
    cursor: pointer;
    display: inline-flex;
    min-width: 50px;
    height: 2.1rem;
    justify-content: center;
    align-items: center;
    margin: 0;
    transition: background-color .35s ease, border-color .35s ease;
    font-size: 1.1rem;
    gap: 6px;
}

.counter-input-button svg {
    height: 18px;
    width: 18px;
}


.radio-custom {
    position: relative;
}

.radio-custom label {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 1px;
    border-color: #ebebeb;
    border-radius: 4px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    background-color: #f1f1f1;
    color: #3f3f3f;
    cursor: pointer;
    display: inline-flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0px;
    transition: background-color 0.35s ease, border-color 0.35s ease;
    font-size: 1.1rem;
    /*if svg*/
    gap: 6px;
}

.radio-custom label b, .radio-custom label strong {
    font-weight: 600;
}

.radio-custom label svg {
    height: 18px;
    width: 18px;
}

.radio-custom input:focus + label {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none;
    border-color: #858585;
}

.radio-custom input:checked + label {
    background-color: #656565;
    color: #ebebeb;
    border-color: #656565;
}

.radio-custom input {
    display: block;
    position: absolute;
    padding: 0;
    margin: 0;
    opacity: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 0;
}

.radio-custom input:focus + label {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none;
    border-color: #858585;
}



.radio-custom-compliance .radio-custom-compliance-1 input:checked + label {
    background-color: #dbf7e8;
    color: #5c9278;
    border-color: #dbf7e8;
}

.radio-custom-compliance .radio-custom-compliance-2 input:checked + label {
    background-color: #f9e7f3;
    color: #931e4f;
    border-color: #f9e7f3;
}


.radio-custom-true-false .radio-custom-true-false-true input:checked + label {
    background-color: #dbf7e8;
    color: #5c9278;
    border-color: #dbf7e8;
}

.radio-custom-true-false .radio-custom-true-false-false input:checked + label {
    background-color: #f9e7f3;
    color: #931e4f;
    border-color: #f9e7f3;
}

/*invert*/
.radio-custom-true-false.invert-color .radio-custom-true-false-true input:checked + label {
    background-color: #f9e7f3;
    color: #931e4f;
    border-color: #f9e7f3;
}

.radio-custom-true-false.invert-color .radio-custom-true-false-false input:checked + label {
    background-color: #dbf7e8;
    color: #5c9278;
    border-color: #dbf7e8;
}

/*mode inversé*/
.radio-custom-true-false.radio-custom-true-false-color-mode-1 .radio-custom-true-false-true input:checked + label {
    background-color: #f9e7f3;
    color: #931e4f;
    border-color: #f9e7f3;
}

.radio-custom-true-false.radio-custom-true-false-color-mode-1 .radio-custom-true-false-false input:checked + label {
    background-color: #dbf7e8;
    color: #5c9278;
    border-color: #dbf7e8;
}

/*mode neutre*/
.radio-custom-true-false.radio-custom-true-false-color-mode-2 .radio-custom-true-false-true input:checked + label {
    background-color: #656565;
    color: #ebebeb;
    border-color: #656565;
}

.radio-custom-true-false.radio-custom-true-false-color-mode-2 .radio-custom-true-false-false input:checked + label {
    background-color: #656565;
    color: #ebebeb;
    border-color: #656565;
}


.checkbox-custom {
    position: relative;
}

.checkbox-custom label {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 1px;
    border-color: #ebebeb;
    border-radius: 4px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    background-color: #f1f1f1;
    color: #3f3f3f;
    cursor: pointer;
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    font-size: 1.1rem;
}

.checkbox-custom input:focus + label {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none;
    border-color: #858585;
}

.checkbox-custom input:checked + label {
    background-color: #656565;
    color: #ebebeb;
    border-color: #656565;
}

.checkbox-custom input {
    display: block;
    position: absolute;
    padding: 0;
    margin: 0;
    opacity: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 0;
}




.checkbox-custom-rgpd {
    display: flex;
    gap: 10px;
}

.checkbox-custom-rgpd label {
    margin-bottom: 0px;
}

.checkbox-custom-rgpd input {
    margin-top: 2px;
}

.checkbox-custom-rgpd button {
    transition: color .3s ease;
    font-weight: 600;
    color: #838383;
}

.checkbox-custom-rgpd button:hover {
    color: #393939;
}


.radio-star-list {
    display: flex;
    justify-content: space-around;
    gap: 4px;
}

.radio-star-custom {
    position: relative;
    width: 65px;
}

.radio-star-custom label {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 1px;
    border-color: #ebebeb;
    border-radius: 4px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #fdfdfd;
    color: #3f3f3f;
    cursor: pointer;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.radio-star-custom label svg {
    height: 31px;
    width: 31px;
    flex-shrink: 0;
    fill: #f1f1f1;
    stroke: currentColor;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.radio-star-custom label:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none;
    border-color: #858585;
}

.radio-star-custom input:focus + label {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none;
    border-color: #858585;
}

.radio-star-custom input:checked + label {
    background-color: #fffcea;
    border-color: #fffcea;
}

.radio-star-custom input:checked + label svg {
    fill: #f9db30;
    stroke: #3f3f3f;
}

/*permet de sélectionner tous les éléments précédent*/
.radio-star-custom:has(~ .radio-star-custom input:checked) label svg {
    fill: #f9db30;
    stroke: #3f3f3f;
}

.radio-star-custom input {
    display: block;
    position: absolute;
    padding: 0;
    margin: 0;
    opacity: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 0;
}






.radio-emoticon-list {
    display: flex;
    justify-content: space-around;
    gap: 4px;
}

.radio-emoticon-custom {
    position: relative;
    width: 65px;
}

.radio-emoticon-custom label {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 1px;
    border-style: solid;
    border-color: #ebebeb;
    border-radius: 4px;
    padding: 3px 4px;
    color: #3f3f3f;
    cursor: pointer;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0px;
    background-color: #fdfdfd;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    position: relative;
}

.radio-emoticon-custom label svg {
    height: 31px;
    width: 31px;
    flex-shrink: 0;
    z-index: 0;
}

.radio-emoticon-custom label:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.radio-emoticon-custom input:focus + label {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.radio-emoticon-custom label svg {
    transition: color 0.2s ease;
}

.radio-emoticon-custom label .radio-emoticon-custom-circle {
    position: absolute;
    top: 50%;
    height: 29px;
    width: 29px;
    background-color: #f1f1f1;
    border-radius: 29px;
    transform: translate3d(3px,calc(-50% + 3px),0);
    transition: background-color 0.3s ease;
    user-select: none;
    pointer-events: none;
}


/*.radio-emoticon-custom.radio-emoticon-custom-1 label svg {
    color: #c10007d4;
}

.radio-emoticon-custom.radio-emoticon-custom-1 input:checked + label {
    background-color: #fef2f2;
    border-color: #c1000745;
}

.radio-emoticon-custom.radio-emoticon-custom-1 input:checked + label svg {
    color: #c10007;
}*/
.radio-emoticon-custom.radio-emoticon-custom-1 label svg {
    color: #3f3f3f;
}

.radio-emoticon-custom.radio-emoticon-custom-1 input:checked + label {
    background-color: #fef2f2;
    border-color: #fef2f2;
}

.radio-emoticon-custom.radio-emoticon-custom-1 input:checked + label .radio-emoticon-custom-circle {
    background-color: #FF9783;
}

/*.radio-emoticon-custom.radio-emoticon-custom-2 label svg {
    color: #f0b100d4;
}

.radio-emoticon-custom.radio-emoticon-custom-2 input:checked + label {
    background-color: #fefce8;
    border-color: #f0b10045;
}

.radio-emoticon-custom.radio-emoticon-custom-2 input:checked + label svg {
    color: #f0b100;
}*/

.radio-emoticon-custom.radio-emoticon-custom-2 label svg {
    color: #3f3f3f;
}

.radio-emoticon-custom.radio-emoticon-custom-2 input:checked + label {
    background-color: #fefce8;
    border-color: #fefce8;
}

.radio-emoticon-custom.radio-emoticon-custom-2 input:checked + label .radio-emoticon-custom-circle {
    background-color: #FFDF80;
}

/*.radio-emoticon-custom.radio-emoticon-custom-3 label svg {
    color: #00a63ed4;
}

.radio-emoticon-custom.radio-emoticon-custom-3 input:checked + label {
    background-color: #f0fdf4;
    border-color: #00a63e45;
}

.radio-emoticon-custom.radio-emoticon-custom-3 input:checked + label svg {
    color: #00a63e;
}*/


.radio-emoticon-custom.radio-emoticon-custom-3 label svg {
    color: #3f3f3f;
}

.radio-emoticon-custom.radio-emoticon-custom-3 input:checked + label {
    background-color: #ffffd5;
    border-color: #ffffd5;
}

.radio-emoticon-custom.radio-emoticon-custom-3 input:checked + label .radio-emoticon-custom-circle {
    background-color: #ffff4c;
}

.radio-emoticon-custom.radio-emoticon-custom-no-answer {
    margin-left: 12px;
}

/*.radio-emoticon-custom.radio-emoticon-custom-4 label svg {
    color: #007a55d4;
}

.radio-emoticon-custom.radio-emoticon-custom-4 input:checked + label {
    background-color: #ecfdf5;
    border-color: #007a5545;
}

.radio-emoticon-custom.radio-emoticon-custom-4 input:checked + label svg {
    color: #007a55;
}*/
.radio-emoticon-custom.radio-emoticon-custom-4 label svg {
    color: #3f3f3f;
}

.radio-emoticon-custom.radio-emoticon-custom-4 input:checked + label {
    background-color: #edfdf2;
    border-color: #edfdf2;
}

.radio-emoticon-custom.radio-emoticon-custom-4 input:checked + label .radio-emoticon-custom-circle {
    background-color: #5aec91;
}


.radio-emoticon-custom.radio-emoticon-custom-no-answer label {
    font-size: 14px;
    padding: 5px .75rem;
    line-height: 1;
    font-weight: 600;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.radio-emoticon-custom.radio-emoticon-custom-no-answer input:checked + label {
    background-color: #656565;
    color: #ebebeb;
    border-color: #656565;
}

.radio-emoticon-custom input {
    display: block;
    position: absolute;
    padding: 0;
    margin: 0;
    opacity: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 0;
}







.ref-pat-input-list {
    display: flex;
    gap: 5px;
    align-items: center;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.list-file {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.questions-group .questions-group-content .list-file {
    margin-top: 6px;
}

.list-file:empty {
    display: none;
}

.list-file .file {
    background-color: #3579d2;
    font-size: 14px;
    border-radius: 4px;
    position: relative;
    border-width: 0px;
    border-style: solid;
    border-color: #3579d2;
    padding: 10px 15px 10px 15px; /*garder de la marge à droite pour le bouton de suppression*/
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    line-height: 1;
    font-weight: 400;
}

.list-file .file.file-error {
    background-color: #fae2e2;
    color: #8f2021;
    border-color: #fae2e2;
}

.list-file .file .file-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-file .file .file-icon {
    height: 18px;
    width: 18px;
    flex-shrink: 0;
}

.list-file .file .file-button-delete {
    width: 22px;
    height: 22px;
    border-radius: 2px;
    background-color: #ee8a8a;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.list-file .file .file-button-delete svg {
    height: 18px;
    width: 18px;
    flex-shrink: 0;
}

.list-file .file .file-button-download {
    width: 22px;
    height: 22px;
    border-radius: 2px;
    background-color: #ffffff;
    color: #3579d2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.list-file .file .file-button-download svg {
    height: 18px;
    width: 18px;
    flex-shrink: 0;
}

.list-file .file .loader {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
    color: rgb(57, 57, 57);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    color: #3579d2;
}


.list-file .file .loader .loader-animate-spin {
    animation: spin 1s linear infinite;
}

.list-file .file .loader svg {
    height: 20px;
    width: 20px;
    flex-shrink: 0;
}

.list-file .file .loader .loader-opacity-25 {
    opacity: 0.25;
}

.list-file .file .loader .loader-opacity-75 {
    opacity: 0.75;
}



.list-file .file.loaded .loader {
    display: none;
}



.list-photo {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.questions-group .questions-group-content .list-photo {
    margin-top: 6px;
}

.list-photo:empty {
    display: none;
}

.list-photo .image {
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-color: #edf2f9;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.list-photo .image img {
    max-height: 220px;
    object-fit: contain;
    object-position: center center;
}

.list-photo .image.image-error img {
    opacity: 0.6;
}


.list-photo .image .image-error-message {
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    max-width: 90%;
    transform: translate3d(-50%, -50%, 0);
    padding: 10px;
    background-color: #fae2e2;
    color: #8f2021;
    border-color: #fae2e2;
    font-size: 14px;
    border-radius: 4px;
}

.list-photo .image button {
    width: 22px;
    height: 22px;
    border-radius: 2px;
    background-color: #ee8a8a;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 8px;
    right: 8px;
}

.list-photo .image button svg {
    height: 18px;
    width: 18px;
    flex-shrink: 0;
}

.list-photo .image .loader {
    width: 100%;
    height: 100%;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
    color: rgb(57, 57, 57);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    color: #3579d2;
}

.list-photo .image .loader .loader-animate-spin {
    animation: spin 1s linear infinite;
}

.list-photo .image .loader svg {
    height: 20px;
    width: 20px;
    flex-shrink: 0;
}

.list-photo .image .loader .loader-opacity-25 {
    opacity: 0.25;
}

.list-photo .image .loader .loader-opacity-75 {
    opacity: 0.75;
}

.list-photo .image.loaded .loader {
    display: none;
}

/*form.submited .radio-custom input:invalid + label {
    border-color: #fb6f6f;
}

form.submited .radio-emoticon-custom input:invalid + label {
    border-color: #fb6f6f;
}

form.submited .checkbox-custom input:invalid + label {
    border-color: #fb6f6f;
}

form.submited .radio-star-custom input:invalid + label {
    border-color: #fb6f6f;
}

form.submited .file-upload:has(input:invalid), form.submited .image-upload:has(input:invalid) {
    border-color: #fb6f6f;
}

form.submited select:invalid, form.submited input:invalid {
    border-color: #fb6f6f;
}

form.submited input[type='text']:invalid:focus, form.submited input[type='email']:invalid:focus, form.submited input[type='url']:invalid:focus, form.submited input[type='password']:invalid:focus, form.submited input[type='number']:invalid:focus, form.submited input[type='date']:invalid:focus, form.submited input[type='datetime-local']:invalid:focus, form.submited input[type='month']:invalid:focus, form.submited input[type='search']:invalid:focus, form.submited input[type='tel']:invalid:focus, form.submited input[type='time']:invalid:focus, form.submited input[type='week']:invalid:focus, form.submited input[multiple]:invalid:focus, form.submited textarea:invalid:focus, form.submited select:invalid:focus {
    border-color: #dc3545;
    box-shadow: none;
}*/



form.submited .radio-custom input[data-question-validity="invalid"] + label {
    border-color: #fb6f6f;
}

form.submited .radio-emoticon-custom input[data-question-validity="invalid"] + label {
    border-color: #fb6f6f;
}

form.submited .checkbox-custom input[data-question-validity="invalid"] + label {
    border-color: #fb6f6f;
}

form.submited .radio-star-custom input[data-question-validity="invalid"] + label {
    border-color: #fb6f6f;
}

form.submited .file-upload:has(input[data-question-validity="invalid"]), form.submited .image-upload:has(input[data-question-validity="invalid"]) {
    border-color: #fb6f6f;
}

form.submited select[data-question-validity="invalid"], form.submited input[data-question-validity="invalid"] {
    border-color: #fb6f6f;
}

form.submited input[type='text'][data-question-validity="invalid"]:focus, form.submited input[type='email'][data-question-validity="invalid"]:focus, form.submited input[type='url'][data-question-validity="invalid"]:focus, form.submited input[type='password'][data-question-validity="invalid"]:focus, form.submited input[type='number'][data-question-validity="invalid"]:focus, form.submited input[type='date'][data-question-validity="invalid"]:focus, form.submited input[type='datetime-local'][data-question-validity="invalid"]:focus, form.submited input[type='month'][data-question-validity="invalid"]:focus, form.submited input[type='search'][data-question-validity="invalid"]:focus, form.submited input[type='tel'][data-question-validity="invalid"]:focus, form.submited input[type='time'][data-question-validity="invalid"]:focus, form.submited input[type='week'][data-question-validity="invalid"]:focus, form.submited input[multiple][data-question-validity="invalid"]:focus, form.submited textarea[data-question-validity="invalid"]:focus, form.submited select[data-question-validity="invalid"]:focus {
    border-color: #dc3545;
    box-shadow: none;
}


form input[type='text']:focus, form input[type='email']:focus, form input[type='url']:focus, form input[type='password']:focus, form input[type='number']:focus, form input[type='date']:focus, form input[type='datetime-local']:focus, form input[type='month']:focus, form input[type='search']:focus, form input[type='tel']:focus, form input[type='time']:focus, form input[type='week']:focus, form input[multiple]:focus, form textarea:focus, form select:focus {
    background-color: #fff;
    border-color: #858585;
    outline: 0;
    box-shadow: none;
}


#form-validation {
    display: block;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    padding-bottom: calc(env(safe-area-inset-bottom) + 1.2rem);
    padding-bottom: calc(max(env(safe-area-inset-bottom), var(--app-safe-area-inset-bottom)) + 1.2rem);
    transition: all 0.3s ease;
    border-top-width: 1px;
    border-style: solid;
    border-color: #edf2f9;
    width: 100%;
    z-index: 1;
}

#form-validation .form-validation-container {
    padding-left: var(--paddingsmcontainer);
    padding-right: var(--paddingsmcontainer);
}

@media(min-width:1024px) {
    #form-validation {
        background-color: #ffffff;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        max-width: calc(75rem);
        margin-left: auto;
        margin-right: auto;
        backdrop-filter: none;
    }

    #form-validation .form-validation-container {
        padding-left: 1.7rem;
        padding-right: 1.7rem;
    }
}

#form-validation .form-validation-container {
    display: flex;
    gap: 0.5rem;
}

#form-validation .form-validation-container .next {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 1rem;
    line-height: 1.5rem;
    background-color: var(--nextbuttonbackgroundcolor);
    color: var(--nextbuttoncolor);
    font-weight: 600;
    border-radius: 0.33rem;
    border: 1px solid var(--nextbuttonbackgroundcolor);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

#form-validation .form-validation-container .next:not(.disabled):not(.position-is-changing):hover {
    background-color: var(--nextbuttonbackgroundcolorhover);
    color: var(--nextbuttoncolorhover);
    border: 1px solid var(--nextbuttonbackgroundcolorhover);
}

#form-validation .form-validation-container .next:not(.disabled):not(.position-is-changing):hover svg {
    animation-name: right;
    animation-duration: 0.5s;
}

#form-validation .form-validation-container .next.disabled, #form-validation div .next.position-is-changing {
    background-color: #cecece;
    color: #838383;
    border-color: #cecece;
    box-shadow: none;
    cursor: not-allowed;
}

@keyframes right {
    0% {
        transform: translate3d(0, 0, 0);
    }

    70% {
        transform: translate3d(10px, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

#form-validation div .prev {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.33rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    border-radius: 4px;
}

#form-validation div .prev:hover svg {
    animation-name: left;
    animation-duration: 0.4s;
}

@keyframes left {
    0% {
        transform: translate3d(0, 0, 0);
    }

    70% {
        transform: translate3d(-10px, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.survey-container.survey #form-validation {
    display: block;
}

section#endSection div {
    padding-left: 1.3rem;
    padding-right: 1.3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

section#endSection div h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

section#endSection div p {
    max-width: 80%;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
}



.section-hidden {
    display: none;
    user-select: none;
    pointer-events: none;
    transform: translate3d(-100vw, 0, 0);
}


.next-remove-animation {
    animation-name: nextRemoveAnimation;
    animation-duration: 0.5s;
}

.next-visible-animation {
    animation-name: nextVisibleAnimation;
    animation-duration: 0.4s;
}

@keyframes nextRemoveAnimation {
    0% {
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }

    30% {
        opacity: 0.6;
        transform: scale3d(0.95, 0.95, 1);
    }

    80% {
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes nextVisibleAnimation {
    0% {
        transform: scale3d(0.95, 0.95, 1) translate3d(+100%, 0, 0);
        opacity: 0;
    }

    30% {
        transform: scale3d(1, 1, 1);
        opacity: 0.6;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}



.prev-remove-animation {
    animation-name: prevRemoveAnimation;
    animation-duration: 0.5s;
}

.prev-visible-animation {
    animation-name: prevVisibleAnimation;
    animation-duration: 0.4s;
}

@keyframes prevRemoveAnimation {
    0% {
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }

    30% {
        transform: scale3d(0.95, 0.95, 1);
        opacity: 0.6;
    }

    80% {
        transform: translate3d(+100%, 0, 0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes prevVisibleAnimation {
    0% {
        transform: scale3d(0.95, 0.95, 1) translate3d(-100%, 0, 0);
        opacity: 0;
    }

    30% {
        transform: scale3d(1, 1, 1) translate3d(-70%, 0, 0);
        opacity: 0.6;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    }
}