html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Cairo';
    src: url('../Site_Fonts/Cairo-VariableFont_slnt\,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    src: url('../Site_Fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}

body {
    font-family: 'Montserrat';
    font-size: 15.5px;
    margin: 0;
    background-color: #004dd8;
    overflow-x: hidden;
}

.required {
    color: red;
    font-size: 13px;
    position: absolute;
}

.overMenu::before {
    background-color: #33333359;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 2;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background-color: rgb(241, 241, 241);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #004dd8;
    border-radius: 10px;
}

img {
    width: 100%;
    height: auto;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="time"],
textarea,
input,
select {
    display: block;
    height: 45px;
    width: 100%;
    background-color: #FFF;
    outline: none;
    transition: all 0.1s ease-in-out 0s;
    appearance: none;
    border: 2px solid #E5EAF2;
    padding: 0 10px 0 10px;
    color: #333;
    font-size: 14px;
    border-radius: 10px;
}

select {
    appearance: none;
    background-image: url('../Site_Images/arrowMenu.svg');
    background-position-y: 55%;
    background-position-x: 96%;
    background-repeat: no-repeat;
    background-size: 17px;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input:focus,
textarea:focus,
select:focus {
    border: 2px solid #004dd8;
    background-color: rgb(255, 255, 255);
    transition: all 0.1s ease-in-out 0s;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="date"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input::placeholder,
select::placeholder,
textarea::placeholder {
    text-transform: capitalize;
    color: #A9B6C6;
    font-family: sans-serif;
}

input[type="checkbox"],
input[type="checkbox"]:checked {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border: 0px;
    width: 17px;
    background-color: transparent;
    outline: none;
    margin: 0px;
    margin-right: 5px;
    padding: 0;
    display: initial;
}

input[type="checkbox"]:before {
    content: "";
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 2.5px solid #004dd8;
    display: inline-block;
    vertical-align: middle;
    margin: 0px;
}

input[type="checkbox"]:checked:before {
    background-color: #004dd8;
    background-image: url("../Site_Images/done.svg");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
    border: solid 3px #004dd8;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

textarea {
    resize: none;
    height: 110px;
    padding: 10px;
}

.input_group {
    margin-bottom: 12px;
    margin-top: 12px;
    position: relative;
    flex: auto;
    max-width: initial;
    margin-right: 15px;
}

.input_group label {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    color: #07224D;
    text-align: left;
    font-weight: 600;
    text-transform: capitalize;
}

.align_inputs {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.align_inputs .input_group {
    flex: 0 0 49%;
    max-width: 49%;
}

.inputsGroupContainer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.inputsGroupContainer .input_group {
    margin-bottom: 12px;
    margin-top: 12px;
    position: relative;
    flex: 0 0 23.7%;
    max-width: 23.7%;
    margin-left: 0;
}

.button_group {
    width: 100%;
    margin: 20px auto 10px;
    display: flex;
    justify-content: center;
}

.button_group button {
    width: 25%;
    padding: 10px 10px;
    font-size: 17px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    margin-left: 10px;
    text-transform: capitalize;
    transition: 0.2s ease-in-out;
}

.button_group button:disabled {
    cursor: not-allowed !important; /* Changes cursor to 'not-allowed' */
    opacity: 0.5 !important; /* Optionally, make the button look disabled */
    /* Add any other styles specific to the disabled state */
}
/* .button_group button:last-child {
    margin-left: 0px;
} */

.back_primary {
    background-color: #004DD8;
    color: #FFF;
}

.back_primary:hover {
    transition: 0.2s ease-in-out;
    background-color: #1496ff;
}

.back_secondary {
    background-color: transparent;
    border: 3px solid #004DD8 !important;
    color: #004DD8;
}

.back_secondary:hover {
    background-color: #d4eeff;
    transition: 0.2s ease-in-out;
}

.btn {
    border: 0px;
    padding: 6px 20px;
    border-radius: 10px;
    min-height: 45px;
}

.userMange {
    font-size: 16px;
}

.containerBtnTable .btnTable button {
    margin-left: 5px;
}

@media (max-width:992px) {
    .inputsGroupContainer .input_group {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-right: 0;
    }
    .button_group {
        flex-direction: column;
    }
    .button_group button {
        width: 100%;
    }
}


/*####### Start Menu  #########*/

.side_menu {
    width: 280px;
    min-width: 280px;
    overflow: auto;
    padding: 20px 0px 20px 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    background-color: #004DD8;
    top: 0;
    z-index: 2;
    transition: 0.3s ease-in-out;
    overflow: hidden;
}

.side_menu .menu_head .personal_inf {
    text-align: center;
    padding: 10px 0;
    margin-bottom: 30px;
}

.side_menu .menu_head .personal_inf .imgPersonal {
    padding: 0 30px 0 26px;
    display: flex;
    align-items: center;
}

.side_menu .menu_head .personal_inf .imgPersonal img {
    width: auto;
    height: 45px;
    margin-left: 30px;
    transition: 0.5s ease-in-out;
}

.side_menu .menu_section .container_list,
.side_menu .menu_bottom .container_list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.side_menu .menu_section .list_item,
.side_menu .menu_bottom .list_item {
    width: auto;
    display: block;
    height: 100%;
    margin: 0px 15px 15px 15px;
    position: relative;
    cursor: pointer;
}

.side_menu .menu_bottom .list_item {
    margin: 0px 15px 0px 15px;
}

.side_menu .menu_section .list_item .menu_item_link,
.side_menu .menu_bottom .list_item .menu_item_link {
    text-decoration: none;
    color: #FFF;
    display: flex;
    align-items: center;
    padding: 9px;
    position: relative;
    text-transform: capitalize;
}

.side_menu .menu_bottom .list_item .menu_item_link {
    border-bottom: none;
}

.side_menu .menu_section .list_item .menu_item_link .iconCategory,
.side_menu .menu_bottom .list_item .menu_item_link .iconCategory {
    width: auto;
    height: 30px;
    margin-right: 30px;
    filter: brightness(0) invert(1);
}

.side_menu .menu_section .list_item .menu_item_link .arrowleft {
    width: 18px;
    transform: rotate(180deg);
    position: absolute;
    right: 10px;
    z-index: 1;
    transition: 0.3s ease-in-out;
    filter: brightness(0) invert(1);
}

.side_menu .menu_section .list_item .menu_item_link p,
.side_menu .menu_bottom .list_item .menu_item_link p {
    margin: 0;
    font-size: 17px;
    white-space: nowrap;
    font-weight: 600;
    transition: 0.3s ease-in-out;
    opacity: 1;
    visibility: visible;
    font-family: 'Cairo';
}

.side_menu .menu_section .list_item .menu_item_link:hover,
.side_menu .menu_bottom .list_item .menu_item_link:hover {
    background-color: #00F74B;
    border-radius: 50px 20px;
}

.side_menu .menu_section .list_item .menu_item_link:hover p,
.side_menu .menu_bottom .list_item .menu_item_link:hover p {
    color: #FFF;
}


/* .side_menu .menu_section .list_item .menu_item_link:hover .iconCategory,
.side_menu .menu_bottom .list_item .menu_item_link:hover .iconCategory {
    filter: brightness(1) invert(1);
} */

.side_menu .menu_section .list_item .menu_item_link.activeMenu .arrowleft {
    transform: rotate(270deg);
}
.selectedSection{
    background-color: #00F74B;
    border-radius: 20px 50px;
}
.side_menu .menu_section .list_item .submenu {
    background-color: #5c8f29;
    list-style: none;
    width: auto;
    padding: 1px 0;
    border-radius: 25px 0 0 25px;
    margin-left: 20px;
    display: none;
}

.side_menu.smallMenu .menu_section .list_item .submenu {
    display: none !important;
}

.side_menu .menu_section .list_item .submenu .submenu_item {
    padding: 8px 0 8px 8px;
    cursor: pointer;
    position: relative;
    margin-left: 10px;
}

.side_menu .menu_section .list_item .submenu .submenu_item a {
    width: 100%;
    text-decoration: none;
    color: #FFF;
    position: relative;
}

.side_menu .menu_section .list_item .submenu .submenu_item:hover {
    background-color: #FFF;
    border-radius: 50px 0 0 50px;
}

.side_menu .menu_section .list_item .submenu .submenu_item:hover a {
    color: #333
}

.side_menu .menu_section .list_item .submenu .submenu_item:hover::before {
    content: '';
    position: absolute;
    right: 0;
    top: -50px;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 35px 35px 0 10px rgb(255, 255, 255);
    pointer-events: none;
}

.side_menu .menu_section .list_item .submenu .submenu_item:hover::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -50px;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 35px -35px 0 10px rgb(255, 255, 255);
    pointer-events: none;
}

.smallMenu {
    width: 80px;
    min-width: 80px;
    transition: 0.3s ease-in-out;
}

.side_menu.smallMenu .menu_section .list_item .menu_item_link p,
.side_menu.smallMenu .menu_bottom .list_item .menu_item_link p {
    transition: 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

.side_menu.smallMenu .menu_section .list_item .menu_item_link .arrowleft {
    display: none
}

.side_menu.smallMenu .menu_head .personal_inf .imgPersonal img {
    opacity: 0;
    visibility: hidden;
    transition: 0.5s ease-in-out;
    margin: 0;
    position: absolute;
}

.side_menu.smallMenu .menu_head .personal_inf .imgPersonal {
    height: 45px;
    padding-left: 26px;
    padding-right: 0;
}

.menu-toggle {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.on .one {
    transform: rotate(45deg) translate(4px, 7px);
}

.on .two {
    opacity: 0;
}

.on .three {
    transform: rotate(-45deg) translate(4px, -8px);
}

.one,
.two,
.three {
    width: 100%;
    height: 2.5px;
    border-radius: 0;
    background: #FFF;
    margin: 5.5px auto;
    backface-visibility: hidden;
    transition-duration: 0.3s;
}

.one,
.three {
    width: 80%;
}

@media (max-width:768px) {
    .side_menu .menu_head .personal_inf .imgPersonal .menu-toggle {
        display: none;
    }
    .side_menu .menu_head .personal_inf .imgPersonal img {
        margin-left: 0;
    }
    .side_menu .menu_section .list_item,
    .side_menu .menu_bottom .list_item {
        margin: 0px 15px 15px 15px;
    }
}


/*####### End Menu  #########*/


/*### Start Table  ###*/

.table-responsive {
    display: block;
    width: 100%;
    overflow: auto;
    border-radius: 10px;
    background-color: #FFF;
}

.table_desc {
    margin: 20px 0;
}

.table_desc table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.table-responsive table thead {
    background-color: rgb(0, 77, 216);
}

.table_desc table thead tr th {
    border-right: 1px solid rgb(182, 182, 182);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 10px;
    text-align: center;
    color: rgb(255, 255, 255);
}

.table_desc table thead tr th.edit,
.table_desc table thead tr th.remove,
.table_desc table thead tr th.info,
.table_desc table thead tr th.shwo {
    width: 100px;
}

.table_desc table tbody tr td {
    border-bottom: 1px solid rgb(237, 237, 237);
    border-right: 1px solid rgb(237, 237, 237);
    padding: 10px;
    min-width: 120px;
    text-decoration: none;
    text-align: center;
}

table tbody tr td:first-child {
    border-left: 1px solid rgb(237, 237, 237);
}

.table_desc table tbody tr:nth-child(even) {
    background-color: #f3fbff
}

.table_desc table tbody tr td a {
    margin: auto;
    text-decoration: none;
}

.table_desc table tbody tr td.product_table a {
    color: rgb(51, 51, 51);
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

.table_desc table tbody tr td.product_table a img {
    width: auto;
    height: 100px;
    margin: auto;
}

.table_desc table tbody tr td.edit,
.table_desc table tbody tr td.show,
.table_desc table thead tr th.info,
.table_desc table tbody tr td.remove {
    min-width: 100px;
    cursor: pointer;
}

.table_desc table tbody tr td.remove a img,
.table_desc table tbody tr td.edit a img,
.table_desc table tbody tr td.show a img {
    width: auto;
    height: 30px;
}

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
    margin-top: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.page-item .page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    color: #004DD8;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #004DD8;
}

.page-item:first-child .page-link {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.page-item:last-child .page-link {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.page-item .page-link.activePagination {
    background-color: #004DD8;
    color: #FFF;
}


/*### End Table  ###*/


/* Start Popup Map  */

.pop.mapPop .popup_overlay {
    position: absolute;
    width: 100%;
    /* height: inherit; */
    top: 10%;
    right: 10%;
    bottom: 0px;
    left: 0px;
    /* background-color: rgba(0, 0, 0, 0.5); */
}

.pop.mapPop .popup_container {
    width: 100%;
    border-radius: 15px;
    background: #FFF;
    position: absolute;
    top: 51%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    height: 95%;
}

.pop.mapPop .popup_container .popup_content {
    /* padding: 16px; */
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    border: none !important;
    border-radius: 25px;
    height: inherit;
}

.popoppup.mapPop .popup_content #map {
    border-radius: 10px;
}

@media (max-width:768px) {
    .pop.mapPop .popup_container {
        width: 100%;
    }
}


/* End Popup Map  */


/* ############ Start cabinet popup ############ */

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
}

.modal-container .popup {
    position: fixed;
    top: 14%;
    left: 6%;
    width: 90%;
    height: 100%;
}

.tablewidth {
    margin-top: 5%;
    background-color: #F2F2F2;
}

.tableDataFull {
    background-image: url('../Site_Images/full-bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    /* Center the background image */
    background-size: contain;
    /* Adjust as needed to fit the image */
    width: 15%;
    max-width: 30%;
    padding: 5%;
    /* text-align: center; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Ensures vertical centering */
    color: #1851D1;
}

.tableDataoffline {
    background-image: url('../Site_Images/offline-bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    /* Center the background image */
    background-size: contain;
    /* Adjust as needed to fit the image */
    width: 15%;
    max-width: 30%;
    padding: 5%;
    /* text-align: center; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Ensures vertical centering */
    color: #1851D1;
}

.tableDataFault {
    background-image: url('../Site_Images/faulty-bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    /* Center the background image */
    background-size: contain;
    /* Adjust as needed to fit the image */
    width: 15%;
    max-width: 30%;
    padding: 5%;
    /* text-align: center; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Ensures vertical centering */
    color: transparent;
}

.tableDataCharge {
    background-image: url('../Site_Images/chargingl-bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    /* Center the background image */
    background-size: contain;
    /* Adjust as needed to fit the image */
    width: 15%;
    max-width: 30%;
    padding: 5%;
    /* text-align: center; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Ensures vertical centering */
    color: #3BF266;
}

.EmptySlot {
    text-align: center;
    padding: 10%;
    padding-left: 7%;
}


/* End cabinets  Popup   */


/* ############ Start popup ############ */

.popup .popup_overlay {
    position: fixed;
    width: 100%;
    height: inherit;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5
}

.popup_container {
    min-width: 50%;
    max-width: 80%;
    max-height: 80%;
    overflow: auto;
    border-radius: 10px;
    background: #FFF;
}

.popup_container .popup_header {
    padding: 15px;
    border-radius: 15px 15px 0 0;
    background: #FFF;
    position: relative;
}


/* .popup_container.wrong .popup_header {
    background-color: #FF4040;
} */

.popup_container.wrong .popup_content .button_group button {
    background-color: #FF4040;
}

.popup_container.warning .popup_header {
    background-color: #e0aa0c;
}

.popup_container.warning .popup_content .button_group button {
    background-color: #e0aa0c;
}


/* .popup_container.info .popup_header {
    background-color: #004DD8;
} */

.popup_container.info .popup_content .button_group button {
    background-color: #004DD8;
}

.popup_container .popup_header .closepopup {
    position: absolute;
    top: 11px;
    right: 17px;
    width: 25px;
    cursor: pointer;
}

.popup_container .popup_header .closepopup img {
    padding: 5px;
    background: #004DD8;
    border-radius: 40px;
}

.popup_container.wrong .popup_header .closepopup img {
    background-color: #FF4040;
}

.popup_container .popup_header h3 {
    margin: 0;
    color: #004DD8;
}

.popup_container.wrong .popup_header h3 {
    color: #FF4040;
}

.popup_container .popup_content {
    padding: 16px;
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 100px;
}

.popup_container .popup_content .contentdata_popup {
    text-align: center;
    display: flex !important;
    flex-direction: column;
    overflow: auto;
    align-items: center;
    justify-content: center;
    margin: 10px 0 20px 0;
}

.popup_container .popup_content .contentdata_popup p {
    margin: 0;
}

.popup_container .popup_content .contentdata_popup .testarea_group {
    flex: 0 0 90%;
    max-width: 90%;
}

.popup_container .popup_content .button_group {
    margin: 0;
}

.popup_container .popup_content .button_group button {
    width: 40%;
}

.flex_center {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width:768px) {
    .popup_container {
        width: 90%;
    }
    .popup_container .popup_content .button_group button {
        margin: auto;
    }
}


/* ############ end popup ############ */

@media (max-width:768px) {
    .input_group.multiple .multiple_inputs button {
        font-weight: 100;
        font-size: 14px;
    }
    .resualtAttachment {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-right: 0;
    }
    .button_group {
        flex-direction: column;
    }
    .button_group button {
        margin-bottom: 10px;
        margin-left: 0;
    }
    .button_group button {
        width: 100%;
    }
}

.input_group.multiple {
    flex: 0 0 48.5%;
    max-width: 48.5%;
}

.input_group.multiple .multiple_inputs {
    display: flex;
    justify-content: space-between;
}

.input_group.multiple .multiple_inputs input,
.input_group.multiple .multiple_inputs button {
    width: 30%;
}

.input_group.multiple .multiple_inputs button {
    border: 3px solid #004DD8;
    color: #004DD8;
    border-radius: 10px;
    background-color: transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

.inputsGroupContainer .input_group:last-child {
    margin-right: 0;
}

.input_group.locationInput input {
    padding-right: 40px;
}

.input_group.locationInput img {
    position: absolute;
    bottom: 7px;
    width: auto;
    height: 30px;
    right: 6px;
    pointer-events: none;
    cursor: pointer;
}

.input_group.calender_in img {
    position: absolute;
    bottom: 11px;
    width: auto;
    height: 22px;
    right: 10px;
    pointer-events: none;
    cursor: pointer;
}

.input_group.calender_in::before {
    position: absolute;
    content: '';
    width: 23px;
    height: 23px;
    bottom: 11px;
    right: 10px;
    background-color: #FFF;
    z-index: 0;
    pointer-events: none;
}

.input_group label {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
    color: #636363;
    text-align: left;
    text-transform: capitalize;
}

.resualtTable p {
    margin: 0;
    text-transform: capitalize;
    display: flex;
    font-size: 14px;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.resualtTable p select {
    font-weight: bold;
    margin: 0 10px;
    padding: 6px;
    height: 40px;
    width: 75px;
}

.subtitle {
    display: block;
}

.subtitle p {
    margin: 0;
    font-weight: bold;
    text-transform: capitalize;
    color: #07224D;
    font-size: 20px;
    font-family: 'Cairo';
}

@media (max-width:768px) {
    .subTi_reTa {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .subTi_reTa .subtitle {
        margin-bottom: 10px;
    }
    .subTi_reTa .input_group {
        flex: 0 0 100%;
        min-width: 100%;
    }
    .pag_reta {
        flex-direction: column;
        margin-top: 30px;
    }
    .pag_reta .pagination {
        order: 1;
    }
    .resualtTable {
        margin-bottom: 10px;
        width: 100%;
    }
    .resualtTable p select {
        width: 100%;
    }
}

.subTi_reTa,
.pag_reta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.subTi_reTa .input_group {
    margin: 0;
    max-width: 250px;
}

.containerInputs {
    width: 100%;
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0 0.1rem 1rem rgb(136 136 136 / 12%);
    padding: 20px 10px 10px 10px;
    margin-top: 20px;
}

.spinner {
    position: fixed;
    display: flex;
    width: 100%;
    justify-content: center;
    top: 0;
    height: 100%;
    z-index: 99999999;
    background-color: rgb(211 211 211 / 50%);
}

.spinner img {
    width: 400px; 
    /* height: 130px; */ 
    border-radius: 50%;
    transform: translate(-50%, -70%);
    top: 50%;
    left: 50%;
    position: absolute;
}


/*###### Start Main content ######*/

.main_content {
    /* width: 95.4%; */
    margin-left: 280px;
    height: 100vh;
    transition: 0.3s ease-in-out;
    background: #FFF;
    /*border-radius: 50px 0 0 50px;*/
    position: relative;
    z-index: 5;
    overflow: auto;
    overflow: auto;
    box-shadow: -20px 0rem 1rem rgb(55 55 55 / 15%);
    /* Background pattern loaded via background-pattern-optimized.css */
    background-repeat: no-repeat;
    background-size: inherit;
    background-position-x: 100%;
    background-position-y: 100%;
}

.fleet_content {

    height: 100vh;
    transition: 0.3s ease-in-out;
    background: #FFF;
    /*border-radius: 50px 0 0 50px;*/
    position: relative;
    z-index: 5;
    overflow: auto;
    overflow: auto;
    box-shadow: -20px 0rem 1rem rgb(55 55 55 / 15%);
    /* Background pattern loaded via background-pattern-optimized.css */
    background-repeat: no-repeat;
    background-size: inherit;
    background-position-x: 100%;
    background-position-y: 100%;
}

.main_content .FullMainContent .menu-toggle {
    display: none;
}

.smallMain {
    margin-left: 80px;
    transition: 0.3s ease-in-out;
    /* width: calc(100% - 5pc); */
}


/*#### start headBody  ####*/

.headBody {
    padding-top: 20px;
    display: flex;
    padding-bottom: 5px;
}

.welcomeTitle_notfication {
    padding: 0 0px 0px 20px;
    display: flex;
    justify-content: space-between;
    width: 80%;
}

.welcomeTitle h2 {
    margin: 0;
    color: #07224D;
    margin-bottom: 0px;
    font-weight: 700;
    font-family: 'cairo';
}

.welcomeTitle p {
    margin: 0;
    color: #6A6A6A;
    font-weight: 600;
}

.cont_not_he {
    display: flex;
    align-items: center;
}

.cont_not_he .help,
.cont_not_he .notfication {
    width: 35px;
    height: 35px;
    background: #F3F3F3;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.cont_not_he div:last-child {
    margin-right: 0;
}

.cont_not_he .help img,
.cont_not_he .notfication img {
    width: auto;
    height: 20px;
    display: flex;
}

.profile {
    display: flex;
    padding-right: 15px;
    padding-left: 15px;
    align-items: center;
}

.profile .imgProfile {
    display: flex;
    margin-right: 10px;
}

.profile .imgProfile img {
    width: auto;
    height: 50px;
    border-radius: 50%;
}

.profileData h2 {
    margin: 0 0 5px 0;
    font-size: 20px;
}

.profileData p {
    margin: 0;
}

@media (max-width:768px) {
    .main_content {
        overflow: hidden;
        overflow-y: auto;
        height: 100vh;
        width: inherit;
        border-radius: 50px 0 0 50px
    }
    .side_menu {
        height: 100vh;
    }
    /* .smallMenu {
        left: -70px;
    } */
    .smallMain {
        margin-left: 0;
        border-radius: 0;
    }
    .main_content .FullMainContent {
        width: 100vw;
        position: relative;
    }
    .FullMainContent .headBody .logo {
        width: 10pc;
        margin-left: 20px;
    }
    .FullMainContent .menu-toggle {
        position: fixed;
        background: #004dd8;
        height: 35px;
        width: 35px;
        padding-top: 2px;
        top: 80px;
        z-index: 2;
        padding-left: 5px;
        padding-right: 7px;
        border-radius: 0 25px 25px 0;
    }
    .main_content .FullMainContent .menu-toggle {
        display: block;
    }
    .profileData, .profile {
        display: none;
    }
    .welcomeTitle_notfication{
        width: 95%;
    }
}


/*#### end headBody  ####*/


/* ############ Start Login Page ############ */

.loginPage {
    height: 100vh;
    background-image: url('../Site_Images/patternLogin.png');
    object-fit: cover;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #004DD8;
    overflow: hidden;
}

.logoLanding {
    display: flex;
    position: absolute;
    top: 15px;
    left: 50px;
    width: auto;
    height: 45px;
}

.loginPage .patternLogin {
    width: 50%;
    position: relative;
    background-color: #DAFCEE;
    height: 100%;
    display: flex;
}

.patternLogin .logindata {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 35%;
    left: 50%;
    width: 80%;
    text-align: center;
    z-index: 1;
}

.patternLogin .logindata h2 {
    margin: 0 0 20px 0;
    font-size: 40px;
}

.patternLogin .logindata p {
    margin: 0;
    font-size: 17px;
}

.loginPage .patternLogin img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    position: relative;
}

.inputLogin {
    width: 32%;
    padding: 15px 25px 20px;
    height: fit-content;
    border-radius: 30px;
    background-color: #FFF;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo_language {
    display: flex;
    align-items: center;
    justify-content: end;
}

.logo_language .imgLog img {
    width: auto;
    height: 40px;
}

.logo_language .changeLanguage {
    display: flex;
}

.logo_language .changeLanguage img {
    width: auto;
    height: 22px;
}

.inputLogin .input_group {
    max-width: 100%;
    margin-bottom: 12px;
    margin-right: 0;
    margin-top: 6px;
}

.inputLogin .titleLogin {
    margin-bottom: 15px;
    text-align: center;
}

.inputLogin .titleLogin h2 {
    margin-bottom: 8px;
    font-size: 22px;
    margin-top: 0;
    color: #07224D;
}

.inputLogin .titleLogin p {
    font-size: 14px;
    color: #949494;
    width: 70%;
    margin: auto;
}

.btnLogin button {
    width: 100%;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-right: 10px;
    transition: 0.2s ease-in-out;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Montserrat';
    min-height: 40px;
    margin-bottom: 8px;
}

.Remember_Forget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    margin-bottom: 18px;
}

.Remember_Forget label {
    text-align: start;
    word-break: break-word;
    font-weight: 400;
    margin-bottom: 0;
}

.Remember_Forget a {
    text-decoration: none;
    color: #004dd8;
    font-size: 13px;
    font-weight: 600;
}

.copyRight {
    position: absolute;
    bottom: -40px;
    font-size: 13px;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
}

.create_login {
    margin-bottom: 0px;
    margin-top: 8px;
}

.create_login a {
    color: #004dd8;
    font-weight: bold;
}

.register .inputLogin .titleLogin p {
    width: auto;
}

.passwordEyes {
    width: auto;
    position: absolute;
    height: 16px;
    bottom: 11px;
    right: 15px;
    cursor: pointer;
}

.passInput input {
    padding: 0 50px 0 10px;
}

.forgot_password {
    text-align: right;
    margin-top: 8px;
    margin-bottom: 12px;
}

.forgot_password a {
    color: #0066ff;
    text-decoration: none;
    font-size: 13px;
    transition: opacity 0.3s;
    font-weight: 500;
}

.forgot_password a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

@media (max-width:992px) {
    .logoLanding {
        left: 50%;
        transform: translateX(-50%);
    }
    .loginPage .patternLogin {
        display: none;
    }
    .inputLogin {
        width: 90%;
        top: 52%;
        padding: 18px 22px;
    }
    .logo_language .imgLog img {
        height: 35px;
    }
    .copyRight {
        white-space: pre;
        bottom: 15px;
    }
    .create_login {
        font-size: 13px;
    }
    .inputLogin .titleLogin p {
        width: 100%;
    }
    .inputLogin .titleLogin h2 {
        margin-bottom: 5px;
    }
    .Remember_Forget {
        margin-bottom: 15px;
    }
}


/* ############ end Login Page ############ */


/*#### start contentBody  ####*/

.contentBody {
    padding: 20px;
    margin-top: 10px;
}

.contentBody .titleSection h2 {
    margin: 0;
    color: #07224D;
    font-weight: 600;
    margin-bottom: 10px;
}


/*#### end contentBody  ####*/


/*#### start statusDashboard  ####*/

.statusDashboard {
    margin: 20px 0;
}

.statusDashboard .box-data {
    border-radius: 20px;
    border: 2px solid #F2F2F2;
    padding: 20px;
    background-color: #FFF;
}

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

.statusDashboard .box-data .head_box .contentBox p {
    margin: 0 0 5px;
    font-size: 20px;
    color: #6A6A6A;
}

.statusDashboard .box-data .head_box .contentBox h1 {
    margin: 0;
    color: #07224D;
}

.statusDashboard .box-data .head_box .iconBox {
    background: #F3F3F3;
    width: 60px;
    height: 60px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.statusDashboard .box-data .head_box .iconBox img {
    width: auto;
    height: 35px;
}

.statusDashboard .box-data .statusItem p {
    margin: 6px 0 0 0;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.statusDashboard .box-data .statusItem p span {
    margin-right: 5px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.statusDashboard .box-data .statusItem p span img {
    width: 29px;
    height: 29px;
    padding: 8px;
    border-radius: 50%;
    margin-right: 5px;
}

.statusDashboard .box-data .statusItem p .plus {
    color: #0EB937;
}

.statusDashboard .box-data .statusItem p .plus img {
    background: #D8FEDF;
}

.statusDashboard .box-data .statusItem p .minus {
    color: #FF8181;
}

.statusDashboard .box-data .statusItem p .minus img {
    background: #FFDADA;
}

.statusDashboard .box-data .bottom_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

.statusDashboard .box-data .bottom_box.rider {
    justify-content: space-around;
}

.statusDashboard .box-data .bottom_box .itemBox {
    text-align: center;
}

.statusDashboard .box-data .bottom_box .itemBox p {
    margin: 0;
    font-size: 13px;
    color: #6A6A6A;
    font-weight: 600;
}

.statusDashboard .box-data .bottom_box .itemBox span {
    margin-top: 5px;
    display: block;
    font-size: 24px;
    color: #07224D;
    font-weight: 600;
}

@media (max-width:768px) {
    .statusDashboard .box-data {
        margin-bottom: 15px;
    }
    .statusDashboard .box-data .head_box .contentBox h1 {
        font-size: 25px;
        font-weight: 700;
    }
}


/*#### end statusDashboard  ####*/


/*#### start  statusBatery_swaps  ####*/

.statusBatery_swaps .statusChart {
    border-radius: 20px;
    border: 2px solid #F2F2F2;
    padding: 20px;
    background-color: #FFF;
    margin-bottom: 20px;
}

.statusBatery_swaps .statusChart .title_drop {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.statusBatery_swaps .statusChart .title_drop .subTitle h2 {
    color: #07224D;
    margin: 0;
    font-weight: 700;
    font-family: 'Cairo';
}

.statusBatery_swaps .statusChart .cont_typeChart_drop p {
    margin: 0 10px 0 0;
    display: flex;
    align-items: center;
}

.statusBatery_swaps .statusChart .cont_typeChart_drop p span {
    width: 15px;
    height: 15px;
    display: block;
    margin-right: 10px;
    border-radius: 5px;
}

.statusBatery_swaps .statusChart .cont_typeChart_drop .typeChart p .full {
    background-color: #004DD8;
}

.statusBatery_swaps .statusChart .cont_typeChart_drop .typeChart p .user {
    background-color: #00F74B;
}

.statusBatery_swaps .statusChart .cont_typeChart_drop .dropDate .input_group {
    margin: 0;
    width: 90px;
}

.statusBatery_swaps .statusChart .cont_typeChart_drop .dropDate .input_group select {
    padding: 8px;
    height: 40px;
}

.statusBatery_swaps .statusChart .cont_typeChart_drop {
    display: flex;
    align-items: center;
}

.statusBatery_swaps .statusChart .typeChart {
    display: flex;
}

@media (max-width:768px) {
    .statusBatery_swaps .statusChart.bettaryLand .title_drop {
        flex-direction: column;
        align-items: inherit;
    }
    .statusBatery_swaps .statusChart.bettaryLand .cont_typeChart_drop {
        justify-content: end;
        margin-top: 5px;
    }
    .statusBatery_swaps .statusChart .title_drop .subTitle h2 {
        font-size: 20px;
    }
}


/*#### end  statusBatery_swaps  ####*/


/*###### end Main content ######*/

.containerfooter_re_of {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width:768px) {
    .containerfooter_re_of {
        flex-direction: column;
    }
}


/*#### Start Map  ####*/

.containermap {
    background: #F8F6F4;
    border-radius: 30px;
    height: 540px;
    padding: 15px;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.containermap .mapInBlue {
    width: 100%;
    display: flex;
    height: 100%;
    border-radius: 30px
}

.containermap .mapInBlue iframe {
    width: 100%;
    border-radius: 25px;
}

.detailsMap {
    width: 20pc;
    padding-right: 15px;
}

.container_detailsMap {
    background: #FFF;
    border-radius: 29px;
    padding: 10px;
    height: 100%;
    position: relative;
}

.container_detailsMap .title_status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 25px 0 10px 0;
}

.container_detailsMap .title_status h3 {
    margin: 0;
}

.container_detailsMap .title_status p {
    margin: 0;
    font-weight: 500;
}

.statusService.online {
    color: #0AD339;
}

.statusService.offline {
    color: #FF4040;
}

.statusService.disabled {
    color: #b7b7b7;
}

.locationDetails {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.locationDetails img {
    width: auto;
    height: 20px;
    margin-right: 10px;
}

.locationDetails p {
    margin: 0;
    font-weight: 500;
}

.dircation_btn {
    width: 100%;
    font-size: 16px;
}

.containerBattery {
    height: 340px;
    overflow: auto;
}

.containerBattery .CCBB {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.containerBattery .containerColumBattery {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    width: 48%;
}

.containerBattery .batteryShip {
    display: flex;
    background: #F7F7F7;
    padding: 5px 10px;
    border-radius: 20px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.containerBattery .batteryShip img {
    width: auto;
    height: 17px;
}

.containerBattery .batteryNumber p {
    margin: 0;
    font-weight: 500;
}

.closeDetails {
    position: absolute;
    right: 15px;
    width: 24px;
    cursor: pointer;
}

.batteryShip.low {
    border: 2px solid #FF4040;
}

.batteryShip.middle {
    border: 2px solid #E6DF11;
}

.batteryShip.disabled {
    border: 2px solid #b7b7b7;
}

.batteryShip.disabled .batteryNumber p {
    color: #b7b7b7;
}

@media (max-width:768px) {
    .containermap {
        flex-direction: column;
        height: 600px;
    }
    .container_detailsMap {
        margin-bottom: 20px;
    }
    .detailsMap {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
        order: 2;
    }
    .containerBattery {
        height: 150px;
    }
    .container_detailsMap .title_status {
        margin-bottom: -10px;
    }
}


/*#### end Map  ####*/

.testarea_group {
    margin-bottom: 5px;
    margin-top: 12px;
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;
    margin-right: 15px;
}

.testarea_group label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
}

.data_box_container {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.data_box {
    width: calc(50% - 30px);
    margin: 15px;
    min-height: 100%;
}

.data_box>div {
    padding: 15px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 60px 10px;
    background: linear-gradient( 90deg, rgb(0 77 216) -120%, rgb(255 255 255) 140%);
    box-shadow: 0 0 5px 2px #b2b2b21a;
}

.data_box_icon {
    margin-bottom: 10px;
    background: #FFF;
    padding: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px 10px;
    box-shadow: 0 0 5px 2px #5b5b5b29;
}

.data_box_icon>img {
    width: 50px;
    height: 50px;
}

.data_box_container span {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 18px;
    color: #07224D;
}

.empty_Account_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.emptyIcon {
    width: auto;
    height: 200px;
    margin-bottom: 0;
    padding: 20px;
    background-color: #f9f9f9;
    border: 2px solid #ecececdd;
    border-radius: 50%;
}

.empty_Account_container h2 {
    margin: 0;
    font-size: 30px;
    text-align: center;
    color: #808080;
    font-weight: 600;
}

.empty_Account_container span {
    display: block;
    margin: 0 0 10px 0;
    text-align: center;
}

.empty_Account_container button {
    width: 250px;
}

.astrix::after{
    content: "*";
    color: #c91e1e;
    margin-left: 3px;
}
.seachbarCloseButton{
    width: 12px !important;
    position: absolute;
    right: 10px;
    padding-top: 16px;
    top: 1px;
    cursor: pointer;
}

.dropDownListCloseButton{
    width: 12px !important;
    position: absolute;
    right: 45px;
    padding-top: 16px;
}

.dropDownListArrowButton{
    width: 12px !important;
    position: absolute;
    right: 30px;
    padding-top: 16px;
}