/* arabic */
@font-face {
    font-family: 'nebras';
    font-weight: 200;
    src: url('../../fonst/NebrasSerif-ExtraLight.otf') format('opentype');
}

@font-face {
    font-family: 'nebras';
    font-weight: 300;
    src: url('../../fonst/NebrasSerif-Light.otf') format('opentype');
}

@font-face {
    font-family: 'nebras';
    font-weight: 400;
    src: url('.../../fonst/NebrasSerif-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'nebras';
    font-weight: 500;
    src: url('../../fonst/NebrasSerif-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'nebras';
    font-weight: 700;
    src: url('../../fonst/NebrasSerif-SemiBold.otf') format('opentype');
}

@font-face {
    font-family: 'nebras';
    font-weight: 800;
    src: url('../../fonst/Nebras-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'nebras';
    font-weight: 900;
    src: url('../../fonst/NebrasSerif-ExtraBold.otf') format('opentype');
}


@font-face {
    font-family: 'bahij';
    font-weight: 800;
    src: url('../../fonst/Bahij_TheSansArabic-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'bahij';
    font-weight: 500;
    src: url('../../fonst/Bahij_TheSansArabic-Plain.ttf') format('truetype');
}

:root {
    --border_radius: 50px;
    --font_size: 14px;
}

body {
    margin: 0;
    padding: 0;
    direction: rtl;
    font-family: 'nebras';
    font-size: var(--font_size);
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.mapboxgl-popup {
    max-width: 50% !important;
    font: 12px/20px 'nebras';
}

#menu {
    position: absolute;
    background: #efefef;
    padding: 10px;
    font-family: 'nebras';
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
    border-bottom-color: #000;
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-top-color: #000;
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: #000;
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: #000;
}

.marker {
    background-image: url('marker.svg');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}



.mapboxgl-popup-content {
    text-align: center;
    font-family: 'nebras';
}

.bg-light {
    background: transparent !important;
    z-index: 1000;
    padding-top: 32px;
    padding-bottom: 20px;
}


.logoImg {
    width: 90px;
}

.listBtns {
    margin-right: auto;
}

.fullWidth {
    width: 100%;
}

.textRight {
    text-align: right;
}

.textCenter {
    text-align: center;
    justify-content: center;
    display: flex;
}

.alignCenter {
    align-items: center;
}

.searchBtn {
    position: absolute;
    top: 6px;
    left: 15px;
    border-radius: var(--border_radius);
    width: 95px;
}

.searchInput {
    height: 50px;
    border-radius: 50px;
    padding-right: 20px;
}

.searchInput:focus {
    border: unset;
    box-shadow: unset;
}

.searchInput::placeholder {
    color: #A7A7A7;
    font-size: var(--font_size);
    font-weight: 500;
}

.searchBtn.btn-success {
    color: #fff;
    background-color: #8D9DA0;
    border-color: #8D9DA0;
    font-size: var(--font_size);
    font-weight: 500;
}

.searchBtn.btn-success:focus {
    box-shadow: unset;
}

.pdRight_5 {
    padding-right: 5px;
}

.filterBtn {
    background-color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.filterImg {
    width: 25px;
}

.reportsBtn {
    background-color: #5CC66A;
    width: auto;
    color: #fff;
    border-radius: var(--border_radius);
    font-size: var(--font_size);
    font-weight: 700;
    padding: 10px 15px;
    left: 50px;
    position: relative;
}

.reportsBtn:hover {
    color: #fff;
}

.graphImg {
    width: 25px;
    margin-left: 10px;
}

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 516px;
    height: 90%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 90%;
    overflow-y: hidden;
    z-index: 2;
    box-shadow: 1px 4px 20px rgba(0, 0, 0, 0.13);
    border: unset !important;
    border-radius: 15px;
}

.modal.left .modal-body,
.modal.right .modal-body {
    padding: 0 15px 30px;
}

/*Left*/
.modal.left.fade .modal-dialog {
    left: -320px;
    top: 100px;
    -webkit-transition: opacity 0.4s linear, left 0.4s ease-out;
    -moz-transition: opacity 0.4s linear, left 0.4s ease-out;
    -o-transition: opacity 0.4s linear, left 0.4s ease-out;
    transition: opacity 0.4s linear, left 0.4s ease-out;
}

.modal.left.fade.show .modal-dialog {
    left: 3%;
    top: 100px;
}

.modal.left.fade.show .modal-dialog {
    animation-name: fadeLeft;
    animation-duration: .6s;
    animation-timing-function: linear;
    animation-delay: 0;
    /* animation-iteration-count: infinite; */
    animation-direction: alternate;
    transition: opacity 0.4s linear, left 0.4s ease-out;
}

/*Right*/
.modal.right.fade .modal-dialog {
    right: -320px;
    top: 100px;
    -webkit-transition: opacity 0.4s linear, right 0.4s ease-out;
    -moz-transition: opacity 0.4s linear, right 0.4s ease-out;
    -o-transition: opacity 0.4s linear, right 0.4s ease-out;
    transition: opacity 0.4s linear, right 0.4s ease-out;
}

.modal.right.fade.show .modal-dialog {
    right: 0;
    top: 0;
}

.modal.right.fade.show .modal-dialog {
    animation-name: fadeRight;
    animation-duration: .6s;
    animation-timing-function: linear;
    animation-delay: 0;
    /* animation-iteration-count: infinite; */
    animation-direction: alternate;
    transition: opacity 0.4s linear, right 0.4s ease-out;
}

@keyframes fadeRight {
    0% {
        right: -10%;
    }

    60% {
        right: 4%;
    }

    100% {
        right: 0;
    }
}

@keyframes fadeLeft {
    0% {
        left: -10%;
    }

    60% {
        left: 4%;
    }

    100% {
        left: 3%;
    }
}

.modal-body {
    overflow-y: scroll;
    scrollbar-width: thin;
}

.modal-body::-webkit-scrollbar {
    width: 5px;
    direction: rtl;
}

.modal-body::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

.modal-body::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: rgb(163, 163, 163);
}

.modal-content {
    padding: 0 24px;
}
.modal-header{
    padding: 16px 0;
}

/* ----- MODAL STYLE ----- */

.closeFilter.close {
    position: absolute;
    top: 15%;
    z-index: 1;
    opacity: 1;
    cursor: pointer !important;
    float: right;
    left: -47px;
}

.closeReport.close {
    position: absolute;
    top: 30%;
    z-index: 1;
    opacity: 1;
    cursor: pointer !important;
    float: right;
    right: -47px;
}

.close1 {
    width: 55px;
}

.newForm {
    text-align: center;
}

.newForm .form-control {
    background: rgba(15, 125, 148, 0.05);
    border: unset;
    border-radius: var(--border_radius);
    height: 45px;
    padding: 10px 15px;
    color: #A7A7A7;
    appearance: none;
}

.form-control:focus {
    border: unset;
    box-shadow: none;
}

.newForm .form-group {
    position: relative;
    text-align: right;
}

.selectArrow {
    position: absolute;
    left: 10px;
    top: 45px;
}

.filterSubmit {
    width: 95%;
    background-color: #5CC66A;
    border-radius: var(--border_radius);
    height: 50px;
    color: #fff;
}

.changestyle {
    position: absolute;
    left: 10px;
}

.reportsModal.modal.left .modal-dialog {
    width: 800px;
}

.reportTitle {
    text-align: center;
    font-size: 22px;
    color: #0E4F5D;
}

.reportSubtitle {
    text-align: center;
    font-size: var(--font_size);
    color: #7F8B93;
}

.reportsModal.modal.left .modal-body {
    padding: 15px 45px 30px;
    text-align: center;
}

.groupBtns {
    display: inline-block;
    margin-top: 20px;
}

.catBtn,
.catBtn:hover,
.catBtn:focus {
    border-radius: var(--border_radius);
    font-size: var(--font_size);
    padding: 5px 15px;
    box-shadow: none;
    margin-left: 8px;
    margin-top: 10px;
}

.notActive,
.notActive:hover,
.notActive:focus {
    background-color: #F4F6F6;
    color: #8D9DA0;
}

.catActive,
.catActive:hover,
.catActive:focus {
    background-color: #5CC66A;
    color: #fff;
}

.secondSection {
    margin-top: 30px;
    justify-content: space-between;
}

.colClasses {
    background-color: rgba(92, 198, 106, 0.05);
    border: 1px solid rgba(92, 198, 106, 0.15);

}

.colBuldings {
    background-color: rgba(0, 133, 160, 0.05);
    border: 1px solid rgba(0, 133, 160, 0.15);

}

.colStands {
    background-color: rgba(141, 88, 120, 0.05);
    border: 1px solid rgba(141, 88, 120, 0.15);

}

.colSections {
    border-radius: 15px;
    padding: 15px 20px;
}

.numberDiv {
    font-size: 28px;
    margin-bottom: 5px;
    font-weight: bold;
}

.txtDiv {
    font-size: 13px;
    color: #292D32;
}

.colClasses .numberDiv {
    color: #5CC66A;
}

.colBuldings .numberDiv {
    color: #0085A0;
}

.colStands .numberDiv {
    color: #8D5878;
}

#myChart {
    width: 100% !important;
    height: 200px !important;
}

#myChart2 {
    width: 100% !important;
    height: auto !important;
    max-width: unset;
}

.chartSection {
    margin-top: 30px;
}

.chartCol {
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 20px;
}

.chartSection {
    justify-content: space-between;
}

.chartTitle {
    color: #4E4E4E;
    font-size: 13px;
    margin-bottom: 20px;
}

.chartNum {
    font-size: 13px;
    color: #292D32;
}

.chartTxt {
    font-size: 12px;
}

.blueChart .chartTxt {
    color: #36A2EB;
}

.redChart .chartTxt {
    color: #FF6384;
}

.yellowChart .chartTxt {
    color: #B48F39;
}

.mapboxgl-popup {
    /* max-width: unset !important; */
    width: 410px;
    /* transform: translate(35%, -100%) translate(680px, 800px) !important;  */
    /* transform: translate(-50%, -100%) translate(512px, 438px) !important; */
    height: 90%;
    border-radius: 15px;
    z-index: 1000;
}




@media screen and (max-width: 600px) and (min-width: 300px) {
    .mapboxgl-popup {
        transform:
            translate(35%, -100%) translate(810px, 827px) !important
    }
}



.mapboxgl-popup-content {
    border-radius: 15px;
}

.mapboxgl-popup::after {
    content: "";
    display: block;
    height: 100000px;
    position: absolute;
    top: -500%;
    left: -500%;
    width: 10000px;
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.20);
    filter: blur(272px);
}

