html {
    --space-none: 0;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-base: 0.75rem;
    --space-m: 0.75rem;
    --space-l: 1rem;
    --space-xl: 1.25rem;
    --space-2xl: 1.5rem;
    --space-3xl: 1.75rem;
    --space-auto: auto;
}

html {
    --primary: #D90D25;
    --secondary: #181818;
    --tertiary: #D2D2D2;
    --info: #4C89FF;
    --warning: #FF9300;
    --danger: #D90D25;
    --success: #02C39A;
    --background: #F2F2F2;
    --background-alt: #FFF;
    --shadow: rgba(0, 0, 0, 0.04);
    --text: #222222;
    --info-light: #ECF2FF;
    --warning-light: #FFF4E0;
    --danger-light: #FFF0F0;
    --success-light: #E8F8F0;
}

body {
    width: 100%;
    padding: 0;
}

html .sfr-red {
    --primary: #00E094 !important;
}

html .sfr-red * {
    font-family: 'Montserrat', sans-serif;
}

html .sfr-red.dark {
    --primary: #009C67 !important;
}

@font-face {
    font-family: 'Montserrat';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url(https://static.s-sfr.fr/media/montserrat-regular.woff2) format("woff2");
}

.sfr-red :is(
  *:not(.slider),
  button,
  input:not([type=submit]):not([type=reset]):not([type=button]):not([type=checkbox]),
  select,
  textarea
) {
    border-radius: 0;
}

.inputclass {
    padding-block: 0px !important;
    padding-inline: 0px !important;
    background: red;
}

.card-body {
    padding: 1rem;
}

.remove-device::after {
    display: inline-block;
    position: absolute;
    right: 0rem;
    top: 1rem;
    content: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.641545 0.642521C0.934438 0.349628 1.40931 0.349628 1.70221 0.642521L7.35852 6.29883L6.82873 6.8297L6.29838 7.36001L0.641545 1.70318C0.348652 1.41029 0.348652 0.935415 0.641545 0.642521ZM7.35906 7.36003C7.06617 7.65293 6.59127 7.65291 6.29838 7.36001L6.82873 6.8297L7.35852 6.29883C7.65141 6.59173 7.65195 7.06714 7.35906 7.36003Z' fill='%23D90D25'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.641546 7.36003C0.348652 7.06714 0.348652 6.59227 0.641546 6.29937L6.29786 0.64306L6.82873 1.17285L7.35904 1.7032L1.70221 7.36003C1.40931 7.65293 0.934439 7.65293 0.641546 7.36003ZM7.35906 0.64252C7.65195 0.935414 7.65193 1.41031 7.35904 1.7032L6.82873 1.17285L6.29786 0.64306C6.59075 0.350166 7.06617 0.349627 7.35906 0.64252Z' fill='%23D90D25'/%3E%3C/svg%3E%0A");
}

.sfr-red .remove-device::after {
    content: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.641545 0.642521C0.934438 0.349628 1.40931 0.349628 1.70221 0.642521L7.35852 6.29883L6.82873 6.8297L6.29838 7.36001L0.641545 1.70318C0.348652 1.41029 0.348652 0.935415 0.641545 0.642521ZM7.35906 7.36003C7.06617 7.65293 6.59127 7.65291 6.29838 7.36001L6.82873 6.8297L7.35852 6.29883C7.65141 6.59173 7.65195 7.06714 7.35906 7.36003Z' fill='%2300E094FF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.641546 7.36003C0.348652 7.06714 0.348652 6.59227 0.641546 6.29937L6.29786 0.64306L6.82873 1.17285L7.35904 1.7032L1.70221 7.36003C1.40931 7.65293 0.934439 7.65293 0.641546 7.36003ZM7.35906 0.64252C7.65195 0.935414 7.65193 1.41031 7.35904 1.7032L6.82873 1.17285L6.29786 0.64306C6.59075 0.350166 7.06617 0.349627 7.35906 0.64252Z' fill='%2300E094FF'/%3E%3C/svg%3E%0A");
}

.isIE11 .card {
    max-width: 440px;
    margin: auto;
}

.isIE11 .navbar {
    background-color: #FFF;
    border-bottom-color: #D2D2D2;
}

.isIE11 label > div:first-child::after {
    background-color: #222222;
    color: #F2F2F2;
    content: "?";
    vertical-align: text-bottom;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 50%;
    display: inline-block;
    font-size: 0.6rem;
}

.isIE11 ::selection {
    background-color: #d90d25;
    color: white;
}

.isIE11 .sfr-red ::selection {
    background-color: #00E094;
    color: white;
}

.w-xl-ie {
    width: 100%;
    max-width: 440px;
}

.m-x-auto-ie {
    margin: auto;
}

.isIE11 .btn-primary {
    background-color: #D90D25FF !important;
}

.isIE11 .sfr-red .btn-primary {
    background-color: #00E094 !important;
}

.isIE11 .btn-primary {
    background-color: var(--primary) !important;
}

.isIE11 .w-full {
    height: 48px;
}

.isIE11 .btn-primary-outline {
    color: #D90D25;
    border-color: #D90D25;
}

.isIE11 .sfr-red .btn-primary-outline {
    color: #00E094;
    border-color: #00E094;
}

.isIE11 .m-b-sm {
    margin-bottom: 0.25rem;
}

.isIE11 .btn {
    padding: 0.5rem 1rem;
}

.isIE11 .input-text {
    border-color: #D2D2D2 !important;
}

.isIE11 .display-radio {
    margin: 5px auto;
}

.isIE11 .m-b-base {
    margin-bottom: 0.75rem;
}

.isIE11 .text-secondary {
    color: #181818;
}

.isIE11 .alert {
    color: #D90D25FF !important;
    background-color: rgba(255, 240, 240, 1) !important;
    padding: 1.5rem;
}

m-t-l {
    margin-top: var(--space-l);
}

.alert-danger {
    border-color: var(--danger);
    background-color: var(--danger-light);
    color: #181818;
}

.alert-icon::before {
    content: url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.641545 0.642521C0.934438 0.349628 1.40931 0.349628 1.70221 0.642521L7.35852 6.29883L6.82873 6.8297L6.29838 7.36001L0.641545 1.70318C0.348652 1.41029 0.348652 0.935415 0.641545 0.642521ZM7.35906 7.36003C7.06617 7.65293 6.59127 7.65291 6.29838 7.36001L6.82873 6.8297L7.35852 6.29883C7.65141 6.59173 7.65195 7.06714 7.35906 7.36003Z' fill='%23D90D25'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.641546 7.36003C0.348652 7.06714 0.348652 6.59227 0.641546 6.29937L6.29786 0.64306L6.82873 1.17285L7.35904 1.7032L1.70221 7.36003C1.40931 7.65293 0.934439 7.65293 0.641546 7.36003ZM7.35906 0.64252C7.65195 0.935414 7.65193 1.41031 7.35904 1.7032L6.82873 1.17285L6.29786 0.64306C6.59075 0.350166 7.06617 0.349627 7.35906 0.64252Z' fill='%23D90D25'/%3E%3C/svg%3E%0A");
    vertical-align: text-top;
    margin-inline-end: var(--space-l);
}

.isIE11 .alert-icon::before {
    vertical-align: top;
    margin: 1rem;
}

.alert-icon {
    color: var(--primary);
}

.alert-text {
    color: var(--text);
    vertical-align: middle;
    font-size: 1rem;
}

.isIE11 .alert, .sfr-red .alert {
    color: #d90d25;
}

.isIE11 .alert-danger, .sfr-red .alert-danger {
    border-color: #E2001AFF;
    background-color: #FFF0F0FF;
}

.isIE11 .alert-text, .sfr-red .alert-danger {
    color: rgb(34, 34, 34);
}

.isIE11 .btn-primary {
    background-color: rgb(217, 13, 37) !important;
}

.isIE11 .btn.btn-primary-outline {
    color: #D90D25FF;
    border-color: #D90D25FF;
}

.alert {
    background-color: var(--danger-light) !important;
    color: var(--primary);
}

* {
    font-family: "Poppins", sans-serif;
    line-height: 1.375rem;
}

div {
    display: block;
}

body, button, input, textarea, select {
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
}


::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
}

