:root {
    --primary-color: #FAFFFB;
    --secondary-color: #062F45;
    --background-color: #ffffff;
    --sidebar-hover-color: #34B553;
    --sidebar-active-color: #34B553;
    --primery-text-color: #ffffff;
    --secondary-text-color: #000;
    --popover-primery-color: #062F45;
    --sidebar-text-color: #857766;
    --button-hover-color: #C5D5C7;
    /* #F9FBF9; */


    --form-field-background-color: #F8F8F8;
    --right-side-content-color: #8B8988;
    --rignt-side-bottom-border: #DEDCDB;
    --primery-btn-color: #34B553;
    --text-field-label-color: #6c757d;

    --top-content-link-color: black;
    --top-content-bg-color: white;
    --main-nav-title-color: #111827;


    --tabulator-title-bg-color: #8B8988;
    --tabulator-title-color: #000;
    --tabulator-border-color: #8B8988;
    --tabulator-even-bg-color: #f0f0f0;
    --tabulator-odd-bg-color: #fff;

    --upload-border-color: #C0C0C0;
    --upload-bg-color: #FFFFFF;
    --upload-brows-btn-color: #13A89E;

    --addlink-border-color: #D0DDD3;
    --primary-bg-color: #ffffff;
    --addlink-text-color: #fff;

    --add-btn-color: #34B553;
    --export-btn-color: #0CA3D2;

    --admin-btn-color: #34B553;
    --edit-btn-color: #34B553;
    --delete-btn-color: #34B553;
    --import-btn-color: #34B553;
    --download-btn-color: #34B553;

    --admin-btn-hover-color: #5ACE75;
    --edit-btn-hover-color: #5ACE75;
    --delete-btn-hover-color: #5ACE75;
    --import-btn-hover-color: #5ACE75;
    --download-btn-hover-color: #5ACE75;


    --submit-btn-color: #5ACE75;

    --model-button-bg-color: #F9F3C8;
    --modlel-button-hover-color: #7ef84d;

    --pagination-background-color: #c5c4c3;
}

/* MAIN STYLES */


body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

html::-webkit-scrollbar {
    display: none;
}

html {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body {
    overflow-y: scroll;
}

main {
    flex: 1;
}

.container-wrapper {
    display: flex;
    flex-direction: column;
    height: 95vh;
    justify-content: space-between;
}

#contents {
    padding-left: 280px;
    margin: 0px;
    padding-bottom: 20px;
    max-width: -webkit-fill-available;
    max-width: 100%;
}


.reset-button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    width: auto;
    height: auto;
    line-height: inherit;
    text-align: inherit;
    box-shadow: none;
}

/* .btn-primary{
    background-color:var(--submit-btn-color) !important ;
} */

/* SIDEBAR STYLES */

.navbar-content {
    overflow: hidden;
    overflow-y: scroll;
    position: fixed !important;
    top: 0;
    left: 0;
    padding: 0 !important;
    z-index: 40;
    height: 100vh;
    background-color: var(--primary-color) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.navbar-content::-webkit-scrollbar {
    width: 1px;
}

.navbar-content::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.navbar-content::-webkit-scrollbar-track {
    background-color: transparent;
}

.nav-items-alignment {
    padding-left: 0;
    width: 100%;
    height: 100%;
}

.main-nav-title {
    display: flex;
    font-size: large;
    font-weight: bold;
    padding-bottom: 50px;
    padding-top: 50px;
    margin-bottom: 4px;
    width: 100%;
    justify-content: center;
    align-items: center;
    border-radius: 0.125rem;
    color: var(--main-nav-title-color);
}

/* .main-nav-title:hover {
    background-color: var(--sidebar-hover-color);
} */



.user-name {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
    padding-top: 10px;
    color: var(--primery-text-color) !important;
}

.menu-title {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    color: var(--sidebar-text-color) !important;
}

.main-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    color: var(--primery-text-color) !important;
}

.menu-item {
    display: inline-flex;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 0.125rem;
    justify-content: center;
}

.menu-text {
    white-space: nowrap;
}

.menu-button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    outline: inherit;
}

.menu-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    border: none !important;
}

.menu-icon-rotation {
    transform: rotate(180deg);
}