.mapboxgl-popup-content {
    position: relative;
    z-index: 1;
    height: auto;
}

.mapboxgl-popup .reportTitle {
    color: #000;
    text-align: center;
    font-family: "nebras";
    font-size: 24px;
    font-weight: 800;
    line-height: 125%;
    margin-bottom: 8px;
}

.mapboxgl-popup {
    animation-name: fadeIn;
    animation-duration: .6s;
    animation-timing-function: linear;
    animation-delay: 0;
    /* animation-iteration-count: infinite; */
    animation-direction: alternate;
    transition: opacity 0.4s linear, transform 0.4s ease-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.rightCol {
    text-align: right;
    color: #8094AE;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.detailsRow {
    /* padding: 12px 15px; */
    border-bottom: unset;
    margin-left: 0;
    margin-right: 0;
    font-weight: 200;
}

.mapboxgl-popup-content {
    padding: 24px 32px;
    background-image: url('../../images/popup_back.png');
    background-repeat: no-repeat;
    background-position: top right;
}

.leftCol {
    text-align: left;
    color: #292D32;
    font-size: 13px;
}

.statusCol {
    color: #2FAB86;
    font-size: 11px;
    display: flex;
    justify-content: end;
}

.txtGreen {
    width: 100px;
    text-align: center;
    padding: 5px;
    background-color: #E6F2EE;
    border-radius: var(--border_radius);
}

.checkStatus {
    margin-left: 5px;
}

.lastRow {
    border-bottom: none;
}

.mapboxgl-popup-tip {
    display: none;
}

.mapboxgl-popup-close-button {
    left: 16px;
    right: unset;
    background-image: url('../../images/close-circle.svg');
    height: 40px;
    width: 40px;
    background-size: contain;
    top: 16px;
    font-size: 0;
    z-index: 0;
    box-shadow: unset;
    padding: 0;
    margin-bottom: 24px;
}

.mapboxgl-popup-close-button:focus-visible {
    outline: unset;
}

.mapboxgl-popup-close-button:hover {
    background-color: transparent;
}

/* dark mode */

.darkMode.modal-open .modal {
    background-color: #ddccc81c;
}

.darkMode .modal-content {
    background-color: #2D2D2D;
}

.darkMode .close1 path {
    stroke: #fff;
}

.darkMode .close1 .path1 {
    fill: #717171;
    stroke: #717171;
}

.darkMode .newForm label {
    color: #fff;
}

.darkMode .reportTitle,
.darkMode .txtDiv,
.darkMode .chartTitle,
.darkMode .chartNum {
    color: #fff;
}

.darkMode .chartCol {
    border: 1px solid #414141;
}

.darkMode .mapboxgl-popup::after {
    background-color: rgba(5, 73, 87, 0.6);
}

.darkMode .mapboxgl-popup-content {
    background-color: #2D2D2D;
}

.darkMode .rightCol {
    color: #A7A7A7;
}

.darkMode .leftCol {
    color: #fff;
}

.darkMode .statusCol {
    color: #2FAB86;
}

.darkMode #slide1:checked~.side-controls label:nth-of-type(2),
.darkMode #slide2:checked~.side-controls label:nth-of-type(3),
.darkMode #slide3:checked~.side-controls label:nth-of-type(4),
.darkMode #slide4:checked~.side-controls label:nth-of-type(5),
.darkMode #slide5:checked~.side-controls label:nth-of-type(6),
.darkMode #slide6:checked~.side-controls label:nth-of-type(7),
.darkMode #slide7:checked~.side-controls label:nth-of-type(8),
.darkMode #slide8:checked~.side-controls label:nth-of-type(9),
.darkMode #slide10:checked~.side-controls label:nth-of-type(11),
.darkMode #slide11:checked~.side-controls label:nth-of-type(12),
.darkMode #slide12:checked~.side-controls label:nth-of-type(13),
.darkMode #slide14:checked~.side-controls label:nth-of-type(15),
.darkMode #slide15:checked~.side-controls label:nth-of-type(1) {
    border-left: 10px solid #fff;
}

