.scala-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
}

.scala-wrapper > div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 0px black;
}


/** Map Overview Page **/
.map-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.map-toolbar > .form-group {
    min-width: 150px;
    margin-right: 10px;
}

.map-overview-wrapper .mow-map > h3,.map-overview-wrapper .mow-map > p{
    display: none;
}

.map-overview-wrapper:fullscreen {
    background-color: #eee;
}

.map-overview-wrapper:fullscreen .map-toolbar {
    padding: 15px;
    background-color: #fff;
}
.map-overview-wrapper:fullscreen .map-toolbar > .form-group{
    margin-bottom: 0
}

.map-overview-wrapper:fullscreen .mow-map > .leaflet-container {
    height: calc(100vh - 125px) !important;
}

.meta-table td:nth-child(2) {
    word-break: break-word;
    width: 70%;
}

.meta-table td:nth-child(1){
    width:30%;
}

.validation-message{
    color:red;
}

.carousel:hover .slider-button{
    display: block !important;
}

.carousel:hover .carousel-indicators{
    display: flex !important;
}

.blazored-typeahead__results {
    max-height: 250px;
    overflow-y: auto;
}

.dropdown-menu{
    max-height: 250px;
    overflow-y: auto;
}

.datepicker.dropdown-menu {
    z-index: 9999 !important;
}

:fullscreen {
    background-color: aliceblue;
    padding-top: 10vh;
}

.custom-marker {
    background-color: transparent;
}

.custom-drawer {
    position: fixed;
    top: 0;
    height: 100%;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
}

.custom-drawer.end {
    right: 0;
    transform: translateX(100%);
}

.custom-drawer.start {
    left: 0;
    transform: translateX(-100%);
}

.custom-drawer.active {
    transform: translateX(0);
}

.custom-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}

.custom-drawer-content {
    height: 100%;
    overflow-y: auto;
    padding: 20px;
}


.sidebar {
    height: 100vh;
    position: sticky;
    top: 0;
}
.main-content {
    height: 100vh;
    overflow-y: auto;
}
.sticky-top-row {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
}
.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}
.status-created { background-color: #ffc107; }
.status-completed { background-color: #28a745; }
.status-appointment { background-color: #17a2b8; }

.rz-datepicker {
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    height: calc(1.5em + 1.3rem + 2px) !important;
}

.rz-datepicker .rz-inputtext {
    background-color: #F3F6F9 !important;
    border-color: #F3F6F9 !important;
    color: #3F4254 !important;
    transition: all 0.15s ease;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    padding: 0.65rem 1rem !important;
    border-radius: 0.42rem 0 0 0.42rem !important;
    flex: 1 !important;
    margin: 0 !important;
}

.rz-datepicker-trigger {
    background-color: #F3F6F9 !important;
    border: none !important;
    color: #3F4254 !important;
    width: 41px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 0.42rem 0.42rem 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rz-datepicker-trigger:hover {
    background-color: #EBEDF3 !important;
}

.rz-datepicker-trigger .rzi-calendar {
    color: #3F4254 !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Remove any unwanted margins/padding */
.rz-datepicker * {
    box-sizing: border-box !important;
}

/*
 Kart yoğunluğu
 --------------
 Tema her kart gövdesine 2rem dikey dolgu, her başlığa da 70px'lik bir alt sınır veriyor.
 Liste ve form ağırlıklı bu uygulamada bu, kullanıcının asıl işini yaptığı alanı sayfanın
 ortasına itiyordu: tek satırlık bir başlık ya da tek sıra sekme için ekranın üçte biri
 harcanıyordu. Dikey dolguyu kısıyoruz; yatay dolgu ve kartın geri kalanı temada kaldığı
 gibi duruyor.
*/
.card.card-custom > .card-header {
    min-height: auto;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.card.card-custom > .card-body {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/*
 Yan menü ikonları
 -----------------
 Temanın koyu menü paleti #1e1e2d zemin için yazılmış ve ikon rengini #4B5575 veriyor.
 Bu projede yan menünün zemini #5C6BC0 (indigo) olduğu için ikonlar zeminden neredeyse
 ayırt edilemiyordu — koyu gri çizgiler mor üstünde kayboluyordu.

 İkona kendi zemini veriliyor: yuvarlatılmış açık bir kare, üstünde koyu indigo ikon.
 Bulunulan sayfanın kutusu ise logonun sarısına dönüyor, böylece hangi sayfada olunduğu
 yalnız satır zemininden değil ikondan da okunuyor. Vurgu rengini değiştirmek için tek yer:
 aşağıdaki .menu-item-active kuralındaki #FFC107.
*/
.aside-menu .menu-nav > .menu-item > .menu-link .menu-icon {
    -ms-flex: 0 0 34px;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 8px;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.15rem;
    background-color: rgba(255, 255, 255, 0.92);
    color: #3949AB;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 Tema, style.bundle.css içinde çıplak bir `i { color: #B5B5C3 }` kuralı taşıyor. Bu kural
 ikon elemanını doğrudan hedeflediği için üstteki .menu-icon rengi glife hiç ulaşmıyordu —
 kutuya renk vermek tek başına yetmiyor. `inherit` ile glif yeniden kutunun rengini alıyor,
 böylece aşağıdaki hover/aktif kuralları da çalışıyor.
*/
.aside-menu .menu-nav > .menu-item > .menu-link .menu-icon i {
    color: inherit;
}

.aside-menu .menu-nav > .menu-item > .menu-link:hover .menu-icon,
.aside-menu .menu-nav > .menu-item.menu-item-hover > .menu-link .menu-icon,
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon {
    background-color: #FFFFFF;
    color: #1A237E;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon {
    background-color: #FFC107;
    color: #1A237E;
}

/*
 Menü daraltıldığında tema ikon kutusunu .menu-icon{width:100%} ile satır boyuna yayıyor;
 zeminli kutu bunu görünür bir şeride çevirir. Kutu daraltılmış menüde de 34px kalıp
 ortalanıyor.
*/
.aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon {
    width: 34px;
    margin-left: auto;
    margin-right: auto;
}

/*
 Marka alanı
 -----------
 Abdi İbrahim logosu beyaz zemin için üretilmiş: işaret koyu mavi, yazı gri (#7F8184).
 İndigo (#5C6BC0) menü başlığının üstünde o gri neredeyse zemine karışıyor ve logo silik
 görünüyordu. Logonun renklerini değiştirmek yerine — marka kılavuzuna aykırı olurdu —
 altındaki bandı beyaza çeviriyoruz; logo kendi zeminine kavuşuyor ve sağdaki içerik
 başlığı da beyaz olduğu için sayfanın üst şeridi tek parça görünüyor.

 Band beyazlayınca üstündeki daralt/genişlet düğmesi kayboluyordu (tema onu
 rgba(255,255,255,.65) veriyor); o da koyu griye çekiliyor.

 Sınır tema ile aynı: masaüstü marka bandı yalnız ≥992px'te var, altında logo
 mobil üst çubuğa taşınıyor ve orada da aynı sorun yaşanıyor.
*/
@media (min-width: 992px) {
    .brand {
        background-color: #FFFFFF;
        -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    }

    .brand .btn i {
        color: #6B7280;
    }

    .brand .btn .svg-icon svg g [fill] {
        fill: #6B7280;
    }
}

@media (max-width: 991.98px) {
    .header-mobile {
        background-color: #FFFFFF;
    }
}