@import url("../js/libs/datepicker/css/bootstrap-datepicker3.standalone.min.css");

@import url("../js/libs/toastr/toastr.min.css");
@import url("../js/libs/tabulator/css/tabulator.min.css");
@import url("../js/libs/tabulator/css/tabulator_semanticui.min.css");
@import url("../js/libs/fancytree/skin-lion/ui.fancytree.min.css");
@import url("../js/libs/blueimpGallery/css/blueimp-gallery.min.css");

@import url("bootstrap-icons/font/bootstrap-icons.css");
@import url("font-awesome/css/font-awesome.min.css");
@import url("attach-files.css");
@import url("dark-theme.css");

:root {
    --app-font-family: 'Roboto', sans-serif;
    --app-base-color: var(--bs-primary);
    --app-base-color-light: color-mix(in srgb, white 20%, var(--app-base-color) 80%);
    --app-base-color-highlight: color-mix(in srgb, white 80%, var(--app-base-color) 20%);
    --app-text-color: #333;

    --app-base-background-color: #ffffff;
    --app-base-border-color: #e5e7eb;

    --sidebar-submenu-drop-color: #f5f5f5;
    --mobile-user-menu-color-dark: #6B7280;

    --app-text-outline-color: rgba(255, 255, 255, 0.5);
    --app-base-size: 12px;
    --transition-time: 0.2s;
}

[data-theme=dark] {
    --sidebar-submenu-drop-color: #161818;
    --app-base-color-highlight: color-mix(in srgb, white 50%, var(--app-base-color) 50%);
    --app-text-color: #d8dfee;

    --app-base-background-color: #22242a;
    --app-base-background-hover-color: #2a2c33;
    --app-base-border-color: #3d3b41;

    --app-table-header-color: color-mix(in srgb, var(--sidebar-submenu-drop-color) 97%, #0d6efd);

    --app-base-input-background-color: #32353d;
    --app-base-input-background-highlight-color: color-mix(in srgb, white 10%, var(--app-base-input-background-color) 90%);
}

/* Grayscale text antialiasing (trial). Only macOS browsers honour these properties;
   Windows and Linux ignore them. */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media print {
    body {
        margin: 0;
        padding: 0;
    }
}

#global-loader {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

::selection {
    background: var(--app-base-color-highlight);
    color: inherit;
}

#loginForm h2 {
    color: var(--app-base-color) !important;
}

#loginForm .form-control.is-invalid+span {
    border-color: var(--bs-form-invalid-border-color);
}

#loginForm .form-control.is-invalid {
    background: none;
}

#loginForm .account-group {
    position: relative;
}

#loginForm .account-group .account-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #111827;
    font-size: 18px;
}

#loginForm .toggle-password {
    position: absolute;
    top: 20px;
    right: 5px;
}

#loginForm input[name="UserName"],
#loginForm input[name="Password"] {
    padding-right: 35px;
}

.appLoginForm {
    line-height: 1.5;
}

.appLoginForm .form-control.is-invalid+span {
    border-color: var(--bs-form-invalid-border-color);
}

.appLoginForm .form-control.is-invalid {
    background: none;
}

.appLoginForm .account-group {
    position: relative;
}

.appLoginForm .account-group .account-icon {
    position: absolute;
    top: 6px;
    right: 8px;
    color: #111827;
    font-size: 18px;
}

.appLoginForm .toggle-password {
    position: absolute;
    top: 15px;
    right: 3px;
}

.appLoginForm input[name="UserName"],
.appLoginForm input[name="Password"] {
    padding-right: 35px;
}

.login-page-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* the logo bar is 50px high (the menu starts under it): a long title wraps into two lines
   beside the logo instead of running over the first menu item */
.sidebar .sidebar-logo {
    padding: 8px 16px;
}

.sidebar .sidebar-logo .logo-text {
    display: flex;
    align-items: center;
    height: 100%;
    font-weight: bolder;
    color: var(--app-base-color);
    font-size: .9rem;
    line-height: 1.15;
}

