@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */

:root {
    --bg-color: #ddd;
    --heading-color: #464E5F;
    --red-color:#FF2727;
    --main-color:#C41E3A;
    --second-color:#FAF8F5 ;
    --header-color:#FAF8F5 ;
    /* --main-color:#FAF8F5; */
    --hover-color:#c45a6c;
}

/* a {
    text-decoration: none;
}

body {
    font-family: "Inter", sans-serif;
    background-color: var(--bg-color);
} */

/* chargin-station-css-start */
.heading-top .chargin_heading {
    font-family: 'Inter';
    font-size: 36px;
    font-weight: 700;
    color: var(--heading-color);
}

.heading-top .chargin_heading i {
    color: #009C4A;
    padding: 0px 10px 0px 0px;
    font-size: 30px;
}

.charging-box {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 20px;
    margin: 20px 0px;
}

.charging-box-one {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width:767px) {
    .charging-box-one {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 20px;
        place-items: center;
    }
}

@media (min-width:768px) and (max-width:1024px) {
    .charging-box-one {
        grid-template-columns: repeat(4, 1fr);
        margin-bottom: 20px;
        place-items: center;
    }
}

.charging-box-data-frist {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.charging-box-data-frist h2 {
    font-family: 'Inter';
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #009C4A;
}

.charging-box-data-frist i {
    font-size: 23px;
    color: #009C4A;
}

.charging-box-data-frist p {
    font-family: 'Inter';
    font-size: 15px;
    font-weight: 700;
    color: #464E5F;
}

.charging-box-data-frist span {
    font-family: 'Inter';
    font-size: 15px;
    font-weight: 700;
    color: #656575;
}

.charging-box-data_icon {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: #009C4A29;
    color: #009C4A;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.charging-box-data_icon p {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 700;
    color: #009C4A;
}

.charging-box-data_icon i {
    color: #009C4A;
    font-size: 23px;
}

.chargin-middle-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}

@media (max-width:767px) {
    .chargin-middle-box {
        margin-bottom: 20px;
    }
}

@media (min-width:768px) and (max-width:1024px) {
    .chargin-middle-box {
        margin-bottom: 20px;
    }
}

.charging-middle-box-data {
    border: 0.3px solid #009C4A;
    border-radius: 5px;
    /* padding: 10px; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width:200px ;
}

.charging-middle-box-data h2 {
    font-family: 'Inter';
    font-size: 20px;
    font-weight: 700;
    color: #656575;
}

.charging-middle-box-data p {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 500;
    color: #656575;
}

.charging-box-child {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width:767px) {
    .charging-box-child {
        grid-template-columns: 1fr;
    }
}

.second-charging-box-child {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width:490px) {
    .second-charging-box-child {
        grid-template-columns: 1fr;
    }
}
/* @media (max-width:767px) {
    .second-charging-box-child {
        grid-template-columns: 1fr;
    }
} */

/* @media (min-width:768px) and (max-width:1600px){
    .second-charging-box-child{
        grid-template-columns: 1fr;
    }
} */
.second-charging-box-child-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 5px;
    padding: 40px 30px;
    background-color: #fff;
    flex-wrap: wrap;
    cursor: pointer;
}


.charging-box-child-items {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 5px;
    padding: 10px;
}

.card-box-second {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 20px; */
    justify-content: center;
}

.child-itmes-icon-data {
    display: flex;
    flex-direction: column;

}

.charging-box-child-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-columns: 100px auto;
    gap: 10px;
    place-items: center;
}

.card-box .child-itmes-icon i {
    color: #14AE5C;
    font-size: 30px;
}

.child-itmes-icon-data h2 {
    font-family: 'Inter';
    font-size: 18px;
    font-weight: 700;
    color: #223354;
}

.child-itmes-icon-data p {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 400;
}

.num-decs {
    font-family: 'Inter';
    font-size: 24px;
    font-weight: 700;
    color: #223354;
}

.first-child-box {
    border-bottom: 1px solid #ddd;
    padding: 0px 0px 15px 0px;
}

