.gauge-box {
    max-width: 290px !important;
    width: 290px !important;
    min-width: 290px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    height: 300px !important;
}

#topnavMobile li {
    width: 100% !important;
}

.weather-box {
    max-width: 235px !important;
    min-width: 235px !important;
    width: 235px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    height: 300px !important;
}

.purchaseGraph {
    max-width: 235px !important;
    min-width: 235px !important;
    width: 235px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    height: 300px !important;
}

.soldGraph {
    max-width: 235px !important;
    min-width: 235px !important;
    width: 235px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    height: 300px !important;
}

.tableFirst {
    max-width: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
}

.tableSecond {
    max-width: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
}

.tableLast {
    max-width: 50px !important;
    min-width: 50px !important;
    width: 50px !important;
}

.info-table-box {
    max-width: 235px !important;
    min-width: 235px !important;
    width: 235px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    height: 300px !important;
}

.lower-box {
    max-width: 225px !important;
    min-width: 225px !important;
    width: 225px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    height: 170px !important;
}

.lower-box-co2 {
    min-height: 118px !important;
    max-height: 118px !important;
    height: 118px !important;
    max-width: 225px !important;
    min-width: 225px !important;
    width: 225px !important;
}

.graphBox,
.graphConsump {
    height: 300px !important;
    max-height: 300px !important;
    min-height: 300px !important;
    max-width: 391px !important;
    min-width: 391px !important;
    width: 391px !important;
}

.graphInfoBox {
    height: 350px !important;
    max-height: 350px !important;
    min-height: 350px !important;
    max-width: 195px !important;
    min-width: 195px !important;
    width: 195px !important;
}

.graphCircleBox {
    height: 350px !important;
    max-height: 350px !important;
    min-height: 350px !important;
    max-width: 180px !important;
    min-width: 180px !important;
    width: 180px !important;
}

.graphCircleBox .graphCircle,
.graphCircleBox .graphCircleconsump {
    width: 160px !important;
    height: 160px !important;
    margin-left: 0 !important;
}


.circle-arrow,
.circle-arrow-consump {
    margin-left: 0 !important;
}

.guageImageBox {
    padding-left: 25px !important;
    display: block;

}

.guageImageBox1 {
    display: none;
}

.co2 {
    font-size: 20px !important;
}

.title-editModal {
    font-size: 16px !important;
}

.marginT7 {
    margin-top: 0.8rem !important;
}

.box-margin {
    margin: 1rem 1rem 0rem 0rem !important;
}

.graphConsump2,
.graphBox2 {
    display: none !important;
}

.graphConsump,
.graphBox {
    display: flex !important;
}

.timeWrapper {
    width: 161px;
    position: relative;
}

.editModal .remote_id {
    font-size: 14px;
}

.text_graph {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.csvModal {
    width: 450px !important;
}

.modal-content2 {
    width: 380px !important;
}

.add__modal {
    width: 550px !important;
    max-width: 550px !important;
}

.text_graph.graph_change {
    font-weight: 500 !important;
}

.text_graph.graph_change.activeTab {
    font-weight: 600 !important;
}

.table_setting.notice-table td:nth-child(4) svg {
    margin-left: 30px;
}

@media screen and (max-width: 566px) {
    /* .guageImageBox {
        display: none;

    } */

    /* .guageImageBox1 {
        display: block;
    } */

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

    .graphConsump2,
    .graphBox2 {
        display: flex !important;
        margin-top: 1.5rem !important;
        max-height: 600px !important;
        min-height: 600px !important;
        height: 600px !important;
    }

    .graphConsump,
    .graphBox {
        display: none !important;
    }


    .info-table-box {
        margin-top: 0.5rem !important;
    }

    .lower-box-co2,
    .graphConsump2,
    .graphBox2,
    .lower-box,
    .gauge-box {
        max-width: 260px !important;
        min-width: 260px !important;
        width: 260px !important;
    }

    .graphCircleBox .graphCircleconsump,
    .graphCircleBox .graphCircle {
        margin-top: 0 !important;
    }

}

@media screen and (max-width: 319px) {
    .home-margin {
        margin: 0 27px !important;
    }

    .contentSection {
        margin-left: 30px;
    }
}

.text__larger {
    font-size: 14px !important;
}

/* Graph CSS */


/* .konvajs-content canvas {
    max-width: 100%;
} */
.modal {
    display: flex !important;
    align-items: center !important;
    top: -35px !important;
}

.colBorder {
    width: 115%;
    max-width: 115%;
    min-width: 115%;
}

.mmr {
    width: 111%;
    max-width: 111%;
    min-width: 111%;
}

/* .battery-box {
    width: 15.67% !important;
    max-width: 15.67% !important;
    min-width: 15.67% !important;
} */

/* Graph CSS */
.school-detail .table-responsive {
    overflow-x: auto !important;
}

.summary__table thead tr th,
.summary__table tbody tr td.text__link,
.summary__table tbody tr td,
.summary__table tbody tr td.text__link a {
    font-size: 14px !important;
}



.outerPageNav #topnavMobile .logo {
    width: 43%;
}