.darkMode #slide1:checked~.side-controls label:nth-of-type(15),
.darkMode #slide2:checked~.side-controls label:nth-of-type(1),
.darkMode #slide3:checked~.side-controls label:nth-of-type(2),
.darkMode #slide4:checked~.side-controls label:nth-of-type(3),
.darkMode #slide5:checked~.side-controls label:nth-of-type(4),
.darkMode #slide6:checked~.side-controls label:nth-of-type(5),
.darkMode #slide7:checked~.side-controls label:nth-of-type(6),
.darkMode #slide8:checked~.side-controls label:nth-of-type(7),
.darkMode #slide9:checked~.side-controls label:nth-of-type(8),
.darkMode #slide10:checked~.side-controls label:nth-of-type(9),
.darkMode #slide11:checked~.side-controls label:nth-of-type(10),
.darkMode #slide12:checked~.side-controls label:nth-of-type(11),
.darkMode #slide13:checked~.side-controls label:nth-of-type(12),
.darkMode #slide14:checked~.side-controls label:nth-of-type(13),
.darkMode #slide15:checked~.side-controls label:nth-of-type(14) {
    border-right: 10px solid #fff;
}

.darkMode .controls label {
    background: #fff;
}

.darkMode .mapboxgl-popup-close-button {
    background-image: url('../../images/close-circle1.svg');
    color: #fff;
}

