.toggle {
    cursor: pointer;
    display: inline-block;
   
}
.avatar {
    height: 40px;
    width: auto;
    border-radius: 50%
}
.hr {
    border-top: 1.5px solid #0078a8;
}
.line-height1 {
    line-height: 1.5 !important;
}
.line-height2 {
    line-height: 2 !important;
}
.border-radius-5 {
    border-radius:5px !important
}
.border-radius-10 {
    border-radius: 10px !important
}
.toggle-switch {
    display: inline-block;
    background: red;
    border-radius: 16px;
    width: 58px;
    height: 32px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}

.toggle-switch:before, .toggle-switch:after {
    content: "";
}

.toggle-switch:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    width: 24px;
    height: 24px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s;
}

.toggle:hover .toggle-switch:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.toggle-checkbox:checked + .toggle-switch {
    background: limegreen;
}

.toggle-checkbox:checked + .toggle-switch:before {
    left: 30px;
}
.header-page {
    background-color: white;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center
}

.breadcrumb-custom {
    display: flex;
}

.breadcrumb-custom li {
    list-style: none;
    padding: 5px 0px
}

.breadcrumb-custom li:not(:last-child):after {
    content: ">";
    margin: 0 5px
}
.toggle-checkbox {
    position: absolute;
    visibility: hidden;
}

.toggle-label {
    margin-left: 5px;
    position: relative;
    top: 2px;
}
.form-horizontal, .control-label {
    text-align: right !important;
}

.successProgressBar {
    background-color: #00ff00 !important;
    height: 7px !important;
}
.display-none {
    display: none;
}
.errorProgressBar {
    background-color: red !important;
    height: 7px !important;
}

.active1 {
    background-color: #05e6ff;
    border-radius: 10px;
}

.deleted {
    opacity: 0.5;
    border: 3px solid red
}

.w-100 {
    width: 100%;
}

.w-75 {
    width: 75%;
}

.w-95 {
    width: 95%;
}

.margin10 {
    margin: 10px 10px
}

.w-50 {
    width: 50%;
}

.margin-bt-5 {
    margin-bottom: 5px;
}

.custom-border {
    border-radius: 10px;
   border: 2px dashed black;
}

.i3 {
    margin-top: 3px;
}

.i5 {
    margin-top: 5px;
}

.margin-top60 {
    margin-top: 60px;
}

.margin-top30 {
    margin-top: 30px;
}

.padding-30 {
    padding: 30px;
}

.padding-10 {
    padding: 10px;
}

.padding-top30 {
    padding-top: 30px;
}

.margin-top-3 {
    margin-top: 3px;
}

.tooltip {
    font-size: inherit !important;
    font-family: inherit !important;
}

.padding0 {
    padding: 0 !important;
}

.padding5 {
    padding: 10px !important;
}

.margin-top5 {
    margin-top: 10px !important;
}

.padding-top5 {
    margin-top: 5px !important;
}

.text-align-right {
    text-align: right !important;
}

.center {
    text-align: center !important;
}

.form-horizontal .control-label {
    text-align: right !important;
}

.toggle {
    cursor: pointer;
    display: inline-block;
}

.toggle-switch {
    display: inline-block;
    background: red;
    border-radius: 16px;
    width: 58px;
    height: 32px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}

    .toggle-switch:before, .toggle-switch:after {
        content: "";
    }

    .toggle-switch:before {
        display: block;
        background: linear-gradient(to bottom, #fff 0%, #eee 100%);
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
        width: 24px;
        height: 24px;
        position: absolute;
        top: 4px;
        left: 4px;
        transition: left 0.25s;
    }

.toggle:hover .toggle-switch:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.toggle-checkbox:checked + .toggle-switch {
    background: limegreen;
}

    .toggle-checkbox:checked + .toggle-switch:before {
        left: 30px;
    }

.toggle-checkbox {
    position: absolute;
    visibility: hidden;
}

.toggle-label {
    margin-left: 5px;
    position: relative;
    top: 2px;
}

.col-sm-10, col-sm-2 {
    padding-top: 10px !important;
}

.col-sm-2 {
    padding-top: 20px !important;
}


.align-content {
    align-content: center !important;
}

.hover:hover {
    cursor: pointer;
    background-color: #05e6ff !important;
    border-radius: 10px;
    z-index: 10000
}

.main-sidebar {
    z-index: 1000 !important;
}

#map {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 
    width: 100vw; 
    position: relative;
    overflow: hidden;
}
.data-tab {
    height: 100% !important;
    overflow-x: hidden;
}
.nav-tabs-custom {
    height: 550px !important;
    width: 100% !important;
}

.auto-overflow {
    overflow: auto !important;
}