.menu-icon-animation {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.menu-item:hover {
    background: var(--sidebar-hover-color) !important;
}


.menu-item:hover div .dark-menu-icon {
    display: none !important;
}

.menu-item:hover div .light-menu-icon {
    display: block !important;
}

.menu-item:hover .menu-title {
    color: var(--primery-text-color) !important;
}

.selected-nav-item .menu-item div .light-menu-icon {
    display: block !important;
}

.selected-nav-item .menu-item div .dark-menu-icon {
    display: none !important;
}

.selected-nav-item .menu-item .menu-title {
    color: var(--primery-text-color) !important;
}


.icon-padding {
    padding-left: 25px !important; 

}

.selected-nav-item {
    background-color: var(--sidebar-active-color) !important;

}

.nav-item {
    color: var(--primery-text-color) !important;
}


.hide {
    display: none !important;
}

/* SIDEBAR WIDTH */


.navbar-collapsed {
    width: 80px;
}

.navbar-expanded {
    width: 280px;
}

.menu-collapsed {
    padding-left: 80px !important;
}

.menu-expandeded {
    padding-left: 280px !important;
}

/* MAIN CONTENT STYLES */


.main-content {
    background-color: var(--background-color);
    flex: 1;

}

.iframe-container iframe {
    height: 600px;
    width: 100%;
}

.main-content h3 {
    font-size: 1.25rem;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}


/* MAP VIEW STYLES */

#map {
    height: 700px !important;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

/* POPOVER STYLES */


.popover {
    min-width: 250px;
    border-top-right-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
    border-top-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.menu-title-popover {
    color: var(--popover-primery-color) !important;
}

.nav-item-popover {
    padding: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    justify-content: start !important;
    align-items: center !important;
}

.nav-icon-popover {
    padding-right: 10px !important;
}


.popover .popover-header,
.popover .popover-body {
    padding: 0;
}

.popover .popover-body * {
    margin: 0;
    /* Removes margin from all elements within the popover body */
}

.popover-arrow {
    display: none !important;
}


/* TOP NAVBAR STYLES */

.top-navbar {
    overflow: visible;
    position: fixed !important;
    top: 0;
    left: var(--navbar-padding-left, 80px);
    right: 0;
    z-index: 40;
    width: calc(100% - var(--navbar-padding-left, 80px));
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}


#top-navbar-content {
    padding-left: 80px !important;
}

#middle-main-content {
    padding: 0px;
}

.top-navbar-icon-padding {
    padding-left: 10px;
}

/* RIGHT SIDE FORM CONTENT */

.right-side-content .h4-title,
.form-group {
    color: var(--right-side-content-color);
}

.right-side-content {
    padding: 10px;
    border-radius: 5px;
}

h4 {
    padding: 0 0 15px 10px;
    border-bottom: 1px solid var(--rignt-side-bottom-border);
}

.form-control {
    background-color: var(--form-field-background-color) !important;
    border: none !important;
    resize: none;
}

.btn-primary {
    --bs-btn-bg: var(--primery-btn-color) !important;
    --bs-btn-border-color: var(--primery-btn-color) !important;
    margin: 20px 10px 10px auto;
    display: block !important;
    width: 200px !important;
}

.requiredField {
    display: none;
    margin-bottom: 5px;
}

.custom-file {
    display: none !important;
}

.asteriskField {
    color: var(--delete-btn-color);
}

.fa-caret-down {
    float: right;
    padding-right: 8px;
}



/* TABULATOR STYLES */

.tabulator {
    border-radius: 8px;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    justify-content: center !important;
    text-align: center !important;
    padding-left: 10% !important;
}

.tabulator .tabulator-header .tabulator-col {
    /* background-color: var(--tabulator-title-bg-color) !important; */
    color: var(--tabulator-title-color) !important;
    border-right: 1px solid var(--tabulator-border-color) !important;
    text-align: center !important;
    height: 60px !important;
    justify-content: center !important;
}

.tabulator .tabulator-header .tabulator-col:last-child {
    border-right: none !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-arrow {
    color: var(--tabulator-title-color) !important;
    margin-left: 5px !important;
    visibility: visible !important;
}

.tabulator .tabulator-row .tabulator-cell {
    border-bottom: 1px solid var(--tabulator-border-color) !important;
    text-align: center !important;
    height: 50px !important;
}

.tabulator .tabulator-row {
    height: 50px !important;
}

.tabulator-row .tabulator-cell {
    border-right: none !important;
    text-align: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding-top: 15px !important;
}

.tabulator .tabulator-row .tabulator-cell:last-child {
    border-right: none !important;
}


#table .tabulator .tabulator-header .tabulator-col.sortable:hover .tabulator-col-title,
#table .tabulator .tabulator-header .tabulator-col.sortable .tabulator-col-title,
#table .tabulator .tabulator-header .tabulator-col .tabulator-arrow {
    background-image: none !important;
}

#table>div.tabulator-header>div>div.tabulator-headers>div:nth-child(9)>div>div>div.tabulator-col-sorter>div {
    display: none !important;
}

#myDataTable2 {
    padding: 0px !important;
}



/*  VIEW REPORTS STYLES */

#div_id_items div select,
#second-dropdown-form div select {
    border: 1px solid var(--upload-border-color);
    border-radius: 10px;
}


/* FILE UPLOAD UI STYLES */

/* #div_id_csv_file {

}  */

