body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

#container {
    display: flex;
    width: 100%;
    height: 100vh;
}

#empty-section {
    width: 20%;
    background-color: #f4f4f4;
}

#map-container {
    width: 80%;
    height: 500px;
    position: relative;
}

#map {
    width: 100%;
    height: 115%;
    position: relative;
}

#legend-container {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

    #legend-container h3 {
        margin-top: 0;
        font-size: 16px;
    }

@media print {
    html, body {
        height: auto !important;
        overflow: visible !important;
    }

    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    @page {
        margin: 10px 0 !important;
    }

    .item-all-cat {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-evenly !important;
        align-items: center !important;
        position: static !important;
        width: 100% !important;
        z-index: 9999 !important;
    }

        .item-all-cat .nav-logo {
            flex: 0 0 17% !important;
            max-width: 17% !important;
            box-sizing: border-box !important;
        }

        .item-all-cat .nav-icon {
            flex: 0 0 83% !important;
            max-width: 83% !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
        }

        .item-all-cat .it {
            flex: 0 0 25% !important;
            max-width: 25% !important;
            box-sizing: border-box !important;
        }
        /* قيمة المؤشر              000000000000000000000000000000000000000000000000000 */
        .item-all-cat #gauge2, #gauge3 {
            width: 150px !important;
            height: 85px !important;
        }

        .item-all-cat .it .label, .value-label {
            margin-left: 50% !important;
        }

        .item-all-cat .it h3 {
            font-weight: 700 !important;
            font-size: 18px !important;
        }

    .item-all-card .header-brand {
        width: 120% !important;
    }

    .item-all-card .header-brand-img {
        width: 120% !important;
        margin-left: 40px !important;
    }

    .app-content {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .app-sidebar {
        display: none !important;
    }

    .side-app {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

        .side-app .blabalbal {
            display: none !important;
        }

    .tab-content > .tab-pane {
        display: block !important;
    }

    .tab-content {
        display: flex !important;
        flex-direction: column !important;
    }

    #tab-41 {
        width: 100% !important;
        order: 2 !important;
        display: flex !important;
        flex-direction: column-reverse !important;
        flex-wrap: wrap !important;
    }

        #tab-41 .chartest {
            margin-top: 100px !important;
        }

    .anone {
        display: none !important;
    }

    #tab-41 .tab-pane {
        width: 100% !important;
        position: relative !important;
        margin-top: 100px !important;
    }

        #tab-41 .tab-pane .chartjs-render-monitor {
            width: 100% !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
        }

    /* data of table between data charts */

    #tab-41 #div2 {
        margin-top: 10px !important;
    }

    #tab-41 #art {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        flex-direction: row !important;
    }
    #tab-41 .bth{
        display: none !important;
    }

    .mt-10 .col-xl-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
        height: auto !important;
        
        /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm */
    }
    .mt-10 .d-none {
        display: block !important;
    }

        .mt-10 .col-xl-6 #chart-bar-stacked {
            width: 100% !important;
        }

        .mt-10 .col-xl-6 .card .card-header {
            height: 70px !important;
        }

        .mt-10 .col-xl-6 #chart-pie2 {
            width: 100% !important;
            height: auto !important;
            transform: scale(1) !important;
            margin-top: 80px !important;
        }

    #tab-61 {
        order: 1 !important;
        height: 575px !important;
        max-height: 575px !important;
        /* margin-bottom: px !important; */
        overflow: hidden !important;
    }

        #tab-61 .second .table {
            font-size: 16px !important;
            line-height: 21px !important;
        }
        #tab-61 h4 {
            font-size: 18px !important;
            line-height: 21px !important;
        }

    #tab-71 {
        display: none !important;
    }

    .view-print-map .item-all-cat #gauge2 {
        width: 150px !important;
        height: 85px !important;
    }

    .view-print-map .item-all-cat #gauge3 {
        width: 150px !important;
        height: 85px !important;
    }

    .item-all-cat #changeRateImg {
        width: 175px !important;
        height: 103px !important;
        margin-top: 5px !important;
    }

    .item-all-cat .it .label {
        margin-left: -13px !important;
    }

        .item-all-cat .it .label br {
            display: block !important;
        }

    .item-all-cat .it .value-label {
        font-size: 18px !important;
        margin-left: 0px !important;
        position: absolute !important;
        top: 43% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
    }

    .view-print-map #tab-41 {
        display: none !important;
    }

    .view-print-map #tab-61 {
        display: none !important;
    }

    .view-print-map #tab-71 {
        order: 1 !important;
        margin-top: 100px !important;
        display: block !important;
    }

        .view-print-map #tab-71 #container {
            height: 700px !important;
            max-height: 700px !important;
        }

        .view-print-map #tab-71 #map-container {
            height: 700px !important;
            max-height: 700px !important;
        }

        .view-print-map #tab-71 .col-lg-3 .table th {
            font-size: 12px !important;
            font-weight: 300 !important;
        }

    .bova .views {
        display: none !important;
    }
}
