/* feuille.css */

/* Base styles (applies to all screen sizes) */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: white !important;
}

.layout-module nav.left {
    padding: 0;
    margin: 0px;
}

.mb-5.content.mt-2{
    margin-top: 77px !important;
}

/* Small devices (portrait tablets and large phones, 600px and below) */
@media only screen and (max-width: 600px) {

    body {
        background-color: #f4f4f4;
    }

    .container {
        padding: 10px;
        font-size: 14px;
    }

    .mx-5.px-5 {
        margin: 0px !important;
        padding: 0px !important;
    }

    .arrow-steps .step {
        width: 95%;
        margin: 5px;
    }
}

/* Medium devices (landscape tablets, 768px and below) */
@media only screen and (max-width: 768px) {

    li.left-li:hover {
        transition: 0.6s;
        border : 1px solid #003f62;
        transform: unset;
        box-shadow: unset;
    }

    .mb-5.content.mt-2{
        margin-top: 62px !important;
    }

    .layout-module nav.left {
        padding: 0;
        margin: 0;
    }

    .container {
        max-width: 90%;
        margin: auto;
    }

    .menu {
        display: flex;
        flex-direction: column;
    }

    .mx-5.px-5 {
        margin: 0px !important;
        padding: 0px !important;
    }

    .arrow-steps .step {
        width: 95%;
        margin: 5px;
    }

    .mb-5.content.mt-2 {
        margin-top: 73px !important;
    }
    
    /* 22-01-2025  */
    .checkbox-element .checkmark {
        left: -37px;
    }

    .checkbox-element .container {
        left: 25px;
    }

    .empty_div{
        display: none;
    }
    
}

/* Large devices (desktops, 1024px and below) */
@media only screen and (max-width: 1024px) {
    header {
        font-size: 18px;
    }

    .sidebar {
        display: none;
    }
    .container{
        padding: 0 !important;
        width: 100%;
        max-width: unset !important;
    }
}

/* Extra large devices (wide desktops, 1200px and above) */
@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
    .mb-5.content.mt-2{
        margin-top: 77px !important;
    }
}

@media only screen and (max-width: 1280px) {


    .layout-module nav.left {
        position: unset;
        width: 100%;
    }

    .layout-module nav.left ul, .layout-module nav.right ul {
        /* display: flex;
        overflow-x: auto !important; */

        /* display: none;
        position: absolute;
        z-index: 1;
        overflow-x: auto !important;
        background: white;
        width: 81%;
        padding: 0 5px;
        box-shadow: 2px 4px 20px 0px black;
        border-radius: 20px; */

        display: flex;
        overflow-x: scroll !important;
        background: white;
        border: 1px solid lightgray;
    }

    .layout-module nav.left .title-sidebar{
        display: none;
    }

    .layout-module article.main-content {
        width: 100%;
        position: unset;
    }

    .layout-module nav.right {
        display: none;
    }

    .banner {
        position: relative;
    }

    .text-bottom-left {
        font-size: 34px;
        position: absolute;
        bottom: 0;
        padding: 0 0px;
    }

    .details-module{
        position: unset !important;
        top: 0 !important;
        padding: 0 5px;
    }

    .details-module .historique {
        width: 100%;
        padding: 5px;
        font-size: 10px;
    }
    .details-module .historique table *{
        font-size: 9px;
    }

    .details-module .charts {
        width: 100%;
        float: left;
        padding: 5px;
        margin: 20px 0px;
        font-size: 10px;
    }

    .details-module .card-title {
        font-size: 17px;
        font-weight: bold;
    }
    
}