body[app] .sidebar-horizontal.sidebar .sidebar-menu ul.nav-menu>li>a.active {
    background-color: #e8e9ea;
    border-radius: 5px;
}

.header .bar-icon span {
    background-color: var(--app-base-color-light);
}

.header .mobile-user-menu a {
    color: var(--app-base-color-light);
}

body[app] .footer {
    border-top: 1px solid var(--app-base-border-color);
}

.sidebar .sidebar-logo .logo-text img {
    height: 100%;
    flex-shrink: 0;
    margin-right: 8px;
    vertical-align: middle;
}

.sidebar .sidebar-logo .logo-text span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow:
        -1px -1px 1px var(--app-text-outline-color),
        1px -1px 1px var(--app-text-outline-color),
        -1px 1px 1px var(--app-text-outline-color),
        1px 1px 1px var(--app-text-outline-color);
}

@media (max-width: 991.98px) {

    .header .header-left>a img {
        height: 35px;
        width: auto !important;
    }

    .header .header-left>a .text {
        font-weight: bolder;
        color: var(--app-base-color);
        font-size: 1.05rem;
        text-shadow:
            -1px -1px 1px var(--app-text-outline-color),
            1px -1px 1px var(--app-text-outline-color),
            -1px 1px 1px var(--app-text-outline-color),
            1px 1px 1px var(--app-text-outline-color);
    }
}

body.mini-sidebar:not(.expand-menu) .sidebar .sidebar-logo .logo-text span {
    display: none;
}

#sidebar-menu>ul>li .submenu .submenu ul {
    padding-left: 1rem;
}

#sidebar-menu>ul>li .submenu .submenu a.subdrop {
    background: var(--sidebar-submenu-drop-color);
}

[data-theme=dark] .header .mobile-user-menu .dropdown-menu a {
    color: var(--mobile-user-menu-color-dark);
}

.nav-list::before {
    background: none;
}

body[app] .tabulator {
    font-size: 12px;
}

body[app] .tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col {
    height: 45px !important;
}

