div.container-1 {
    max-width: 848px;
    padding-top: 29px;

    div.content-block-forms {
        h2 {
            margin-top: 40px;
            margin-bottom: 0;
        }

        form.rattach-form {
            margin-top: 46px;
            margin-left: 109px;
            margin-right: 109px;
            width: -webkit-fill-available;
            width: -moz-available;

            div.form-row {
                margin-left: 0;
                width: -webkit-fill-available;
                width: -moz-available;

                div#reference-input {
                    margin-bottom: 22px;

                    small.special-note {
                        color: black;
                        text-decoration: underline;
                    }

                    small.special-note:hover {
                        color: #980B3B;
                        cursor: pointer;
                    }
                }

                div.form-group {
                    width: 100%;
                    margin-bottom: 30px;

                    input {
                        width: 100%;
                    }
                }
            }

            div.form-footer {
                margin-top: 30px;
                margin-bottom: 75px;

                div.button-group {
                    button.contained-button {
                        width: 128px;
                    }

                    button.contained-button:hover {
                        background-color: #980B3B;
                        cursor: pointer;
                    }

                    button.outlined-button {
                        width: 140px;
                    }

                    button.outlined-button:hover {
                        background-color: #980B3B;
                        cursor: pointer;
                        color: white;
                    }
                }

            }
        }
    }

    div.note {
        div.data-note {
            span.special-note {
                color: black;
                text-decoration: underline;
            }

            span.special-note:hover {
                color: #980B3B;
                cursor: pointer;
            }
        }
    }
}

main.menu-forms {
    background-color: #F5F3F2;
    padding: 0;
}

div.banner-info {
    margin-top: 90px;
    ;
}