.charging-two i {
    font-size: 23px;
    color: var(--red-color);
}

.charging-two h2 {
    font-family: 'Inter';
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: var(--red-color);
}

.charging-box-data_icon-two {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: #009C4A29;
    color: #009C4A;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #DA453E26;
}

.charging-box-data_icon-two i {
    color: var(--red-color);
    font-size: 23px;
}

.charging-box-data_icon-two p {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 700;
    color: var(--red-color);
}

.charging-middle-box-data-two {
    border: 0.3px solid var(--red-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.charging-middle-box-data-two h2 {
    font-family: 'Inter';
    font-size: 20px;
    font-weight: 700;
    color: #656575;
}

.charging-middle-box-data-two p {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 500;
    color: #656575;
}

.child-itmes-icon-two i {
    color: var(--red-color) !important;
}

.child-itmes-icon-three i {
    color: #E5951D !important;
}

.charging-three i {
    color: #E5951D;
    font-size: 23px;
}

.charging-three h2 {
    font-family: 'Inter';
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #E5951D;
}

.charging-box-data_icon-three {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: #F9C8022B;
    color: #E5951D;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #DA453E26;
}

.charging-box-data_icon-three i {
    font-size: 23px;
    color: #E5951D;
}

.charging-box-data_icon-three p {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 700;
    color: #E5951D;
}

.charging-middle-box-data-three {
    border: 0.3px solid #C06727;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.charging-middle-box-data-three h2 {
    font-family: 'Inter';
    font-size: 20px;
    font-weight: 700;
    color: #656575;
}

.charging-middle-box-data-three p {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 500;
    color: #656575;
}

.box-charging {
    padding: 40px 0px;
}

footer {
    background-color: var(--red-color);
    padding: 20px 0px;
}

footer p {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #fff;
}

/* chargin-station-css-end */

/* pagination-css-start */
.custom-pagination .pagination {
    display: inline-block;
    margin: 0;
    padding: 20px 0px;
}

.custom-pagination .pagination>li {
    display: inline;
}

.custom-pagination .pagination>li>a span i {
    color: #000;
    font-size: 14px;
}

.custom-pagination .pagination>li>a,
.custom-pagination .pagination>li>span {
    color: #000;
    text-decoration: none;
    border: 1px solid #ddd;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 0 4px;
    font-size: 14px;
}

.custom-pagination .pagination>li.active>a {
    background-color: var(--main-color);
    color: #fff;
    border-color: 1px solid var(--main-color);
}

.custom-pagination .pagination>li.active>a:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}


.custom-pagination .pagination>li>a:hover {
    background-color: #f1f1f1;
}

.custom-pagination .pagination>li.disabled>span {
    color: #999;
    cursor: not-allowed;
}

.custom-pagination .pagination>li:first-child>a,
.custom-pagination .pagination>li:last-child>a {
    font-weight: bold;
}

/* pagination-css-end */


/* second-page-css-start */
.charging-station-details {
    padding: 30px 0px;
}

.second_page_left {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 10px;
    /* padding: 30px; */
}

.second_page_right {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 30px;
}

.second-page-icon {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: var(--second-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.second-page-icon i {
    color: var(--main-color);
    font-size: 23px;
}

.second-page-icon-one {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: var(--second-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.second-page-icon-one i {
    color: var(--main-color);
    font-size: 23px;
}

.second-page-icon-two {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: var(--second-color);

    display: flex;
    align-items: center;
    justify-content: center;
}

.second-page-icon-two i {
    font-size: 23px;
    color: var(--hover-color);
}

.second-page-icon-three {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: var(--second-color);

    display: flex;
    align-items: center;
    justify-content: center;
}

.second-page-icon-three i {
    font-size: 23px;
    color: var(--hover-color);
}

.child-itmes-icon-data .box-card-title {
    font-family: 'Inter';
    font-size: 24px;
    font-weight: 600;
    color: #64748B;
}
@media (min-width:1200px) and (max-width:1400px){
    .second-charging-box-child-items {
        padding: 31px 28px;
    }
    .child-itmes-icon-data .box-card-title{
        font-size: 20px;
    }
}
.performance-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.performance-title {

    margin-bottom: 20px;
    font-family: 'Inter';
    font-size: 20px;
    font-weight: 600;
    color: var(--main-color);
}

.performance-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
}

.performance-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background: var(--second-color);
    padding: 20px;
}

.performance-icon i {
    font-size: 20px;
    color: var(--hover-color);
}

.performance-icon-two {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background-color: var(--second-color);
    padding: 20px;
}

.performance-icon-two i {
    font-size: 20px;
    color: var(--hover-color);
}

.performance-icon-three {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background: var(--second-color);
    padding: 20px;
}

.performance-icon-three i {
    font-size: 20px;
    color: var(--hover-color);
}

.performance-info {
    flex: 1;
}

.performance-info h5 {
    font-family: 'Inter';
    font-size: 15px;
    font-weight: 500;
    color: #838383;
}

.custom-btn {
    font-family: 'Inter';
    font-size: 15px;
    font-weight: 600;
    color: #838383;
}

.performance-info p {
    font-size: 12px;
    margin: 0;
    color: #888;
}

.progress {
    height: 6px;
    margin: 10px 0 0 0;
    border-radius: 10px;
    background-color: #f1f1f1;
}

.progress-bar {
    border-radius: 10px;
}

.performance-dropdown {
    float: right;
    font-size: 14px;
    color: #888;
    cursor: pointer;
}

.dropdown-menu {
    min-width: 100px;
}

/* .dashboard-container  {
    margin: 20px 0px 0px 0px;
} */
.dashboard-container  .content-third .panel {
   height: 400px;
   overflow: scroll;
}
.content-customer-second .panel{
    /* height: 380px; */
    overflow: scroll;
}

.dashboard-container  .content-third .panel::-webkit-scrollbar ,
.content-customer-second .panel::-webkit-scrollbar,.panel-body-customer::-webkit-scrollbar{
    display: none;
  }

.chargin-station .panel {
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 20px;
    /* padding-bottom: 0; */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* margin-top: 20px; */


}

.chargin-station .panel-frist {
    border-right: 2px solid var(--red-color);
    /* padding-bottom: 0px;
    margin-bottom: 30px; */

}
.chargin-station .panel th,
.chargin-station .panel td
{
    padding: 10px;
}


.panel-heading {
    background-color: #ffffff;
    /* border-bottom: 1px solid #ddd; */
    font-family: 'Inter';
    font-size: 20px;
    font-weight: 600;
    color: #262A41;
}

.status-circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.status-completed {

    border: 1px solid #686543;
    background-color: #686543;
}

.status-charging {
    background-color: var(--red-color);
    border: 1px solid var(--red-color);
}

.status-queue {
    background-color: #317299;
    border: 1px solid #317299;
}

.details-link {
    color: var(--main-color);
    cursor: pointer;
}

.details-link:hover {
    color: #fff;
    /* text-decoration: underline; */
}

.progress-bar-custom {
    height: 10px;
    background-color: var(--hover-color);
}

.earnings {
    text-align: center;
}

.earnings .station {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #838383;
    padding: 15px 0px;
}

/* .earnings .station:last-child{
    border: none;
} */
.earnings .station .trend {
    width: 20px;
    height: 20px;
    background-color: #eee;
    border-radius: 50%;
    display: inline-block;
}

.earnings .station .increase {
    color: green;
}

.earnings .station .decrease {
    color: red;
}

.station .station-list p {
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 700;
    color: #64748B;
}

.station .station-list-pic img {}

.station-list-num .des_num {
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 700;
    color: #64748B;
}

.station .station-list-arrow i {
    color: #5DB48A;
    font-size: 20px;
}

.station-list-arrow .bi-arrow-down {
    color: #EB7487 !important;
    font-size: 20px;
}

.chart-container {
    margin: auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.chart-container h4 {

    font-family: 'Inter';
    font-size: 20px;
    font-weight: 700;
    color: #2E2E30;
}

.donut-chart {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(#2d5bba 0% 50%,
            #f2c94c 50% 80%,
            #f2994a 80% 100%);
    margin: 0 auto;
}

.donut-chart .center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
}

.legend {
    margin-top: 20px;
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.legend-item {
    display: flex;
    align-items: center;
}

.legend-item span {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    border-radius: 50%;
}

.legend-item .available {
    background-color: #2d5bba;
}

.legend-item .charging {
    background-color: #f2c94c;
}

.legend-item .unavailable {
    background-color: #f2994a;
}

.table-heading {
    /* color: #317299; */
    font-size: 16px;
}
.table-new-heading- th,.table-row-new- td{
    text-align: center;
}


.table-right {
    border-right: 1px solid var(--red-color);
}

.panel-body-p p {
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 500;
    color: #273240;
    line-height: normal;
}

.panel_btm {
    margin: 15px 0px;
}
.panel-body-customer{
    height: 320px;
    overflow: hidden;
    overflow-y: scroll;
}

.panel-body-des {
    padding: 3px !important;
}



.panel-data-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

}

.filter-des i {
    font-size: 16px;
    cursor: pointer;
    color: #525256;
}

.filter-des a {
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 500;
    color: #525256;
    text-decoration: none;
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    padding: 10px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.performance-header {
    margin-bottom: 20px;
}

.table_data {
    /* display: flex; */
    align-items: center;
    /* gap: 10px; */
    /* text-align: center; */
}

.chart-container-one {
    width: 100%;
    margin: 0 auto;
}

canvas {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
}


.chart-container-two {
    background: #fff;
    /* border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px; */
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-header h3 {
    margin: 0;
    font-family: 'Inter';
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: #1A1919;
}

.chart-header .date-range {
    font-size: 14px;
    color: #888;
}

canvas {
    max-width: 100%;
    height: auto;
}

.form-control-chart {
    width: auto;
    display: inline-block;
    border: none !important;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 400;
    color: #656575;
    box-shadow: none !important;
}

.table-responsive::-webkit-scrollbar {
    display: none;
}


.chart-container-one {
    position: relative;
    /* width: 100% !important;
    max-width: 1200px !important;
    height: 500px !important; */
    margin: 0 auto;
    /* overflow: hidden; */
}

.customCanvas {
    width: 100% !important;
    height: 100% !important;
    background-color: white;
}

.chart-container-one h1 {
    font-family: 'Inter';
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

@media (max-width:992px) {
    /* .chart-container-one {
        height: auto !important;
        width: auto !important;
    } */

    .second_page_left {
        margin: 20px 0px;
    }
}

/* @media (max-width:1024px) {
    .chart-container-one {
        height: auto !important;
        width: auto !important;
    }
} */

.chart-container-box {
    position: relative;
    width: 200px;
    height: 200px;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    display: flex;
    margin: auto;
}

.chart_box {
    width: 100%;
    height: 100%;
    background: conic-gradient(#FF6868 0% 20%,
            #FFA726 20% 50%,
            #3F51B5 50% 100%);
    border-radius: 50%;
    position: relative;
}

.chart_box::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background-color: #fff;
    border-radius: 50%;
}

.label_circle {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.label_circle:hover {
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.label_circle[data-value="20"] {
    top: 10%;
    left: 65%;
}

.label_circle[data-value="30"] {
    top: 40%;
    left: 10%;
}

.label_circle[data-value="50"] {
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 480px) {
    .chart-container-box {
        width: 200px;
        height: 200px;
    }

    .label_circle {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
}

/* second-page-css-end */

.performance-dropdown select{
    border: none;
    border-bottom: 2px solid gray;
}
.form-group button, .btn-success,.btn-primary, .btn{
    background-color: var(--main-color);
    border: 1px solid var(--main-color);

    color: white;
    border: none;
}
.form-group button:active,.btn-success:active,.btn-primary:active,
.form-group button:focus,.btn-success:focus,.btn-primary:focus,.btn:focus,.btn:active{
    background-color: var(--hover-color);
    border: 1px solid var(--hover-color);

    color: white;
}
.form-group button:hover,.btn-outline-secondary:hover,.btn-success:hover,.btn-primary:hover,.btn:active:hover{
    background-color: var(--hover-color);
    border: 1px solid var(--hover-color);

    color: white;
}

td svg,.glyphicon {
    color: var(--main-color);
}
th a{
    color: #000;
}
nav .pagination-nav  .active a,
.pagination  .active a{
    background-color:var(--main-color) ;
    border: 1px solid var(--main-color);
}
nav .pagination-nav  .active a:hover,
.pagination  .active a:hover
{
    background-color:var(--hover-color) ;
    border: 1px solid var(--hover-color);
}
.scroll-div{
    overflow: scroll;
    width: 100%;
}
.scroll-div::-webkit-scrollbar {
    display: none; 
}

.scroll-div {
    -ms-overflow-style: none;  
    scrollbar-width: none;     
}
.pull-left a,
.pull-right a
{
    background-color: #E5F0F8 ;
}
.pull-left a:hover,
.pull-right a:hover
{
    background-color: var(--hover-color) ;
    color: #fff !important;
}
.panel-heading a{
    color: black;
    font-size: 16px;
}
.panel-heading a:hover{
    color: var(--hover-color);
}
.box.box-primary {
    border-top-color: var(--main-color);
}
.btn-default span{
    color: white;
}
.btn-export,
.btn-export:hover{
    background-color: #E18E9C;
    color: #000;
}

/* live charging css new */
.heading-live-charging{
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-bottom: 1px solid black;
    padding: 0px 10px;
    /* margin-bottom: 10px; */
   }
   .heading-div-live{
    display: flex;
    text-align: center;
    /* justify-content: center; */
    align-items: center;
   }
    .heading-live-charging i{
        margin-right: 10px;
        font-size: 30px;
 
   }
   .Charging   .heading-live-charging,
    .Charging   .heading-live-charging{
        border-bottom: 1px solid rgba(82, 124, 233, 0.79);

    }
    .Preparing   .heading-live-charging{
        border-bottom: 1px solid rgba(29, 135, 78, 0.55);

    }
    .Preparing   .heading-live-charging i{
        color: #009C4A;
    }
    .Finishing   .heading-live-charging,
    .SuspendedEVSE   .heading-live-charging{
        border-bottom: 1px solid rgba(192, 46, 70, 0.48);

    }
    .first-child-box{
        display: none;
    }
    .Finishing,
    .Preparing,
    .Charging,
    .SuspendedEV,
    .SuspendedEVSE{
        display: block;
    }
    .Finishing i,
    .Finishing .charging-box-data h2,
    .Finishing .charging-box-data p,
    .Finishing .charging-box-child-items i,
    .SuspendedEVSE i,
    .SuspendedEVSE .charging-box-data h2,
    .SuspendedEVSE .charging-box-data p,
    .SuspendedEVSE .charging-box-child-items i {
        color: var(--main-color);
    }



    .Finishing .charging-middle-box-data,
    .SuspendedEVSE .charging-middle-box-data {
        border: 0.3px solid var(--main-color);
    }

    .Finishing .charging-box-data_icon,
    .SuspendedEVSE .charging-box-data_icon {
        background-color: #DA453E26;
    }

    .Finishing .address p,
    .SuspendedEVSE .address p {
        color: #000;
    }
    .first-child-box{
        border-radius: 20px;
        margin-bottom: 10px;
    }
    .Charging,
    .SuspendedEV{
        background: radial-gradient(circle at top left, #008cff0d 120px, #0090ff24);
    }
  
    .SuspendedEVSE,
    .Finishing
    {
        background: radial-gradient(circle at top left, #ff00000d 120px, #ff000024);
    }
    .Preparing{
        background: radial-gradient(circle at top left, #00ff080d 120px, #00ff1024);
    }

    .Charging i,
    .Charging .charging-box-data h2,
    .Charging .charging-box-data p,
    .Charging .charging-box-child-items i,
    .SuspendedEV i,
    .SuspendedEV .charging-box-data h2,
    .SuspendedEV .charging-box-data p,
    .SuspendedEV .charging-box-child-items i {
        color: #2E68FF;
    }

    .Charging .charging-middle-box-data,
    .SuspendedEV .charging-middle-box-data {
        border: 0.3px solid #2E68FF;
    }

    .Charging .charging-box-data_icon,
    .SuspendedEV .charging-box-data_icon {
        background-color:rgb(216, 232, 245);
    }

    .Charging .address p,
    .SuspendedEV .address p {
        color: #000;
    }

    .SuspendedEVSE .station-div-inner i,
    .SuspendedEVSE .station-div-inner h2,
    .SuspendedEVSE .station-div-inner p {
        color: #000;
    }

    .SuspendedEVSE .station-background-div {
        background: #fff;
        border: 2px solid #000;
    }

    .SuspendedEV .car-div-inner i,
    .SuspendedEV .car-div-inner h2,
    .SuspendedEV .car-div-inner p {
        color: #000;
    }

    .SuspendedEV .car-background-div {
        background: #fff;
        border: 2px solid #000;
    }

    .chargin_heading i {
        color: #009C4A;
    }
    .charging-port{
        background-color: red;
    }
    .remove-div{
        display: none;
    }
    .box-charging{
        display: flex;
        flex-direction: column;
    }
    /* .row{
       margin-right: 10px;
    } */
    .custom-gap{
        display: flex;
        /* justify-content: center; */
        /* gap: 10px; */
        flex-wrap: wrap;
    }
    /* .custom-gap .first-child-box-div-main{
        margin-right: 10px;
    } */
    .inner-custom-gap{
        display: flex;
        flex-direction: column;
        /* justify-content: space-around; */
        gap: 10px;
    }
   @media (max-width:1270px) {
    .custom-gap{
        /* display: flex;
        justify-content: space-around; */
        gap: 20px;
        flex-wrap: wrap;
    }
    .first-child-box{
        width: 100%;
    }
   }

   .stop-div{
    display: flex;
    justify-content: center;
    margin-top: 10px;
   }
   .stop-button{
    font-size: 15px;
    padding: 10px 40px;
   }
   .main-div-middle{
    display: flex;
    justify-content: center;
    align-items: center;
   }
 @media (min-width:502px) and (max-width:991px) {
    .main-div-middle{
    flex-direction: column;
    }
    .charging-middle-box-data{
        width: 200px;
    }
    
 }
 @media (max-width:501px) {
    .main-div-middle{
    flex-direction: column;
    }
    .charging-middle-box-data{
        min-width: 110px;
    }
    
 }

/* leaflet map */
 #map {
    height: 60vh;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 5px;
    margin-bottom: 40px;
}
.leaflet-control{
  display: none;
}
.plugs-side {
display: flex;
gap: 20px;
}

.plugs-side .plugs-left {
font-family: 'DM Sans';
font-size: 16px;
font-weight: 500;
line-height: 20.83px;
}

.plugs-side .plugs-left i {
color: var(--hover-color);
}

.plugs-side .plugs-right {
color: var(--hover-color);
font-family: 'DM Sans';
font-size: 16px;
font-weight: 500;
line-height: 20.83px;
}

/* Modal popup styling */
.leaflet-popup-content-wrapper {
border-radius: 8px;
padding: 8px;
background-color: #fff;
font-size: 14px;
color: #333;
}

.popup-header {
font-family: 'DM Sans';
font-size: 21.96px;
font-weight: 600;
line-height: 28.6px;
text-align: left;
margin-top: 5px;
}

.btn-close {
box-sizing: content-box;
width: 1em;
height: 1em;
padding: .25em .25em;
color: #000;
background: none;
border: 0;
border-radius: .375rem;
}

.btn-close {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--hover-color);
color: #fff;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
}

.btn-close::before {
content: '\00d7';
font-size: 20px;
color: #fff;
display: block;
}


.popup-details {
font-size: 14px;
margin: 10px 0;
font-family: 'DM Sans';
font-size: 17.57px;
font-weight: 400;
line-height: 22.88px;
text-align: left;
display: flex;
gap: 10px;
}

.popup-details i {
color: var(--hover-color);
}


.popup-phone {
font-size: 14px;
margin: 5px 0;
font-family: 'DM Sans';
font-size: 17.57px;
font-weight: 500;
line-height: 22.88px;
text-align: left;
padding: 5px 0px;

}

.popup-phone a {
color: #004286 !important;
}

.plugs {
font-size: 14px;
margin: 5px 0;
font-family: 'DM Sans';
font-size: 17.57px;
font-weight: 500;
line-height: 22.88px;
text-align: left;
display: flex;
gap: 10px;
flex-wrap: wrap;
padding: 5px 0px;
}

.plugs-left i {
padding: 0px 5px 0px 0px;
}

.plugs-right {
color: var(--hover-color);
}

.popup-amenities {
font-family: 'DM Sans';
font-size: 17.57px;
font-weight: 500;
line-height: 22.88px;
text-align: left;
display: flex;
gap: 10px;
flex-wrap: wrap;
padding: 5px 0px;
}

.popup-amenities i {
margin-right: 5px;
font-size: 16px;
color: #004286;
}

.leaflet-container a {
color: #000;
}
.leaflet-container .btn-outline-primary {
color: #fff;
}
.leaflet-container .btn-outline-primary:hover {
color: #fff;
background: var(--hover-color);
}

.leaflet-popup-content {
margin: 13px 8px 13px 8px;
line-height: 1.3;
font-size: 13px;
font-size: 1.08333em;
min-height: 1px;
}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
display: none;
}

.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 20px;
right: 10px;
border: none;
text-align: center;
width: 24px;
height: 24px;
font: 16px/24px Tahoma, Verdana, sans-serif;
color: #757575;
text-decoration: none;

background-color: var(--main-color);
color: #fff;
border-radius: 50%;
}


.leaflet-container a.leaflet-popup-close-button:hover {

background: var(--hover-color);
color: #fff;

}

.map-btn-popup {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.station-charging i {
padding: 0px 5px 0px 0px;
color: var(--hover-color);
}

.station-charging {
font-family: 'DM Sans';
font-size: 17.57px;
font-weight: 500;
line-height: 22.88px;
text-align: left;
color: #676767;
border-bottom: 1px solid #D6D6D6;
padding: 5px 0px;
}

/* new-js-css */
.leaflet-popup-content {
width: 250px;
}

.station-charging {
font-weight: bold;
font-size: 16px;
}

.popup-header {
font-family: 'DM Sans';
font-size: 21.96px;
font-weight: 600;
line-height: 28.6px;
text-align: left;
margin-top: 5px;

}

.popup-details {
margin-top: 5px;
font-family: 'DM Sans';
font-size: 14px;
font-weight: 400;
line-height: 22.88px;
text-align: left;
display: flex;
gap: 10px;
}

.map-popup {
margin-top: 10px;
}

.popup-phone {
font-size: 12px;
font-size: 14px;
margin: 5px 0;
font-family: 'DM Sans';
font-size: 17.57px;
font-weight: 500;
line-height: 22.88px;
text-align: left;
padding: 5px 0px;

}


.popup-amenities {
margin-top: 10px;
font-family: 'DM Sans';
font-size: 17.57px;
font-weight: 500;
line-height: 22.88px;
text-align: left;
display: flex;
gap: 10px;
flex-wrap: wrap;
padding: 5px 0px;

}

.row-container{
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }
  .row-container-customer{
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 10px;
  }
  .chart-container-one{
    display: grid;
  }
  .second-charging-box-child-items{
    padding: 0px 30px ;
  }
  .chart-container{
    width: 100%;
    margin: 0px;
  }
  @media (max-width:1200px){
    .row-container,.row-container-customer{
      display: flex;
      flex-direction: column;
    }
    .second-charging-box-child-items{
    padding: 20px 30px ;
  }
  }

  .second-page-icon
  {
    transition: transform 0.3s ease;
  }
  .second-charging-box-child-items:hover .second-page-icon
  {
    transform: scale(1.2);
  }