@media (max-width: 795px) {

    main.container-index-rattachement {
        width: 98%;
    
        div.container-1 {
           div.icon-section {
            flex-direction: column;
            align-items: center;

            .option{
                width: 100%;
            }
           }
        }
    }

    ul.details-ug {
        li {
            div {
                label {
                    font-size: 13px !important;
                }
            }
        }
    }

    header {
        display: flex;
        height: 60px;
        max-height: 60px;
        min-height: 60px;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        text-align: center;

        nav {
            position: relative;
            display: inline-block;
            text-align: left;
            top: 19px;
        }

        nav.nav-index {
            top: 1px;
        }

        a {
            img.logo {
                scale: 0.6;
                left: 6px;
                top: 33px;
            }

            img.logo.no-top {
                top: 6px;
                left: -4px;
            }
        }

        img.logo {
            scale: 0.6;
            position: relative;
            left: 6px;
            top: 2px;
        }
    }


    div.banner-info {
        display: none;
    }

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

        div.content-block-forms {
            h2 {
                margin-top: 20px;
                text-align: center;
            }

            form.rattach-form {
                margin-top: 15px;
                margin-left: 50px;
                margin-right: 50px;


                div.form-bail {
                    margin-left: 0;
                    margin-right: 0;

                    div#reference-input {
                        margin-bottom: 10px;
                    }

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

                        div.radio-container {
                            div.radio-group {
                                margin-top: 0;
                            }
                        }

                        input {
                            width: 100%;
                        }
                    }
                }
            }
        }

    }

    div#container-2 {
        margin-top: 60px;
        height: unset;
        border: none;

        div#row {
            height: unset;
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            padding-top: 20px;
            padding-bottom: 20px;
            padding: 0;
            margin: 0;

            div.inlietmoi-card {
                min-height: 359px;
                border: none;
                padding: 0;
                margin: 0;
                background: none;
                width: 100%;

                div.inlietmoi-card-header {
                    padding-top: 0;

                    h3 {
                        font-size: 32px;
                    }

                    img {
                        max-width: 49px;
                        max-height: 48px;
                        height: 48px;
                    }
                }
            }

            div.mesdemandes-card {
                div.inlietmoi-card-content {
                    p {
                        font-size: 20px;
                    }
                }

                div.inlietmoi-card-footer {
                    button.outlined-button {
                        margin-top: 15px;
                    }
                }
            }

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

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

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

            div.inlietmoi-card:nth-last-child(-n+5) {
                border-top: 1px solid #B0AAA2;

            }
        }
    }

    div.document-page,
    div.account-page {
        margin-top: 70px;

        div.sidebar-panel.desktop {
            position: fixed;
            z-index: 10;
            background-color: white;
            border: none;
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
            bottom: 0;
            height: 60px;
            box-shadow: 0 1px 7px #d7cfc7;
            margin-bottom: 0;
            padding-bottom: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            h2 {
                display: none;
            }

            ul.sidebar-menu {
                display: flex;
                flex-direction: row;
                gap: 20px;
                margin: 0;
                padding: 0;
                text-align: center;
                align-items: center;
                width: 100%;
                justify-content: space-around;

                li {
                    padding-left: 0px;
                    white-space: normal;
                    line-height: 0px;
                    font-size: 10px;
                    margin-bottom: 0;

                    a span {
                        color: #E92C61;
                        font-size: 0.75em;
                        /* Smaller size for superscript effect */
                        vertical-align: super;
                        /* Moves the number up */

                        display: none;
                        /* to remove in V2 */
                    }

                    a span::before,
                    a span::after {
                        content: "";
                    }
                }

                :not(:first-child) {
                    /* border-left: 1px solid #cfcecd; */
                }
            }
        }

        div.sidebar-panel.mobile {
            display: none;
        }

        main.content {
            padding-left: 40px;
            padding-right: 40px;
            min-width: unset;
        }
    }

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

        div.total-a-regler {
            height: 260px;
            justify-content: flex-start;
        }

        div.zone-rib {
            height: 400px;
            justify-content: flex-start;
        }


    }

    main.regler-mon-solde-contenu {

        div.solde-client {
            div.inlietmoi-card-header {
                margin-right: 0;
            }
        }

        div.moyen-de-paiment-block {
            height: unset;
            margin-top: 30px;

            div.content-boxes.container {
                display: flex;
                flex-direction: row;
                margin-left: 0;
                margin-right: 0;
                justify-content: space-between;
                width: 100%;
                max-width: unset;

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

                    div.content-icon {
                        animation: none;
                    }
                }


                a.content-box,
                div.content-box {
                    display: flex;
                    flex-direction: row;
                    gap: unset;
                    height: 52px;
                    border-radius: 5px;
                    padding-left: 10px;
                    padding-right: 10px;
                    justify-content: flex-start;
                    width: 33%;

                    div.content-icon {
                        height: 73px;
                        padding-left: 0;
                        padding-right: 0;
                        width: fit-content;

                        img,
                        svg {
                            height: 30px;
                            width: 30px;
                        }
                    }

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

                    div.box-title.medium-light-bold.mobile {
                        display: block;
                        font-size: 15px;
                        height: unset;
                        padding-left: 5px;
                        text-align: left;
                    }

                    div.box-title.medium-light-bold:last-child {
                        padding-bottom: 0;
                    }
                }
            }
        }

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


            div.auto-debit-setup {
                width: 100%;
                gap: 13px;
                align-items: center;
                justify-content: center;

                div.flex-fill {
                    margin-top: 3px;
                }

                div#download-mandat-button {

                    button {}
                }
            }
        }
    }

    main.mon-solde-contenu {
        div.form-footer {
            margin-top: 68px;
        }
    }

    main#references-cnx {
        div.content-block {
            div.details {
                div.detail-section:nth-of-type(2) {
                    margin-left: 0;
                }
            }
        }
    }

    main.user-info-main {
        form.user-info-main-form {
            div.form-row {
                div.form-group:first-of-type {
                    padding-right: 5px;
                }

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

    main.document-contract-page {
        div.title-block {

            h3 {
                margin-top: 30px;
            }
        }

        div.appart-contactor-block {
            width: 100%;
            flex-direction: row;
            margin-bottom: 10px;

            div.appartement-zone {
                width: unset;
                margin-left: 0;
            }

            div.contractor-zone {
                width: unset;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-end;

            }
        }

        div.log-details,
        div.contract-details {

            div.data-row-c {
                ul.details-ug {
                    margin-bottom: 25px;

                    li {
                        div {
                            label {}

                            p {
                                width: 33.666667%;
                            }
                        }
                    }
                }
            }
        }
    }

    main.assurance-page-main {
        div.title-block {
            h3 {
                margin-top: 0px;
            }
        }

        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: 5px;
                        }

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


    main#ongoing-demandes {

        h1#title-saha {
            margin-left: 10px;
            margin-right: 10px;
            font-size: 24px;
        }

        div.card-block {
            margin-left: 0px;
            margin-right: 0px;
        }

        div.request-card {
            div.details {
                div.via-block {
                    width: 25%;
                    margin-right: auto;
                }
            }
        }

    }

    main#closed-demands-main {
        h1#title-saha {
            margin-left: 10px;
            margin-right: 10px;
            font-size: 24px;
        }

        div.card-block {
            margin-left: 0px;
            margin-right: 0px;
        }

        div.request-card {
            div.details {
                div.via-block {
                    width: 25%;
                    margin-right: auto;
                }
            }
        }
    }
}