::-webkit-scrollbar-track {
    background: transparent;
}

::selection {
    background-color: var(--primary);
    color: white;
}


.toast-close-button {
    color: white !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
}

.toast-wrapper {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
}

.toast-message {
    font-size: 0.9rem !important;
}

.toast {
    top: 75px;
    right: 1rem;
    border-radius: 0;
}

.toast-success {
    background-color: #4caf50 !important;
}

.toast-error {
    background-color: #f34444 !important;
}

.toast-warning {
    background-color: #f3c144 !important;
}

.toast-icon {
    min-width: 20px
}

.card-title-otp p {
    line-height: 2rem !important;
}

.card-title-otp label > div:first-child::after, .input-label::after {
    content: "?" !important;
}

.sm-text {
    font-size: 1rem !important;
}

.sfr-red label > div:first-child::after, .sfr-red .input-label::after {
    border-radius: 0;
}

.btn.disabled, .disabled {
    background-color: var(--primary) !important;
}

[disabled], .disabled {
    opacity: 0.5;
    pointer-events: none;
    background-color: var(--primary) !important;
}

.btn:is([disabled], .disabled) {
    background-color: var(--primary);
    color: #FFF !important;
}

.sfr-red .text-primary-finality {
    color: #00E094 !important;
}

@media only screen and (max-width: 425px) {
    .alert {
        margin: 1rem;
    }

    label > div:first-child::after, .input-label::after {
        content: "?" !important;
    }

    .toast {
        top: 73px !important;
        right: 0 !important;
    }

    .toast-wrapper {
        margin: 0.5rem;
    }

    .remove-device::after {
        right: 1rem;
        top: 2.25rem;
        content: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.641545 0.642521C0.934438 0.349628 1.40931 0.349628 1.70221 0.642521L7.35852 6.29883L6.82873 6.8297L6.29838 7.36001L0.641545 1.70318C0.348652 1.41029 0.348652 0.935415 0.641545 0.642521ZM7.35906 7.36003C7.06617 7.65293 6.59127 7.65291 6.29838 7.36001L6.82873 6.8297L7.35852 6.29883C7.65141 6.59173 7.65195 7.06714 7.35906 7.36003Z' fill='%23D90D25'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.641546 7.36003C0.348652 7.06714 0.348652 6.59227 0.641546 6.29937L6.29786 0.64306L6.82873 1.17285L7.35904 1.7032L1.70221 7.36003C1.40931 7.65293 0.934439 7.65293 0.641546 7.36003ZM7.35906 0.64252C7.65195 0.935414 7.65193 1.41031 7.35904 1.7032L6.82873 1.17285L6.29786 0.64306C6.59075 0.350166 7.06617 0.349627 7.35906 0.64252Z' fill='%23D90D25'/%3E%3C/svg%3E%0A");
    }

    .sfr-red .remove-device::after {
        content: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.641545 0.642521C0.934438 0.349628 1.40931 0.349628 1.70221 0.642521L7.35852 6.29883L6.82873 6.8297L6.29838 7.36001L0.641545 1.70318C0.348652 1.41029 0.348652 0.935415 0.641545 0.642521ZM7.35906 7.36003C7.06617 7.65293 6.59127 7.65291 6.29838 7.36001L6.82873 6.8297L7.35852 6.29883C7.65141 6.59173 7.65195 7.06714 7.35906 7.36003Z' fill='%2300E094FF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.641546 7.36003C0.348652 7.06714 0.348652 6.59227 0.641546 6.29937L6.29786 0.64306L6.82873 1.17285L7.35904 1.7032L1.70221 7.36003C1.40931 7.65293 0.934439 7.65293 0.641546 7.36003ZM7.35906 0.64252C7.65195 0.935414 7.65193 1.41031 7.35904 1.7032L6.82873 1.17285L6.29786 0.64306C6.59075 0.350166 7.06617 0.349627 7.35906 0.64252Z' fill='%2300E094FF'/%3E%3C/svg%3E%0A");
    }
}