/* slider */
#contentBlock {
    direction: ltr;
    /* min-height: 210px; */
    text-align: right;
}

input[type="radio"] {
    display: none;
}

.slider {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
}

.img {
    width: 300px;
    height: 150px;
    transition: all .6s;
    border-radius: 15px;
}

/* .img1 {
    background: url('https://images.pexels.com/photos/257988/pexels-photo-257988.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
}

.img2 {
    background: url('https://images.pexels.com/photos/57409/ford-mustang-stallion-red-57409.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
}

.img3 {
    background: url('https://images.pexels.com/photos/241316/pexels-photo-241316.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
}

.img4 {
    background: url('https://images.pexels.com/photos/1149831/pexels-photo-1149831.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
}

.img5 {
    background: url('https://images.pexels.com/photos/1005630/pexels-photo-1005630.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
} */



.img1,
.img2,
.img3,
.img4,
.img5,
.img6,
.img7,
.img9,
.img10,
.img11,
.img12,
.img13,
.img14,
.img15 {
    background-size: cover;
    position: absolute;
    opacity: 0;
}

.side-controls label {
    position: absolute;
    top: 125px;
    margin-top: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: 1;
    cursor: pointer;
    transition: opacity .6s;
}

.side-controls label:hover {
    opacity: 0.4;
}

#slide1:checked~.side-controls label:nth-of-type(15),
#slide2:checked~.side-controls label:nth-of-type(1),
#slide3:checked~.side-controls label:nth-of-type(2),
#slide4:checked~.side-controls label:nth-of-type(3),
#slide5:checked~.side-controls label:nth-of-type(4),
#slide6:checked~.side-controls label:nth-of-type(5),
#slide7:checked~.side-controls label:nth-of-type(6),
#slide8:checked~.side-controls label:nth-of-type(7),
#slide9:checked~.side-controls label:nth-of-type(8),
#slide10:checked~.side-controls label:nth-of-type(9),
#slide11:checked~.side-controls label:nth-of-type(10),
#slide12:checked~.side-controls label:nth-of-type(11),
#slide13:checked~.side-controls label:nth-of-type(12),
#slide14:checked~.side-controls label:nth-of-type(13),
#slide15:checked~.side-controls label:nth-of-type(14) {
    border-right: 10px solid #0F7D94;
    left: 60px;
}