#map-tools {
    display: flex;
}

.map-tools-left {
    background-color: white;
    height: calc(100vh - 10px); /* Full height minus 10px */
    width: 60px; /* Default width for larger screens */
    position: fixed;
    left: 5px; /* Default position for larger screens */
    top: 5px; /* Default position for larger screens */
    z-index: 100;
    border-radius: 10px;
    border: 2px dashed black;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}
.map-tools-right {
    background-color: white;
    height: calc(100vh - 10px); /* Full height minus 10px */
    width: 60px; /* Default width for larger screens */
    position: fixed;
    right: 5px; /* Default position for larger screens */
    top: 5px; /* Default position for larger screens */
    z-index: 100;
    border-radius: 10px;
    border: 2px dashed black;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.list-group1 {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    margin: 0;
}
.bg-white {
    background-color: white !important;
}
.list-group-item1 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0px 0; /* Default margin for larger screens */
    cursor: pointer;
}

.img-map-tools {
    width: 80%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    max-height: 100%; /* Ensure images don't exceed the height of the list item */
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .map-tools-left,.map-tools-right {
        width: 50px; /* Smaller width for tablets and phones */
        left: 2px; /* Adjust position for smaller screens */
        top: 2px; /* Adjust position for smaller screens */
    }

    .list-group-item {
        margin: 3px 0; /* Smaller margin for smaller screens */
    }

    .img-map-tools {
        width: 70%; /* Slightly smaller images for smaller screens */
    }
}

@media (max-width: 480px) {
    .map-tools-left,.map-tools-right {
        width: 40px; /* Even smaller width for phones */
        left: 1px; /* Adjust position for very small screens */
        top: 1px; /* Adjust position for very small screens */
    }

    .list-group-item {
        margin: 2px 0; /* Smaller margin for very small screens */
    }

    .img-map-tools {
        width: 60%; /* Smaller images for very small screens */
    }
}



.img-map-tools {
    height: 50px;
    width: auto;
}

#Legend_Layer {
    background-color: white;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 10px 5px;
    z-index: 100;
    max-height: inherit;
    overflow-y: auto;
    overflow-x: hidden;
}
.all-layer {
    position: absolute;
    right: 70px;
    top: 5px;
    background-color: white;
    z-index: 1000;
    width: 250px;
    max-height: 450px;
    border-radius: 10px;
   border: 2px dashed black;
    display: none
}
.LegendAllLayer {
    position: absolute;
    right: 70px;
    top: 75px;
    background-color: white;
    z-index: 1000;
    width: 250px;
    max-height: 450px;
    border-radius: 10px;
   border: 2px dashed black;
    display: none
}
.editLayer {
    position: absolute;
    top: 70px;
    background-color: white;
    z-index: 1000;
    width: 250px;
    max-height: 250px;
    border-radius: 10px;
   border: 2px dashed black;
    display: none
    
   
}

.identitySelectLayer {
    position: absolute;
    left: 70px;
    bottom: 45%;
    background-color: white;
    z-index: 1000;
    width: 250px;
    max-height: 250px;
    border-radius: 10px;
   border: 2px dashed black;
    display: none
}
.img_LegendAllLayer{
    height: 25px;
    position: absolute;
    left:8px;
    top:5px;
}
.LegendAllLayer ul {
    border-radius: 5px;
    padding: 5px;
    margin: 0px;
    
}

#ul_LegendItem div {
    float: left !important;

}
#ul_LegendItem hr {
    height: 10px;
    width: 20px;
    float: left !important;
}
#LegendItem {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden
    
}
#ul_LegendItem li {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
}
#scale-line {
    position: absolute;
    left: 60px;
    bottom: 5px;
    z-index: 100;
}
.ol-scale-line {
    background-color: white !important;
    border: 2px solid #ccc !important;
   
}
.ol-scale-line-inner {
    font-family: inherit !important;
    font-size: inherit !important;
    color: black !important;
}

#mouse-position {
    position: absolute;
    right: 65px;
    bottom: 5px;
    z-index: 150;
    height: 30px;
    width: 300px;

}

.move-cursor {
    cursor: move !important;
}

.zoom-in-cursor {
    cursor: zoom-in !important;
}

.zoom-out-cursor {
    cursor: zoom-out !important;
}

.pointer-cursor {
    cursor: pointer !important;
}

.draw-cursor {
    cursor: crosshair !important;
}

.toolbox {
    position: absolute;
    bottom: 50px;
    background-color: white;
    height: 50px;
    width: 170px;
    z-index: 160;
    border-radius: 10px;
    border: 2px dashed black;
    display: none
}