.show-history:before {
    display: inline-block;
    position: absolute;
    left: 0rem;
    top: 1rem;
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Ctitle%3E history %3C/title%3E%3Cstyle type='text/css'%3E* %7B fill: %234C89FF %7D%3C/style%3E%3Cpath d='M9 6v5h.06l2.48 2.47 1.41-1.41L11 10.11V6H9z'/%3E%3Cpath d='M10 1a9 9 0 0 0-7.85 13.35L.5 16H6v-5.5l-2.38 2.38A7 7 0 1 1 10 17v2a9 9 0 0 0 0-18z'/%3E%3C/svg%3E%0A");
}

.hide-history {
    display: inline-block;
    position: absolute;
    left: 0rem;
    top: 1rem;
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Ctitle%3E history %3C/title%3E%3Cstyle type='text/css'%3E* %7B fill: %23D90D25 %7D%3C/style%3E%3Cpath d='M9 6v5h.06l2.48 2.47 1.41-1.41L11 10.11V6H9z'/%3E%3Cpath d='M10 1a9 9 0 0 0-7.85 13.35L.5 16H6v-5.5l-2.38 2.38A7 7 0 1 1 10 17v2a9 9 0 0 0 0-18z'/%3E%3C/svg%3E%0A");
}

.device-name {
    text-align: center;
    font-family: "Poppins", sans-serif;
    line-height: 2.375rem;
    color: var(--text);
    font-size: 1rem;
}

.text-underline {
    color: #4C89FF;
    text-decoration: underline;
}

.valid {
    border: 6px solid #5cb75c;
    border-radius: 50%;
    margin: 50px auto;
    height: 100px;
    width: 100px;
}

.valid-text {
    color: #5cb75c;
    font-size: 14px;
}

@supports not (margin-inline: auto) {
    .m-x-auto {
        margin-left: auto;
        margin-right: auto;
    }
}

@supports not (padding-block: var(--space-m)) {
    .btn {
        padding-top: var(--space-m);
        padding-bottom: var(--space-m);
    }
}

@supports not (padding-block: var(--space-xl)) {
    .alert {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }
}


@supports not (padding-inline: var(--space-l)) {
    .alert {
        padding: var(--space-l);
    }
}

@supports not (padding-inline: 0.5rem) {
    label > div:first-child::after, .input-label::after {
        padding: 0 0.5rem;
    }
}
.input-xs {
    background: #ffff !important;
    color: black !important;
}