.invert-05 {
    filter: invert(0.5);
}

.drop-shadow {
    filter: drop-shadow(3px 3px 3px #555);
}

.arabic-bold {
    font-family: 'IBM Plex Sans Bold';
}

.arabic-regular {
    font-family: 'IBM Plex Sans Regular';
}

.logo-img {
    width: 160px;
    height: 46px;
    /* background-color: white; */
    /* background-image: url(assets/img/thtc_logo_white.webp); */
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 9;
    /* border-radius: 0px 0px 10px 10px; */
}

.logo-img {
    background-image: url(assets/img/Logo.svg);
}

body.theme-dark .logo-img {
    background-image: url(assets/img/Logo_white.svg);
}

.map-scale {
    width: 300px !important;
}

.main-graph {
    width: 100%;
    height: 100%;
}

.card-body .progress {
    --tblr-progress-height: 4px !important;
    --tblr-border-radius: 0px !important;
}

.card-status-top {
    height: 4px;
}

.nav-spacer {
    margin-left: 12rem !important;
}

.login-logo {
    filter: drop-shadow(1px 1px 4px black);
}

.login-bg {
    background-image: url("assets/img/pattern.svg");
    background-repeat: no-repeat;
    background-position-y: center;
}

.bars-badge {
    display: block;
    bottom: 6px;
    position: absolute;
    left: 28px;
    width: 288px;
}

.blockUI.blockOverlay {
    background-color: unset !important;
}

.blockUI.blockMsg.blockPage {
    border: unset !important;
    background-color: unset !important;
}

.exportCSV,
.exportSVG {
    display: none !important;
}

.optgroup-header {
    --tblr-bg-opacity: 1;
    --tblr-text-opacity: 1;
    background-color: rgba(var(--tblr-dark-rgb), var(--tblr-bg-opacity)) !important;
    color: rgba(var(--tblr-secondary-rgb), var(--tblr-text-opacity)) !important;
}

.ts-dropdown,
.ts-dropdown .dropdown-header,
.ts-dropdown .dropdown-input {
    --tblr-bg-opacity: 1;
    --tblr-text-opacity: 1;
    background-color: rgba(var(--tblr-dark-rgb), var(--tblr-bg-opacity)) !important;
    color: rgba(var(--tblr-white-rgb), var(--tblr-text-opacity)) !important;
}

.ts-control input {
    --tblr-bg-opacity: 1;
    --tblr-text-opacity: 1;
    background-color: rgba(var(--tblr-dark-rgb), var(--tblr-bg-opacity)) !important;
    color: rgba(var(--tblr-white-rgb), var(--tblr-text-opacity)) !important;
}

.ts-dropdown .create,
.ts-dropdown .no-results,
.ts-dropdown .optgroup-header,
.ts-dropdown .option {
    padding: 5px 0.75rem;
}

.maplibregl-ctrl-group {
    background-color: var(--tblr-bg-forms);
    color: white !important;
}

body.theme-dark .maplibregl-ctrl button .maplibregl-ctrl-icon {
    filter: invert(1);
}

.maplibregl-ctrl-tomtommap {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22%23fff%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-map-star%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M9.718%2017.359l-.718%20-.359l-6%203v-13l6%20-3l6%203l6%20-3v7.5%22%20%2F%3E%3Cpath%20d%3D%22M9%204v13%22%20%2F%3E%3Cpath%20d%3D%22M15%207v4%22%20%2F%3E%3Cpath%20d%3D%22M17.8%2020.817l-2.172%201.138a.392%20.392%200%200%201%20-.568%20-.41l.415%20-2.411l-1.757%20-1.707a.389%20.389%200%200%201%20.217%20-.665l2.428%20-.352l1.086%20-2.193a.392%20.392%200%200%201%20.702%200l1.086%202.193l2.428%20.352a.39%20.39%200%200%201%20.217%20.665l-1.757%201.707l.414%202.41a.39%20.39%200%200%201%20-.567%20.411l-2.172%20-1.138z%22%20%2F%3E%3C%2Fsvg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.maplibregl-ctrl-traffic {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22%23fff%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-traffic-lights%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M7%202m0%205a5%205%200%200%201%205%20-5h0a5%205%200%200%201%205%205v10a5%205%200%200%201%20-5%205h0a5%205%200%200%201%20-5%20-5z%22%20%2F%3E%3Cpath%20d%3D%22M12%207m-1%200a1%201%200%201%200%202%200a1%201%200%201%200%20-2%200%22%20%2F%3E%3Cpath%20d%3D%22M12%2012m-1%200a1%201%200%201%200%202%200a1%201%200%201%200%20-2%200%22%20%2F%3E%3Cpath%20d%3D%22M12%2017m-1%200a1%201%200%201%200%202%200a1%201%200%201%200%20-2%200%22%20%2F%3E%3C%2Fsvg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.maplibregl-ctrl-incidents {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22%23fff%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-traffic-cone%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%2020l16%200%22%20%2F%3E%3Cpath%20d%3D%22M9.4%2010l5.2%200%22%20%2F%3E%3Cpath%20d%3D%22M7.8%2015l8.4%200%22%20%2F%3E%3Cpath%20d%3D%22M6%2020l5%20-15h2l5%2015%22%20%2F%3E%3C%2Fsvg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.maplibregl-ctrl-routes {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22%23fff%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-route%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M3%2019a2%202%200%201%200%204%200a2%202%200%200%200%20-4%200%22%20%2F%3E%3Cpath%20d%3D%22M19%207a2%202%200%201%200%200%20-4a2%202%200%200%200%200%204z%22%20%2F%3E%3Cpath%20d%3D%22M11%2019h5.5a3.5%203.5%200%200%200%200%20-7h-8a3.5%203.5%200%200%201%200%20-7h4.5%22%20%2F%3E%3C%2Fsvg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.maplibregl-ctrl-tomtommap,
.maplibregl-ctrl-traffic,
.maplibregl-ctrl-incidents,
.maplibregl-ctrl-routes {
    background-color: #333 !important;
}

.theme-dark .maplibregl-ctrl-tomtommap,
.theme-dark .maplibregl-ctrl-traffic,
.theme-dark .maplibregl-ctrl-incidents,
.theme-dark .maplibregl-ctrl-routes {
    background-color: #eee !important;
}

.maplibregl-popup {
    width: -webkit-fill-available;
    /* max-width: 480px !important; */
}

body.theme-dark .maplibregl-popup-content {
    background-color: rgba(var(--tblr-dark-rgb), 1) !important;
    border: 1px solid rgba(var(--tblr-dark-rgb), 1) !important;
}

body.theme-dark  .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
    border-top-color: rgba(var(--tblr-dark-rgb), 1) !important;
}

.maplibregl-ctrl.maplibregl-ctrl-group {
    border-radius: 16px;
}

body.theme-dark  .maplibregl-ctrl.maplibregl-ctrl-group {
    background-color: rgba(var(--tblr-dark-rgb), 1) !important;
    color: white;
}

.maplibregl-ctrl-group button {
    margin: 1px;
}