.draw-item {
    bottom: 24%;
    left: 70px;
}

.edit-item {
    bottom: 15%;
    left: 70px;
}

.delete-item {
    bottom: 6%;
    left: 70px;
}


.ol-control.ol-print {
    display: none !important;
}

.create-spatial-data {
    position: absolute;
    background-color: white;
    z-index: 2000;
    width: 100%;
    border-radius: 10px;
    border: 2px dashed black;
    display: none;
    cursor: default;
    overflow-y: auto
}

.change-database {
    height: 40px;
    width: auto;
    position: absolute;
    z-index: 1000;
    border-radius: 10px;
    top: 10px;
    display: none
}

#saveChanges {
    left: 70px;
    background-color: white;
}

#cancelChanges {
    left: 120px;
    background-color: white;
}
.CheckBoxMainLayer {
    background-color: white;
    height: 50px;
    width: auto;
    position: absolute;
    top: 70px;
    z-index: 100;
    border-radius: 10px;
   border: 2px dashed black;
    padding: 5px;
    display: none;
}


/* Add margin-right to create space between label and checkbox */
.SearchToggleBtn {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 100;
    display: flex;
    height: 35px;
    width: auto;
    display: none;

}
.SearchToggleBtn i {
    padding-top: 2px;
}  
.search-on-map {
    background-color: white;
    height: 50px;
    width: calc(80vw - 30px);
    position: absolute;
    top: 5px;
    z-index: 100;
    border-radius: 10px;
    border: 2px dashed black;
    padding: 5px;
    display: flex;

}
#searchAuto {
    width: 99%;
}

.search-on-map > input[type="text"] > select > a {
    margin: 1px;
    border-radius: 15px !important
}





.search-controls {
    display: flex;
}
.public-items {
    background-color: white;
    max-height: 250px;
    min-height: 40px;
    width: calc(80vw - 30px);
    position: absolute;
    top: 70px;
    z-index: 50;
    border-radius: 10px;
    border: 2px dashed black;
    padding: 5px;
}

.easy-autocomplete.eac-plate-dark {
    font-family: inherit !important;
    width: 100% !important
}

    .easy-autocomplete.eac-plate-dark input {
        font-size: inherit !important;
    }

.table-icon {
    position: absolute;
    bottom: 5px;
    height: 40px;
    z-index: 200;
    border-radius: 10px;
    background-color: white
}

.close-table {
    position: absolute;
    height: 40px;
    left: 5px;
    top: 5px;
    background-color: white;
    border-radius: 30px;
}

.data-table {
    position: absolute;
    bottom: 0px;
    background-color: white;
    z-index: 500;
    width: 100%;
    height: 50%;
    border-radius: 10px;
    border: 2px dashed black;
    cursor: default;
    overflow: auto;
    display: none;
    padding: 0px 20px
}

.right-click-tools {
    display: none;
    position: absolute;
    background-color: white;
    padding: 5px;
    max-height: 250px;
    width: 150px;
    z-index: 2000;
    font-size: 10px !important;
    overflow-y: auto;
}

    .right-click-tools li {
        border-radius: 10px !important
    }

    .right-click-tools ul {
        margin-bottom: 0px !important
    }

    .right-click-tools img {
        height: 30px;
        position: absolute;
        top: 0px;
        left: 0px
    }

#ClosePopupTools {
    background-color: peachpuff
}

.ol-zoomslider {
    position: absolute;
    width: 80% !important;
    max-height: 200px !important;
    top: 20px !important;
    left: 5px !important;
    background-color: #ffe28a !important;
    border-radius: 10px !important;
    border: 1px solid #ccc !important;
    padding: 5px !important /* OSM gray background color */
}

    .ol-zoomslider button {
        width: 100% !important;
        height: 15px !important;
        background-color: #0078a8 !important; /* OSM blue button color */
        margin: 0px !important;
        padding: 1px !important;
    }

.ol-full-screen, ol-unselectable {
    position: absolute;
    top: 5px !important;
    right: 10px !important;
    z-index: 1000;
}

.ol-full-screen-false, ol-full-screen-true {
    height: 30px !important;
    width: 30px !important;
    font-size: 40px !important;
    background-color: white !important;
    color: black !important
}

.tools2 {
    position: relative;
    top: 240px
}





@media (max-width: 768px) {
    .search-on-map {
        flex-direction: column;
        height: auto;
    }


    .SearchToggleBtn {
        display: block
    }

    .searchAutoTools {
        flex: none;
        width: auto;
        margin: 5px 0;
        display: none
    }

    #scale-line {
        left: 35px
    }

    #mouse-position {
        bottom: 50px
    }
    .box-header {
        display: grid;
    }
}