#slide1:checked~.side-controls label:nth-of-type(2),
#slide2:checked~.side-controls label:nth-of-type(3),
#slide3:checked~.side-controls label:nth-of-type(4),
#slide4:checked~.side-controls label:nth-of-type(5),
#slide5:checked~.side-controls label:nth-of-type(6),
#slide6:checked~.side-controls label:nth-of-type(7),
#slide7:checked~.side-controls label:nth-of-type(8),
#slide8:checked~.side-controls label:nth-of-type(9),
#slide9:checked~.side-controls label:nth-of-type(10),
#slide10:checked~.side-controls label:nth-of-type(11),
#slide11:checked~.side-controls label:nth-of-type(12),
#slide12:checked~.side-controls label:nth-of-type(13),
#slide13:checked~.side-controls label:nth-of-type(14),
#slide14:checked~.side-controls label:nth-of-type(15),
#slide15:checked~.side-controls label:nth-of-type(1) {
    border-left: 10px solid #0F7D94;
    right: 60px;
}

.controls {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 45%;
}

.controls label {
    display: inline-block;
    padding: 5px;
    background: rgba(0, 0, 0, .3);
    width: 11px;
    height: 11px;
    transition: all .4s;
    border-radius: var(--border_radius);
}

#slide1:checked~.slider .img1,
#slide2:checked~.slider .img2,
#slide3:checked~.slider .img3,
#slide4:checked~.slider .img4,
#slide5:checked~.slider .img5,
#slide6:checked~.slider .img6,
#slide7:checked~.slider .img7,
#slide8:checked~.slider .img8,
#slide9:checked~.slider .img9,
#slide10:checked~.slider .img10,
#slide11:checked~.slider .img11,
#slide12:checked~.slider .img12,
#slide13:checked~.slider .img13,
#slide14:checked~.slider .img14,
#slide15:checked~.slider .img15 {
    opacity: 1;
}

#slide1:checked~.controls label:nth-of-type(1),
#slide2:checked~.controls label:nth-of-type(2),
#slide3:checked~.controls label:nth-of-type(3),
#slide4:checked~.controls label:nth-of-type(4),
#slide5:checked~.controls label:nth-of-type(5),
#slide6:checked~.controls label:nth-of-type(6),
#slide7:checked~.controls label:nth-of-type(7),
#slide8:checked~.controls label:nth-of-type(8),
#slide9:checked~.controls label:nth-of-type(9),
#slide10:checked~.controls label:nth-of-type(10),
#slide11:checked~.controls label:nth-of-type(11),
#slide12:checked~.controls label:nth-of-type(12),
#slide13:checked~.controls label:nth-of-type(13),
#slide14:checked~.controls label:nth-of-type(14),
#slide15:checked~.controls label:nth-of-type(15) {
    background: #5CC66A;
    width: 23px;
}

#slide1:checked~.slider .captions .caption1,
#slide2:checked~.slider .captions .caption2,
#slide3:checked~.slider .captions .caption3,
#slide4:checked~.slider .captions .caption4,
#slide5:checked~.slider .captions .caption5,
#slide6:checked~.slider .captions .caption6,
#slide7:checked~.slider .captions .caption7,
#slide8:checked~.slider .captions .caption8,
#slide9:checked~.slider .captions .caption9,
#slide10:checked~.slider .captions .caption10,
#slide11:checked~.slider .captions .caption11,
#slide12:checked~.slider .captions .caption12,
#slide13:checked~.slider .captions .caption13,
#slide14:checked~.slider .captions .caption14,
#slide15:checked~.slider .captions .caption15 {
    visibility: visible;
    opacity: 1;
}

#facebook.fb-ifarme {
    /* width: 100% !important; */
    /* height: 476px; */
}

@media (max-width:1000px) {
    .title {
        display: none;
    }
}

@media (min-width: 800px) {
    .reportsModal .modal-dialog {
        max-width: 850px;
    }

    .groupBtns {
        padding: 0 50px;
    }

    .colSections {
        width: 32%;
        flex: 0 0 32%;
    }

    .chartCol {
        flex: 0 0 48%;
    }
}

@media (max-width: 768px) {
    .reportsModal.modal.left .modal-dialog {
        width: 85%;
    }

    .colSections {
        margin-bottom: 10px;
    }

    .chartCol {
        margin-bottom: 10px;
    }
}