/* .time-nav svg.svg__align {
    margin-right: 55px !important;
} */

.lower-box-co2 {
    padding-right: 5px !important;
}

.info-table-box {
    margin-right: 0.5rem !important;
}

.text_md {
    font-size: 1.12rem !important;
}

.summary__table tbody tr td:first-child {
    font-weight: normal !important;
}

.newBorder.last {
    padding-bottom: 10px !important;
}

.marginweather {
    margin-top: 1rem !important;
}

.padding3 {
    padding-left: 2rem !important;
}


.sideArrow {
    width: 10.38px;
    height: 15.42px;
    margin-left: 10px;
    margin-top: -5px;
    cursor: pointer;
}

.noCursor {
    cursor: unset !important;
}

.graphMaintain canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    /* Use !important to override any inline styles */
    height: 100% !important;
}

.graphMaintain {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    /* This sets the height of the container to maintain 3:2 aspect ratio */
}

nav#topnav {
    padding: 1.3rem 1rem 0rem 1rem !important;
    height: 5rem !important;
}

.navItemsInfo {
    margin-top: 8px;
}

.navNotif {
    margin-top: 7px;
}

.newBorder.last {
    margin-bottom: 20% !important;
}

.notification {
    margin-left: 15px !important;
}

.download__btn {
    margin-top: 5% !important;
}

.secondGraph {
    margin-top: 4% !important;
}

.firstGraph {
    margin-top: 2% !important;
}

th {
    font-weight: normal !important;
}

.text_md {
    font-size: 14px !important;
    margin-top: 5px;
}

.secondGraph .scale-text:nth-child(3) {
    left: 12px !important;
}

.heading-margin {
    margin-top: 0.2rem !important;
}

.remote_dataEdit .form-control {
    padding: 0.75rem !important;
}

.contentSection {
    width: 70% !important;
}

.modal-content2 .modal-content .info-box p {
    font-size: 12px;
}

.graphTopMenu {
    overflow-x: auto;
    word-break: keep-all;
}

.base-shadow {
    display: flex;
    justify-content: center;
}

@media screen and (max-height: 2000px) {
    .graph1-text {
        bottom: 91% !important;
    }

    .graph2-text {
        bottom: 95% !important;
    }
}

@media screen and (max-height: 1900px) {
    .graph1-text {
        bottom: 85% !important;
    }

    .graph2-text {
        bottom: 93% !important;
    }

    @media screen and (max-width: 1029px) {
        .graph1-text {
            bottom: 80% !important;
        }
    }

    @media screen and (max-width: 604px) {
        .graph1-text {
            bottom: 69% !important;
        }
    }
}

@media screen and (max-height: 1300px) {
    .graph2-text {
        bottom: 90% !important;
    }
}

@media screen and (max-height: 1000px) {
    .graph2-text {
        bottom: 85% !important;
    }
}

@media screen and (max-height: 745px) {
    #leftnav svg {
        height: 43px !important;
    }

    .newBorder.last {
        padding-bottom: 20px !important;
    }

    .scale-text {
        bottom: 85% !important;
    }

    @media screen and (max-width: 1029px) {
        .graph1-text {
            bottom: 65% !important;
        }
    }

    @media screen and (max-width: 604px) {
        .graph1-text {
            bottom: 52% !important;
        }
    }

}


@media screen and (max-height: 720px) {
    #leftnav svg {
        height: 40px !important;
    }

}


@media screen and (max-height: 700px) {
    .navitem-padding {
        padding: 0.4rem !important;
    }

}

@media screen and (max-height: 675px) {
    #leftnav svg {
        height: 37px !important;
    }

}

@media screen and (max-height: 650px) {
    #leftnav svg {
        height: 35px !important;
    }

}

@media screen and (max-height: 635px) {
    .navitem-padding {
        padding: 0.3rem !important;
    }
}

@media screen and (max-height: 615px) {
    #leftnav svg {
        height: 32px !important;
    }

}

@media screen and (max-height: 590px) {
    #leftnav svg {
        height: 30px !important;
    }


}

@media screen and (max-height: 575px) {
    #leftnav svg {
        height: 27px !important;
    }
}


@media screen and (max-height: 550px) {
    #leftnav svg {
        height: 24px !important;
    }

}

@media screen and (max-height: 525px) {
    .navitem-padding {
        padding: 0.2rem !important;
    }
}


@media screen and (max-height: 505px) {
    #leftnav svg {
        height: 20px !important;
    }

    .newBorder.last {
        padding-bottom: 30px !important;
    }

}

@media screen and (max-height: 485px) {
    #leftnav svg {
        height: 15px !important;
    }

    #leftnav .text__small {
        font-size: 0.7rem !important;
    }

    .navitem-padding {
        padding: 0.1rem !important;
    }
}