@media (max-width: 492px) {
        ul#navbar-right-side {
            gap: 20px;
        }
        div .container-1 {
        div.content-block-forms {

            h2 {
                margin-left: 10px;
                margin-right: 10px;
                font-size: 20px;
            }

            form.rattach-form {
                margin-left: 10px;
                margin-right: 10px;

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

                    div.button-group {
                        display: flex;
                        flex-direction: column;
                        gap: 15px;
                        justify-content: center;
                        width: 100%;

                        button.contained-button {
                            width: 100%;
                        }

                        button.outlined-button {
                            width: 100%;
                        }
                    }

                }
            }
        }
    }


    div#container-2 {
        margin-left: 0;
        margin-right: 0;

        div#row {
            div.inlietmoi-card {
                padding-left: 15px;
                padding-right: 15px;
                width: unset;

                div.inlietmoi-card-header {
                    h3 {
                        font-size: 20px;
                    }

                    img {
                        max-width: 30px;
                        max-height: 30px;
                        height: 30px;
                        width: 30px;
                    }
                }
            }
        }
    }

    div.document-page,
    div.account-page {
        main#main-content {
            padding-left: 0px;
            padding-right: 0px;

            h1 {
                margin-bottom: 15px;
            }
        }



        div.sidebar-panel.desktop {
            h2 {
                font-size: 14px;
            }

            ul.sidebar-menu {
                li {
                    padding-left: 0px;
                    width: 25%;

                    a {
                        font-size: 14px;
                    }
                }
            }
        }





    }

    main.regler-mon-solde-contenu {
        padding-left: 0px;
        padding-right: 0px;

        h1 {
            padding-left: 5px;
        }

        div.solde-client {
            padding-left: 5px;
            padding-right: 5px;

            div.inlietmoi-card-header {

                h2 {
                    font-size: 18px;
                }
            }

            div.inlietmoi-card-content {
                p {
                    span {
                        span {}
                    }
                }
            }
        }

        div.moyen-de-paiment-block {


            div.content-boxes.container {
                flex-direction: column;
                width: 100%;


                a.content-box,
                div.content-box {
                    width: 100%;
                    margin-top: -13px;
                    border-radius: 0;
                    border-left: none;
                    border-right: none;

                    div.box-title.medium-light-bold.mobile {
                        margin-bottom: 0;
                    }

                    div.box-title.medium-light-bold:last-child {}
                }


            }
        }

        div.form-footer {


            div.auto-debit-setup {

                div {
                    img {
                        height: 45px;
                    }
                }

                div.flex-fill {
                    margin-left: 0;

                    h3 {
                        text-align: center;
                    }

                    p {
                        padding-left: 20px;

                    }
                }


                div.download-mandat-button {


                    button {
                        width: 100%;
                    }
                }
            }
        }
    }


    main#carte-bancaire-page {
        padding-left: 0;
        padding-right: 0;

        div.zone-rib {
            button {
                width: 100%;
            }
        }
    }


    main#identifiant-cnx {
        padding-left: 5px;
        padding-right: 0px;
    }

    main#mon-solde-page {
        padding-left: 0px;
        padding-right: 0px;

        h1 {
            padding-left: 5px;
        }

        div.table-echeances {
            div {
                button {
                    width: 100%;
                }
            }
        }

        div.form-footer {
            margin-top: 60px;
            width: 100%;

            div.auto-debit-setup {
                width: 100%;
                margin-right: 0;

                div.flex-fill {
                    width: 100%;

                    p.text-heebo-small-regular,
                    ol,
                    h3 {
                        margin-bottom: 0;
                        padding-left: 40px;
                    }

                    padding-left: 0;

                    div#download-mandat-button {
                        padding-left: 0;

                        button {
                            margin-left: 0;
                            width: 100%;
                        }
                    }
                }
            }
        }

    }

    main#references-cnx {
        padding-left: 0;
        padding-right: 0;

        h1 {
            padding-left: 5px;
        }

        div.form-footer {
            button {
                width: 100%;
                margin-bottom: 46px;
            }
        }
    }

    main#user-info-main {
        padding-left: 0;
        padding-right: 0;

        h1 {
            padding-left: 5px;
        }

        form.user-info-main-form {

            div.form-row {
                padding-left: 5px;
                padding-right: 5px;
            }

            div.form-group {
                padding-left: 5px;
                padding-right: 5px;
            }

            div.address-field {
                padding-left: 5px;
                padding-right: 5px;

                input {}

                label {}
            }

            p.info-text,
            p.correction-note {
                padding-left: 5px;
                padding-right: 5px;
            }

            div.form-footer {
                button {
                    width: 100%;
                }
            }

            p.data-note {
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    }


    main#assurance-page-main,
    main#mes-quittances-page,
    main#document-contract-page,
    main#document-avis-echeances {
        padding-left: 0;
        padding-right: 0;

        h1 {
            padding-left: 0px;
        }

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

            }

            button {
                width: 100%;
            }
        }

        div.document-block {
            div {
                ul {
                    li {
                        p {
                            span.av-ech-span {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }

    main#assurance-page-main {
        div.new-attestation-block {
            div {
                form {
                    div.form-footer {
                        button {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    main#document-contract-page {
        div.title-block {

            h3 {
                margin-top: 0px;
            }
        }
    }

    main#nouvelle-demande-main {
        padding-left: 5px;
        padding-right: 5px;

        h1 {
            padding-left: 0px;
            margin-bottom: 30px;
        }

        form {
            p {
                margin-bottom: 30px;
            }

            div.motif-block {
                margin-bottom: 0;
            }
        }

    }

    main#nouvelle-demande-main {
        div.form-footer {
            button.contained-button {
                width: 100%;
            }
        }
    }

    main.closed-demands-main,
    main.ongoing-demandes {
        div.form-footer {

            button.outlined-button {
                width: 100%;
            }
        }
    }

}

@media (max-width: 1280px) {
    div.container-2 {
        height: unset;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: 30px;
        margin-right: 30px;

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

            div.inlietmoi-card {
                min-height: 359px;
            }

            div.inlietmoi-card:nth-child(odd) {
                margin-left: 0;
                border-right: 1px #B0AAA2 solid;
                padding-right: 19px;
            }

            div.inlietmoi-card:nth-child(even) {
                margin-left: 20px;
                border-right: 0;
                padding-right: 0;
            }

            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-child(3) {
                margin-left: 0;
                padding-right: 19px;
                border-right: 1px solid transparent;
                background:
                    /* Top border gradient */
                    linear-gradient(to right, #B0AAA2 calc(100% - 20px), white 17px) top / 100% 1px no-repeat,

                    /* Right border gradient (20px white on top, rest #B0AAA2) */
                    linear-gradient(to bottom, white 20px, #B0AAA2 20px) right / 1px 100% no-repeat;

                div.inlietmoi-card-header {
                    padding-top: 26px;
                }

            }

            div.inlietmoi-card:nth-last-child(-n+2) {
                height: 324px;
                min-height: unset;
            }

            div.mesdemandes-card {
                div.inlietmoi-card-footer {
                    button.outlined-button {
                        margin-top: 45px;
                    }
                }
            }
        }
    }

    div.document-page,
    div.account-page {
        div.sidebar-panel {
            padding-left: 20px;
            padding-right: 10px;
            width: 200px;
        }

        main.content {
            padding-left: 20px;
            padding-right: 20px;
            min-width: unset;
        }
    }

    main.regler-mon-solde-contenu {
        div.form-footer {
            margin-left: 0;
            margin-right: 0;

            div.auto-debit-setup {
                margin-left: 0;
                margin-right: 0;
            }
        }
    }

    main.mon-solde-contenu {
        div.form-footer {
            margin-left: 0;
        }
    }
}

@media (max-width: 1050px) {

    main.closed-demands-main,
    main.ongoing-demandes {
        div.request-card {
            padding-left: 5px;
            padding-right: 5px;

            div.title-area {
                flex-direction: column;

                button {
                    justify-content: center;
                }
            }
        }
    }

    main.document-contract-page {

        div.log-details,
        div.contract-details {
            div.data-row-c {
                ul.details-ug {
                    li {
                        div {
                            p.with-voir-mon-solde {
                                width: unset;
                            }

                            a {
                                margin-left: auto;
                                width: fit-content;
                            }
                        }
                    }
                }
            }
        }
    }

    main.mon-solde-contenu {
        div.form-footer {
            div.auto-debit-setup {
                margin-left: 0;

                div.flex-fill {
                    div#download-mandat-button {
                        padding-left: 10%;
                        justify-content: flex-start;
                        display: flex;
                    }

                }
            }
        }

        div.inlietmoi-card-content {
            div {
                div.accordion {
                    div.accordion-item {

                        div.accordion-header {
                            span.avis-echeances {
                                display: inline-block;
                                width: 230px;

                                span.sub-info {
                                    margin-left: 0;
                                }
                            }
                        }

                        table.details-table {
                            thead {
                                tr {
                                    th.sub-info {
                                        padding-left: 30px;
                                    }
                                }
                            }

                            tbody {
                                tr {
                                    td.text-heebo-small-regular {
                                        padding-left: 30px;
                                    }
                                }
                            }
                        }
                    }
                }


            }
        }
    }

    main.regler-mon-solde-contenu {

        div.solde-client {
            justify-content: space-between;
        }

        div.moyen-de-paiment-block {
            div.content-boxes.container {
                margin-top: 0px;

                a,
                div {
                    width: 175px;
                    height: 120px;
                    padding: 10px;
                    padding-top: 0;
                    padding-bottom: 0;

                    div.content-icon {
                        margin-bottom: 0px;

                        img,
                        svg {
                            height: 30px;
                            width: auto;
                        }
                    }

                    div.box-title.medium-light-bold {
                        font-size: 15px;
                    }

                    div.box-title.medium-light-bold:nth-child(3) {
                        padding-bottom: 20px;
                    }


                }
            }
        }

        div.form-footer {
            div.auto-debit-setup {
                height: 275px;

                div.download-mandat-button {
                    margin-left: 0;
                    display: flex;
                    justify-content: flex-start;

                    button {
                        margin-right: 0;
                        margin-left: 0;
                    }
                }
            }
        }
    }

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

@media (max-width: 1100px) {

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

@media (max-width: 910px) {

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

@media (max-width: 768px) {
    
    main.mes-quittances-page,
    main.document-contract-page,
    main.document-avis-echeances {
        background: linear-gradient(to bottom, transparent calc(100% - 200px), #F5F3F2 calc(100% - 313px));
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        body, .wrapper, .navbar-custom {
            max-width: 100% !important;
        }

        #logoinli {
            margin-left: 25px;
        }

        ul#navbar-right-side {
            gap: 20px;
            margin-right: 25px;
        }

        footer {
            padding: 0 25px;
        }
    }
}


    @media (max-width: 602px) {
        main.mon-solde-contenu {
            div .inlietmoi-card-content {
            div {
                div.accordion {


                    div.accordion-item {

                        div.accordion-header {
                            flex-direction: column;
                            width: 100%;
                            min-height: 100px;

                            span.avis-echeances {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                width: 100%;

                                span.av-eche {
                                    display: none;
                                }

                                strong {
                                    margin-right: auto;
                                    font-size: 13px;
                                }

                                span.sub-info {
                                    margin-left: auto;
                                    font-size: 10px;
                                }
                            }

                            span.money-to-pay {
                                width: 100%;
                                justify-content: flex-end;

                                button.pay-btn {
                                    margin-right: auto;
                                }
                            }
                        }

                        table.details-table {
                            thead {
                                tr {
                                    th.sub-info {
                                        padding-left: 18px;
                                    }

                                    th.debit-credit {
                                        padding-left: 10px;
                                        padding-right: 10px;
                                    }
                                }
                            }

                            tbody {
                                tr {
                                    td.text-heebo-small-regular {
                                        width: 50%;
                                        padding-left: 18px;
                                    }

                                    td.debit {
                                        width: 50px;
                                        padding-left: 10px;
                                        padding-right: 10px;
                                        font-size: 12px;
                                    }
                                }
                            }
                        }
                    }
                }


            }
        }
    }
}

@media (max-width: 410px) {

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

@media (max-width: 334px) {

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

@media (max-width: 270px) {

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



/**


@media (max-width: 1050px) {
    main.regler-mon-solde-contenu {
    
        div.solde-client {
            
    
            div.inlietmoi-card-header {
    
                h2 {
                  
                }
            }
    
            div.inlietmoi-card-content {
                p {
                    span {
                        span {
                            
                        }
                    }
                }
            }
        }
    
        div.moyen-de-paiment-block {
            
    
            div.content-boxes.container {
               
    
                a.content-box:hover,
                div.content-box:hover {
                    
    
                    
                }
    
    
            }
        }
    
        div.form-footer {
            
    
            div.auto-debit-setup {
                
                div.flex-fill {
                    
                }
    
                div.flex-fill :where(.text-heebo-small-regular) {
                   
                }
    
                p.text-heebo-small-regular {
                    
                }
    
                div.download-mandat-button {
                   
    
                    button {
                      
                    }
                }
            }
        }
    }
    
}


**/