@font-face {
    font-family: vazir;
    src: url('../fonts/vazir/Vazir-Thin.ttf');
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    font-size: 12px;
    font-family: vazir, serif;
    position: relative;
    min-height: 100%;
}

#sidebar {
    max-width: 250px !important;
    max-height: 90vh !important;
}

#map {
    height: 83vh;
}

#tab-menu > div > div > button {
    height: 25px !important;
    width: 25px !important;
}

#tab-menu > div > div > button:hover {
    background-color: #32383e !important;
    color: #216c9c !important;
}

#tab-menu > div > div > button:active {
    background-color: #32383e !important;
    color: #216c9c !important;
    border: none !important;
}

#tab-menu > div > div > button:focus {
    border: none !important;
}

.map-panel-btn-active {
    background-color: #32383e !important;
    color: #216c9c !important;
}

#feature-info {
    z-index: 100;
    visibility: hidden;
    max-height: 300px;
}

#coordinate-span {
    bottom: 30px;
    right: 10px;
    z-index: 100;
}

.ol-overviewmap {
    bottom: 50px !important;
    border-radius: 100%;
}

.ol-overviewmap > button {
    border: 2px solid #32383e !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 100%;
    background-color: #98922d !important;
}

.ol-overviewmap > button:hover {
    background-color: #32383e !important;
    color: #216c9c !important;
}

.ol-scale-bar {
    direction: ltr !important;
}

#loading-overlay {
    visibility: hidden;
    z-index: 1500;
}

#query-expression, #field-calculator-expression, #band-math-expression {
    direction: ltr;
}

#db-layers-list {
    max-height: 200px;
}

.guid-container {
    max-height: 200px;
}

#base-map {
    bottom: 70px;
    right: 10px;
    z-index: 100;
}

#base-map-dropdown-list, #base-map-dropdown-list > li {
    width: 30px !important;
}

#layer-fields-container, #edit-layer-fields-container {
    max-height: 300px;
    max-width: 500px;
}

.layer-catalog-fields-container {
    height: 220px;
}

#layer-catalog-item-container, #feature-info-container {
    height: 300px;
}

#map-legend {
    top: 30px;
    right: 10px;
    z-index: 100;
    min-width: 100px;
}

#edit-layer-panel {
    top: 30px;
    left: 100px;
    z-index: 100;
}

#stop-editing-btn, #undo-draw-btn {
    visibility: hidden;
}

#band-container {
    max-height: 100px;
}


/* ////////////////////////////////////// */

#main-category-list, .db-category {
    list-style-type: none;
    max-height: 200px;
}

#main-category-list {
    margin: 0;
    padding: 0;
}

.caret {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
}

.cat-icon {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
' transform: rotate(90 deg);
}

.nested {
    display: none;
}

.active {
    display: block;
}

/* ////////////////////////////////////// */

#map-tools {
    bottom: 170px;
    left: 10px;
    z-index: 100;
    height: 310px;
    width: 31px;
}

#map-tools > button {
    height: 25px !important;
    width: 25px !important;
}

#map-tools > button:hover {
    background-color: #32383e !important;
    color: #216c9c !important;
}

#map-tools > button:active {
    background-color: #32383e !important;
    color: #216c9c !important;
    border: none !important;
}

#map-tools > button:focus {
    border: none !important;
}