div.document-page,
div.account-page {
    margin-top: 120px;
    margin-left: 0;
    margin-right: 0;

    div.sidebar-panel {
        padding-left: 75px;
        padding-right: 30px;
        width: 405px;
        border-right: 1px solid #D7D2CB;

        h2 {
            padding-bottom: 17px;
            margin-bottom: 0;
            border-bottom: 1px solid #D7D2CB;
            color: var(--Texte, #2B2B2B);
            font-family: "AvantGardeGothic", sans-serif;
            font-size: 32px;
            font-style: normal;
            font-weight: 275;
            line-height: normal;

        }

        ul.sidebar-menu {
            padding-top: 0;
            margin-top: 17px;
            border: none;

            li {
                line-height: unset;
                margin-bottom: 20px;
            }


        }
    }

    main.content {
        margin-top: 17px;
        padding-top: 0;
        padding-left: 111px;
        padding-right: 76px;
        min-width: 1035px;

        h1 {
            margin-bottom: 44px;
        }
    }
}

div.document-page {
    div.document-block {
        padding: 0;
    }

    div.content-card-footer {
        padding-left: 0;
    }
}

div.container-2 {
    display: flex;
    flex-direction: column;
    margin-left: 75px;
    margin-right: 75px;
    margin-top: 50px;
    margin-bottom: 50px;
    border-top: #B0AAA2 solid 1px;
    border-bottom: #B0AAA2 solid 1px;
    padding-left: 0;
    padding-right: 0;
    height: 763px;

    div#row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding-top: 20px;
        padding-bottom: 20px;

        div.inlietmoi-card {
            height: 359px;
            padding: 0;
            justify-content: flex-start;

            div.inlietmoi-card-content {
                justify-content: flex-start;
            }

            div.inlietmoi-card-header img {
                max-width: 49px;
                max-height: 48px;
                height: 48px;
            }
        }

        div.inlietmoi-card:nth-child(-n+3) {
            margin-bottom: 19px;
        }

        div.inlietmoi-card:nth-last-child(-n+3) {
            height: 324px;
            padding-top: 20px;
        }

        div.inlietmoi-card:nth-last-child(-n+3)::before {
            content: "";
            /* Required for ::before to work */
            display: block;
            /* Make it behave like a box */
            height: 0;
            /* No height needed for border */
            border-top: 1px solid #B0AAA2;
            ;
            /* Border-top styling */
            position: relative;
            /* Ensures it moves properly */
            transform: translateY(-20px);
        }

        div.inlietmoi-card::before {
            content: "";
            display: none;
            background: black;
        }

        div.maresidence-card {
            padding-right: 19px;
            border-right: 1px #B0AAA2 solid;

            div.inlietmoi-card-header {
                margin-bottom: 50px;
            }

            div.inlietmoi-card-content {
                padding-top: 0;
                margin-top: 0;
                height: unset;
                margin-bottom: 6px;

                p {
                    margin-bottom: 24px;
                }

                strong {
                    color: #2B2B2B;
                    text-align: center;
                    font-family: Heebo;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    margin-bottom: 50px;
                }
            }

            div.inlietmoi-card-footer {
                height: unset;
            }
        }

        div.monsolde-card {
            padding-right: 16px;
            border-right: 1px #B0AAA2 solid;
            margin-left: 19px;

            div.inlietmoi-card-header {
                margin-bottom: 45px;
            }

            div.inlietmoi-card-content {
                justify-content: flex-start;
                padding-top: 0;
                height: unset;
                margin-bottom: 22px;
            }

            div.inlietmoi-card-footer {
                button.primary-button {
                    background-color: #E92C61;
                    color: white;
                }

                button.primary-button:hover {
                    background-color: #980B3B;
                    cursor: pointer;
                    border: 2px solid #980B3B;
                }
            }
        }

        div.mesdocuments-card {
            margin-left: 16px;

            div.inlietmoi-card-header {
                margin-bottom: 35px;
            }

            div.inlietmoi-card-content {
                justify-content: flex-start;
                padding-top: 0;
                height: unset;
            }
        }

        div.mesdemandes-card {
            padding-right: 19px;
            border-right: 1px solid;
            border-image: linear-gradient(to bottom, white 20px, #B0AAA2 20px) 1;

            div.inlietmoi-card-header {
                margin-bottom: 50px;
            }

            div.inlietmoi-card-content {
                justify-content: flex-start;
                padding-top: 0;
                height: unset;

                p {
                    margin-bottom: 22px;
                    max-width: 315px;
                }
            }

            div.inlietmoi-card-footer {
                button.outlined-button {
                    background-color: #E92C61;
                    color: white;
                }

                button.outlined-button:hover {
                    background-color: #980B3B;
                    cursor: pointer;
                    border: 2px solid #980B3B;
                }
            }
        }

        div.moninterlocuteur-card {
            padding-right: 16px;
            border-right: 1px solid;
            border-image: linear-gradient(to bottom, white 20px, #B0AAA2 20px) 1;
            margin-left: 19px;

            div.inlietmoi-card-header {
                margin-bottom: 58px;
            }

            div.inlietmoi-card-content {
                justify-content: flex-start;
                padding-top: 0;
                height: unset;
            }

            div.inlietmoi-card-footer {
                button.interlocuteur-number {
                    margin-top: 5px;
                }

                button.interlocuteur-number:hover {
                    background-color: #980B3B;
                    cursor: pointer;
                    border: 2px solid #980B3B;
                    color: white;
                }
            }
        }

        div.reponsesquestions-card {
            margin-left: 17px;

            div.inlietmoi-card-header {
                margin-bottom: 35px;
            }

            div.inlietmoi-card-content {
                justify-content: flex-start;
                padding-top: 0;
                height: unset;
            }
        }
    }


}

main#carte-bancaire-page {
    background: linear-gradient(to bottom, transparent calc(100% - 326px), #F5F3F2 calc(100% - 340px));

    div.form-footer {
        div.auto-debit-setup {
            margin-bottom: 30px;
        }
    }
}

main.mon-solde-contenu {
    background: linear-gradient(to bottom, transparent calc(100% - 371px), #f9f7f5 calc(100% - 370px));

    div.solde-client {
        div.inlietmoi-card-footer {

            button,
            a {
                letter-spacing: .5px;
                font-weight: 400;
            }
        }
    }

    div.table-echeances {
        div {
            div.accordion {
                div.accordion-item {
                    div.accordion-header {
                        span.avis-echeances {
                            width: 54%;
                            display: flex;
                            justify-content: flex-start;

                            strong {
                                width: 30%;
                            }

                            span {
                                margin-left: 0;
                            }
                        }

                        span.money-to-pay {
                            span.amount {
                                min-width: 86px;
                            }
                        }
                    }
                }

            }

            button {
                letter-spacing: .5px;
                font-weight: 400;
            }

            button.pay-btn {
                height: 30px;
                padding-top: 2px;
                max-width: 86px;
            }
        }
    }

    div.form-footer {
        margin-top: 134px;

        div.auto-debit-setup {
            margin-bottom: 30px;
            display: flex;
            justify-content: flex-start;
            margin-left: -60px;
            margin-bottom: 62px;

            div.flex-fill :where(.text-heebo-small-regular) {
                font-weight: 500;
            }

            p.text-heebo-small-regular {
                margin-bottom: 0;
            }

            div.flex-fill {
                padding-left: 37px;

                div#download-mandat-button {
                    margin-top: 35px;

                    button {
                        letter-spacing: .5px;
                        font-weight: 400;
                    }
                }
            }
        }
    }

    div.solde-client {
        box-shadow: none;
    }

    div.table-echeances {
        margin-top: 17px;

        div {
            div.accordion {}

        }
    }
}

main.regler-mon-solde-contenu {
    background: linear-gradient(to bottom, transparent calc(100% - 337px), #F5F3F2 calc(100% - 337px));

    div.total-a-regler {
        padding-left: 0;
        margin-bottom: 0;

        label {
            font-stretch: condensed;
            letter-spacing: 0.6px;
            margin-bottom: 20px;
        }

        button.contained-button {
            margin-top: 0;
            display: inline-flex;
            height: 50px;
            padding: 0px 20px;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-stretch: condensed;
            letter-spacing: .5px;
            font-weight: 400;
            padding-top: 2px;
            width: 109px;
        }


    }

    div.zone-rib {
        padding-left: 0;
        padding-top: 20px;
        align-items: baseline;
        justify-content: flex-start;
        margin-bottom: -25px;


        p.montant {
            margin-bottom: 0;
        }

        button.contained-button {
            margin-top: 0;
            display: inline-flex;
            height: 50px;
            padding: 0;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-stretch: condensed;
            letter-spacing: .5px;
            font-weight: 400;
            padding-top: 2px;
            width: 189px;
        }


    }

    div.solde-client {
        height: 128px;
        margin: 0;
        padding: 34px 30px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        align-items: center;
        text-align: center;
        box-shadow: none;
        border-radius: 0;

        div.inlietmoi-card-header {
            margin-right: 191px;

            h2 {
                margin: 0;
                color: var(--Texte, #2B2B2B);
                font-size: 24px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                font-stretch: semi-condensed;
            }
        }

        div.inlietmoi-card-content {
            p {
                span {
                    span {
                        display: inline-block;
                        transform: translateY(-5px);
                    }
                }
            }
        }
    }

    div.moyen-de-paiment-block {
        max-width: unset;
        padding-top: 0;
        max-height: 280px;

        div.content-boxes.container {
            padding: 0;
            margin-top: 30px;
            justify-content: space-between;


            a.content-box:hover,
            div.content-box:hover {
                cursor: pointer;

                div.content-icon {
                    animation: moveUp 0.5s ease-in-out forwards;
                }
            }

            a.active-methode-paiment,
            div.active-methode-paiment {
                background-color: #980B3B;

                div.content-icon {
                    svg {
                        path {
                            fill: white;
                        }
                    }
                }

                div.box-title {
                    color: white;
                }
            }
        }
    }

    div.form-footer {
        height: 337px;
        justify-content: flex-start;
        align-items: center;
        background-color: #F5F3F2;
        margin-top: 0;
        margin-top: 79px;

        div.auto-debit-setup {
            height: 230px;

            div.flex-fill {
                margin-left: 35px;
            }

            div.flex-fill :where(.text-heebo-small-regular) {
                font-weight: 500;
            }

            p.text-heebo-small-regular {
                margin-bottom: 0;
            }

            div.download-mandat-button {
                margin-top: 47px;

                button {
                    display: inline-flex;
                    height: 50px;
                    padding: 0px 20px;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    gap: 10px;
                    font-stretch: condensed;
                    letter-spacing: .5px;
                    font-weight: 400;
                    padding-top: 3px;
                    margin-left: 27px;
                }
            }
        }
    }
}

main.references-cnx {
    h1 {
        margin-bottom: 65px;

    }

    div.content-block {
        margin-top: 0;
        padding-top: 0;
        min-height: 240px;
        padding: 38px 38px 48px 38px;
        box-shadow: none;
        margin-bottom: 32px;

        p.client-reference {
            margin-bottom: 40px;

            strong {
                font-weight: 500;
                font-stretch: condensed;
            }
        }

        div.details {
            div.detail-section {
                h4 {
                    margin-bottom: 14px;
                }
            }

            div.detail-section:nth-of-type(2) {
                margin-left: 75px;
            }
        }
    }

    div.form-footer {
        button {
            letter-spacing: .5px;
            font-weight: 400;
            padding-top: 15px;
        }

        button:hover {
            background-color: #980B3B;
            cursor: pointer;
        }
    }
}

main.user-info-main {
    form.user-info-main-form {

        div.form-row {
            div.form-group:first-of-type {
                padding-right: 15px;
            }

            div.form-group:nth-of-type(2) {
                padding-left: 15px;
            }
        }

        div.form-group {
            min-height: 120px;
            margin-bottom: 0;
        }

        div.address-field {
            line-height: 20px;
            margin-bottom: 20px;

            input {
                margin-bottom: 13px;
            }

            label {
                margin-bottom: 7px;
            }
        }

        div.form-footer {
            margin-bottom: 60px;

            button {
                letter-spacing: .5px;
                font-weight: 400;
                padding-top: 15px;
            }

            button:hover {
                background-color: #980B3B;
                cursor: pointer;
            }
        }

        p.data-note {
            margin-bottom: 67px;

            span.special-note {
                color: black;
                text-decoration: underline;
            }

            span.special-note:hover {
                color: #980B3B;
                cursor: pointer;
            }
        }
    }
}

main.identifiant-cnx {
    div.form-footer {
        button {
            letter-spacing: .5px;
            font-weight: 400;
        }

        button.outlined-button:hover {
            background-color: #980B3B;
            cursor: pointer;
            border: 2px solid #980B3B;
            color: white;
        }
    }
}

main#mes-quittances-page {
    div.document-block {
        div {
            ul {
                li {
                    div {

                        button:hover {
                            background-color: #980B3B;
                            cursor: pointer;
                        }

                        button {
                            p {
                                letter-spacing: .5px;
                                font-weight: 400;
                            }
                        }
                    }
                }
            }
        }
    }
}

main.mes-quittances-page,
main.document-contract-page,
main.document-avis-echeances {
    background: linear-gradient(to bottom, transparent calc(100% - 190px), #F5F3F2 calc(100% - 313px));

    div.content-card-footer {
        div {
            div.footer-text {
                margin-left: 12px;

                p {
                    font-weight: 500;
                }
            }
        }

        button {
            letter-spacing: .5px;
            font-weight: 400;
            padding-top: 15px;
        }

        button:hover {
            background-color: #980B3B;
            cursor: pointer;
        }
    }
}

main.document-contract-page {
    div.title-block {
        h3 {
            font-size: 24px;
            margin-top: 30px;

            span.medium-light-normal {
                font-weight: 400;
                font-stretch: extra-condensed;
            }
        }
    }

    div.appart-contactor-block {
        margin-bottom: 61px;

        div.appartement-zone {
            width: 42%;
        }
    }

    div.log-details,
    div.contract-details {
        div.data-row-c {
            ul.details-ug {
                margin-bottom: 60px;

                li {
                    div {
                        label {
                            width: 42%;
                        }
                    }
                }
            }
        }
    }

    div.annexes-block {
        margin-bottom: 50px;
    }
}

main.assurance-page-main {
    div.title-block {
        h3 {
            font-size: 24px;
            margin-top: 30px;

            span.medium-light-normal {
                font-weight: 400;
                font-stretch: extra-condensed;
            }
        }
    }

    div.old-attestation-block {
        div {
            div.card-block {
                margin-bottom: 60px;

                p.text-heebo-small-regular {
                    font-weight: 500;
                    font-stretch: condensed;
                }
            }
        }
    }

    div.new-attestation-block {
        div {
            form {
                p.text-heebo-small-regular {
                    font-weight: 500;
                    font-stretch: condensed;
                }
            }
        }

        div {
            form {
                div.form-row {
                    div.form-group:first-of-type {
                        padding-right: 15px;
                    }

                    div.form-group:nth-of-type(2) {
                        padding-left: 15px;
                    }
                }

                div.file-upload {
                    div {
                        span {
                            font-weight: 400;
                            font-stretch: semi-condensed;
                            padding-top: 16px;
                        }
                    }
                }

                div.form-group {
                    div.durations {
                        button {
                            padding-top: 5px;
                        }
                    }
                }

                div.form-footer {
                    button:hover {
                        background-color: #980B3B;
                        cursor: pointer;
                    }

                    button {
                        letter-spacing: .5px;
                        font-weight: 400;

                    }
                }
            }
        }
    }
}

main.nouvelle-demande-main {
    form {
        p.question-paraph {
            font-weight: 500;
            font-stretch: condensed;
            margin-bottom: 50px;
        }
    }

    div.radio-container {
        margin-bottom: 25px;
    }

    div.text-area-block {
        margin-top: 0;
        line-height: 18px;
        margin-bottom: 43px;

        label {
            margin-bottom: 8px;
            margin-top: 10px;
        }

        textarea {
            margin-bottom: 12px;
        }

        small {
            font-weight: 500;
            font-stretch: condensed;
        }
    }

    div.file-upload {
        div.upload-box {
            span {
                font-weight: 400;
                font-stretch: condensed;
            }
        }

        p.file-limit {
            font-weight: 500;
            font-stretch: condensed;
        }
    }

    div.form-footer {
        button.contained-button {
            letter-spacing: .5px;
            font-weight: 400;
        }

        button.contained-button:hover {
            background-color: #980B3B;
            cursor: pointer;
            border: 2px solid #980B3B;
            color: white;
        }
    }

    p.special-input {
        margin-bottom: 60px;

        span.special-note {
            color: black;
            text-decoration: underline;
        }

        span.special-note:hover {
            color: #980B3B;
            cursor: pointer;
        }
    }
}

main.closed-demands-main,
main.ongoing-demandes {
    div {
        button.contained-button {
            padding: 6px 15px;
        }
    }

    div.request-card {

        p {
            font-weight: 500;
            font-stretch: condensed;
        }


        div.details {
            justify-content: flex-start;

            div.creation-date {
                width: 50%;

                label {
                    font-stretch: condensed;
                    font-weight: 300;
                }
            }

            div.via-block {
                label {
                    font-stretch: condensed;
                }
            }
        }
    }

    div.content-card-footer,
    div.form-footer {

        div.new-dem-block {
            div.footer-text {
                h3 {
                    font-family: 'AvantGardeGothic', sans-serif;
                    font-weight: 600;
                    font-stretch: condensed;
                }

                p {
                    font-weight: 500;
                    font-stretch: condensed;
                }
            }
        }

        button.outlined-button {
            letter-spacing: .5px;
            font-weight: 400;
        }

        button.outlined-button:hover {
            background-color: #980B3B;
            cursor: pointer;
            color: white;
        }

        button.contained-button {
            letter-spacing: .5px;
            font-weight: 400;
            padding-top: 9px;
        }

        button.contained-button:hover {
            background-color: #980B3B;
            cursor: pointer;
            color: white;
        }
    }
}

/* Keyframes for moving the icon up */
@keyframes moveUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10px);
    }
}

div.box-title.medium-light-bold.mobile {
    display: none;
}

div.footer-bottom {
    div.footer-logo {
        img {
            filter: brightness(100);
        }
    }
}


/*** be applied on all radios **/

.radio-option input[type="radio"]:checked+.custom-radio::before {
    background-color: #980B3B;
}

.radio-option input[type="radio"]:checked+.custom-radio {
    border-color: #980B3B;
}

/***  ***/

aside .menu-header p {
    opacity: 1;

}

main#mes-quittances-page {
    & div.document-block {
        & div {
            & ul {
                li.greyed-main {
                    border-bottom: none;

                    div {

                        button,
                        button:hover {
                            border-radius: 4px;
                            border: 1px solid #B0AAA2;
                            background-color: white;

                            p {
                                color: #B0AAA2;
                            }

                        }

                        button::before {
                            content: "";
                            display: inline-block;
                            width: 15px;
                            height: 20px;

                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='21' viewBox='0 0 15 21' fill='none'%3E%3Cpath d='M14.4141 4.32812C14.7656 4.67969 15 5.1875 15 5.65625V18.625C15 19.6797 14.1406 20.5 13.125 20.5H1.875C0.820312 20.5 0 19.6797 0 18.625V2.375C0 1.35938 0.820312 0.5 1.875 0.5H9.84375C10.3125 0.5 10.8203 0.695312 11.1719 1.04688L14.4141 4.32812ZM12.9688 5.5L10 2.53125V5.5H12.9688ZM1.875 18.625H13.125V7.375H9.0625C8.51562 7.375 8.125 6.98438 8.125 6.4375V2.375H1.875V18.625Z' fill='white'/%3E%3C/svg%3E");
                            background-repeat: no-repeat;
                            background-position: center;
                            filter: brightness(0) saturate(100%) invert(73%) sepia(10%) saturate(221%) hue-rotate(355deg) brightness(92%) contrast(90%);
                        }
                    }
                }

                li.greyed-message-zone {
                    height: auto;

                    p {
                        padding-left: 10px;
                        color: #B0AAA2;
                        font-family: Heebo;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                    }
                }
            }
        }
    }



}

main.container-index-rattachement {
    
    div.container-1 {
        width: 100%;
        max-width: unset;
    }
}