@media screen and (min-width: 1215px) {
    /* .dot {
        margin-right: 5% !important;
    } */

    .time_graph {
        width: 238px !important;
    }

    .marginDateR {
        margin-right: 1.3% !important;
    }
}

@media screen and (min-width: 1250px) {
    .graphContent .react-datepicker__input-container input {
        width: 220px;
    }

    .time_graph {
        width: 215px !important;
    }
}

@media screen and (min-width: 2500px) {
    .dot {
        margin-right: 5% !important;
    }
}

@media screen and (min-width: 4000px) {
    .dot {
        margin-right: 4% !important;
    }
}

@media screen and (min-width: 992px) and (max-width: 1100px) {
    #logo-big {
        height: 40px !important;
    }
}

/* size margin */
/* @media screen and (min-width: 500px) and (max-width: 517px) {
    .contentSection {
        margin-left: 50px;
    }
}

@media screen and (min-width: 320px) and (max-width: 336px) {
    .contentSection {
        margin-left: 30px;
    }
} */
/* size margin */

.d-visib {
    visibility: hidden;
}

.modal-items {
    justify-content: center;
}

.modal-items ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.modal-items li:first-child {
    padding: 0px 15px;
}

.modal-items li {
    padding: 0px 13px;
}

.graph-modal .modal-content,
.graph-modal {
    height: 230px !important;
}

.graph-modal .modal-content {
    width: 100% !important;
}

.modal-item-text {
    text-align: center;
}

.modal-items .btn_right {
    width: 80px;
}

.productName .text_md {
    color: #000000;
}

@media screen and (min-width: 600px) {

    .graph-modal .modal-content,
    .graph-modal {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
        width: 500px !important;
        min-width: 500px !important;
        max-width: 500px !important;
    }
}

.add__modal .modal-body .full-input-setting {
    height: auto;
}


.konvajs-content {
    position: fixed !important;
}

.email-icons {
    display: flex;
    justify-content: space-between;
}

.action-icons {
    display: flex;
}

.table_setting td:nth-child(3) .trash-icon {
    margin-right: 0px;
}

.diagram {
    margin-top: 15px;
    padding-bottom: 20px;
    margin-right: 95px;

}

.diagram .text_graph {
    position: absolute;

}

nav#topnav {
    display: block !important;
}

nav#topnavMobile {
    display: none !important;
}

.navItemsInfo {
    display: flex;
}

#logo-big {
    height: 46px;
}

.weather-box .heading-margin {
    margin-bottom: 0.3rem;
}

.weather-box .weatherData-box {
    margin-top: 0.5rem !important;
}

.marginweather {
    margin-top: 0.9em !important
}

.marginT1.guageImageBox {
    margin-top: 1.5rem !important;
}

.lower-box-co2 .co2-last,
.lower-box-co2 .co2-first {
    /* margin-top: 0rem; */
    margin-left: 0.7rem;
}

.co2,
.logoutText p,
.link__login {
    font-size: 14px !important;
}

.lower-box .text__larger {
    margin-top: 4px;
}

.lower-box-co2 .title-box {
    padding-left: 0px !important;
}

.add__modal h4,
.add__notice h4 {
    font-size: 18px;
}

.csvModal h3 {
    font-size: 18px !important;
    font-weight: 600;
    margin-bottom: 30px;
}

.csvModal p {
    font-size: 14px !important;
    margin-bottom: 25px;
}

.modal-content2 h4 {
    font-size: 16px;
}

.add__modal .modal-content p,
.text-danger {
    font-size: 14px !important;
    color: #FF0000 !important;
}

.summary__table tbody tr td a {
    color: #207ABB;
}

.settingsTable {
    margin-top: 25px;
}



@media screen and (max-width: 767px) {
    .navItemsInfo {
        display: none;
    }

    .device-container {
        margin: 0px !important;
    }

    .add__notice .modal-content {
        width: 160% !important;

    }

    .notifSection {
        display: flex;
        justify-content: flex-end;
    }

    #leftnavMobile .navitem-padding svg,
    #leftnavMobile .newBorder.last svg {
        width: 120% !important;
        margin-left: -4px !important;
    }

    nav#topnav {
        padding: 8px 15px 0px 15px !important;
        height: 3rem !important;
    }

    #logo-big {
        height: 26px;
    }

    .notification-box {
        margin-top: 20px !important;
        width: 400px !important;
    }

}

@media screen and (max-width: 480px) {
    #leftnavMobile .newBorder.last svg {
        width: 80% !important;
        margin-left: 0px !important;
    }

    .notification-box {
        width: 280px !important;
    }

    .notification-box .message-box {
        width: 275px !important;
    }

    .notification-box .message-box .date {
        margin: 15px 0px !important;
    }


}

input[type=checkbox] {
    height: 100%;
}