/*
Compiled from ancv-front-public/styles/app.scss
 */

.btn, .btn-primary {
    color: #d73f3c;
    background-color: #fff;
    border: solid 1px currentColor;
    border-radius: 3px;
}
.btn:hover, .btn-primary:hover, .btn:focus, .btn-primary:focus {
    background-color: #d73f3c;
    color: #fff;
    border: solid 1px #fff;
}
.btn:disabled, .btn-primary:disabled, .btn:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled):active {
    background-color: #d73f3c;
    border: solid 1px #fff;
    opacity: 0.5;
}
body {
    box-shadow: none;
}
body > .ember-view > :not(.login) {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}
.login .error .alert {
    margin-bottom: 0rem;
}
.login .create-beneficiary-success {
    line-height: 1.3;
    padding-top: 1em;
}
.login #login #password {
    margin-bottom: 0;
}
.login #login form > div {
    padding-bottom: initial;
}
.login #login form > div:nth-of-type(2) {
    padding-bottom: 1.5em;
}
.login #login .form-control {
    line-height: 1;
}
.login #login .form-control.is-valid, .login #login .form-control.is-invalid {
    border-color: #dfe0de;
    background-image: none;
}
.login #login .form-control.is-valid:focus, .login #login .form-control.is-invalid:focus {
    box-shadow: none;
}
.login #login .alert {
    padding: unset;
    margin-bottom: unset;
    border: unset;
}
.login #login .col-form-label {
    padding-top: 0;
    padding-bottom: 0.5em;
}
.login #login p > .form-group {
    margin-bottom: 0rem;
}
.login #login .show-icons {
    outline: unset;
}
.login #login .tooltip {
    left: -111px;
    top: 32px;
}
.login #login .password-tooltip .tooltip {
    left: -202px;
    width: 240px;
    max-width: none;
}
.login #login .password-tooltip .tooltip:before {
    right: 8%;
}
.login #login input[name='username'], .login #login input[name='password'] {
    font-size: 13.3333px;
    box-shadow: none;
    max-height: 1.8rem;
}
.login #login input[name='username']:hover, .login #login input[name='password']:hover {
    border: 1px solid #f7a962;
}
.login #login input[name='username']:focus, .login #login input[name='password']:focus {
    border: 1px solid #fff;
    border-bottom: 1px solid #f7a962;
    transition: 0.35s ease all;
    outline: none;
}
.login #login .btn-zone button {
    font-size: 1em;
    padding: 0.15em 1.7em;
}
.login #login .btn-zone button:hover, .login #login .btn-zone button:focus {
    background-color: #fff;
    color: #d73f3c;
    border: solid 1px #d73f3c;
}
.login #account fieldset {
    border: 1px dashed #cfcfcf;
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 1.3em 1.3em 1.3em 1.3em;
}
.login #account legend {
    display: block;
    width: auto;
    padding: 0 1em 0 1em;
    margin: 0 auto;
}
.login #account label {
    padding-bottom: 0.5em !important;
    padding-top: inherit;
    width: 100% !important;
    color: #000 !important;
    font-weight: bold !important;
    line-height: 1 !important;
}
.login #account .form-group {
    margin-bottom: 0;
}
.login #account .all-required {
    padding-bottom: 1.5em;
}
.login #account input {
    font-size: 13.3333px;
    box-shadow: none;
    line-height: 1;
}
.login #account input.is-valid, .login #account input.is-invalid {
    border-color: #dfe0de;
    background-image: none;
}
.login #account input:hover {
    border: 1px solid #f7a962;
}
.login #account input:focus {
    border: 1px solid #fff;
    border-bottom: 1px solid #f7a962;
    transition: 0.35s ease all;
}
.login #account input:focus:not([type="radio"]):not([type="checkbox"]) {
    outline: none;
}
.login #account fieldset:nth-of-type(3) span {
    font-weight: initial;
}
.login #account .btn-zone input:hover {
    margin-bottom: 0.5em;
}
.login #account #cgu_fieldset {
    padding-top: 2em;
}
.login #account #cgu_fieldset legend {
    margin-bottom: 0.5em;
}
.login #account #cgu_fieldset p label {
    width: calc(100% - 21px) !important;
    padding-top: 0 !important;
    font-weight: initial !important;
}
.login #account #cgu {
    float: left;
    position: absolute;
}
.login #account #cgu span {
    top: 2em;
    width: inherit;
}
@media (max-width: 434px) {
    .login #account #cgu_fieldset p {
        height: 80px;
    }
    .login #account #cgu_fieldset span {
        top: 3em;
    }
    .login #account #cgu span {
        width: calc(100% - 40px);
    }
    .login #account #cguLabel {
        left: 1.15em;
    }
}
@media (min-width: 435px) {
    .login #account #cguLabel {
        top: -0.4em;
        left: 1em;
    }
}
.login #account .btn-zone button {
    font-size: 1em;
    padding: 0.15em 1.7em;
}
.login #account .btn-zone button:hover, .login #account .btn-zone button:focus {
    background-color: #fff;
    color: #d73f3c;
    border: solid 1px #d73f3c;
    box-shadow: none;
}
.login #account .disabled-input-background-color input {
    background-color: #e9ecef;
}
.main-paddB {
    padding-bottom: 5em;
    position: relative;
}
#panel-account li a:hover {
    color: #fff;
}
#panel-account li.active a:hover {
    color: initial;
}
#panel-account.open li a {
    margin-left: 15px;
    font-weight: bold;
}
@media (min-width: 750px) {
    #panel-account.open {
        min-width: 12em;
    }
}
.account-zone nav .current {
    background: url(../img/menu-current-panel.svg) no-repeat left center / 10px 20px;
}
@media (max-width: 750px) {
    .account-zone nav .current {
        background: #f9e1e0 url(../img/menu-current.svg) no-repeat left center / 10px 20px;
    }
    #panel-account li a:hover {
        color: #2d2f31 !important;
    }
}
.aside-nav li a {
    color: #2d2f31;
    padding: 0.8em 0.75em;
    padding-left: 3rem;
    transition: 0.2s ease all;
    text-decoration: none;
    display: block;
    background-size: 1.2em auto;
}
.aside-nav li a:hover {
    color: #fff;
}
.aside-nav li.current {
    background: #f9e1e0 url(../img/menu-current.svg) no-repeat left center / 10px auto;
    border-left: 5px solid #fff;
}
.aside-nav li.current a {
    font-weight: 600;
    font-family: "barlowsemibold", sans-serif;
    color: #2d2f31;
}
#cgu {
    text-align: justify;
}
#cgu p:after {
    content: "\A\A";
    white-space: pre;
}
#cgu h2 {
    width: auto;
    padding: 0;
}
#cgu h3 {
    display: inherit;
}
#cgu .listStyle, #cgu .listStyleDash {
    list-style: inherit;
    padding-left: 15px;
}
#cgu .listStyle ul, #cgu .listStyleDash {
    list-style: none;
}
#cgu .listStyle ul li:before, #cgu .listStyleDash li:before {
    content: "–";
    position: absolute;
    /*change margin to move dash around*/
    margin-left: -1em;
}
#mdp-perdu form > div > div {
    width: 100%;
}
#mdp-perdu .container {
    max-width: 360px;
}
#mdp-perdu .container input {
    box-shadow: none;
    height: 2rem;
}
#mdp-perdu .container input.is-valid, #mdp-perdu .container input.is-invalid {
    border-color: #dfe0de;
    background-image: none;
}
#mdp-perdu .container input:hover {
    border: 1px solid #f7a962;
}
#mdp-perdu .container input:focus {
    border: 1px solid #fff;
    border-bottom: 1px solid #f7a962;
    transition: 0.35s ease all;
    outline: none;
}
#mdp-perdu .container button {
    border: solid 1px #d73f3c;
    padding: 0.1em 2em;
}
#mdp-perdu .container button:hover {
    color: #d73f3c;
    background-color: transparent;
}
#mdp-perdu .container .alert-danger {
    margin-top: 10px;
}
#pre-transaction-static table {
    margin-left: 1.2em;
}
@media (max-width: 1100px) {
    #pre-transaction-static table {
        margin-left: 0em;
    }
    #pre-transaction-static td:before {
        content: none;
    }
    #pre-transaction-static tr {
        background-color: transparent;
        border-bottom: none;
    }
}
#content.col-two .box {
    padding: 0;
}
#content.col-two .box dl.mesInfosEdit dd {
    border-bottom: none;
}
#content.col-two .box form {
    margin-top: 0;
    width: 100%;
    width: -moz-available;
    /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;
    /* Mozilla-based browsers will ignore this. */
}
#content.col-two .box .all-required {
    padding-bottom: 1.5em;
}
#content.col-two .box dl, #content.col-two .box p.btn-zone {
    padding: 0 1.3em 1.3em 1.3em !important;
}
#content.col-two .box dd div {
    margin-bottom: 0;
    padding-bottom: 0;
}
#content.col-two .box input {
    font-size: 1em;
    box-shadow: none;
    line-height: 1;
}
#content.col-two .box input.is-valid, #content.col-two .box input.is-invalid {
    border-color: #dfe0de;
}
#content.col-two .box input:hover {
    border: 1px solid #f7a962;
}
#content.col-two .box input:focus {
    border: 1px solid #fff;
    border-bottom: 1px solid #f7a962;
    transition: 0.35s ease all;
    outline: none;
}
#content.col-two .bloc-RGPD {
    text-align: justify;
    padding-bottom: inherit;
}
#my-profile-errors div {
    margin-top: 1em;
}
@media (min-width: 1101px) {
    #my-profile-errors div {
        margin-left: 1em;
        margin-right: 1em;
    }
}
#my-profile-errors div {
    margin-top: 1em;
}
#content.col-two .box {
    padding: 0;
}
#content.col-two .box form {
    margin-top: 0;
    width: 100%;
    width: -moz-available;
    /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;
    /* Mozilla-based browsers will ignore this. */
}
#content.col-two .box .all-required {
    padding-bottom: 1.5em;
}
#content.col-two .box dl, #content.col-two .box p.btn-zone {
    padding: 0 1.3em 1.3em 1.3em !important;
}
#content.col-two .box dd div {
    margin-bottom: 0;
    padding-bottom: 0;
}
#content.col-two .box input {
    font-size: 1em;
    box-shadow: none;
    line-height: 1;
}
#content.col-two .box input.is-valid, #content.col-two .box input.is-invalid {
    border-color: #dfe0de;
}
#content.col-two .box input:hover {
    border: 1px solid #f7a962;
}
#content.col-two .box input:focus {
    border: 1px solid #fff;
    border-bottom: 1px solid #f7a962;
    transition: 0.35s ease all;
    outline: none;
}
#content.col-two .box .btn-primary {
    margin-top: -5px;
    border: solid 1px #d73f3c;
    padding: 0.1em 2em;
    margin-right: 0.5em;
}
#content.col-two .box .btn-primary:hover {
    color: #d73f3c;
    background-color: transparent;
}
#content.col-two .box .bt-optional {
    padding: 0.45em 2em;
}
@media (max-width: 660px) {
    footer nav ul {
        display: inherit !important;
    }
}
@media (min-width: 1101px) {
    .solde > p strong {
        font-size: 3.3em;
    }
}
.otp-message {
    line-height: 1.3;
}
div[role='button'] a {
    cursor: pointer;
}
#operation-filter .btn-zone {
    width: 100%;
    display: inline-block;
    margin-top: 10px;
}
@media (max-width: 1100px) {
    td.no-results:before {
        content: "";
    }
}
table .right-text {
    text-align: right;
}
@media (max-width: 1100px) {
    table .right-text {
        text-align: left;
    }
}
.debit:before, .credit:before {
    font-family: "barlowregular", sans-serif;
}
.inline-link {
    display: inline;
}
#cgu .listStyle {
    list-style-type: disc;
}
.filter-zone .action-zone {
    font-size: 13.3333px;
}
#modalMdp .btn-primary, #modalBlockApparel .btn-primary, #modalUnlockApparel .btn-primary {
    margin-top: -5px;
    border: solid 1px #d73f3c;
    padding: 0.1em 2em;
    margin-right: 0.5em;
}
#modalMdp .btn-primary:hover, #modalBlockApparel .btn-primary:hover, #modalUnlockApparel .btn-primary:hover {
    color: #d73f3c;
    background-color: transparent;
}
#modalMdp .bt-optional, #modalBlockApparel .bt-optional, #modalUnlockApparel .bt-optional {
    padding: 0.45em 2em;
}
#modalMdp .modal-content, #modalBlockApparel .modal-content, #modalUnlockApparel .modal-content {
    border: none;
}
#modalMdp input[type=password], #modalBlockApparel input[type=password], #modalUnlockApparel input[type=password] {
    background-image: none;
    border-color: #dfe0de;
    box-shadow: none;
    outline: none;
}
#modalMdp input[type=password]:hover, #modalBlockApparel input[type=password]:hover, #modalUnlockApparel input[type=password]:hover {
    border: 1px solid #f7a962;
}
#modalMdp input[type=password]:focus, #modalBlockApparel input[type=password]:focus, #modalUnlockApparel input[type=password]:focus {
    border: 1px solid #fff;
    border-bottom: 1px solid #f7a962;
    transition: 0.35s ease all;
    outline: none;
}
#modalMdp input.is-invalid[name='currentPassword'], #modalBlockApparel input.is-invalid[name='currentPassword'], #modalUnlockApparel input.is-invalid[name='currentPassword'] {
    border: solid 1px #d73f3c;
}
#modalMdp .form-group, #modalBlockApparel .form-group, #modalUnlockApparel .form-group {
    margin-bottom: unset;
}
#modalMdp label, #modalBlockApparel label, #modalUnlockApparel label {
    padding-top: unset;
}
.alert-messages.loading {
    color: #262626;
    background: transparent;
    border: solid 1px #262626;
}
form div.form-item {
    padding-bottom: 1.5em;
}
#account div.form-item {
    max-width: 360px;
    margin: 0 auto;
}
form div.form-item div.hidden-password-field {
    position: relative;
    display: block;
}
@media (max-width: 1100px) {
    .my-devices {
        padding: 0 !important;
        margin: 2em 0 !important;
    }
}
ul.list-apparel button {
    font-family: barlowregular, sans-serif;
}
ul.list-apparel button i {
    height: 18px;
    width: 18px;
}
.content .box {
    background: #fff;
    margin-top: 2rem;
}
.content {
    margin-top: 1em;
}


/* Mise à jour du design des pages de l'espace bénéficiaire */

.new-design-login {
  position: relative;
  height: 900px;
}

.new-design-box {
  top: 50%;
  left: 50%;
}

#wrapper {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#navbar img {
    width: 100%;
    display: block;
}

@media (max-width: 750px) {

  .new-design-login h2 {
    font-size: 1.2em;
    padding: 1em 0 0 0;
  }

  .new-design-login {
    height: 600px;
  }
}

@media (max-width: 500px) {

  .new-design-login h2 {
    font-size: 1.3em;
    padding: 3em 0 0 0;
  }

  .new-design-login {
    height: 500px;
  }
}

@media (max-height: 900px) {

  .new-design-login {
    height: 625px;
    padding: 3em 0 0 0;
  }
}

.message-error,
.kc-feedback-text {
    color: #dc3545 !important; /* Bootstrap danger red */
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.25rem;
    display: block;
}

input.form-control[aria-invalid="true"] {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}