#div_id_file {
    width: 100%;
    /* height: 30% !important;
    margin: auto;
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px; */
}


/* .form-control.custom-file */

#upload-form {
    border: 2px dashed var(--upload-border-color) !important;
    border-radius: 10px !important;
    position: relative !important;
    height: 300px !important;
    /* padding: 30px !important; */
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--upload-bg-color);
}

.custom-file-input {
    width: 100% !important;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    padding: 20px;
}

#file-input {
    width: 100% !important;

}

.custom-file-label {
    /* width: calc(100% - 60px); */
    overflow: hidden;
    /* white-space: nowrap; */
    text-overflow: ellipsis;
    cursor: pointer;
    text-align: center;
    color: var(--secondary-text-color);
}

.custom-file-label:after {
    content: attr(data-filename);
    display: inline-block;
    background-color: var(--upload-brows-btn-color);
    border-radius: 15px;
    color: var(--primery-text-color) !important;
    padding: 15px;
    min-width: 200px;
    margin-left: 10px;
    font-size: 14px;
    z-index: 200;
}

.custom-file-label:not(:empty)::after {
    content: 'Browse File';
}

.custom-file-label:empty::after {
    content: 'No file chosen';
}

#download-csv {
    margin-top: 20px;
    display: block;
    background-color: var(--add-btn-color);

}

/* TABLE PAGINATION STYLES */


.pagination {
    margin-top: 10px;
    width: 100%;
    justify-content: end;
}

.pagination .step-links a {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-flex;
    background-color: var(--pagination-background-color);
    text-decoration: none;
    border-radius: 5px;
    color: var(--secondary-text-color);

}

/* 
.top-content table tbody tr th:nth-child(1),
.top-content table tbody tr td:nth-child(2),
.top-content table tbody tr td:nth-child(3),
.top-content table tbody tr td:nth-child(6) {
    display: none;
} */

/* Ajax view call*/
/* .disabled-link {
    color: grey;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    opacity: 0.5;
} */

/* .tabulator .tabulator-row:nth-child(even) {
    background-color: var(--tabulator-even-bg-color) !important;
}

.tabulator .tabulator-row:nth-child(odd) {
    background-color: var(--tabulator-odd-bg-color) !important;
} */


/* TOP CONTENT STYLES */

/* <a> TAG CONVERTS TO BUTTON */

/* .button-link {
    color: white !important;
    padding: 8px 50px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 10px;
} */

/* .button-link:hover {
    color: black;
}

.block-top-content {
    height: 80px;
    width: 100%;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    border-radius: 10px;
} */

/* .upload-btn {
    background-color: #0CA3D2;
}

.edit-btn {
    background-color: #79C525;
} */

/* .top-content a.ajax-link {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--top-content-link-color);
    font-weight: 600;
    text-decoration: none;
}

.top-content th,
.top-content td {
    padding: 10px
}

.top-row {
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin-bottom: 5px;
    background-color: var(--top-content-bg-color) !important;
}  */


/* TOP CONTENT STYLES & POSITIONING */

.h5-title {
    width: 40%;
    /* position: absolute; */
    top: 100px;
    /* padding-left: 30px; */
    padding-bottom: 10px;
    padding-top: 10px;
    z-index: 5;
}

.top-custom-buttons {
    border: 1px solid var(--form-field-background-color) !important;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 20px;
    width: 100%;
    position: absolute;
    z-index: 1;
    right: 0px;
    top: 70px
}

.main-content form #dataTable {
    margin-top: 100px;
}

.custom-buttons div div a {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px;
    border: none !important;
}

.right-side-content .h4-title h4 {
    font-size: 15px;
}

.right-side-content {
    position: absolute;
    top: 160px;
}


/* TOP CONTENT BUTTON STYLES */




.add-btn {
    background-color: var(--add-btn-color) !important;
}

.update-btn {
    background-color: var(--add-btn-color) !important;
}

.delete-btn {
    background-color: var(--delete-btn-color) !important;
}

.download-btn {
    background-color: var(--download-btn-color) !important;
}

.import-btn {
    background-color: var(--import-btn-color) !important;
}

.export-btn {
    background-color: var(--export-btn-color) !important;
}

.object-tools .addlink {
    background-color: var(--add-btn-color) !important;
    color: var(--primery-text-color) !important;
}

.view-btn {
    background-color: var(--primary-color) !important;
}


.view-1 {
    padding-top: 90px;
}









/* TOP CONTENT BUTTON STYLES */


.btn-primary {
    background: var(--primery-btn-color);
}

.btn-primary:hover {
    background-color: var(--admin-btn-hover-color) !important;
    border-color: var(--admin-btn-hover-color) !important;
}

.add-btn {
    background-color: var(--add-btn-color) !important;
}