body[app] .tabulator .tabulator-footer .tabulator-page {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

body[app] .tabulator .tabulator-footer .tabulator-page-size {
    appearance: none;
}

body[app] .tabulator-row.tabulator-selectable .tabulator-cell:first-child {
    height: auto !important;
}

.app-tabulator-table .img-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.app-tabulator-table .img-thumbnail[width='70'] {
    width: 50px;
    height: 50px;
    padding: 1px;
}

.app-tabulator-table .img-thumbnail[width='60'] {
    width: 40px;
    height: 40px;
    padding: 1px;
}

.app-tabulator-table .img-thumbnail[width='40'] {
    width: 20px;
    height: 20px;
    padding: 1px;
}

/* .tabulator-header-contents keeps Tabulator's overflow: hidden - the header follows the
   horizontal scroll of the rows through its scrollLeft, which does nothing on a visible
   overflow. Header menus open with a fixed popper instead (project.js initTabulators). */
.app-tabulator-table .tabulator-header,
.app-tabulator-table .tabulator-col {
    overflow: visible !important;
    min-width: 50px !important;
}

.app-tabulator-table .tabulator-cell {
    overflow: visible;
    min-width: 50px !important;
}

.app-tabulator-table .tabulator-cell input[type='checkbox'] {
    cursor: pointer;
}

.app-tabulator-table .tabulator-row:hover {
    background-color: #ebebeb;
}

.tabulator-export * {
    font-size: 12px;
}

.btn-close.close {
    background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
}

.toast-message {
    font-size: 0.8rem;
}

.toast-message h1 {
    font-size: 0.8rem;
    color: inherit
}

.toast-message p {
    line-height: normal;
    font-size: 0.8rem;
}

.formBtns {
    display: flex;
    justify-content: space-around;
}

.image-file-choose {
    max-width: 300px;
}

.image-preview {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: 5px;
}

@media only screen and (max-width: 300px) {
    .image-preview {
        flex-direction: column;
        align-items: center;
    }

    .image-preview .checkbox {
        margin-top: 5px;
    }
}

.image-preview img {
    height: 200px;
    object-fit: cover;
}

.image-preview.user-image img {
    width: 200px;
    min-width: 200px;
}

.image-preview.area-image img {
    height: auto;
    width: 100%;
}

.file-progress-bar {
    margin: 10px 0;
    width: 0;
    height: 10px;
    font-size: 8px;
    border-radius: 4px;
    overflow: hidden;
    background-image: linear-gradient(90deg, #d9534f, #29a645);
    color: #dddddd;
    transition: width 0.2s;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rotateBtn {
    user-select: none;
    position: absolute;
    font-size: 0.9rem;
    top: 10px;
    right: 10px;
    padding: 3px 5px 0 5px;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--bs-gray-200);
    border-radius: 3px;
    opacity: 0;
    transition: 0.1s opacity;
}

img:hover+.rotateBtn,
a:hover+.rotateBtn,
.rotateBtn:hover {
    opacity: 1;
}

@media (max-width: 767.98px) {
    .rotateBtn {
        opacity: 1;
    }
}

@media (max-width: 575.98px) {
    .rotateBtn {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        font-size: 1.2rem;
        padding: 8px 10px 2px 10px;
        display: flex;
        justify-content: space-between;
        background-color: rgba(0, 0, 0, 0.25);
        border-radius: var(--bs-border-radius);
    }

    .rotateBtn span:hover {
        transform: none !important;
    }
}

img[data-href] {
    cursor: pointer;
}

img[src*="data:image"]+.rotateBtn,
img[src*="images/default/"]+.rotateBtn {
    display: none;
}

img[src*="images/default/"] {
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rotateBtn span {
    display: inline-block;
    cursor: pointer;
    transition: 0.1s transform;
}

.rotateBtn span:first-of-type {
    margin-right: 3px;
}

.rotateBtn span:hover {
    transform: scale(1.2);
}

.rotateBtn.disabled span {
    cursor: progress;
}

@media (min-width: 1500px) {
    .modal-xl {
        --bs-modal-width: 80%;
    }
}

/*
.bootbox .modal-content {
    min-height: 500px;
}
*/

.tabulator-cell .fa.fa-plus-square,
.tabulator-cell .fa.fa-minus-square {
    color: #cccccc;
}

.app-badge.badge {
    font-size: 11px;
    font-weight: 400;
}

.mw-600 {
    max-width: 600px;
}

.description p {
    font-size: 12px;
    margin-bottom: 1rem;
}

.description p:last-child {
    margin-bottom: 0;
}

input[readonly] {
    cursor: default;
}

.table.table-configure thead tr th,
.table.table-configure tbody tr td {
    font-size: 12px;
}

.table-configure thead th {
    text-align: center;
    white-space: normal;
}

.table-configure tbody td {
    text-align: left;
}

.table-configure tbody td:first-child,
.table-configure tbody td:last-child {
    width: 0.8%;
    text-align: center;
}

.form-control-color-input {
    min-width: 80px;
}

.select2-container {
    width: 100% !important;
    display: block;
}

/* select2 dropdown list: options, messages and the search box */
.select2-container--default .select2-results__option,
.select2-container--default .select2-results__message,
.select2-dropdown .select2-search__field {
    font-size: 12px;
}

/* Dialog titles (bootbox and every .modal) look like h6 (theme h6: 14px / 600); the theme
   itself sets .modal .modal-title to 20px, 16px below 992px */
.modal .modal-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

/* Every dialog is centred vertically: Bootstrap 5.3 .modal-dialog-centered for all of them, so
   bootbox dialogs opened without centerVertical are centred too. A dialog taller than the
   screen starts at the top margin and the modal scrolls. */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
}

/* ---------------------------------------------------------------------------
   Хянах самбар (templates/modules/main/index.html, static/js/modules/main.js): the look of
   the legacy register's dashboard; sizes and colours as measured on it
   --------------------------------------------------------------------------- */
.app-dashboard { color: #626262; }
.app-dashboard .dashboard-page-title { margin-bottom: 1rem; font-size: 16px; font-weight: 500; line-height: 1.2; color: #636363; }
.app-dashboard .dashboard-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.app-dashboard .dashboard-title { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.2; color: #636363; text-transform: uppercase; white-space: nowrap; }
.app-dashboard .dashboard-hr { flex: 1 1 auto; margin: 0; border: 0; border-bottom: 3px solid #f6b21a; opacity: 1; }
.app-dashboard .dashboard-box { display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden; border-radius: 5px; color: #fff; }
.app-dashboard .dashboard-box > .d-flex { min-height: 163px; padding: 20px; }
.app-dashboard .dashboard-box h1 { margin: 10px 0; font-size: 32px; font-weight: 500; line-height: 1.2; color: #fff; }
.app-dashboard .dashboard-box h4 { margin-bottom: 7px; font-size: 16px; font-weight: 400; line-height: 1.2; color: #fff; }
.app-dashboard .dashboard-box-text { min-width: 0; }
/* box icons as background images: 60px high at their own proportions (width = image width at 60px),
   right of the numbers; a narrow box scales them down instead of squeezing them */
.app-dashboard .dashboard-box-image { flex: 0 0 auto; max-width: 45%; height: 60px; margin-left: 10px; background: no-repeat right center / contain; }
.app-dashboard .dashboard-box-legalunit .dashboard-box-image { width: 100px; background-image: url("../img/dashboard/img1.png"); }
.app-dashboard .dashboard-box-enterprise .dashboard-box-image { width: 68px; background-image: url("../img/dashboard/img4.png"); }
.app-dashboard .dashboard-box-relation .dashboard-box-image { width: 57px; background-image: url("../img/dashboard/img2.2.png"); }
.app-dashboard .dashboard-box-branch .dashboard-box-image { width: 59px; background-image: url("../img/dashboard/img3.png"); }
.app-dashboard .dashboard-box-link { display: block; padding: 5px; font-size: 14px; text-align: center; color: #fff; background-color: rgba(0, 0, 0, .4); opacity: .6; }
.app-dashboard .dashboard-box-legalunit { background-color: #ffb300; }
.app-dashboard .dashboard-box-enterprise { background-color: #41ab49; }
.app-dashboard .dashboard-box-relation { background-color: #16a2b9; }
.app-dashboard .dashboard-box-branch { background-color: #197eb8; }
/* chart titles: h4 elements, upper case */
.app-dashboard .dashboard-chart-title { margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #636363; text-transform: uppercase; white-space: nowrap; }
.app-dashboard .dashboard-chart { width: 100%; background-color: #fff; }
.app-dashboard .dashboard-chart-lg { height: 350px; }
.app-dashboard .dashboard-chart-md { height: 450px; }
.app-dashboard .dashboard-map-select { font-size: 13.44px; }
.app-dashboard .dashboard-card { min-height: 95%; padding-right: 10px; overflow: hidden; border: 0; border-radius: 0; background-color: transparent; box-shadow: none; font-size: 12px; }
.app-dashboard .dashboard-card .card-header,
.app-dashboard .dashboard-card .card-body { padding: 3px; border: 0; background-color: transparent; }
.app-dashboard .dashboard-card .card-header { display: block; height: 50px; overflow: hidden; color: inherit; font-size: 13px; font-weight: 400; line-height: normal; text-align: center; border-radius: 0; }
.app-dashboard .dashboard-card .card-body { text-align: center; }
.app-dashboard .dashboard-card .img-center { display: inline-block; height: 80px; margin: auto auto 15px; }
.app-dashboard .dashboard-card .dsh-number { font-size: 18px; font-weight: 700; color: inherit; }
.app-dashboard .responsive-height { height: 85px; }
@media (min-width: 1100px) and (max-width: 1450px) {
    .app-dashboard .row-3 .card-header { height: 80px; }
    .app-dashboard .responsive-height { height: 105px; }
    .app-dashboard .dashboard-card .img-center { height: 60px; }
}
.app-dashboard .dsh-dark { color: #231f20; }
.app-dashboard .dsh-blue { color: #197eb8; }
.app-dashboard .dsh-orange { color: #ca8a2b; }
.app-dashboard .dsh-green { color: #4e783c; }
.app-dashboard .dsh-lime { color: #41ab49; }
.app-dashboard .dsh-navy { color: #005889; }
.app-dashboard .dsh-red { color: #eb4924; }
.app-dashboard .dsh-crimson { color: #bf2536; }
#mapMongolia { display: block; width: 90%; height: auto; margin: auto; }
#mapMongolia path, #mapMongolia text { cursor: pointer; }
#mapMongolia text { font-size: 30.8px; }
#mapMongolia g[opacity='0.3'][transform] { display: none; }
.map-tooltip { position: absolute; z-index: 5; display: none; min-width: 100px; min-height: 30px; margin: 0 auto; padding: 10px 15px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; text-align: center; color: #424242; background: rgba(255, 255, 255, .9); border-radius: 5px; border-bottom-right-radius: 0; pointer-events: none; transform: translateX(-100%); }
.map-tooltip.active { display: block; }
.map-tooltip:after { content: ""; position: absolute; top: 100%; right: 0; width: 0; height: 0; border-left: 10px solid transparent; border-top: 8px solid rgba(255, 255, 255, .9); }

/* latitude / longitude map of the register forms (register/fields.html coordinates) */
.app-map-picker { height: 320px; border: 1px solid var(--app-base-border-color, #E5E7EB); border-radius: 6px; overflow: hidden; }

.form-control-sm+.select2-container--default .select2-selection--single {
    height: 30px !important;
}

.form-control-sm+.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
    font-size: 0.75rem;
}

.form-control-sm+.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 28px !important;
}

.dropdown .dropdown-toggle.show {
    color: var(--app-base-color);
}

.dropdown-item:not(.active):hover,
.dropdown-item:not(.active):focus,
.dropdown-item:not(.active):active {
    color: inherit;
    background-color: var(--app-base-color-highlight);
}

.appLoginForm>div {
    min-width: 220px;
}

.form-check label {
    user-select: none;
}


body[app] .input-group-sm>.input-group-text {
    cursor: pointer;
}

body[app] .input-group-sm>.btn,
body[app] .input-group-sm>.form-control,
body[app] .input-group-sm>.form-select,
body[app] .input-group-sm>.input-group-text {
    font-size: 0.8rem;
    padding: 0.25rem 0.8rem;
    min-height: 30px;
    height: 30px;
}

hr.divder{
    border-color: var(--app-base-border-color);
    opacity: 1;
}
/* Sidebar / horizontal menu text 12px. The theme sizes the inner <span> (15px light,
   14px dark) and the submenu links separately, and the front (horizontal) layout renders
   the menu as .sidebar-menu WITHOUT the #sidebar-menu id - so class selectors + !important. */
.sidebar-menu a,
.sidebar-menu a span,
.sidebar-menu .submenu a,
.sidebar-menu .submenu-hdr,
.sidebar-menu h6 { font-size: 12px !important; }
/* ---------------------------------------------------------------------------
   Filters (main/filter_field.html) - every list / report page.
   Compact toolbar: small label above the field, equal cells.
   --------------------------------------------------------------------------- */
.app-filters { margin-bottom: .5rem; }
.app-filters .app-filter-field { margin-bottom: .75rem; }
.app-filters .app-filter-label { display: block; margin-bottom: .2rem; font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--bs-secondary-color) 70%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Parameter + Min - Max in one cell */
.app-filters .app-filter-range { display: flex; align-items: center; gap: .4rem; }
.app-filters .app-filter-range > .app-filter-range-select { flex: 1 1 50%; min-width: 0; }
.app-filters .app-filter-range > input { flex: 1 1 22%; min-width: 0; }
.app-filters .app-filter-range > .app-filter-range-sep { color: var(--bs-secondary-color); }
.app-filters .app-filter-range-dates > input { flex: 1 1 45%; }
.app-filters .form-control-sm, .app-filters .select2-container .select2-selection__rendered, .app-filters .form-check-label { font-size: 12px; }

/* Filter card of the register list pages (register/fields.html filter_panel): a collapsible
   "Хайлт" header, the fields, then "Дэлгэрэнгүй" and the Хайх / Цэвэрлэх buttons. */
.app-filters.app-filter-card { margin-bottom: 1rem; border: 1px solid var(--app-base-border-color, #E5E7EB); border-radius: 6px; background: var(--app-base-background-color, #fff); }
.app-filter-card-header { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .65rem 1rem; border: 0; background: transparent; color: inherit; font-size: 14px; font-weight: 600; text-align: left; }
.app-filter-card-chevron { margin-left: auto; transition: transform .2s; }
.app-filter-card-header.collapsed .app-filter-card-chevron { transform: rotate(-90deg); }
.app-filter-card-body { padding: .75rem 1rem; border-top: 1px solid var(--app-base-border-color, #E5E7EB); }
.app-filter-card .app-filter-label { font-size: 12px; color: color-mix(in srgb, currentColor 80%, transparent); }
.app-filter-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* Tabulator header filters (project.js: headerFilter of the list route columns); a grid with
   them gets .app-header-filters so its header is not held at the fixed 45px */
body[app] .tabulator.app-header-filters .tabulator-header { height: 78px !important; }
.tabulator.app-header-filters .tabulator-header .tabulator-col { height: 77px !important; }
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter { margin-top: 6px; }
.tabulator .tabulator-header-filter input { height: 30px; padding: 0 8px; border: 1px solid var(--app-base-border-color, #E5E7EB); border-radius: 5px; background: var(--app-base-input-background-color, #fff); color: var(--app-text-color, #111827); font-size: 12px; font-weight: 400; }
.tabulator .tabulator-header-filter input:focus { outline: 0; border-color: var(--app-base-color); }
.tabulator .tabulator-header-filter .select2-container { font-weight: 400; text-align: left; }
/* the header menu (cfg-menu) opens over the header filter boxes (theme: .dropdown-menu z-index 10, .select2-container 99) */
.tabulator .tabulator-header .dropdown-menu { z-index: 1000; }

/* ---------------------------------------------------------------------------
   Native <select> elements look exactly like the theme's select2 boxes, so a
   plain select never differs
   from the form selects: same height, border, radius, text and chevron.
   --------------------------------------------------------------------------- */
select.form-select, select.form-control {
    height: 38px; padding: 0 2rem 0 10px;
    border: 1px solid #E5E7EB; border-radius: 5px; /* = computed select2 / .form-control border */
    color: #111827; font-size: 14px; line-height: 36px;
    background-color: var(--app-base-background-color, #fff);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px;
    -webkit-appearance: none; appearance: none; box-shadow: none;
}
select.form-select-sm, select.form-control-sm { height: 30px; line-height: 28px; font-size: 12px; }
select.form-select:focus, select.form-control:focus { border-color: var(--app-base-color); box-shadow: none; outline: 0; }
[data-theme=dark] select.form-select, [data-theme=dark] select.form-control { color: #D8DFEE; border-color: var(--app-base-border-color); }
/* Native <select> option list: the theme paints the checked / hovered option orange
   (#F26522, with a broken rgba(var(...)) background). Match the select2 dropdown
   instead: plain text, the app colour only as a light tint on the highlighted row. */
select.form-select option, select.form-control option {
    color: #111827; background-color: #fff; padding: .35rem .75rem;
}
select.form-select option:checked, select.form-control option:checked,
select.form-select option:hover, select.form-control option:hover,
select.form-select option:focus, select.form-control option:focus {
    color: #111827;
    background-color: color-mix(in srgb, var(--app-base-color) 14%, #fff);
}
[data-theme=dark] select.form-select option, [data-theme=dark] select.form-control option { color: #D8DFEE; background-color: #22242a; }
[data-theme=dark] select.form-select option:checked, [data-theme=dark] select.form-control option:checked,
[data-theme=dark] select.form-select option:hover, [data-theme=dark] select.form-control option:hover {
    background-color: color-mix(in srgb, var(--app-base-color) 30%, #22242a);
}

body[app] .esri-view {
    --esri-view-outline-color: none;
}

body[app] .esri-popup__main-container * {
    font-family: var(--app-font-family);
}

body[app] .esri-view-width-xlarge .esri-popup__main-container,
body[app] .esri-view-width-large .esri-popup__main-container,
body[app] .esri-view-width-medium .esri-popup__main-container {
    width: 300px;
}

body[app] .esri-view-height-less-than-medium .esri-popup__main-container {
    max-height: 400px;
}

body[app] .esri-popup .esri-widget__heading {
    font-size: 0.9rem;
}

body[app] .esri-popup .esri-popup__content {
    font-size: 0.8rem;
}

body[app] .esri-popup .esri-popup__content * {
    font-size: inherit;
}

body[app] .esri-view-width-xsmall .esri-expand--auto .esri-expand__container--expanded {
    position: absolute;
    top: auto;
    bottom: 0;
    height: fit-content;
    min-width: 300px;
    z-index: 200;
}

.esri-ui .esri-attribution {
    display: none;
}

/* ---------------------------------------------------------------------------
   Map popup (project.js buildPopupContent, rendered inside the ArcGIS popup)
   --------------------------------------------------------------------------- */
.esri-popup .esri-popup__header-title { font-size: 13px; font-weight: 600; }
.esri-popup .esri-popup__content { margin: 0; }
.esri-view .esri-popup__main-container { max-height: min(520px, calc(100% - 24px)); }
.map-popup-info { width: 300px; max-width: 100%; font-size: 12px; }
.map-popup-hero { position: relative; height: 110px; border-radius: .5rem; overflow: hidden; background: color-mix(in srgb, var(--app-base-border-color) 40%, transparent); }
.map-popup-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-popup-hero img[src$="blank.png"] { object-fit: contain; } /* default picture shown as is */
.map-popup-hero-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem .55rem .4rem; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0)); color: #fff; font-size: 11px; }
.map-popup-status { display: inline-block; padding: .15rem .5rem; border-radius: 1rem; font-size: 10px; font-weight: 600; color: #fff; letter-spacing: .02em; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.map-popup-time { white-space: nowrap; opacity: .9; }
.map-popup-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .35rem; margin: .5rem 0 .4rem; }
.map-popup-tile { background: color-mix(in srgb, var(--app-base-border-color) 35%, transparent); border-radius: .45rem; padding: .3rem .5rem; min-width: 0; }
.map-popup-tile .k { font-size: 10px; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-popup-tile .v { font-size: 14px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.map-popup-tile .u { font-size: 10px; font-weight: 400; color: var(--bs-secondary-color); }
.map-popup-tile.primary { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; background: color-mix(in srgb, var(--app-base-color) 10%, transparent); }
.map-popup-tile.primary .k { font-size: 11px; }
.map-popup-tile.primary .v { font-size: 14px; }
.map-popup-address { display: flex; gap: .35rem; align-items: flex-start; font-size: 11px; color: var(--bs-secondary-color); margin-bottom: .45rem; }
.map-popup-actions { display: flex; gap: .4rem; }
.map-popup-actions .btn { font-size: 12px; }

/* Page footer (templates/main/footer.html) */
.footer, .footer p, .footer a, footer.footer { font-size: 12px; }

/* Row action dropdown (list pages) */
.app-row-menu .dropdown-menu { min-width: 8.5rem; }
.app-row-menu .dropdown-item.disabled { opacity: .55; pointer-events: none; }

/* Dropdown menus everywhere (row menus, header menus, select lists): 12px items */
.dropdown-item { font-size: 12px; }

/* ---------------------------------------------------------------------------
   Menu tree, article / section forms (ported from smart_guide)
   --------------------------------------------------------------------------- */
body[app] .sidebar .sidebar-menu > ul li .submenu > ul li a:before {
    left: 14px;
}

body[app] .sidebar .sidebar-menu > ul li .submenu > ul li a{
    padding-left: 1.25rem;
}

body[app] .sidebar .sidebar-menu>ul>li ul li a span {
    font-size: var(--app-base-size);
    font-weight: normal;
    white-space: wrap;
}

.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link {
    font-size: var(--app-base-size);
}

.container {
    position: relative;
}

.container .form-processing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#menuTree,
#secondMenuTree {
    overflow: auto;
}

#menuTree ul.fancytree-container,
#secondMenuTree ul.fancytree-container {
    border: none;
    outline: none;
    background-color: transparent;
}

#menuTree .fancytree-childcounter,
#secondMenuTree .fancytree-childcounter {
    height: auto;
}

.fancytree-title span[data-status='0'] {
    text-decoration: line-through;
}

.fancytree-title span[data-public='0'] {
    font-style: italic;
}

.fancytree-node,
.fancytree-node:not(.fancytree-active) span.fancytree-title {
    font-size: var(--app-base-size);
    color: var(--app-text-color);
}

#iconContainer {
    font-size: 1.5rem;
    color: var(--app-text-color);
}

#iconContainer i {
    margin-right: 5px;
}

.icon-list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2rem;
    max-height: 400px;
    overflow: auto;
}

.icon-list-container .item {
    cursor: pointer;
    margin: 0 10px 10px 0;
    padding: 5px;
    transition: transform var(--transition-time);
    color: var(--app-text-color);
}

.icon-list-container .item:hover {
    transform: scale(1.3);
}

.icon-list-container .item.selected {
    border-radius: 5px;
    background-color: var(--bs-gray-600);
    color: var(--bs-gray-100);
    transform: scale(1.3);
}

.maxWidth600 {
    max-width: 600px;
}

.btn.app-btn-dropdown,
.btn.app-btn-dropdown.active,
.btn.app-btn-dropdown:first-child:active {
    background-color: transparent;
    color: var(--bs-btn-hover-color);
    border: none !important;
    outline: none !important;
}

.btn.app-btn-dropdown.show,
.btn.app-btn-dropdown:hover {
    color: var(--app-text-color);
    background-color: transparent;
    border: none !important;
    outline: none !important;
}

.table-extra-chart th,
.table-extra-chart td {
    text-align: center;
    vertical-align: middle;
}

.table-extra-chart th>input,
.table-extra-chart td>input {
    min-width: 100px;
    display: inline-block;
}

.table-extra-chart thead th>input {
    min-width: 100px;
    width: calc(100% - 35px);
    margin: auto;
}

.table-extra-chart td input[type='color'] {
    height: 30px;
    width: 100%;
    display: block;
    padding: 0;
}

.extra-field-tmp-table .table-extra-chart td input[type='color'] {
    display: none;
}

.btn.btn-primary.btn-chart-row-add {
    color: white !important;
}

.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-size: 1rem;
}

.page-breadcrumb h3 {
    font-weight: 500;
}

.article-detail-frame{
    border: none;
    width: 100%;
    min-height: calc(100vh - 250px);
}