#downloadModelHeaders {
    border: 1px solid var(--addlink-border-color) !important;
    background-color: var(--download-btn-color) !important;
    color: var(--addlink-text-color) !important;
}


#bulkImportModelRecords {
    border: 1px solid var(--addlink-border-color) !important;
    background-color: var(--import-btn-color) !important;
    color: var(--addlink-text-color) !important;
}

#bulkDeleteModelRecords {
    border: 1px solid var(--addlink-border-color) !important;
    background-color: var(--delete-btn-color) !important;
    color: var(--addlink-text-color) !important;
}


#bulkChangeModelRecords {
    border: 1px solid var(--addlink-border-color) !important;
    background-color: var(--edit-btn-color) !important;
    color: var(--addlink-text-color) !important;
}

#adminChangeList {
    border: 1px solid var(--addlink-border-color) !important;
    background-color: var(--admin-btn-color) !important;
    color: var(--addlink-text-color) !important;
}






#adminChangeList,
#bulkImportModelRecords,
#bulkDeleteModelRecords,
#bulkChangeModelRecords,
#downloadModelHeaders {
    font-weight: 600;

}


#downloadModelHeaders:hover {
    background-color: var(--download-btn-hover-color) !important;

}

#adminChangeList:hover {
    background-color: var(--admin-btn-hover-color) !important;

}

#bulkImportModelRecords:hover {
    background-color: var(--import-btn-hover-color) !important;
}

#bulkDeleteModelRecords:hover {
    background-color: var(--delete-btn-hover-color) !important;
}

#bulkChangeModelRecords:hover {
    background-color: var(--edit-btn-hover-color) !important;
}





.download-btn {
    background-color: var(--download-btn-color) !important;
}


.export-btn {
    background-color: var(--export-btn-color) !important;
}


/* .pagination {
    display: none !important;
} */

.popover-item {
    text-decoration: none !important;
}


/* SALSE DASHBOARD STYLES */

input[name="start_date"],
input[name="end_date"] {
    width: 300px;
    height: 40px;
    border: 1px solid var(--addlink-border-color) !important;
    border-radius: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

#date_range_submit {
    height: 40px;
    background-color: var(--add-btn-color);
    color: var(--addlink-text-color);
}

#date_range_submit:hover {
    background-color: var(--admin-btn-hover-color);
}

.form-group {
    padding-bottom: 20px;
}

#date_range_select_form {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

#slot_utilization_1,
#slot_utilization_2,
#slot_allocation_1,
#slot_allocation_2 {
    padding: 10px;
    border: 1px solid #dbdbdb;
    border-radius: 20px;
    margin-top: 20px;
}



#menu_button_dropdown {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 200px;
    border: 1px solid #dbdbdb;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    margin: 20px;
}

#menu_button_drop_list {
    padding-left: 10px;
}


@media (max-width: 1000px) {
    #date_range_select_form {
        display: block;

    }
}

@media (max-width: 1100px) {

    #nav-sidebar,
    #toggle-nav-sidebar {
        display: none;
    }

    .main.shifted>#nav-sidebar+.content {
        max-width: 100% !important;
    }

    #changelist .actions {
        display: flex !important;
        flex-wrap: wrap;
        padding: 15px 0;
    }

    .object-tools {
        float: right !important;
    }

    .navbar-expanded {
        width: 80px;
    }

    .menu-title {
        display: none;
    }

    #main-navbar {
        --navbar-padding-left: 80px !important;
        width: calc(100% - 80px) !important;
    }

    #contents {
        padding-left: 80px;
    }

}









@media (max-width: 550px) {
    #changelist {
        display: block !important;
    }

    #image-fg {
        display: none !important;
    }

    .login_form_area {
        width: 100% !important;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        min-width: 0px !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    #login-btn input {
        width: 200px !important;
    }

    #login-bg-image {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    #changelist .actions {
        display: flex !important;
    }
}

@media (max-width: 767px) {
    form>div>fieldset>.form-row {
        padding: 10px;
    }

    .top-navbar-icon-padding {
        display: none;
    }
}


#menu_button_dropdown {
    display: none;
}


@media (max-width:1200px) {
    #menu_button_dropdown {
        display: block !important;
    }

    #menu_button_list {
        display: none !important;
    }
}

/* MQTT LIVE DATA STYLES */

#mqtt-title h1 {
    color: var(--primary-title-color);
    font-family: Inter;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 38px;
    text-transform: capitalize;
    padding-left: 20px;
    padding-top: 20px;
}


#id_sectors, #id_cross_cutting_areas {
    border: 1px solid var(--addlink-border-color);
    border-radius: 10px;
    width: 100%;
    padding: 10px;
}

#id_adaptation_needs {
    border: 1px solid var(--addlink-border-color);
    border-radius: 10px;
    padding: 10px;
}



#div_id_province{
    display:none;
}