/*region General*/

@font-face {
    font-family: 'Inter';
    src: url("../../resources/fonts/Inter/InterVariable.woff2");
}

@keyframes teo-dropdown-fade-in {
    from {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

.dropdown-menu.show,
.select2-dropdown {
    animation: teo-dropdown-fade-in 0.15s ease-out !important;
}

.dropdown-menu.show.teo-context-menu-fade {
    animation: teo-dropdown-simple-fade-in 0.15s ease-out !important;
}

.dropdown-menu.show[data-popper-placement^="top"] {
    animation: teo-dropdown-fade-in-bottom 0.15s ease-out !important;
}

.dropdown-menu.show.teo-toolbar-menu-dropdown {
    animation: teo-dropdown-simple-fade-in 0.15s ease-out !important;
}

.dropdown-menu.show.teo-feature-grid-row-context-menu {
    animation: teo-dropdown-fade-in-bottom 0.15s ease-out !important;
}

@keyframes teo-dropdown-simple-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes teo-dropdown-fade-in-bottom {
    from {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

.teo-mr-3 {
    margin-right: 0.75rem !important;
}

.teo-mr-4 {
    margin-right: 1rem !important;
}

.teo-mr-5 {
    margin-right: 1.25rem !important;
}

.teo-mr-6 {
    margin-right: 1.5rem !important;
}

.teo-mr-7 {
    margin-right: 1.75rem !important;
}

.teo-z-index-1200 {
    z-index: 1200 !important;
}

.teo-z-index-120000 {
    z-index: 120000 !important;
}

.teo-z-index-1100 {
    z-index: 1100 !important;
}

.teo-z-index-9 {
    z-index: 9 !important;
}

.teo-z-index-111 {
    z-index: 111 !important;
}

.teo-framework-map {
    z-index: 1;
}

.cesium-widget-credits {
    display: none !important;
}

.teo-rotate-180 {
    transform: rotate(180deg);
    transition: transform 1s !important;
}

.rotate {
    transition: transform 150ms ease-in-out !important;
    backface-visibility: visible !important;
}

.rotate-90 {
    transform: rotate(90deg);
}

.ck-editor__editable {
    min-height: 500px !important;
}

.teo-measure-button-header {
    width: 40px;
    height: 40px;
}

.teo-measure-button-header img {
    width: 18px;
    height: 18px;
}

.teo-graphic-view-button {
    height: 35px !important;
}

.teo-drawing-tool-button:hover .text-white-hover {
    color: white !important;
}

.bg-transparent {
    background-color: transparent;
}

.box-shadow-none {
    box-shadow: none !important;
}

.accordion-button:hover {
    background-color: #FFFFFF !important;
}

.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-title {
    text-align: right !important;
    margin-right: 1rem !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value {
    font-weight: bolder !important;
    color: var(--bs-primary) !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value::selection {
    background-color: rgba(255, 199, 0, 0.32);
    color: inherit;
}

.bootstrap-table .page-jump-to .btn-icon {
    margin-left: 0.1rem !important;
    margin-right: 0 !important;

}

.bootstrap-table .page-jumpt-to .form-control {
    border-radius: .475rem !important
}

.bootstrap-table .fixed-table-loading {
    display: none !important;
}

.bootstrap-table .fixed-table-toolbar {
    margin-bottom: 0.20rem !important;
}

.h-90 {
    height: 90% !important;
}

.h-95 {
    height: 95% !important;
}

.h-0 {
    height: 0 !important;
}

.h-2 {
    height: 2% !important;
}

.h-5 {
    height: 5% !important;
}

.h-30 {
    height: 30% !important;
}

.h-35 {
    height: 35% !important;
}

.h-37 {
    height: 37% !important;
}

.h-40 {
    height: 40% !important;
}

.h-44 {
    height: 44% !important;
}

.h-45 {
    height: 45% !important;
}

.h-54 {
    height: 54% !important;
}

.h-60 {
    height: 60% !important;
}

.h-63 {
    height: 63% !important;
}

.h-65 {
    height: 65% !important;
}

.h-70 {
    height: 70% !important;
}

.w-40 {
    width: 40% !important
}

.w-45 {
    width: 45% !important
}

.w-60 {
    width: 60% !important
}

.h-630px {
    height: 630px !important;
}

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

.top-15px {
    top: 15px !important;
}


.top-20px {
    top: 20px !important;
}

.top-25px {
    top: 25px !important;
}

.top-35px {
    top: 35px;
}

.top-40px {
    top: 40px;
}

.top-60px {
    top: 60px !important;
}

.top-75px {
    top: 75px !important;
}

.top-80px {
    top: 80px;
}

.top-90px {
    top: 90px;
}

.top-120px {
    top: 120px !important;
}

.top-140px {
    top: 140px !important;
}

.bottom-25px {
    bottom: 25px !important;
}

.bottom-42px {
    bottom: 42px !important;
}

.bottom-55px {
    bottom: 55px !important;
}

.margin-right-10rem {
    margin-right: 10rem !important;
}

.left-50 {
    left: 50%
}

.left-45 {
    left: 45%
}

.left-90 {
    left: 90%
}

.text-area {
    height: 100px !important;
    resize: none;
}

.teo-custom-modal {
    /*Places modal center of the page*/
    position: fixed;
    top: 0;
    right: 0;
    margin-right: 3rem;
    margin-top: 8rem;
    width: fit-content;
    height: fit-content;
    padding: 0 !important;
    z-index: 100;
    /* end */
}

.teo-custom-movable-modal {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    height: fit-content;
    padding: 0 !important;
    z-index: 1055;
    pointer-events: none;
    outline: none !important;
}

.teo-custom-movable-modal .modal-dialog {
    pointer-events: all;
}

.modal-dialog {
    margin: 0;
}

.ml-4 {
    margin-left: 4px !important;
}

.select2-container .select2-selection--single {
    min-height: 30px !important;
}

.select2-container--bootstrap5 .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg):has(.select2-selection__choice) .select2-search.select2-search--inline .select2-search__field {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.no-pointer-events {
    pointer-events: none;
}

.form-check-clip .btn-check:checked + div {
    border: 3px solid var(--bs-primary) !important;
}

.form-floating.input-group label,
.form-floating .input-group label,
.input-group .form-floating label {
    z-index: 3;
}

.form-floating.input-group .btn,
.form-floating .input-group .btn,
.input-group .form-floating .btn {
    padding-top: 0;
    padding-bottom: 0;
}

.form-floating .select2-selection__choice {
    margin-top: 1.75rem !important;
}

.text-overflow-ellipsis {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.teo-text-overflow {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-wrap: nowrap !important;
}

.teo-text-green {
    color: green;
}

.teo-text-red {
    color: red;
}

.teo-text-yellow {
    color: #e7ab00;
}

.teo-disable {
    pointer-events: auto; /* parent hit‑test alır, children’a gitmez */
    cursor: auto; /* otomatik, bulunduğu elemana göre en uygun cursor */
}

.teo-disable * {
    pointer-events: none; /* tüm çocukları tıklamaya/hover’a kapat */
}

a {
    -webkit-user-drag: none;
    user-drag: none;
}

.bottom-right-container {
    z-index: 109;
}

.border-active-primary.active {
    border-color: var(--bs-primary) !important;
}

/*endregion*/

/*region Nav Bar */

@media (min-width: 992px) {
    .teo-navbar {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        position: fixed;
        height: 70px;
        z-index: 100;
        border-bottom: 0;
        top: 0;
        right: 0;
        left: 0;
        padding: 0;
    }

    .teo-navbar-brand {
        justify-content: space-between;
        align-items: center;
    }

    .teo-navbar-brand-img {
        height: 48px;
        width: 48px;
    }

    .teo-navbar-brand-title {
        margin-left: .5rem;
        margin-bottom: 0;
    }

    .teo-navbar-toolbar {
    }
}

@media (max-width: 991.98px) {
    .teo-navbar {
        flex-direction: column
    }

    .teo-navbar-brand {
        padding: 0 15px;
        display: flex;
        align-items: center;
        width: 100%;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 100;
        height: 55px;
    }

    .teo-navbar-brand-img {
        height: 36px;
        width: 36px;
    }

    .teo-navbar-brand-title {
        margin-left: .5rem;
        margin-bottom: 0;
    }

    .teo-navbar-toolbar {
    }
}

.teo-navbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative !important;
}

.teo-navbar-dropdown-menu {
    padding: 0;
    margin: 0;
    list-style: none;
    flex-direction: column;
    border-radius: .475rem;
    width: 275px;
}

.teo-navbar-dropdown-menu-item {
    display: block;
    padding: 0
}

.teo-navbar-dropdown-menu-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex: 0 0 100%;
    padding: .65rem 1rem;
    transition: none;
    outline: 0 !important;
    border-radius: .475rem;
    text-decoration: none !important;
}

.teo-navbar-dropdown-menu-content {
    padding: .65rem 1rem;
}

.teo-navbar-dropdown-menu-item-symbol {
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    border-radius: .475rem;
}

.teo-navbar-dropdown-menu-item-symbol > img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-block;
    border-radius: 0.475rem;
}

.teo-navbar-dropdown-separator {
    display: block;
    height: 0;
}

.teo-navbar-dropdown-menu-item-badge {
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.teo-navbar-dropdown-menu-item-badge-text {
    border-radius: 50%;
    padding: 0;
    min-width: unset;
    width: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
}

/*endregion*/

/*region DRAWER */

@media (min-width: 500.02px) {
    .teo-drawer-close {
        transition: padding-left 0.3s ease;
        width: 77px !important;
    }
}

@media (min-width: 320px) and (max-width: 500.01px) {
    .teo-drawer-close {
        transition: padding-left 0.3s ease;
        width: 50px !important;
    }
}

.teo-drawer-toggle-button {
    margin-right: 1.35rem !important;
    bottom: 0;
}

.teo-drawer-toggle-button-position {
    left: 100% !important
}

.teo-drawer-toggle-button-open-bottom-panel-position {
    left: 98% !important
}

.teo-drawer-small-dropdown-size {
    max-height: 500px !important;
    max-height: 70vh !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #27273a transparent !important;
}

.teo-drawer-medium-dropdown-size {
    max-height: 700px !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #27273a transparent !important;
}

.teo-drawer-big-dropdown-size {
    max-height: 1100px !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #27273a transparent !important;
}

.teo-drawer-footer-container .menu-item .menu-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    flex: 0 0 100%;
    padding: .45rem 1rem;
    transition: none;
    outline: 0 !important
}

.teo-drawer-aside-nav {
    height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.teo-drawer-resizer {
    width: 14px;
    cursor: col-resize;
    position: absolute;
    right: -7px;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 106;
}

.teo-drawer-resizer-handle {
    width: 3px;
    height: 100%;
    border-radius: 3px;
    background-color: var(--bs-primary);
    opacity: 0;
    transform: scaleX(0);
    transition: transform 0.15s ease-out, opacity 0.15s ease-out, box-shadow 0.15s ease-out;
    will-change: transform;
}

.teo-drawer-resizer-button {
    cursor: pointer !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 0 !important;
    z-index: 1;
}

.teo-drawer-resizer:hover .teo-drawer-resizer-handle,
.teo-right-panel-resizer:hover .teo-drawer-resizer-handle,
.teo-resizing .teo-drawer-resizer-handle {
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 2px 0.1px color-mix(in srgb, var(--bs-primary) 80%, transparent);
}

.teo-bottom-resizer-handle {
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: var(--bs-primary);
    opacity: 0;
    transform: scaleY(0);
    transition: transform 0.15s ease-out, opacity 0.15s ease-out, box-shadow 0.15s ease-out;
    will-change: transform;
}

.teo-bottom-resizer:hover .teo-bottom-resizer-handle,
.teo-resizing .teo-bottom-resizer-handle {
    opacity: 1;
    transform: scaleY(1);
    box-shadow: 0 0 2px 0.1px color-mix(in srgb, var(--bs-primary) 80%, transparent);
}

.teo-drawer-item-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.teo-bottom-toolbar-drawer {
    height: calc(100vh - 32px);
}

.teo-drawer-header {
    min-height: 0 !important;
    height: 28px;
}

@media (max-width: 767.98px) {
    .card > .card-header.teo-drawer-header:not(.flex-nowrap) {
        padding-top: 0 !important;
    }
}

/*endregion*/

/*region Drawing */

.teo-mobile-map-buttons-div {
    position: absolute;
    margin: 2px;
    padding: 0;
    width: 100%;
    z-index: 9999;
    bottom: 4rem;
}

/*region Attachment Scrollbars*/

.teo-tree-view-background.scroll-y,
.teo-attachment-list-view .card-body {
    scrollbar-width: thin;
    scrollbar-color: #7f869f transparent;
}

.teo-tree-view-background.scroll-y::-webkit-scrollbar,
.teo-attachment-list-view .card-body::-webkit-scrollbar {
    width: .55rem;
    height: .55rem;
}

.teo-tree-view-background.scroll-y::-webkit-scrollbar-thumb,
.teo-attachment-list-view .card-body::-webkit-scrollbar-thumb {
    background-color: #7f869f;
    border-radius: 999px;
}

.teo-tree-view-background.scroll-y:hover::-webkit-scrollbar-thumb,
.teo-attachment-list-view .card-body:hover::-webkit-scrollbar-thumb,
.teo-tree-view-background.scroll-y::-webkit-scrollbar-thumb:hover,
.teo-attachment-list-view .card-body::-webkit-scrollbar-thumb:hover {
    background-color: #7f869f;
}

/*endregion*/

.teo-mobile-map-buttons-div img {
    width: 44px;
    height: 46px;

}

.teo-mobile-draw-cursor img {
    width: 85px;
    height: 85px;
}

.teo-mobile-draw-cursor {
    z-index: 9999;
    position: absolute;
    margin: 0;
    transform: translate(-50%, -50%);
}

.teo-drawing-tool-mouse-label {
    position: relative;
    background: rgb(34, 33, 64);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.9;
    white-space: nowrap;
    pointer-events: none;
    z-index: 999999999;
}

.teo-drawing-button {
    text-align: center;
}

.teo-drawing-button-group li:active div {
    background: #0093c7;
    border-radius: 0.25rem;
    opacity: 0.7;
}

.teo-drawing-button-group img {
    width: 20px;
    height: 20px;
}

#teo_drawing_button_group ul {
    padding-left: 5px;
}

.teo-drawing-button-group div {
    padding: 10px;
    border: solid 1px rgb(62 89 123);
    border-radius: 0.25rem;
}

.teo-drawing-button-group li.active div {
    border-radius: 0.25rem;
    background: #0093c7;
}

.teo-drawing-button-group li {
    margin: 5px 5px 5px 12px;
}

.teo-drawing-tool {
}

.teo-drawing-button-properties {
    padding: 1.1rem !important;
}

.teo-drawing-colorpicker-trigger {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    pointer-events: none;
}

/*endregion*/

/*region Right Panel */

.teo-right-panel-open {
    transition: right .3s ease-in-out;
}

.teo-right-panel-tab-close-button {
    padding-bottom: 0.75rem !important;
    top: -1px !important;
    right: -3px !important;
}

.teo-right-panel-tab-button {
    padding-left: 12px !important;
}

.teo-right-panel-resizer {
    width: 14px;
    cursor: col-resize;
    position: absolute;
    left: -7px;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 150 !important;
}

#teo_detail_window_attributes_tab_container .nav-line-tabs .nav-item .nav-link {
    margin: 0;
}

.teo-tab-more-menu {
    padding: 0.5rem 0.75rem !important;
}

.teo-tab-more-menu .nav-link {
    justify-content: flex-start;
    align-items: center;
}

.teo-bottom-toolbar-right-panel {
    height: calc(100vh - 32px);
}

.teo-right-panel-header {
    min-height: 0 !important;
    height: 60px;
}

.teo-right-panel-default-size {
    width: 400px !important;
}

@media (max-width: 767.98px) {
    .card > .card-header.teo-right-panel-header:not(.flex-nowrap) {
        padding-top: 0 !important;
    }
}

/*endregion*/

/*region Detail */

.detail-icon {
    background-color: var(--bs-primary) !important;
    border-radius: .350rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(1em + 1rem + 1px);
    width: calc(1em + 1rem + 1px);
}


.detail-view .multi-sort {
    display: none !important;
}

.detail-view .fixed-table-toolbar {
    display: none !important;
}

.bootstrap-table table tbody tr td a i {
    font-size: 2rem !important;
    color: white;
}

.btn-green {
    color: #28a745;
}

.btn-orange {
    color: #ef4805;
}

.detail-view table th .search-input {
    display: none !important;
}

#teo_detail_window .card-body,
#teo_detail_window #teo_detail_window_tab_container_view_tab_content_container,
#teo_detail_window #teo_detail_window_tab_container_view_tab_content,
#teo_detail_window .tab-pane,
#teo_detail_window .teo-panel-grid {
    overflow: visible !important;
}

#teo_detail_window .bootstrap-table .dropdown,
#teo_detail_window .bootstrap-table .btn-group,
#teo_detail_window .fixed-table-body .dropdown,
#teo_detail_window .fixed-table-body .btn-group {
    position: relative;
}

#teo_detail_window .bootstrap-table .dropdown-menu,
#teo_detail_window .fixed-table-body .dropdown-menu {
    position: absolute !important;
    z-index: 999999 !important;
}

/*endregion*/

/*region Swipe Component*/

.teo-img-comp-slider {
    position: absolute;
    width: 27px;
    height: 100%;
    z-index: 999;
}

.teo-img-comp-slider-icon {
    position: absolute;
    z-index: 999;
    cursor: col-resize;
    width: 23px;
    height: 34px;
    left: 50%;
    transform: translate(-50%);
    background: url("../../resources/images/swipe/move.svg");
}

.teo-slider-exit-button {
    position: absolute;
    z-index: inherit;
    top: 10px;
    width: 27.188px;
    height: 27.188px;
    padding: 7px;
    outline: none;
    border: none;
    background: url("../../resources/images/swipe/close.svg");
}

.teo-slider-divider {
    position: absolute;
    border-left: 1px solid rgba(173, 173, 173, .5);
    border-right: 1px solid rgba(173, 173, 173, .5);
    width: 4px;
    height: 100%;
    left: 50%;
    transform: translate(-50%);
    background-color: rgba(36, 36, 36, 1);
}

/*endregion*/

/*region Workspace Item */

.teo-list-view-background.selected {
    background-color: var(--bs-primary) !important;
}

.teo-tree-view-background.selected {
    background-color: var(--bs-primary) !important;
}

.ck-editor__editable p {
    color: #090909 !important;
}

#teo_corporation_grid .card {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#teo_person_grid .card {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


.form-check-clip .btn-check:checked + div {
    border: 1px solid var(--bs-cyan);
    transition: all 0.2s ease-in-out;
}

.form-check-clip .form-check-wrapper {
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.word-break-all {
    word-break: break-all;
}

.trumbowyg-dropdown-backColor:not(.trumbowyg-dropdown--color-list), .trumbowyg-dropdown-foreColor:not(.trumbowyg-dropdown--color-list) {
    max-width: 200px;
    width: 200px;
    height: 500px;
    overflow: auto;
    background-color: var(--bs-secondary) !important;
}

/*endregion*/

/*region FloatPanel */

.teo-float-panel-navigation {
    visibility: hidden !important;
    transform: translateX(-100%);
    transition: transform .3s ease, visibility .3s ease;
}

.teo-float-panel-navigation.open {
    visibility: visible !important;
    transform: translateX(0);
}

.teo-float-panel-overlay {
    background-color: rgba(103, 103, 103, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.teo-float-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.teo-float-panel-content-fade-in {
    animation: teo-float-panel-content-fade-in .45s ease;
}

@keyframes teo-float-panel-content-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}



.teo-float-panel-modal-body {
    padding: 0 !important;
    overflow: hidden;
}

.teo-float-panel-item {
    border: 1px solid transparent !important;
}

/*endregion*/

/*region Select2 */

.select2-selection.select2-selection--single.form-control.form-select {
    padding-bottom: 0.625rem !important;
    height: calc(3.5rem + 2px) !important;
    line-height: 1.25 !important;
}

.select2-selection__rendered {
    width: 100%;
}

/*endregion*/

/*region TeoGrid */

.teo-view-class-date-range-filter {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0.35rem 0.5rem !important;
    font-size: 11px !important;
}

.bootstrap-table .filter-control input,
.bootstrap-table .filter-control select {
    box-sizing: border-box;
    width: 100% !important;
}

.teo-dual-grid-button {
    background-color: transparent !important;
    border: 1px solid var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}

.teo-dual-grid-button.active {
    background-color: var(--bs-primary) !important;
    color: #FFFFFF !important;
}

.bootstrap-table {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bootstrap-table .fixed-table-container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.bootstrap-table .fixed-table-container .fixed-table-body {
    max-height: 100%;
    height: 0;
    overflow: auto;
    min-height: 100% !important;
}

.bootstrap-table .fixed-table-container .fixed-table-body tr {
    height: 55px !important;
    line-height: 19px !important;;
    min-height: 0
}

.bootstrap-table .fixed-table-container .fixed-table-body .teo-grid:not(.teo-excel-grid):not(.teo-query-card-table) tbody tr {
    height: 34px !important;
    line-height: 16px !important;
}

.bootstrap-table .fixed-table-container .fixed-table-body .teo-grid:not(.teo-excel-grid):not(.teo-query-card-table) thead tr {
    height: auto !important;
    line-height: normal !important;
}

.bootstrap-table .fixed-table-container .fixed-table-body .teo-grid:not(.teo-excel-grid):not(.teo-query-card-table) thead th {
    padding: 0 !important;
}

.bootstrap-table .teo-grid:not(.teo-excel-grid):not(.teo-query-card-table) tbody td {
    height: 34px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    line-height: 16px !important;
    vertical-align: middle !important;
}

.bootstrap-table .teo-grid:not(.teo-excel-grid):not(.teo-query-card-table) thead th .th-inner {
    padding: 2px 10px !important;
    font-size: 11px !important;
    line-height: 16px !important;
}

.bootstrap-table .teo-grid:not(.teo-excel-grid):not(.teo-query-card-table) .filter-control {
    margin: 2px 5px 4px !important;
    padding: 0 !important;
}

.bootstrap-table .teo-grid:not(.teo-excel-grid):not(.teo-query-card-table) .filter-control input,
.bootstrap-table .teo-grid:not(.teo-excel-grid):not(.teo-query-card-table) .filter-control select {
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 16px !important;
}

.bootstrap-table .teo-grid:not(.teo-excel-grid):not(.teo-query-card-table) .teo-grid-row-command,
.bootstrap-table .teo-grid:not(.teo-excel-grid):not(.teo-query-card-table) .teo-grid-dropdown-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 4px !important;
    margin-right: 2px !important;
    margin-left: 2px !important;
}

.bootstrap-table .teo-grid:not(.teo-excel-grid):not(.teo-query-card-table) .teo-grid-row-command .svg-icon,
.bootstrap-table .teo-grid:not(.teo-excel-grid):not(.teo-query-card-table) .teo-grid-dropdown-btn .svg-icon {
    line-height: 1;
}

.bootstrap-table table:not(.teo-excel-grid) thead th[data-field="operate"] .fht-cell {
    height: 20px !important;
}

.bootstrap-table table:not(.teo-excel-grid) thead th[data-field="operate"] {
    pointer-events: none;
}

.bootstrap-table:has(.teo-grid:not(.teo-excel-grid):not(.teo-query-card-table)) .fixed-table-toolbar {
    margin-bottom: 0;
}

.bootstrap-table:has(.teo-grid:not(.teo-excel-grid):not(.teo-query-card-table)) .fixed-table-toolbar .columns,
.bootstrap-table:has(.teo-grid:not(.teo-excel-grid):not(.teo-query-card-table)) .fixed-table-toolbar .search {
    margin-top: 4px !important;
    margin-bottom: 2px !important;
}

.bootstrap-table:has(.teo-grid:not(.teo-excel-grid):not(.teo-query-card-table)) .fixed-table-toolbar .btn,
.bootstrap-table:has(.teo-grid:not(.teo-excel-grid):not(.teo-query-card-table)) .fixed-table-toolbar .form-control,
.bootstrap-table:has(.teo-grid:not(.teo-excel-grid):not(.teo-query-card-table)) .fixed-table-toolbar .form-select {
    height: 32px;
    min-height: 32px;
    padding: 4px 8px;
    font-size: 11px;
}

.bootstrap-table:has(.teo-grid:not(.teo-excel-grid):not(.teo-query-card-table)) .fixed-table-toolbar .btn-icon {
    width: 32px;
    min-width: 32px;
    padding: 4px !important;
}

.bootstrap-table:has(.teo-grid:not(.teo-excel-grid):not(.teo-query-card-table)) .fixed-table-pagination {
    font-size: 11px;
}

.bootstrap-table:has(.teo-grid:not(.teo-excel-grid):not(.teo-query-card-table)) .fixed-table-pagination .btn,
.bootstrap-table:has(.teo-grid:not(.teo-excel-grid):not(.teo-query-card-table)) .fixed-table-pagination .form-control,
.bootstrap-table:has(.teo-grid:not(.teo-excel-grid):not(.teo-query-card-table)) .fixed-table-pagination .page-link {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 11px;
}

.bootstrap-table .fixed-table-container .fixed-table-body thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.bootstrap-table .fixed-table-pagination .pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.bootstrap-table .fixed-table-pagination .pagination-detail {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 0.5rem;
}

.bootstrap-table .fixed-table-pagination .pagination-detail .page-list {
    display: inline-flex !important;
    align-items: center;
}

.bootstrap-table .fixed-table-pagination > .pagination-detail .pagination-info {
    line-height: 34px;
    margin-right: 0;
}

.bootstrap-table .card-views .card-view .card-view-value {
    word-wrap: break-word !important;
    word-break: break-word !important;
}

.teo-grid-row-bg-green {
    background-color: #10883b !important;
}

tr.teo-grid-row-bg-green > td {
    background-color: #10883b !important;
    box-shadow: inset 0 0 0 9999px #10883b !important;
    border-color: inherit !important;
    color: #ffffff !important;
}

.table-hover tbody tr.teo-grid-row-bg-green:hover > td {
    background-color: #0d7030 !important;
    box-shadow: inset 0 0 0 9999px #0d7030 !important;
}

.teo-grid-row-bg-red {
    background-color: #b40f0f !important;
}

.teo-grid-row-bg-orange {
    background-color: #bd6320;
}

@media (max-width: 550px) {

    .fixed-table-toolbar {
        white-space: nowrap;
    }

    .bootstrap-table .fixed-table-toolbar .columns,
    .bootstrap-table .fixed-table-toolbar .search {
        display: inline-block;
        vertical-align: middle;
        float: none !important;
    }

    .fixed-table-toolbar .search .form-control {
        width: 100px;
        display: inline-block;
        vertical-align: middle;
    }

    .fixed-table-pagination .pagination .page-jump-to .form-control {
        padding: 0.5rem 0.5rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0.4rem;
    }

    .fixed-table-pagination .pagination-detail .page-list {
        font-size: 0;
        display: inline-flex;
        align-items: center;
    }

    .fixed-table-pagination .pagination .page-item:not(:is(.active, .page-pre, .page-next)) {
        display: none !important;
    }

    .fixed-table-pagination .pagination .page-jump-to {
        display: block !important;
        width: auto !important;
    }

    .bootstrap-table .search input {
        padding: 0.5rem 0.5rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0.4rem;
    }
}

/*endregion*/

/*region StreetView */

.teo-street-view-close-button {
    left: -50% !important;
}

.teo-street-view-close-button-container {
    left: 50% !important;
    top: 20px !important;
    z-index: 1100 !important;
}

.teo-street-view-close-button-container-mobile {
    left: 50% !important;
    top: 20px !important;
    z-index: 1 !important;
}

.teo-street-view-container {
    height: 100% !important;
    width: 100% !important;
    position: absolute !important;
}

.teo-street-view-container-mobile {
    height: 85% !important;
    width: 100% !important;
    position: absolute !important;
    bottom: 0;
    left: 0;
}

.teo-street-view-button-height {
    bottom: 225px !important;
}

.teo-street-view-button-height-without-interaction-buttons {
    bottom: 60px !important;
}

.teo-street-view-button-height-without-zoom-buttons {
    bottom: 100px !important;
}

.teo-street-view-button-height-with-interaction-buttons {
    bottom: 120px !important;
}

/*endregion*/

/*region Print */

.teo-print-template-text {
    text-shadow: grey 1px 0.1px 0.1px !important;
}

/*endregion*/

/*region Overlay */

.teo-overlay-item-text {
    vertical-align: sub !important;
}

.teo-overlay-icon {
    margin-left: -.05rem !important;
}

/*endregion*/

/*region Change Password */

.teo-show-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

/*endregion*/

/*region Toolbar */

.teo-toolbar-map-component {
    margin-right: 17.75rem !important;
}

.teo-toolbar-map-component-without-search-box {
    margin-right: 7.5rem !important;
}

.teo-toolbar-map-component-dropdown {
    width: 200px !important;
}

@media (max-width: 800px) {
    .teo-toolbar-dropdown-sub-item {
        left: 100% !important;
        top: auto;
        right: auto !important;
    }
}

.teo-toolbar-main-container {
    z-index: 108 !important;
}

.teo-toolbar-container {
    z-index: 107 !important;
}

.teo-toolbar-menu-dropdown > *:not(:last-child) {
    margin-bottom: 1rem;
}

@media (max-width: 1500px) {
    .teo-toolbar-container {
        z-index: 107 !important;
    }
}

.teo-controls-main-container {
    z-index: 108
}

/*endregion*/

/*region Image */

.teo-image-item {
    height: 150px !important;
}

/*endregion*/

/*region Coordinate */

.teo-map-coordinate-dropdown {
    width: 390px !important;
    font-size: 1.050rem !important;
}

/*endregion*/

/*region Migration */

.teo-migration-field-match textarea {
    height: 275px !important;
}

.teo-past-migration-log textarea {
    height: 300px !important;
}

.form-control.is-invalid ~ .teo-show-password {
    position: absolute;
    top: 35%;
    right: 30px;
    transform: translateY(-50%);
}

/*endregion*/

/*region Field Statistics */

.teo-field-statistic-chart-container .grid-stack-item-content {
    top: 0px !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
}

/*endregion*/

/*region Query */

.teo-inventory-query-display-fields-text {
    max-width: calc(100% - 50px) !important;
}

/*endregion*/

/*region Toggle Buttons */

.btn-check + .teo-btn-toggle {
    background-color: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}

.btn-check:not(:checked) + .teo-btn-toggle:hover,
.btn-check:not(:checked) + .teo-btn-toggle:focus {
    color: var(--bs-primary) !important;
    background-color: color-mix(in srgb, var(--bs-primary) 20%, transparent) !important;
    border-color: var(--bs-primary) !important;
}

/*endregion*/

/*region Panel Grid*/

.teo-panel-grid .form-control {
    min-height: calc(1.5em + 1.1rem + 2px);
    padding: .55rem .75rem;
    font-size: .925rem;
    border-radius: .325rem;
}

.teo-panel-grid .search-input {
    flex: 1;
    width: 100px !important;
}

.teo-panel-grid .columns-right .btn {
    height: calc(1.5em + 1.1rem + 2px);
    width: calc(1.5em + 1.1rem + 2px);
}

.teo-panel-grid .columns.right .btn {
    padding: .55rem 1.25rem;
    font-size: .925rem;
    border-radius: .325rem;
}

.teo-panel-grid .fixed-table-pagination {
    margin-top: 0.5rem !important;
}

.teo-panel-grid .card-view-title {
    padding: 0.25rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-wrap: nowrap !important;
}

.teo-panel-grid .card-view-value {
    padding: 0.25rem !important;
}

.teo-panel-grid .card-views .card-view:not(.card-view-field-operate) {
    display: grid !important;
    grid-template-columns: minmax(95px, 40%) minmax(0, 1fr);
    align-items: start;
    column-gap: 0.75rem;
}

.teo-panel-grid .card-views .card-view:not(.card-view-field-operate) .card-view-title {
    min-width: 0;
    margin-right: 0 !important;
    line-height: 1.4;
}

.teo-panel-grid .card-views .card-view:not(.card-view-field-operate) .card-view-value {
    display: block;
    min-width: 0;
    line-height: 1.4;
}

.teo-panel-grid .bootstrap-table .fixed-table-container .fixed-table-body {
    max-height: 100%;
    height: 0;
    overflow: auto;
    min-height: 100% !important;
}

/*endregion*/

/*region Cluster */

.teo-cluster-delete-button {
    margin-right: 0.06rem !important;
}

/*endregion*/

/*region JsTree */

.jstree-icon.jstree-ocl {
    background-image: none !important;
    background: none !important;
    width: 16px !important;
    height: 16px !important;
    align-items: center;
    justify-content: center;
}

.jstree-default-large .jstree-icon {
    background-image: none;
}

.jstree-default .jstree-icon {
    background-image: none;
}

.jstree-anchor {
    white-space: normal !important;
    height: auto !important;
    align-items: flex-start !important;
}

/*endregion*/

/*region User Authorization Area */

.teo-user-authorization-legend-position {
    top: 16px !important;
    right: 14px !important;
}

/*endregion*/

/*region Pagination List View */

.teo-pagination-list-view-previous-button-container {
    left: 0 !important;
}

.teo-pagination-list-view-next-button-container {
    right: 0 !important;
}

/*endregion*/

/*region Active User */

.teo-active-user-badge {
    width: 20px;
    height: 20px;
    border: 2px solid white;
    background-color: green;
    transform: translate(-50%, 25%);
}

/*endregion*/

/*region Logo */

.teo-logo {
    width: 40px !important;
}

.teo-float-panel-logo {
    width: 60px !important;
}

.teo-float-panel-logo-close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 82px;
    padding: 0;
    overflow: visible;
    color: var(--bs-danger);
    background: transparent;
    border: 0;
    isolation: isolate;
}

.teo-float-panel-logo-close::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 65px;
    z-index: -1;
    content: "";
    background: radial-gradient(ellipse, rgba(0, 0, 0, .72) 0 22%, rgba(var(--bs-danger-rgb), .18) 38%, transparent 70%);
    border: 0;
    box-shadow: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.72);
    transform-origin: center;
    transition: opacity .55s ease, transform .7s cubic-bezier(.2, .75, .2, 1);
}

.teo-float-panel-logo-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    z-index: 0;
    content: "";
    background: conic-gradient(from 12deg, transparent 0 8%, rgba(var(--bs-danger-rgb), .85) 9% 12%, transparent 13% 28%, rgba(255, 255, 255, .8) 29% 31%, transparent 32% 49%, rgba(var(--bs-danger-rgb), .9) 50% 54%, transparent 55% 72%, rgba(255, 255, 255, .65) 73% 75%, transparent 76%);
    border-radius: 50%;
    filter: blur(.4px) drop-shadow(0 0 5px rgba(var(--bs-danger-rgb), .9));
    mask: radial-gradient(circle, transparent 0 62%, #000 64% 72%, transparent 74%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35) rotate(-80deg);
    transition: opacity .35s ease, transform .9s cubic-bezier(.18, .75, .18, 1);
}

.teo-float-panel-logo-portal {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 66px;
    height: 66px;
    opacity: 0;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1.18) rotate(35deg);
    transition: opacity .3s ease, transform .92s cubic-bezier(.16, .78, .2, 1);
}

.teo-float-panel-logo-portal::before,
.teo-float-panel-logo-portal::after {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: 50%;
    filter: drop-shadow(0 0 4px rgba(var(--bs-danger-rgb), .9));
    transform-origin: center;
    transition: transform .92s cubic-bezier(.16, .76, .18, 1), opacity .4s ease;
}

.teo-float-panel-logo-portal::before {
    background: conic-gradient(from 0deg, rgba(var(--bs-danger-rgb), .95) 0 4%, transparent 5% 15%, rgba(255, 255, 255, .8) 16% 18%, transparent 19% 31%, rgba(var(--bs-danger-rgb), .8) 32% 39%, transparent 40% 56%, #ffffff 57% 59%, transparent 60% 76%, rgba(var(--bs-danger-rgb), .95) 77% 82%, transparent 83%);
    mask: radial-gradient(circle, transparent 0 59%, #000 61% 68%, transparent 70%);
    transform: rotate(-35deg) scale(.92);
}

.teo-float-panel-logo-portal::after {
    inset: 7px;
    background: conic-gradient(from 25deg, transparent 0 12%, rgba(255, 255, 255, .7) 13% 17%, transparent 18% 38%, rgba(var(--bs-danger-rgb), .9) 39% 47%, transparent 48% 68%, rgba(255, 255, 255, .75) 69% 72%, transparent 73% 88%, rgba(var(--bs-danger-rgb), .85) 89% 94%, transparent 95%);
    mask: radial-gradient(circle, transparent 0 54%, #000 57% 67%, transparent 70%);
    transform: rotate(55deg) scale(.86);
}

.teo-float-panel-logo-close .teo-float-panel-logo {
    width: 60px !important;
    height: 65px !important;
    padding: 0 !important;
    object-fit: contain;
    z-index: 1;
    transform-origin: center;
    transition: opacity .65s ease, filter .65s ease, transform .9s cubic-bezier(.2, .75, .2, 1);
}

.teo-float-panel-logo-portal-home {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    z-index: 3;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(var(--bs-danger-rgb), .95));
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2) translateY(10px);
    transition: opacity .32s ease, transform .48s cubic-bezier(.15, .85, .2, 1);
}

.teo-float-panel-logo-portal-home::before,
.teo-float-panel-logo-portal-home::after {
    position: absolute;
    content: "";
    transform-origin: center;
}

.teo-float-panel-logo-portal-home::before {
    top: 5px;
    left: 5px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(var(--bs-danger-rgb), .95) 38%, #4b0614 75%);
    clip-path: polygon(50% 0, 100% 42%, 88% 42%, 88% 100%, 61% 100%, 61% 66%, 39% 66%, 39% 100%, 12% 100%, 12% 42%, 0 42%);
    box-shadow: 0 0 8px rgba(var(--bs-danger-rgb), .9);
    transform: translateY(8px) scale(.45);
    transition: transform .55s cubic-bezier(.15, .85, .2, 1);
}

.teo-float-panel-logo-portal-home::after {
    top: 26px;
    left: 17px;
    width: 8px;
    height: 12px;
    background: radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, .95), rgba(var(--bs-danger-rgb), .7) 24%, #080106 72%);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 5px 5px 1px 1px;
    box-shadow: inset 0 0 5px rgba(var(--bs-danger-rgb), .85), 0 0 7px rgba(var(--bs-danger-rgb), .9);
    opacity: 0;
    transform: perspective(20px) rotateX(-35deg) scale(.3);
    transition: opacity .3s ease, transform .48s cubic-bezier(.15, .85, .2, 1);
}

.teo-float-panel-logo-portal-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: 34px;
    height: 34px;
    background: repeating-conic-gradient(from 20deg, rgba(var(--bs-danger-rgb), .8) 0 5deg, transparent 6deg 19deg);
    border-radius: 50%;
    filter: blur(.3px) drop-shadow(0 0 6px rgba(var(--bs-danger-rgb), .95));
    mask: radial-gradient(circle, transparent 0 54%, #000 58% 65%, transparent 69%);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1.2) rotate(-75deg);
    transition: opacity .32s ease, transform .88s cubic-bezier(.15, .8, .2, 1);
}

.teo-float-panel-logo-close:hover::before,
.teo-float-panel-logo-close:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
}

.teo-float-panel-logo-close:hover::after,
.teo-float-panel-logo-close:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.18) rotate(190deg);
}

.teo-float-panel-logo-close:hover .teo-float-panel-logo-portal,
.teo-float-panel-logo-close:focus-visible .teo-float-panel-logo-portal {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.34) rotate(235deg);
}

.teo-float-panel-logo-close:hover .teo-float-panel-logo-portal::before,
.teo-float-panel-logo-close:focus-visible .teo-float-panel-logo-portal::before {
    transform: rotate(280deg) scale(.72);
}

.teo-float-panel-logo-close:hover .teo-float-panel-logo-portal::after,
.teo-float-panel-logo-close:focus-visible .teo-float-panel-logo-portal::after {
    transform: rotate(-260deg) scale(.62);
}

.teo-float-panel-logo-close:hover .teo-float-panel-logo,
.teo-float-panel-logo-close:focus-visible .teo-float-panel-logo {
    opacity: .42;
    filter: saturate(.7) brightness(.58) blur(.45px) drop-shadow(0 0 9px rgba(var(--bs-danger-rgb), .5));
    transform: perspective(100px) translateZ(-16px) scale(.86);
}

.teo-float-panel-logo-close:hover .teo-float-panel-logo-portal-home,
.teo-float-panel-logo-close:focus-visible .teo-float-panel-logo-portal-home {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateY(0);
    transition-delay: .52s;
}

.teo-float-panel-logo-close:hover .teo-float-panel-logo-portal-home::before,
.teo-float-panel-logo-close:focus-visible .teo-float-panel-logo-portal-home::before {
    transform: translateY(0) scale(1);
    transition-delay: .52s;
}

.teo-float-panel-logo-close:hover .teo-float-panel-logo-portal-home::after,
.teo-float-panel-logo-close:focus-visible .teo-float-panel-logo-portal-home::after {
    opacity: 1;
    transform: perspective(20px) rotateX(0) scale(1);
    transition-delay: .68s;
}

.teo-float-panel-logo-close:hover .teo-float-panel-logo-portal-core,
.teo-float-panel-logo-close:focus-visible .teo-float-panel-logo-portal-core {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.2) rotate(-290deg);
}

.teo-float-panel-logo-close:active {
    transform: translateY(1px) scale(.97);
}

.teo-float-panel-logo-close:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), .7);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .teo-float-panel-logo-close,
    .teo-float-panel-logo-close::before,
    .teo-float-panel-logo-close::after,
    .teo-float-panel-logo-close .teo-float-panel-logo,
    .teo-float-panel-logo-portal-home {
        transition: none;
    }

    .teo-float-panel-logo-portal-home::before,
    .teo-float-panel-logo-portal-home::after {
        transition: none;
    }

    .teo-float-panel-logo-portal,
    .teo-float-panel-logo-portal-core {
        transition: none;
    }
}

.teo-website-logo {
    background-image: url(../../resources/images/logo/teosoft-logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 22px;
    height: 22px;
    opacity: 0.8
}

/*endregion*/

/*region Trumbowyg */

.trumbowyg-dropdown-addOpacity {
    height: 80px !important;
}

.trumbowyg-dropdown-opacitySliderMenu button {
    display: none !important;
}

/*endregion*/

/*region Template */

.teo-web-template-content,
body:has(.teo-web-template-content) > .teo-color-swatch-panel,
body:has(.teo-web-template-content) > .teo-combobox-panel {
    --teo-wb-canvas: var(--teo-background);
    --teo-wb-chrome: var(--bs-body-bg);
    --teo-wb-chrome-raised: var(--bs-secondary);
    --teo-wb-chrome-hover: var(--bs-light);
    --teo-wb-chrome-deep: var(--teo-background);
    --teo-wb-sunken: var(--teo-background);
    --teo-wb-line: var(--bs-border-color);
    --teo-wb-line-soft: var(--bs-border-color);
    --teo-wb-line-strong: var(--bs-border-color);
    --teo-wb-text: var(--bs-body-color);
    --teo-wb-text-dim: var(--bs-body-color);
    --teo-wb-text-faint: var(--bs-body-color);
    --teo-wb-text-invert: var(--bs-white);
    --teo-wb-accent: var(--bs-primary);
    --teo-wb-accent-deep: var(--bs-primary);
    --teo-wb-accent-soft: var(--bs-primary);
    --teo-wb-accent-rgb: var(--bs-primary-rgb);
    --teo-wb-danger: var(--bs-danger);
    --teo-wb-danger-rgb: var(--bs-danger-rgb);
    --teo-wb-warning: var(--bs-warning);
    --teo-wb-neutral-rgb: 108, 117, 125;
    --teo-wb-radius-1: .35rem;
    --teo-wb-radius-2: .475rem;
    --teo-wb-radius-3: .625rem;
    --teo-wb-shadow-2: 0 8px 20px -8px rgba(0, 0, 0, .28);
    --teo-wb-shadow-3: 0 24px 56px -20px rgba(0, 0, 0, .35);
    --teo-wb-scrim: rgba(0, 0, 0, .45);
    --teo-wb-motion: 180ms ease;
    --teo-wb-motion-fast: 120ms ease;
    --teo-wb-font: var(--bs-body-font-family);
    --teo-wb-font-mono: var(--bs-font-monospace);
}

.teo-web-template-host .teo-settings-dialog-window {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    overflow: hidden;
    width: min(720px, calc(100vw - 48px));
    height: min(520px, calc(100vh - 64px));
    flex-direction: column;
    border: 1px solid var(--teo-wb-line-strong);
    border-radius: var(--teo-wb-radius-3);
    background: var(--teo-wb-chrome);
    box-shadow: var(--teo-wb-shadow-3);
    transform: translate(-50%, -50%);
}

.teo-web-template-host .teo-settings-dialog-header {
    display: flex;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 12px;
    border-bottom: 1px solid var(--teo-wb-line-soft);
    background: var(--teo-wb-chrome-raised);
    color: var(--teo-wb-text);
    font-size: 11.5px;
    font-weight: 700;
}

.teo-web-template-host .teo-settings-dialog-header > i {
    color: var(--teo-wb-accent);
    font-size: 12px;
}

.teo-web-template-host .teo-settings-dialog-header > span {
    flex: 1;
}

.teo-web-template-host .teo-settings-dialog-close {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--teo-wb-radius-1);
    color: var(--teo-wb-text-dim);
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    transition: color var(--teo-wb-motion), background var(--teo-wb-motion);
}

.teo-web-template-host .teo-settings-dialog-close:hover {
    color: var(--teo-wb-text);
    background: var(--teo-wb-chrome-hover);
}

.teo-web-template-host .teo-settings-dialog-body {
    display: flex;
    min-height: 0;
    flex: 1;
}

.teo-web-template-host .teo-layer-properties {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    font-family: var(--teo-wb-font);
}

.teo-web-template-host .teo-layer-properties.is-open {
    display: block;
}

.teo-web-template-host .teo-layer-properties-scrim {
    position: absolute;
    inset: 0;
    background: var(--teo-wb-scrim);
}

.teo-web-template-host .teo-layer-properties-footer {
    display: flex;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-top: 1px solid var(--teo-wb-line-soft);
    background: var(--teo-wb-chrome-raised);
}

.teo-web-template-host .teo-layer-properties-note {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--teo-wb-text-dim);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-web-template-host .teo-layer-properties-note.is-error {
    color: var(--teo-wb-danger);
    font-weight: 650;
}

.teo-web-template-host .teo-layer-properties-button {
    min-width: 78px;
    height: 26px;
    padding: 0 12px;
    border: 1px solid var(--teo-wb-line-strong);
    border-radius: var(--teo-wb-radius-2);
    color: var(--teo-wb-text);
    background: var(--teo-wb-chrome);
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
    transition: background var(--teo-wb-motion-fast), border-color var(--teo-wb-motion-fast);
}

.teo-web-template-host .teo-layer-properties-button:hover {
    background: var(--teo-wb-chrome-hover);
}

.teo-web-template-host .teo-layer-properties-button:focus-visible {
    outline: 2px solid rgba(var(--teo-wb-accent-rgb), .6);
    outline-offset: 1px;
}

.teo-web-template-host .teo-layer-properties-button.is-primary {
    border-color: var(--teo-wb-accent-deep);
    color: var(--teo-wb-text-invert);
    background: var(--teo-wb-accent);
}

.teo-web-template-host .teo-layer-properties-button.is-primary:hover {
    background: var(--teo-wb-accent-deep);
}

.teo-web-template-host .teo-layer-properties-form {
    max-width: 600px;
}

.teo-web-template-host .teo-layer-properties-section {
    margin-bottom: 16px;
}

.teo-web-template-host .teo-layer-properties-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--teo-wb-line-soft);
    color: var(--teo-wb-text-faint);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.teo-web-template-host .teo-layer-properties-section-title > i {
    color: var(--teo-wb-accent);
    font-size: 11px;
}

.teo-web-template-host .teo-layer-properties-field {
    display: grid;
    min-height: 32px;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.teo-web-template-host .teo-layer-properties-field.is-stacked {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.teo-web-template-host .teo-layer-properties-field > label {
    color: var(--teo-wb-text-dim);
    font-size: 11px;
    font-weight: 600;
}

.teo-web-template-host .teo-layer-properties-input {
    width: 100%;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--teo-wb-line);
    border-radius: var(--teo-wb-radius-2);
    color: var(--teo-wb-text);
    background: var(--teo-wb-sunken);
    font-family: inherit;
    font-size: 11px;
    outline: none;
    transition: border-color var(--teo-wb-motion-fast);
}

.teo-web-template-host .teo-layer-properties-input::placeholder {
    color: var(--teo-wb-text-faint);
}

.teo-web-template-host .teo-layer-properties-input:focus {
    border-color: rgba(var(--teo-wb-accent-rgb), .7);
}

.teo-web-template-host .teo-layer-properties-input.is-invalid {
    border-color: var(--teo-wb-danger);
}

.teo-web-template-host .teo-layer-properties-switch {
    position: relative;
    width: 34px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--teo-wb-line);
    border-radius: 20px;
    background: var(--teo-wb-sunken);
    cursor: pointer;
    transition: border-color var(--teo-wb-motion-fast), background-color var(--teo-wb-motion-fast);
}

.teo-web-template-host .teo-layer-properties-switch-handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--teo-wb-text-dim);
    transition: transform var(--teo-wb-motion-fast), background var(--teo-wb-motion-fast);
}

.teo-web-template-host .teo-layer-properties-switch[aria-checked="true"] {
    border-color: var(--teo-wb-accent);
    background: var(--teo-wb-accent);
}

.teo-web-template-host .teo-layer-properties-switch[aria-checked="true"] .teo-layer-properties-switch-handle {
    background: var(--teo-wb-text-invert);
    transform: translateX(16px);
}

.teo-web-template-host .teo-layer-properties-switch:focus-visible {
    outline: 2px solid rgba(var(--teo-wb-accent-rgb), .6);
    outline-offset: 2px;
}

.teo-web-template-host .teo-layer-properties-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.teo-web-template-host .teo-layer-properties-range > input {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    accent-color: var(--teo-wb-accent);
}

.teo-web-template-host .teo-layer-properties-range > output {
    min-width: 36px;
    font-family: var(--teo-wb-font-mono);
    font-size: 10.5px;
    text-align: right;
}

.teo-web-template-host .teo-layer-properties-scale {
    display: flex;
    align-items: center;
    gap: 4px;
}

.teo-web-template-host .teo-layer-properties-scale-prefix {
    color: var(--teo-wb-text-faint);
    font-family: var(--teo-wb-font-mono);
    font-size: 10.5px;
}

.teo-web-template-host .teo-layer-properties-scale > .teo-layer-properties-input {
    max-width: 140px;
}

.teo-web-template-host .teo-layer-properties-mini {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--teo-wb-line);
    border-radius: var(--teo-wb-radius-1);
    color: var(--teo-wb-text-dim);
    background: var(--teo-wb-chrome);
    cursor: pointer;
    font-size: 11px;
}

.teo-web-template-host .teo-layer-properties-mini:hover {
    color: var(--teo-wb-text);
    background: var(--teo-wb-chrome-hover);
}

.teo-web-template-host .teo-layer-properties-hint {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: var(--teo-wb-text-faint);
    font-size: 10px;
    line-height: 1.35;
}

.teo-web-template-host .teo-layer-properties-facts {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 2px 8px;
    margin: 0;
    font-size: 11px;
}

.teo-web-template-host .teo-layer-properties-facts > dt {
    color: var(--teo-wb-text-dim);
    font-weight: 600;
}

.teo-web-template-host .teo-layer-properties-facts > dd {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-web-template-host .teo-layer-properties-section-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.teo-web-template-host .teo-layer-properties-section-title .teo-layer-properties-section-actions {
    text-transform: none;
    letter-spacing: 0;
}

.teo-web-template-host .teo-layer-properties-field.is-fact {
    min-height: 26px;
}

.teo-web-template-host .teo-layer-properties-fact {
    overflow: hidden;
    color: var(--teo-wb-text);
    font-family: var(--teo-wb-font-mono);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-web-template-host .teo-layer-properties-field.is-actions > label {
    min-height: 1px;
}

.teo-web-template-host .teo-layer-properties-switch-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.teo-web-template-host .teo-layer-properties-switch-hint {
    color: var(--teo-wb-text-faint);
    font-size: 10px;
}

.teo-web-template-host .teo-layer-properties-switch:disabled {
    cursor: default;
    opacity: .4;
}

.teo-web-template-host .teo-layer-properties-number {
    display: flex;
    align-items: center;
    gap: 6px;
}

.teo-web-template-host .teo-layer-properties-number > .teo-layer-properties-input {
    max-width: 180px;
}

.teo-web-template-host .teo-layer-properties-affix {
    color: var(--teo-wb-text-faint);
    font-family: var(--teo-wb-font-mono);
    font-size: 10.5px;
    white-space: nowrap;
}

.teo-web-template-host .teo-layer-properties-input[readonly] {
    color: var(--teo-wb-text-dim);
    background: var(--teo-wb-chrome-raised);
}

.teo-web-template-host .teo-layer-properties-input:disabled {
    opacity: .5;
}

.teo-web-template-host .teo-layer-properties-mini:disabled {
    cursor: default;
    opacity: .4;
}

.teo-web-template-host .teo-layer-properties-mini.is-danger:hover {
    border-color: rgba(var(--teo-wb-danger-rgb), .5);
    color: var(--teo-wb-danger);
    background: rgba(var(--teo-wb-danger-rgb), .12);
}

.teo-web-template-host .teo-layer-properties-button > i {
    margin-right: 6px;
    font-size: 11px;
}

.teo-web-template-host .teo-layer-properties-check.is-fixed {
    opacity: .6;
}

.teo-web-template-host .teo-combobox {
    display: block;
    min-width: 0;
}

.teo-web-template-host .teo-combobox-button {
    display: flex;
    width: 100%;
    height: 26px;
    align-items: center;
    gap: 6px;
    padding: 0 6px 0 8px;
    border: 1px solid var(--teo-wb-line);
    border-radius: var(--teo-wb-radius-1);
    color: var(--teo-wb-text);
    background: var(--teo-wb-sunken);
    font: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--teo-wb-motion-fast), box-shadow var(--teo-wb-motion-fast);
}

.teo-web-template-host .teo-combobox-button:hover {
    border-color: var(--teo-wb-line-strong);
}

.teo-web-template-host .teo-combobox-button:focus-visible,
.teo-web-template-host .teo-combobox-button[aria-expanded="true"] {
    border-color: rgba(var(--teo-wb-accent-rgb), .6);
    box-shadow: 0 0 0 2px rgba(var(--teo-wb-accent-rgb), .18);
    outline: none;
}

.teo-web-template-host .teo-combobox-button:disabled {
    color: var(--teo-wb-text-faint);
    cursor: default;
    opacity: .6;
}

.teo-web-template-host .teo-combobox-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--teo-wb-accent);
    font-size: 12px;
}

.teo-web-template-host .teo-combobox-icon:empty {
    display: none;
}

.teo-web-template-host .teo-combobox-text {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-web-template-host .teo-combobox.is-empty .teo-combobox-text {
    color: var(--teo-wb-text-faint);
}

.teo-web-template-host .teo-combobox-count {
    flex: 0 0 auto;
    padding: 0 6px;
    border-radius: 8px;
    color: var(--teo-wb-accent);
    background: rgba(var(--teo-wb-accent-rgb), .14);
    font-family: var(--teo-wb-font-mono);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 16px;
}

.teo-web-template-host .teo-combobox-caret {
    flex: 0 0 auto;
    color: var(--teo-wb-text-faint);
    font-size: 10px;
    transition: transform var(--teo-wb-motion-fast);
}

.teo-web-template-host .teo-combobox-button[aria-expanded="true"] .teo-combobox-caret {
    transform: rotate(180deg);
}

body:has(.teo-web-template-content) > .teo-combobox-panel {
    position: fixed;
    z-index: 1200;
    display: flex;
    min-width: 200px;
    max-height: 320px;
    flex-direction: column;
    border: 1px solid var(--teo-wb-line-strong);
    border-radius: var(--teo-wb-radius-2);
    background: var(--teo-wb-chrome-raised);
    box-shadow: var(--teo-wb-shadow-2);
    font-family: var(--teo-wb-font);
    color: var(--teo-wb-text);
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-search {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--teo-wb-line-soft);
    color: var(--teo-wb-text-faint);
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-search > input {
    width: 100%;
    height: 24px;
    padding: 0 6px;
    border: 1px solid var(--teo-wb-line);
    border-radius: var(--teo-wb-radius-1);
    color: var(--teo-wb-text);
    background: var(--teo-wb-sunken);
    font: inherit;
    font-size: 11px;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-search > input:focus {
    border-color: rgba(var(--teo-wb-accent-rgb), .6);
    box-shadow: 0 0 0 2px rgba(var(--teo-wb-accent-rgb), .18);
    outline: none;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-list {
    min-height: 0;
    flex: 1 1 auto;
    padding: 4px;
    overflow: auto;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-option {
    display: flex;
    width: 100%;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 6px;
    border: 0;
    border-radius: var(--teo-wb-radius-1);
    color: var(--teo-wb-text);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-option:hover,
body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-option.is-highlighted {
    background: var(--teo-wb-chrome-hover);
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-option:disabled {
    cursor: default;
    opacity: .55;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-check {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--teo-wb-line-strong);
    border-radius: 4px;
    color: var(--teo-wb-text-invert);
    background: var(--teo-wb-sunken);
    font-size: 10px;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-check > i {
    opacity: 0;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-option.is-selected .teo-combobox-check {
    border-color: var(--teo-wb-accent);
    background: var(--teo-wb-accent);
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-option.is-selected .teo-combobox-check > i {
    opacity: 1;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-list:not([aria-multiselectable="true"]) .teo-combobox-check {
    border-radius: 50%;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-option-icon {
    display: inline-flex;
    width: 18px;
    flex: 0 0 18px;
    justify-content: center;
    color: var(--teo-wb-accent);
    font-size: 12px;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-option-text {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: baseline;
    gap: 8px;
    overflow: hidden;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-option-text > b {
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-option-text > small {
    margin-left: auto;
    color: var(--teo-wb-text-faint);
    font-family: var(--teo-wb-font-mono);
    font-size: 9.5px;
    white-space: nowrap;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-option.is-blank > .teo-combobox-option-text > b {
    color: var(--teo-wb-text-faint);
    font-style: italic;
    font-weight: 500;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-empty {
    padding: 14px 10px;
    color: var(--teo-wb-text-faint);
    font-size: 11px;
    text-align: center;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-foot {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-top: 1px solid var(--teo-wb-line-soft);
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-foot-button {
    height: 22px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--teo-wb-radius-1);
    color: var(--teo-wb-accent);
    background: transparent;
    font: inherit;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-foot-button:hover {
    background: rgba(var(--teo-wb-accent-rgb), .1);
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-foot-count {
    margin-left: auto;
    color: var(--teo-wb-text-faint);
    font-family: var(--teo-wb-font-mono);
    font-size: 10px;
}

.teo-web-template-host .teo-layer-properties-combobox {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
}

.teo-web-template-host .teo-layer-properties-combobox > span {
    min-width: 0;
    flex: 1 1 auto;
}

.teo-web-template-host .teo-field-list-empty {
    display: flex;
    height: 100%;
    min-height: 80px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    color: var(--teo-wb-text-faint);
    font-size: 10.5px;
    text-align: center;
}

.teo-web-template-host .teo-field-list-empty > i {
    font-size: 20px;
    opacity: .6;
}

.teo-web-template-host .teo-field-list-empty.is-loading > i {
    animation: teo-field-list-spin 1.2s linear infinite;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-facets:empty {
    display: none;
}

body:has(.teo-web-template-content) > .teo-combobox-panel .teo-combobox-facets > .teo-facet-bar {
    background: transparent;
}

.teo-web-template-host .teo-color-swatch {
    display: inline-flex;
    min-width: 0;
}

.teo-web-template-host .teo-color-swatch-button {
    display: inline-flex;
    height: 26px;
    align-items: center;
    gap: 7px;
    padding: 0 8px 0 3px;
    border: 1px solid var(--teo-wb-line);
    border-radius: var(--teo-wb-radius-1);
    color: var(--teo-wb-text);
    background: var(--teo-wb-sunken);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--teo-wb-motion-fast), box-shadow var(--teo-wb-motion-fast);
}

.teo-web-template-host .teo-color-swatch-button:hover {
    border-color: rgba(var(--teo-wb-accent-rgb), .6);
}

.teo-web-template-host .teo-color-swatch-button[aria-expanded="true"],
.teo-web-template-host .teo-color-swatch-button:focus-visible {
    border-color: rgba(var(--teo-wb-accent-rgb), .6);
    box-shadow: 0 0 0 2px rgba(var(--teo-wb-accent-rgb), .18);
    outline: none;
}

.teo-web-template-host .teo-color-swatch-button:disabled {
    cursor: default;
    opacity: .5;
}

.teo-web-template-host .teo-color-swatch-fill {
    display: block;
    width: 34px;
    height: 18px;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(var(--teo-wb-neutral-rgb), .25);
    background-image:
        linear-gradient(45deg, rgba(128, 128, 128, .35) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, .35) 75%),
        linear-gradient(45deg, rgba(128, 128, 128, .35) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, .35) 75%);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
}

.teo-web-template-host .teo-color-swatch-fill > span {
    display: block;
    width: 100%;
    height: 100%;
}

.teo-web-template-host .teo-color-swatch-text {
    font-family: var(--teo-wb-font-mono);
    font-size: 10.5px;
    font-weight: 600;
}

.teo-web-template-host .teo-color-swatch-alpha {
    color: var(--teo-wb-text-faint);
    font-family: var(--teo-wb-font-mono);
    font-size: 9.5px;
}

.teo-web-template-host .teo-color-swatch-anchor {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body:has(.teo-web-template-content) > .teo-color-swatch-panel {
    position: fixed;
    z-index: 1300;
    display: none;
    padding: 8px;
    border: 1px solid var(--teo-wb-line-strong);
    border-radius: var(--teo-wb-radius-2);
    background: var(--teo-wb-chrome-raised);
    box-shadow: var(--teo-wb-shadow-2);
}

body:has(.teo-web-template-content) > .teo-color-swatch-panel.is-open {
    display: block;
}

body:has(.teo-web-template-content) > .teo-color-swatch-panel .colorpicker {
    position: static;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body:has(.teo-web-template-content) > .teo-color-swatch-panel .colorpicker::before,
body:has(.teo-web-template-content) > .teo-color-swatch-panel .colorpicker::after {
    display: none;
}

.teo-web-template-host .teo-layer-properties-field.is-color > span {
    display: flex;
}

.teo-web-template-host .teo-layer-properties {
    font-family: var(--teo-wb-font);
}

.teo-web-template-host .teo-layer-properties .teo-settings-dialog-window {
    width: min(1180px, calc(100vw - 48px));
    height: min(720px, calc(100vh - 64px));
    color: var(--teo-wb-text);
}

.teo-web-template-host .teo-layer-properties .teo-settings-dialog-header > span {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
}

.teo-web-template-host .teo-layer-properties-name {
    min-width: 0;
    overflow: hidden;
    color: var(--teo-wb-text-dim);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-web-template-host .teo-layer-properties-name::before {
    margin-right: 8px;
    color: var(--teo-wb-text-faint);
    content: "/";
}

.teo-web-template-host .teo-layer-properties .teo-settings-rail-item:focus-visible {
    outline: 1px solid rgba(var(--teo-wb-accent-rgb), .6);
    outline-offset: -1px;
}

.teo-web-template-host .teo-layer-properties .teo-settings-page.is-active {
    min-height: 0;
    flex: 1 1 auto;
}

.teo-web-template-host .teo-layer-properties .teo-settings-page > .teo-layer-properties-form {
    min-height: 0;
    flex: 1 1 auto;
}

.teo-web-template-host .teo-template-designer .teo-template-designer-window {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
}

.teo-web-template-host .teo-template-designer-header {
    gap: 10px;
}

.teo-web-template-host .teo-template-designer-identity {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    gap: 8px;
    margin-left: 12px;
}

.teo-web-template-host .teo-template-designer-header {
    flex: 0 0 auto;
}

.teo-web-template-host .teo-template-designer-name {
    width: 260px;
    font-weight: 600;
}

.teo-web-template-host .teo-template-designer-description {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 520px;
}

.teo-web-template-host .teo-template-designer-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--teo-wb-line-soft);
    background: var(--teo-wb-chrome-raised);
    overflow-x: auto;
}

.teo-web-template-host .teo-template-designer-toolgroup {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    padding-right: 10px;
    border-right: 1px solid var(--teo-wb-line-soft);
}

.teo-web-template-host .teo-template-designer-toolgroup:last-of-type {
    border-right: 0;
}

.teo-web-template-host .teo-template-designer-tool,
.teo-web-template-host .teo-template-designer-mode,
.teo-web-template-host .teo-template-designer-zoom {
    display: inline-flex;
    height: 26px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: var(--teo-wb-radius-1);
    color: var(--teo-wb-text-dim);
    background: transparent;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.teo-web-template-host .teo-template-designer-tool {
    width: 28px;
    padding: 0;
    font-size: 13px;
}

.teo-web-template-host .teo-template-designer-tool:hover,
.teo-web-template-host .teo-template-designer-mode:hover,
.teo-web-template-host .teo-template-designer-zoom:hover {
    color: var(--teo-wb-text);
    background: var(--teo-wb-chrome-hover);
}

.teo-web-template-host .teo-template-designer-tool:disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.teo-web-template-host .teo-template-designer-tool.is-active,
.teo-web-template-host .teo-template-designer-mode.is-active {
    border-color: rgba(var(--teo-wb-accent-rgb), .5);
    color: var(--teo-wb-accent);
    background: rgba(var(--teo-wb-accent-rgb), .12);
}

.teo-web-template-host .teo-template-designer-tool.is-danger:hover {
    color: var(--teo-wb-danger);
    background: rgba(var(--teo-wb-danger-rgb), .12);
}

.teo-web-template-host .teo-template-designer-mode > span {
    font-size: 11px;
}

.teo-web-template-host .teo-template-designer-zoom {
    min-width: 54px;
    font-family: var(--teo-wb-font-mono);
    font-size: 11px;
}

.teo-web-template-host .teo-template-designer-readout {
    margin-left: auto;
    color: var(--teo-wb-text-faint);
    font-family: var(--teo-wb-font-mono);
    font-size: 10.5px;
    white-space: nowrap;
}

.teo-web-template-host .teo-template-designer-body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.teo-web-template-host .teo-template-designer-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.teo-web-template-host .teo-template-designer-side.is-left {
    width: 236px;
    flex: 0 0 236px;
    border-right: 1px solid var(--teo-wb-line-soft);
}

.teo-web-template-host .teo-template-designer-side.is-right {
    width: 300px;
    flex: 0 0 300px;
    border-left: 1px solid var(--teo-wb-line-soft);
    overflow-y: auto;
}

.teo-web-template-host .teo-template-designer-panel {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    padding: 10px 12px;
    border-bottom: 1px solid var(--teo-wb-line-soft);
}

.teo-web-template-host .teo-template-designer-panel.is-layers {
    min-height: 0;
    flex: 1 1 auto;
    border-bottom: 0;
}

.teo-web-template-host .teo-template-designer-panel > h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: var(--teo-wb-text-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.teo-web-template-host .teo-template-designer-panel > h3 > i {
    color: var(--teo-wb-accent);
}

.teo-web-template-host .teo-template-designer-count {
    margin-left: auto;
    font-family: var(--teo-wb-font-mono);
    font-style: normal;
}

.teo-web-template-host .teo-template-designer-palette {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.teo-web-template-host .teo-template-designer-palette-item {
    display: flex;
    height: 30px;
    min-width: 0;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
    border: 1px solid var(--teo-wb-line-soft);
    border-radius: var(--teo-wb-radius-1);
    color: var(--teo-wb-text-dim);
    background: var(--teo-wb-chrome);
    font: inherit;
    font-size: 11px;
    text-align: left;
    cursor: grab;
}

.teo-web-template-host .teo-template-designer-palette-item > i {
    flex: 0 0 auto;
    color: var(--teo-wb-accent);
}

.teo-web-template-host .teo-template-designer-palette-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-web-template-host .teo-template-designer-palette-item:hover {
    border-color: var(--teo-wb-line-strong);
    color: var(--teo-wb-text);
    background: var(--teo-wb-chrome-hover);
}

.teo-web-template-host .teo-template-designer-prompt {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.teo-web-template-host .teo-template-designer-prompt > input {
    min-width: 0;
    flex: 1 1 auto;
}

.teo-web-template-host .teo-template-designer-panel > .teo-layer-properties-hint {
    margin-top: 8px;
}

.teo-web-template-host .teo-template-designer-layers {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
}

.teo-web-template-host .teo-template-designer-layer {
    display: flex;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 0 6px;
    border-radius: var(--teo-wb-radius-1);
    color: var(--teo-wb-text-dim);
    font-size: 11px;
    cursor: pointer;
}

.teo-web-template-host .teo-template-designer-layer > i {
    flex: 0 0 auto;
    color: var(--teo-wb-accent);
}

.teo-web-template-host .teo-template-designer-layer:hover {
    color: var(--teo-wb-text);
    background: var(--teo-wb-chrome-hover);
}

.teo-web-template-host .teo-template-designer-layer.is-selected {
    color: var(--teo-wb-text);
    background: rgba(var(--teo-wb-accent-rgb), .14);
}

.teo-web-template-host .teo-template-designer-layer.is-hidden > .teo-template-designer-layer-name,
.teo-web-template-host .teo-template-designer-layer.is-hidden > i {
    opacity: .45;
}

.teo-web-template-host .teo-template-designer-layer-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-web-template-host .teo-template-designer-layer-tools {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 1px;
    opacity: 0;
}

.teo-web-template-host .teo-template-designer-layer:hover > .teo-template-designer-layer-tools,
.teo-web-template-host .teo-template-designer-layer.is-selected > .teo-template-designer-layer-tools,
.teo-web-template-host .teo-template-designer-layer-tools > .is-active {
    opacity: 1;
}

.teo-web-template-host .teo-template-designer-layer-button {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--teo-wb-radius-1);
    color: var(--teo-wb-text-faint);
    background: transparent;
    font-size: 11px;
    cursor: pointer;
}

.teo-web-template-host .teo-template-designer-layer-button:hover {
    color: var(--teo-wb-text);
    background: var(--teo-wb-chrome-raised);
}

.teo-web-template-host .teo-template-designer-layer-button.is-active {
    color: var(--teo-wb-accent);
}

.teo-web-template-host .teo-template-designer-stage {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.teo-web-template-host .teo-template-designer-canvas-host,
.teo-web-template-host .teo-template-designer-source-host {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
}

.teo-web-template-host .teo-template-designer-stage.is-design > .teo-template-designer-source-host,
.teo-web-template-host .teo-template-designer-stage.is-source > .teo-template-designer-canvas-host {
    display: none;
}

.teo-web-template-host .teo-template-designer-stage.is-split > .teo-template-designer-source-host {
    flex: 0 0 38%;
    border-top: 1px solid var(--teo-wb-line);
}

.teo-web-template-host .teo-template-designer-footer {
    justify-content: space-between;
}

.teo-web-template-host .teo-template-designer-status {
    min-width: 0;
    overflow: hidden;
    color: var(--teo-wb-text-faint);
    font-family: var(--teo-wb-font-mono);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-web-template-host .teo-template-designer-footer-actions {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.teo-web-template-host .teo-template-canvas {
    --teo-template-ruler-page: var(--teo-wb-chrome-raised);
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: 22px minmax(0, 1fr);
    background: var(--teo-wb-sunken);
    outline: none;
}

.teo-web-template-host .teo-template-canvas:focus-visible {
    box-shadow: inset 0 0 0 1px var(--teo-wb-accent);
}

.teo-web-template-host .teo-template-canvas-corner {
    display: grid;
    place-items: center;
    border-right: 1px solid var(--teo-wb-line-soft);
    border-bottom: 1px solid var(--teo-wb-line-soft);
    color: var(--teo-wb-text-faint);
    background: var(--teo-wb-chrome);
    font-size: 10px;
}

.teo-web-template-host .teo-template-canvas-ruler {
    display: block;
    border-color: var(--teo-wb-accent);
    color: var(--teo-wb-text-faint);
    background: var(--teo-wb-chrome);
    font-family: var(--teo-wb-font-mono);
}

.teo-web-template-host .teo-template-canvas-ruler.is-top {
    width: 100%;
    height: 22px;
    border-bottom: 1px solid var(--teo-wb-line-soft);
}

.teo-web-template-host .teo-template-canvas-ruler.is-left {
    width: 22px;
    height: 100%;
    border-right: 1px solid var(--teo-wb-line-soft);
}

.teo-web-template-host .teo-template-canvas-scroll {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.teo-web-template-host .teo-template-canvas-space {
    position: relative;
}

.teo-web-template-host .teo-template-canvas-sheet {
    position: absolute;
    box-shadow: var(--teo-wb-shadow-3);
    overflow: hidden;
}

.teo-web-template-host .teo-template-canvas-page {
    position: absolute;
    top: 0;
    left: 0;
    color: #222;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    transform-origin: 0 0;
    overflow: hidden;
}

.teo-web-template-host .teo-template-canvas-page.has-grid {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, .06) 1px, transparent 1px);
}

.teo-web-template-host .teo-template-canvas-margin {
    position: absolute;
    border: 1px dashed rgba(var(--teo-wb-accent-rgb), .55);
    pointer-events: none;
}

.teo-web-template-host .teo-template-canvas-overlay {
    position: absolute;
    pointer-events: none;
}

.teo-web-template-host .teo-template-canvas-selection {
    position: absolute;
    box-sizing: border-box;
    outline: 1px solid rgba(var(--teo-wb-accent-rgb), .7);
}

.teo-web-template-host .teo-template-canvas-selection.is-primary {
    outline: 2px solid var(--teo-wb-accent);
}

.teo-web-template-host .teo-template-canvas-selection.is-locked {
    outline-style: dashed;
}

.teo-web-template-host .teo-template-canvas-chip {
    position: absolute;
    top: -22px;
    left: -2px;
    padding: 2px 6px;
    border-radius: var(--teo-wb-radius-1);
    color: var(--teo-wb-text-invert);
    background: var(--teo-wb-accent);
    font-family: var(--teo-wb-font-mono);
    font-size: 10px;
    white-space: nowrap;
}

.teo-web-template-host .teo-template-canvas-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid var(--teo-wb-accent);
    border-radius: 2px;
    background: var(--teo-wb-canvas);
    pointer-events: auto;
}

.teo-web-template-host .teo-template-canvas-handle.is-nw { top: -6px; left: -6px; cursor: nwse-resize; }

.teo-web-template-host .teo-template-canvas-handle.is-n { top: -6px; left: calc(50% - 5px); cursor: ns-resize; }

.teo-web-template-host .teo-template-canvas-handle.is-ne { top: -6px; right: -6px; cursor: nesw-resize; }

.teo-web-template-host .teo-template-canvas-handle.is-e { top: calc(50% - 5px); right: -6px; cursor: ew-resize; }

.teo-web-template-host .teo-template-canvas-handle.is-se { right: -6px; bottom: -6px; cursor: nwse-resize; }

.teo-web-template-host .teo-template-canvas-handle.is-s { bottom: -6px; left: calc(50% - 5px); cursor: ns-resize; }

.teo-web-template-host .teo-template-canvas-handle.is-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }

.teo-web-template-host .teo-template-canvas-handle.is-w { top: calc(50% - 5px); left: -6px; cursor: ew-resize; }

.teo-web-template-host .teo-template-canvas-guide {
    position: absolute;
    background: var(--teo-wb-danger);
    opacity: .8;
}

.teo-web-template-host .teo-template-canvas-guide.is-vertical {
    top: 0;
    width: 1px;
    height: 100%;
}

.teo-web-template-host .teo-template-canvas-guide.is-horizontal {
    left: 0;
    width: 100%;
    height: 1px;
}

.teo-web-template-host .teo-template-canvas-marquee {
    position: absolute;
    border: 1px dashed var(--teo-wb-accent);
    background: rgba(var(--teo-wb-accent-rgb), .1);
}

.teo-web-template-host .teo-template-inspector {
    display: flex;
    flex-direction: column;
}

.teo-web-template-host .teo-template-inspector-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.teo-web-template-host .teo-template-inspector-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--teo-wb-line-soft);
    border-radius: var(--teo-wb-radius-2);
    background: var(--teo-wb-chrome);
    font-size: 12px;
    font-weight: 600;
}

.teo-web-template-host .teo-template-inspector-head > i {
    color: var(--teo-wb-accent);
}

.teo-web-template-host .teo-template-inspector-head > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-web-template-host .teo-template-inspector-head > em {
    margin-left: auto;
    color: var(--teo-wb-text-faint);
    font-family: var(--teo-wb-font-mono);
    font-style: normal;
}

.teo-web-template-host .teo-template-inspector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
}

.teo-web-template-host .teo-template-designer .teo-template-inspector .teo-layer-properties-field {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 6px;
}

.teo-web-template-host .teo-template-designer .teo-template-inspector .teo-layer-properties-field.is-stacked,
.teo-web-template-host .teo-template-designer .teo-template-inspector-grid > .teo-layer-properties-field {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.teo-web-template-host .teo-template-designer .teo-template-inspector .teo-layer-properties-number {
    min-width: 0;
}

.teo-web-template-host .teo-template-designer .teo-template-inspector .teo-layer-properties-number > .teo-layer-properties-input {
    min-width: 0;
    max-width: none;
}

.teo-web-template-host .teo-template-inspector-geometry > label > small {
    color: var(--teo-wb-text-faint);
    font-family: var(--teo-wb-font-mono);
    font-weight: 400;
}

.teo-web-template-host .teo-template-inspector-toolrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--teo-wb-text-dim);
}

.teo-web-template-host .teo-template-inspector-toolrow > span:first-child {
    width: 74px;
    flex: 0 0 74px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-web-template-host .teo-template-inspector-tools {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
}

.teo-web-template-host .teo-template-inspector .teo-layer-properties-mini.is-active {
    border-color: rgba(var(--teo-wb-accent-rgb), .5);
    color: var(--teo-wb-accent);
    background: rgba(var(--teo-wb-accent-rgb), .12);
}

.teo-web-template-host .teo-template-inspector-markup {
    width: 100%;
    min-height: 140px;
    resize: vertical;
    font-family: var(--teo-wb-font-mono);
    font-size: 10.5px;
    line-height: 1.45;
    white-space: pre;
    tab-size: 2;
}

.teo-web-template-host .teo-template-source {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    background: var(--teo-wb-canvas);
}

.teo-web-template-host .teo-template-source-bar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--teo-wb-line-soft);
    background: var(--teo-wb-chrome);
    font-size: 11px;
}

.teo-web-template-host .teo-template-source-bar > i {
    color: var(--teo-wb-accent);
}

.teo-web-template-host .teo-template-source-state {
    color: var(--teo-wb-text-faint);
    font-size: 10.5px;
    font-style: normal;
}

.teo-web-template-host .teo-template-source-state.is-dirty {
    color: var(--teo-wb-warning);
}

.teo-web-template-host .teo-template-source-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.teo-web-template-host .teo-template-source-actions kbd {
    display: none;
}

.teo-web-template-host .teo-template-source-editor {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
}

.teo-web-template-host .teo-template-source-gutter {
    width: 44px;
    flex: 0 0 44px;
    margin: 0;
    padding: 8px 6px 8px 0;
    border-right: 1px solid var(--teo-wb-line-soft);
    color: var(--teo-wb-text-faint);
    background: var(--teo-wb-chrome);
    font-family: var(--teo-wb-font-mono);
    font-size: 11px;
    line-height: 1.5;
    text-align: right;
    overflow: hidden;
    user-select: none;
}

.teo-web-template-host .teo-template-source-text {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    color: var(--teo-wb-text);
    background: transparent;
    font-family: var(--teo-wb-font-mono);
    font-size: 11px;
    line-height: 1.5;
    outline: none;
    resize: none;
    tab-size: 2;
    white-space: pre;
}

.teo-web-template-host .teo-layer-properties-mini.is-primary {
    border-color: var(--teo-wb-accent);
    color: var(--teo-wb-text-invert);
    background: var(--teo-wb-accent);
}

.teo-web-template-host .teo-layer-properties-mini.is-danger:hover {
    color: var(--teo-wb-danger);
}

.teo-web-template-host .teo-layer-properties-hint.is-warning {
    color: var(--teo-wb-warning);
}

.teo-web-template-host .teo-print-dialog .teo-workbench-dialog-body {
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.teo-web-template-host .teo-print-dialog-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.teo-web-template-host .teo-print-dialog-side {
    display: flex;
    flex: 0 0 340px;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    overflow: hidden auto;
    border-right: 1px solid var(--teo-wb-line);
    background: var(--teo-wb-chrome);
}

.teo-web-template-host .teo-print-dialog-side .teo-layer-properties-field {
    grid-template-columns: 104px minmax(0, 1fr);
}

.teo-web-template-host .teo-print-dialog-stage {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    background: var(--teo-wb-sunken);
}

.teo-web-template-host .teo-print-dialog-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--teo-wb-line);
    background: var(--teo-wb-chrome);
}

.teo-web-template-host .teo-print-dialog-toolgroup {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.teo-web-template-host .teo-print-dialog-zoom {
    min-width: 58px;
    height: 24px;
    border: 1px solid var(--teo-wb-line);
    border-radius: var(--teo-wb-radius-1);
    background: transparent;
    color: var(--teo-wb-text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.teo-web-template-host .teo-print-dialog-zoom:hover {
    background: var(--teo-wb-chrome-hover);
}

.teo-web-template-host .teo-print-dialog-lock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--teo-wb-text-dim);
    cursor: pointer;
}

.teo-web-template-host .teo-print-dialog-readout {
    margin-left: auto;
    font-family: var(--teo-wb-font-mono);
    font-size: 12px;
    color: var(--teo-wb-text-dim);
}

.teo-web-template-host .teo-print-dialog-scroll {
    position: relative;
    display: grid;
    flex: 1 1 auto;
    place-items: center;
    padding: 24px;
    overflow: auto;
}

.teo-web-template-host .teo-print-dialog-sheet {
    position: relative;
    flex: none;
    background: #fff;
    box-shadow: var(--teo-wb-shadow-3);
}

.teo-web-template-host .teo-print-dialog-page-host {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
}

.teo-web-template-host .teo-print-dialog-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--teo-wb-text-dim);
    background: var(--teo-wb-scrim);
    pointer-events: none;
}

.teo-web-template-host .teo-print-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.teo-web-template-host .teo-print-dialog-actions .teo-layer-properties-button {
    flex: 1 1 auto;
    justify-content: center;
}

.teo-web-template-host .teo-print-dialog-arrows {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.teo-web-template-host .teo-print-dialog-arrow {
    aspect-ratio: 1;
    padding: 6px;
    border: 1px solid var(--teo-wb-line);
    border-radius: var(--teo-wb-radius-1);
    background: #fff;
    cursor: pointer;
}

.teo-web-template-host .teo-print-dialog-arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.teo-web-template-host .teo-print-dialog-arrow:hover {
    border-color: var(--teo-wb-accent);
}

.teo-web-template-host .teo-print-dialog-arrow.is-active {
    border-color: var(--teo-wb-accent);
    box-shadow: 0 0 0 2px var(--teo-wb-accent-soft);
}

.teo-web-template-host .teo-print-dialog-layers {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    overflow: auto;
}

.teo-web-template-host .teo-print-dialog-layer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--teo-wb-radius-1);
    font-size: 12px;
    color: var(--teo-wb-text);
    cursor: pointer;
}

.teo-web-template-host .teo-print-dialog-layer:hover {
    background: var(--teo-wb-chrome-hover);
}

.teo-web-template-host .teo-print-dialog-layer span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-web-template-host .teo-print-dialog-layer em {
    font-style: normal;
    font-size: 11px;
    color: var(--teo-wb-text-faint);
}

.teo-web-template-host .teo-print-dialog-layer input {
    accent-color: var(--teo-wb-accent);
}

.teo-web-template-host .teo-print-page {
    position: relative;
    overflow: hidden;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
}

.teo-web-template-host .teo-print-element {
    box-sizing: border-box;
    overflow: hidden;
}

.teo-web-template-host .teo-print-element-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.teo-web-template-host .teo-print-element-inner.is-map {
    display: block;
}

.teo-web-template-host .teo-print-parameter {
    margin: 0;
    color: #000;
}

.teo-web-template-host .teo-print-scale-text {
    font-weight: 700;
    white-space: nowrap;
}

.teo-web-template-host .teo-print-line-scale {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 13px;
    font-weight: 600;
    color: #000;
}

.teo-web-template-host .teo-print-arrow {
    width: 100%;
    height: 100%;
    padding: 4px;
    box-sizing: border-box;
    object-fit: contain;
}

.teo-web-template-host .teo-print-legend-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
}

.teo-web-template-host .teo-print-legend-caption {
    margin: 6px 0 2px;
    font-size: 12px;
    font-weight: 700;
}

.teo-web-template-host .teo-print-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0;
    font-size: 12px;
    line-height: 1.3;
}

.teo-web-template-host .teo-print-legend-row.is-child {
    margin-left: 12px;
}

.teo-web-template-host .teo-print-legend-row img {
    flex: none;
}

.teo-web-template-host.modal-body {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.teo-web-template-host > .teo-web-template-content {
    position: relative;
    inset: auto;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    z-index: auto;
    color: var(--bs-body-color);
}

.teo-web-template-content > .teo-layer-properties-scrim {
    display: none;
}

.modal.teo-print-viewer-picking,
body:has(.teo-print-viewer-picking) > .modal-backdrop:last-of-type {
    visibility: hidden;
    pointer-events: none;
}

.teo-web-template-content [hidden] {
    display: none !important;
}

.teo-web-template-host > .teo-web-template-content > .teo-settings-dialog-window {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    transform: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.teo-web-template-content .teo-settings-dialog-close,
.teo-web-template-content.teo-print-dialog .teo-settings-dialog-header {
    display: none;
}

.teo-web-template-content .teo-template-designer-toolbar,
.teo-web-template-content .teo-template-designer-header,
.teo-web-template-content .teo-print-dialog-bar {
    height: auto;
    min-height: 38px;
    flex-wrap: wrap;
}

.teo-web-template-content .teo-template-designer-identity {
    margin: 0;
}

.teo-web-template-content .teo-template-designer-header > i,
.teo-web-template-content .teo-template-designer-header > span:not(.teo-template-designer-identity) {
    display: none;
}



.teo-web-template-host .teo-layer-properties-section:has([data-localize="teo-template-designer-shortcuts"]) {
    display: none;
}

.teo-web-template-content {
    font-family: var(--bs-body-font-family);
    font-size: 1rem;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
}

.teo-web-template-host .teo-template-designer-side,
.teo-web-template-host .teo-print-dialog-side {
    background: var(--bs-body-bg);
}

.teo-web-template-host .teo-layer-properties-section {
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .475rem;
    background: var(--bs-body-bg);
}

.teo-web-template-host .teo-layer-properties-input,
.teo-web-template-host .teo-combobox-button,
.teo-web-template-host .teo-color-swatch-button {
    min-height: 32px;
    padding: .35rem .65rem;
    color: var(--bs-body-color);
    background: var(--bs-secondary);
    border: 1px solid var(--bs-border-color);
    border-radius: .475rem;
    font-family: inherit;
    font-size: inherit;
}

.teo-web-template-host .teo-layer-properties-button,
.teo-web-template-host .teo-template-designer-tool,
.teo-web-template-host .teo-template-designer-mode,
.teo-web-template-host .teo-template-designer-palette-item,
.teo-web-template-host .teo-layer-properties-tool {
    min-height: 32px;
    color: var(--bs-body-color);
    background: var(--bs-secondary);
    border: 1px solid var(--bs-border-color);
    border-radius: .475rem;
    font-family: inherit;
}

.teo-web-template-host .teo-layer-properties-button.is-primary {
    color: var(--bs-white);
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.teo-web-template-host .teo-layer-properties-section-title,
.teo-web-template-host .teo-layer-properties-field label,
.teo-web-template-host .teo-layer-properties-fact,
.teo-web-template-host .teo-color-swatch-text {
    color: var(--bs-body-color);
}


.teo-web-template-host .teo-template-designer-identity {
    width: 100%;
    gap: .75rem;
    padding: .75rem;
}

.teo-web-template-host .teo-template-designer-identity > div {
    min-width: 0;
    flex: 1 1 0;
}

.teo-web-template-host .form-floating > .form-control,
.teo-web-template-host .form-floating > label {
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
}

.teo-web-template-host .form-floating > label {
    opacity: 1;
}

.teo-web-template-host .teo-layer-properties-hint,
.teo-web-template-host .teo-template-designer-status,
.teo-web-template-host .teo-template-designer-readout,
.teo-web-template-host .teo-layer-properties-fact,
.teo-web-template-host .teo-layer-properties-field > label,
.teo-web-template-host .teo-layer-properties-section-title,
.teo-web-template-host .teo-template-designer-panel > h3 {
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
}

.teo-web-template-host #template_legend.teo-print-element-inner {
    display: block;
    padding: 8px;
}

.teo-template-page {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.teo-template-parameter {
    color: #000 !important;
}

.teo-template-map {
    border-color: #000 !important;
    resize: both !important;
    flex: 0 0 auto !important;
    overflow: auto !important;
    width: 99%;
    height: 30%;
    margin: 0 auto;
    position: relative;
}

.teo-template-arrow {
    resize: both;
    overflow: hidden;
    border-color: #000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 150px;
}

.teo-template-legend {
    border-color: #000 !important;
    resize: both !important;
    overflow: hidden !important;
    width: 150px;
    height: 200px;
}

.teo-template-scale {
    border-color: #000 !important;
    resize: both !important;
    overflow: hidden !important;
    width: 125px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
}

.teo-template-line-scale {
    border-color: #000 !important;
    resize: both !important;
    overflow: hidden !important;
    width: 300px;
    height: 75px;
    background: rgba(0, 0, 0, 0.1);
}

.teo-template-map > .teo-template-scale {
    position: absolute !important;
    bottom: 0;
    left: 0;
    z-index: 1000;
}

.trumbowyg-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.trumbowyg-button-pane {
    flex: 0 0 auto;
}

.trumbowyg-editor {
    flex: 1 1 auto;
    overflow-y: auto;
}

.teo-template-editor-box {
    min-height: 0;
}

.teo-editor-button {
    flex: 1;
    margin: 0 6px;
}

/*endregion*/

/*region Analysis */

.teo-analysis-item {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/*endregion*/

/*region Legend */

.teo-legend-text-container {
    vertical-align: sub !important;
}

.teo-legend-painter-item-collapse {
    margin-right: 15px !important;
    margin-left: 10px !important;
}


/*endregion*/

.border-hover-primary {
    transition: border-color .2s ease;
}

/*region Toc */

.teo-toc-wms-container {
    max-width: 100% !important;
}

.teo-toc-tab-content-transition {
    transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out !important;
}

.teo-toc-tab-content-hidden {
    opacity: 0 !important;
    transform: translateY(-6px) !important;
}

.teo-toc-border-transition {
    border-left: 0 solid transparent !important;
    transition: border-left 0.2s ease-in-out, margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, margin-bottom 0.2s ease-in-out !important;
}

.teo-toc-group-border-transition {
    border-left: 0 solid transparent !important;
    transition: border-left 0.2s ease-in-out !important;
}

.teo-toc-border {
    border-left: 3px solid var(--bs-primary) !important;
    margin-left: 0.3rem !important;
    margin-right: 0.3rem !important;
    margin-bottom: 0.3rem !important;
}

.teo-toc-group-border {
    border-left: 3px solid var(--bs-primary) !important;
}

.teo-toc-parent-expanded {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.teo-toc-child-list-view,
.teo-toc-child-parent-list-view {
    transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, border-color 0.2s ease-in-out !important;
}

.teo-toc-child-list-view.teo-toc-parent-expanded,
.teo-toc-child-parent-list-view.teo-toc-parent-expanded {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    border-color: transparent !important;
}

[id$="_detail_container"] > * {
    animation: teo-detail-container-in .25s ease;
}

@keyframes teo-detail-container-in {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    [id$="_detail_container"] > * {
        animation: none;
    }
}

[id$="_teo_toc_items"] > div {
    opacity: 0;
    animation: teo-toc-item-in .3s ease forwards;
}

[id$="_teo_toc_items"] > div:nth-child(1) { animation-delay: .02s; }
[id$="_teo_toc_items"] > div:nth-child(2) { animation-delay: .05s; }
[id$="_teo_toc_items"] > div:nth-child(3) { animation-delay: .08s; }
[id$="_teo_toc_items"] > div:nth-child(4) { animation-delay: .11s; }
[id$="_teo_toc_items"] > div:nth-child(5) { animation-delay: .14s; }
[id$="_teo_toc_items"] > div:nth-child(6) { animation-delay: .17s; }
[id$="_teo_toc_items"] > div:nth-child(7) { animation-delay: .20s; }
[id$="_teo_toc_items"] > div:nth-child(n+8) { animation-delay: .23s; }

@keyframes teo-toc-item-in {
    from {
        opacity: 0;
        margin-top: -8px;
    }
    to {
        opacity: 1;
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    [id$="_teo_toc_items"] > div {
        opacity: 1;
        animation: none;
    }
}

/*endregion*/

/*region Drawing */

.teo-drawing-settings-view-container {
    min-height: 0 !important;
}

/*endregion*/

/*region Badge */

.teo-badge-muted {
    background-color: #9696ad !important;
    color: white !important;
}

/*endregion*/

/*region Symbol Canvas */

.teo-symbol-canvas-muted {
    background-color: #9696ad !important;
}

/*endregion*/

/*region Feature Grid */

@media (max-width: 550px) {

    .teo-feature-grid .fixed-table-toolbar {
        white-space: unset !important;
    }

    .teo-feature-grid .fixed-table-pagination {
        margin-top: 0.5rem !important;
    }

    .teo-feature-grid .fixed-table-toolbar .columns,
    .teo-feature-grid .fixed-table-toolbar .search {
        display: inline-block;
        vertical-align: middle !important;
        float: right !important;
    }
}

#teo_feature_grid_container_tab_content_container .bootstrap-table .fixed-table-toolbar .columns,
#teo_feature_grid_container_tab_content_container .bootstrap-table .fixed-table-toolbar .search {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
}

#teo_feature_grid_container_tab_content_container .bootstrap-table .filter-control {
    margin: 0.25rem !important;
}

#teo_feature_grid_container_tab_content_container .bootstrap-table .dropdown-menu .menu-item .menu-link {
    padding-top: 0.4rem !important;
    padding-bottom: 0.25rem !important;
}

#teo_feature_grid_container_tab_content_container .bootstrap-table .dropdown-menu {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

#teo_feature_grid_container_tab_content_container .bootstrap-table .filter-control select {
    min-width: 150px;
    padding-right: 3em !important;
}

#teo_feature_grid_container_tab_content_container .bootstrap-table .filter-control input {
    min-width: 150px;
}

.teo-feature-grid .bootstrap-table .teo-feature-grid-filter-select-control {
    position: relative;
    display: block;
}

.teo-feature-grid .bootstrap-table .teo-feature-grid-filter-select-control select {
    padding-right: 4.5em !important;
}

.teo-feature-grid .bootstrap-table .teo-feature-grid-filter-select-clear {
    position: absolute;
    top: 50%;
    right: 2.2em;
    width: 20px;
    height: 20px;
    padding: 0;
    transform: translateY(-50%);
    z-index: 2;
}

.teo-feature-grid .bootstrap-table .teo-feature-grid-filter-select-clear .svg-icon {
    color: var(--bs-danger);
}

.teo-feature-grid .bootstrap-table .teo-feature-grid-filter-select-clear .svg-icon:hover {
    color: var(--bs-danger-text-emphasis);
}

.teo-feature-grid .bootstrap-table .fixed-table-container .table thead th .sortable {
    padding-right: 20px !important;
}

.teo-feature-grid-small-column-size {
    min-width: 75px !important;
}

.teo-feature-grid-medium-column-size {
    min-width: 150px !important;
}

.teo-feature-grid-large-column-size {
    min-width: 300px !important;
}

.teo-column-settings-form .teo-column-settings-item-text {
    display: flex;
    justify-content: center;
}

.separator-drawer.separator-drawer-featuregrid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*endregion*/

/*region Admin Dropdown */

.teo-language-dropdown-position {
    top: auto !important;
    bottom: 100% !important;
    right: 0;
}

/*endregion*/

/*region Taskbar */

.teo-taskbar-dropdown-left.dropdown-menu-end {
    right: 50px !important;
}

.teo-taskbar-dropdown-menu {
    z-index: 1100 !important;
    box-sizing: border-box;
    width: 40px !important;
    min-width: 40px !important;
    margin-top: 10px !important;
    padding: 4px !important;
    gap: 8px !important;
    background: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-gray-300) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 30px rgba(4, 9, 18, 0.22) !important;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.teo-taskbar-dropdown-menu .teo-taskbar-dropdown-item {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*endregion*/

/*region Version */

.teo-version-detail-container {
    min-height: 0 !important;
}

/*endregion*/

/*region Bottom Panel */


.teo-bottom-panel-size {
    position: absolute;
    right: 67px;
    top: 7px;
    padding: 7px;
    width: auto;
    z-index: 15;
}

.teo-bottom-resizer {
    height: 1px;
    cursor: row-resize;
    position: absolute;
    top: -7px;
    z-index: 106;
    width: 100%;
}

.teo-resizing * {
    pointer-events: none !important;
}

.teo-resizing {
    pointer-events: auto !important;
}

/*endregion*/

/*region IO */

.teo-io-upload-excel-log textarea {
    height: 650px !important;
}

/*endregion*/

/*region Notification */

.teo-notification-progress-bar {
    height: 2px;
    width: 100%;
}

.teo-notification-progress-bar-running {
    animation-name: teo-notification-shrink;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes teo-notification-shrink {
    from {
        width: 100%;
    }
    to {
        width: 0;
    }
}

.teo-notification-progress-bar-error {
    background-color: #f64e60;
}

.teo-notification-progress-bar-info {
    background-color: #3699ff;
}

.teo-notification-progress-bar-success {
    background-color: #58AC65;
}

.teo-notification-progress-bar-warning {
    background-color: #ffc700;
}

/*endregion*/

/*region Status Text */

.teo-status-text {
    border-radius: 3rem;
    padding: 0.25rem 0.8rem;
}

.teo-status-active {
    background: #E0FFE9;
    color: #097227;
}

.teo-status-passive {
    background: #FFE0E0;
    color: #760606;
}

.teo-status-template {
    background: #FFF4E0;
    color: #8A6224;
}

.teo-status-pending {
    background: #E0EEFF;
    color: #042B75;
}

.teo-status-deleted {
    background: #FFE0E0;
    color: #760606;
}

.teo-status-active-background {
    background: #4ADE80;
    color: #fff;
}

.teo-status-passive-background {
    background: #F87171;
    color: #fff;
}

.teo-status-template-background {
    background: #F8EF71;
    color: #fff;
}

.teo-status-pending-background {
    background: #3699ff;
    color: #fff;
}

.teo-status-deleted-background {
    background: #4c3b07;
    color: #fff;
}

/*endregion*/

/*region Notification Colors */

.teo-notification-border-danger.teo-notification-border-danger {
    border-color: #76060640 !important;
}

.teo-notification-text-danger {
    color: #760606 !important;
}

.teo-notification-border-info.teo-notification-border-info {
    border-color: #042B7540 !important;
}

.teo-notification-text-info {
    color: #042B75 !important;
}

.teo-notification-border-success.teo-notification-border-success {
    border-color: #09722740 !important;
}

.teo-notification-text-success {
    color: #097227 !important;
}

.teo-notification-border-warning.teo-notification-border-warning {
    border-color: #C8791A40 !important;
}

.teo-notification-text-warning {
    color: #8A6224 !important;
}

.teo-notification-icon-bg-danger {
    background-color: #FF7F7F2E !important;
}

.teo-notification-icon-bg-info {
    background-color: #5C94FF2E !important;
}

.teo-notification-icon-bg-success {
    background-color: #34D3612E !important;
}

.teo-notification-icon-bg-warning {
    background-color: #C8791A2E !important;
}

.svg-icon.teo-notification-svg-icon-danger {
    color: #760606 !important;
}

.svg-icon.teo-notification-svg-icon-info {
    color: #042B75 !important;
}

.svg-icon.teo-notification-svg-icon-success {
    color: #097227 !important;
}

.svg-icon.teo-notification-svg-icon-warning {
    color: #C8791A !important;
}

.teo-notification-bg-danger {
    background-color: #FFE0E0 !important;
}

.teo-notification-bg-info {
    background-color: #E0EEFF !important;
}

.teo-notification-bg-success {
    background-color: #E0FFE9 !important;
}

.teo-notification-bg-warning {
    background-color: #FFF4E0 !important;
}

/*endregion*/

/*region Colored Buttons */

.teo-danger-button {
    background: #7606061A !important;
    color: #760606 !important;
    border: 1px solid #76060633 !important;
}

.teo-danger-button.teo-danger-button .svg-icon {
    fill: #760606 !important;
    color: #760606 !important;
}

.teo-danger-color {
    color: #760606 !important;
}

.teo-danger-color.teo-danger-color .svg-icon {
    fill: #760606 !important;
    color: #760606 !important;
}

.teo-success-button {
    background: #0972271A !important;
    color: #097227 !important;
    border: 1px solid #09722733 !important;
}

.teo-success-button.teo-success-button .svg-icon {
    fill: #097227 !important;
    color: #097227 !important;
}

.teo-success-color {
    color: #097227 !important;
}

.teo-success-color.teo-success-color .svg-icon {
    fill: #097227 !important;
    color: #097227 !important;
}

.teo-template-button {
    background: #8A62241A !important;
    color: #8A6224 !important;
    border: 1px solid #8A622433 !important;
}

.teo-template-button.teo-template-button .svg-icon {
    fill: #8A6224 !important;
    color: #8A6224 !important;
}

.teo-template-color {
    color: #8A6224 !important;
}

.teo-template-color.teo-template-color .svg-icon {
    fill: #8A6224 !important;
    color: #8A6224 !important;
}

/*endregion*/

/*region Download Status */

.teo-download-status-panel {
    background: rgba(var(--bs-body-bg-rgb), 0.85) !important;
    box-shadow: 0 16px 30px rgba(4, 9, 18, 0.22) !important;
    backdrop-filter: blur(5px) saturate(135%);
    -webkit-backdrop-filter: blur(5px) saturate(135%);
}

.teo-download-status-count {
    background: rgba(var(--bs-primary-rgb), 0.85) !important;
}

.teo-download-status-item-background {
    border-radius: 1.4rem !important;
}

.teo-notification-item {
    transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-color 0.2s ease;
    max-height: 200px;
    overflow: hidden;
}

.teo-notification-item-removing {
    opacity: 0;
    transform: translateX(16px);
    max-height: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.teo-download-status-icon-stack {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.teo-download-status-icon-bell,
.teo-download-status-icon-download {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease;
}

.teo-download-status-icon-download {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.teo-download-status-icon-stack.teo-download-status-icon .teo-download-status-icon-bell {
    opacity: 0;
}

.teo-download-status-icon-stack.teo-download-status-icon .teo-download-status-icon-download {
    opacity: 1;
}

.teo-download-status-spin {
    animation: teo-download-status-spin 1s linear infinite;
}

@keyframes teo-download-status-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.teo-progress-indeterminate {
    position: relative;
    overflow: hidden;
    height: 6px;
    border-radius: 3px;
    background-color: rgba(var(--bs-primary-rgb), .15);
}

.teo-progress-indeterminate::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    height: 100%;
    width: 40%;
    border-radius: 3px;
    background-color: var(--bs-primary);
    animation: teo-progress-indeterminate-slide 1.4s ease-in-out infinite;
}

@keyframes teo-progress-indeterminate-slide {
    0% {
        left: -40%;
    }
    100% {
        left: 100%;
    }
}

.teo-progress-indeterminate.teo-progress-color-active {
    background-color: #E0FFE9;
}

.teo-progress-indeterminate.teo-progress-color-active::after {
    background-color: #097227;
}

.teo-progress-indeterminate.teo-progress-color-passive {
    background-color: #FFE0E0;
}

.teo-progress-indeterminate.teo-progress-color-passive::after {
    background-color: #760606;
}

.teo-progress-indeterminate.teo-progress-color-template {
    background-color: #FFF4E0;
}

.teo-progress-indeterminate.teo-progress-color-template::after {
    background-color: #8A6224;
}

.teo-progress-indeterminate.teo-progress-color-pending {
    background-color: #E0EEFF;
}

.teo-progress-indeterminate.teo-progress-color-pending::after {
    background-color: #042B75;
}

.teo-download-status-icon-bg-active {
    background-color: #E0FFE9 !important;
}

.teo-download-status-icon-bg-passive {
    background-color: #FFE0E0 !important;
}

.teo-download-status-icon-bg-template {
    background-color: #FFF4E0 !important;
}

.teo-download-status-icon-bg-pending {
    background-color: #E0EEFF !important;
}

.svg-icon.teo-download-status-icon-active {
    color: #097227 !important;
}

.svg-icon.teo-download-status-icon-passive {
    color: #760606 !important;
}

.svg-icon.teo-download-status-icon-template {
    color: #8A6224 !important;
}

.svg-icon.teo-download-status-icon-pending {
    color: #042B75 !important;
}

/*endregion*/

/*region Buttons */

.btn-check:active + .btn.btn-active-primary.dropdown-toggle::after,
.btn-check:checked + .btn.btn-active-primary.dropdown-toggle::after,
.btn.btn-active-primary.active.dropdown-toggle::after,
.btn.btn-active-primary.show.dropdown-toggle::after,
.btn.btn-active-primary:active:not(.btn-active).dropdown-toggle::after,
.btn.btn-active-primary:focus:not(.btn-active).dropdown-toggle::after,
.btn.btn-active-primary:hover:not(.btn-active).dropdown-toggle::after,
.show > .btn.btn-active-primary.dropdown-toggle::after {
    color: var(--bs-primary) !important;
}

/*endregion*/

/*region Editor */

.teo-edit-validation-error-item.line-through {
    text-decoration: line-through !important;
}

.teo-validation-error-icon.line-through svg path {
    fill: #323148 !important;
}

.teo-edit-detail-create-group-border-transition {
    transition: border-left 0.10s ease, margin-left 0.10s ease !important;
}

.teo-edit-detail-create-list-item-border-transition {
    transition: border-left 0.10s ease, margin-left 0.10s ease !important;
}

.teo-edit-detail-create-list-item-border {
    border-left: 3px solid var(--bs-primary) !important;
    margin-left: 0.3rem !important;
    margin-right: 0.3rem !important;
    margin-bottom: 0.3rem !important;
}

/*endregion*/

/*region Mdb */

.teo-mdb-upload-template {
    justify-items: center !important;
}

/*endregion*/

/*region North Arrow */

.teo-north-arrow-card {
    height: 200px;
    display: flex;
    flex-direction: column;
}

.teo-north-arrow-card img {
    height: 120px;
    width: 100%;
    object-fit: contain;
    display: block;
}

/*endregion*/

/*region Slider */

.noUi-target {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 6px !important;
}

.noUi-base {
    height: 6px !important;
    border-radius: 3px !important;
}

.noUi-connect {
    height: 6px !important;
    border-radius: 3px !important;
}

.noUi-horizontal .noUi-handle {
    width: 15px !important;
    height: 15px !important;
    right: -5px !important;
    top: 35% !important;
    transform: translateY(-35%) !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.noUi-handle::before,
.noUi-handle::after {
    display: none !important;
}

.noUi-tooltip {
    font-size: 13px !important;
}

.teo-noui-slider-tooltip-hidden .noUi-tooltip {
    opacity: 0;
    pointer-events: none;
}

/*endregion*/

/*region Field Calculator */

.teo-field-calculator-arithmetic-button {
    width: 32px !important;
    height: 32px !important;
}

/*endregion*/

/*region Bottom Toolbar */

.teo-bottom-toolbar {
    bottom: 0 !important;
    z-index: 110 !important;
    height: 32px !important;
    display: table-cell;
    position: fixed;
    padding: 0;
    width: 100%;
    right: auto;
    border-right: 1px solid rgba(0, 0, 0, .05);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-box-shadow: -5px 0 20px 0 rgba(0, 0, 0, 0.7);
    box-shadow: -5px 0 20px 0 rgba(0, 0, 0, 0.7);
    transition: left .3s ease, width .3s ease;
    will-change: left, width;
}

.teo-bottom-toolbar-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    color: white;
}

.teo-bottom-toolbar-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.teo-bottom-toolbar-right {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 4px;
}

.teo-bottom-toolbar-middle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

@media (max-width: 1000px) {
    .teo-bottom-toolbar-middle {
        position: static;
        left: auto;
        transform: none;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
    }
}

.teo-bottom-toolbar-zoom-button {
    height: 14px !important;
    line-height: 14px;
    width: 34px !important;
}

.teo-bottom-toolbar-shortcut-group {
    display: flex;
    align-items: center;
    gap: 3px;
}

.teo-bottom-toolbar-search:focus,
.teo-bottom-toolbar-search:focus-visible,
.form-check-input:focus,
.input-group:focus-within {
    outline: none !important;
    box-shadow: none !important;
}

/*endregion*/

/*region Tooltip*/

.tooltip-footer-button {
    font-size: 11px !important;
}

/*endregion*/

/*region Transfer List*/

.teo-transfer-list-component {
    --teo-transfer-control: rgba(var(--bs-body-color-rgb), .04);
    --teo-transfer-control-focus: rgba(var(--bs-body-color-rgb), .06);
    --teo-transfer-border: rgba(var(--bs-body-color-rgb), .10);
    --teo-transfer-muted: rgba(var(--bs-body-color-rgb), .45);
    --teo-transfer-hover: rgba(var(--bs-body-color-rgb), .08);
}

.teo-transfer-pane {
    background: transparent;
    border: 1px solid var(--teo-transfer-border);
    border-radius: .5rem;
    padding: .5rem;
}

.teo-transfer-pane-title {
    color: var(--bs-body-color);
    font-weight: 700;
}

.teo-transfer-search.form-control {
    background-color: var(--teo-transfer-control) !important;
    border: 1px solid var(--teo-transfer-border) !important;
    border-radius: .475rem;
    color: var(--bs-body-color) !important;
    box-shadow: none !important;
}

.teo-transfer-search.form-control::placeholder {
    color: var(--teo-transfer-muted) !important;
}

.teo-transfer-search.form-control:focus,
.teo-transfer-search.form-control:focus-visible {
    background-color: var(--teo-transfer-control-focus) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .14) !important;
    outline: none !important;
}

.teo-transfer-list {
    background-color: var(--teo-transfer-control) !important;
    border: 1px solid var(--teo-transfer-border) !important;
    border-radius: .475rem;
    color: var(--bs-body-color) !important;
    box-shadow: none !important;
    outline: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-color: var(--bs-primary) transparent;
    scrollbar-width: thin;
}

.teo-transfer-list::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
}

.teo-transfer-list::-webkit-scrollbar-track {
    background: transparent;
}

.teo-transfer-list::-webkit-scrollbar-thumb {
    background-color: var(--bs-primary);
    border-radius: .5rem;
}

.teo-transfer-list:focus,
.teo-transfer-list:focus-visible {
    background-color: var(--teo-transfer-control-focus) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .14) !important;
    outline: none !important;
}

.teo-transfer-list option {
    padding: .55rem .75rem;
    border-radius: .325rem;
    color: var(--bs-body-color);
}

.teo-transfer-list option:hover {
    background: var(--teo-transfer-hover) linear-gradient(0deg, var(--teo-transfer-hover), var(--teo-transfer-hover));
    color: var(--bs-body-color);
}

.teo-transfer-list option:checked {
    background: var(--bs-primary) linear-gradient(0deg, var(--bs-primary), var(--bs-primary));
    color: var(--bs-white);
    font-weight: 600;
}

.teo-transfer-action-button.btn {
    background-color: var(--teo-transfer-control) !important;
    border: 1px solid var(--teo-transfer-border) !important;
    color: var(--bs-body-color) !important;
    min-height: 2.35rem;
}

.teo-transfer-action-button.btn i,
.teo-transfer-action-button.btn span {
    color: inherit !important;
}

.teo-transfer-action-button.btn:active,
.teo-transfer-action-button.btn:focus,
.teo-transfer-action-button.btn:hover {
    background-color: var(--teo-transfer-hover) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-body-color) !important;
    box-shadow: none !important;
}

.teo-transfer-action-button.btn:focus-visible {
    box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .16) !important;
}

/*endregion*/

/*region Excel Grid*/

.bootstrap-table .fixed-table-container .fixed-table-body .teo-excel-grid tbody tr {
    height: 8px !important;
}

.bootstrap-table .teo-excel-grid tbody td {
    padding: 2px 8px !important;
    font-size: 12px !important;
    line-height: 10px !important;
    height: 10px !important;
    white-space: nowrap;
    user-select: none;
    vertical-align: middle !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bootstrap-table .teo-excel-grid thead th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: top !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bootstrap-table .teo-excel-grid thead th[data-field="operate"],
.bootstrap-table .teo-excel-grid tbody td[data-field="operate"] {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
}

.bootstrap-table .teo-excel-grid thead th .th-inner {
    padding: 2px 8px !important;
    line-height: 22px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.bootstrap-table .teo-excel-grid thead th.teo-excel-grid-command-header {
    position: relative;
}

.bootstrap-table .th-inner .form-check {
    padding-right: 1px;
    padding-top: 2px;
}

.teo-excel-column-command-button {
    position: absolute;
    top: 4px;
    right: 22px;
    width: 18px !important;
    height: 18px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    padding: 0 !important;
    z-index: 10;
    flex: 0 0 auto;
}

.teo-excel-grid-command-menu {
    position: absolute;
    z-index: 99999;
    min-width: 220px;
}

.teo-excel-grid-selecting,
.teo-excel-grid-selecting * {
    cursor: crosshair !important;
}

.bootstrap-table .teo-excel-grid.teo-excel-grid-selecting.table-hover tbody tr:hover > * {
    background-color: transparent !important;
    --bs-table-accent-bg: transparent !important;
}

.bootstrap-table .teo-excel-grid td.teo-excel-grid-cell-selecting {
    box-shadow: inset 0 0 0 9999px rgba(80, 145, 255, 0.35), inset 0 0 0 1px #8ab4ff !important;
}

.teo-excel-grid td[data-field="operate"],
.teo-excel-grid td[data-field="operate"] * {
    pointer-events: auto !important;
}

.bootstrap-table .teo-excel-grid .filter-control {
    margin: 2px 5px 3px !important;
    padding: 0 !important;
}

.bootstrap-table .teo-excel-grid thead .no-filter-control {
    height: 0;
}

.bootstrap-table .teo-excel-grid .filter-control input,
.bootstrap-table .teo-excel-grid .filter-control select {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
    line-height: 20px !important;
}

.teo-excel-grid-lock-icon {
    float: right;
    opacity: 0.9;
    pointer-events: none;
}

.teo-excel-grid-locked-cell {
    cursor: not-allowed !important;
}

/*endregion*/

/*region List Group Item */

.teo-list-group-item-selected-title {
    color: var(--bs-primary);
}

/*endregion*/

/*region Select2 Arrow*/

.select2-container--bootstrap5 .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    right: 10px;
    width: 20px;
}

/*endregion*/

/*region Searchable Multiple Picker*/

.teo-ui-multiple-value-picker-container {
    min-width: 0;
}

.teo-ui-multiple-value-picker-add,
.teo-ui-multiple-value-picker-remove {
    width: 28px;
    height: 28px;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.12);
    border: 0;
    border-radius: 6px;
}

.teo-ui-multiple-value-picker-add:hover {
    color: #ffffff;
    background: var(--bs-primary);
}

.teo-ui-multiple-value-picker-entry .teo-ui-multiple-picker-filter {
    padding-left: 0;
}

.teo-ui-multiple-value-picker-entry {
    padding-right: 0 !important;
}

.teo-ui-multiple-value-picker .teo-ui-multiple-value-picker-toggle {
    height: calc(3.75rem + 2px);
    min-height: calc(3.75rem + 2px);
    padding: 2.15rem 1rem 0.625rem;
}

.teo-ui-multiple-value-picker-chips {
    min-height: 22px;
}

.teo-ui-multiple-value-picker .teo-ui-multiple-picker-placeholder {
    padding-left: 0;
    color: rgb(149 149 149 / 0.7);
    font-size: inherit;
    font-weight: inherit;
    font-style: italic;
    line-height: inherit;
}

.teo-ui-multiple-value-picker.form-floating > label {
    pointer-events: none;
}

.teo-ui-multiple-value-picker-list {
    grid-template-columns: minmax(0, 1fr);
    max-height: 180px;
}

.teo-ui-multiple-value-picker-item {
    height: 33px;
}

.teo-ui-multiple-value-picker-remove {
    margin-left: 8px;
    background: transparent;
    font-size: 1rem;
}

.teo-ui-multiple-value-picker-remove:hover {
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), 0.1);
}

.teo-ui-multiple-picker-toggle {
    min-height: 38px;
    padding: 4px 7px;
    border-radius: 8px;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.teo-ui-multiple-picker-has-label .teo-ui-multiple-picker-toggle {
    min-height: calc(3.5rem + 2px);
    padding: 2.15rem 1rem .625rem .7rem;
}

.teo-ui-multiple-picker-label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    padding: 1rem 1rem;
    font-size: inherit;
    transform: scale(.75) translateY(-.5rem) translateX(.15rem);
    transform-origin: 0 0;
    pointer-events: none;
}

.teo-ui-multiple-picker-chips {
    gap: 4px;
    overflow: hidden;
}

.teo-ui-multiple-picker-chip {
    flex-shrink: 0;
    min-width: 0;
    max-width: 105px;
    padding: 3px 5px 3px 7px;
    background: rgba(var(--bs-primary-rgb), 0.24);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
    border-radius: 7px;
    font-size: 0.9rem;
    line-height: 1.2;
}

.teo-ui-multiple-picker-chip-remove {
    margin-left: 5px;
    font-size: 1rem;
    line-height: 0.8;
}

.teo-ui-multiple-picker-more,
.teo-ui-multiple-picker-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 700;
}

.teo-ui-multiple-picker-more {
    margin-left: 4px;
}

.teo-ui-multiple-picker-count {
    margin-left: 5px;
    color: var(--bs-primary);
}

.teo-ui-multiple-picker-placeholder {
    padding-left: 3px;
    font-size: 0.98rem;
}

.teo-ui-multiple-picker-arrow {
    margin-left: 5px;
    transition: transform 160ms ease;
}

.teo-ui-multiple-picker-toggle[aria-expanded="true"] .teo-ui-multiple-picker-arrow {
    transform: rotate(180deg);
}

.teo-ui-multiple-picker-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    box-sizing: border-box;
    z-index: 20;
    padding: 7px;
    border-radius: 10px;
}

.teo-ui-multiple-picker-panel-up {
    top: auto;
    bottom: calc(100% + 6px);
}

.teo-ui-multiple-picker-search {
    height: 32px;
    padding: 0 7px;
    border-radius: 7px;
    margin-bottom: .25rem;
}

.teo-ui-multiple-picker-filter {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    padding: 0 6px;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-size: 0.96rem;
}

.teo-ui-multiple-picker-filter:focus,
.teo-ui-multiple-picker-filter:focus-visible,
.teo-ui-multiple-picker-filter:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.teo-ui-multiple-picker-actions {
    padding: 6px 3px 5px;
}

.teo-ui-multiple-picker-actions .btn {
    color: var(--bs-primary);
    font-size: 0.8rem;
    font-weight: 600;
}

.teo-ui-multiple-picker-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    max-height: 210px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.teo-ui-multiple-picker-item {
    min-width: 0;
    height: 31px;
    padding: 4px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 0.9rem;
}

.teo-ui-multiple-picker-empty {
    padding: 20px 8px;
    font-size: 0.76rem;
}

.teo-ui-multiple-picker-item.active {
    background: rgba(var(--bs-primary-rgb), 0.25);
    border-color: rgba(var(--bs-primary-rgb), 0.42);
}

.teo-ui-multiple-picker-check {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    color: #ffffff;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
}

.teo-ui-multiple-picker-item.active .teo-ui-multiple-picker-check {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.teo-ui-multiple-picker-item.active .teo-ui-multiple-picker-check::after {
    content: "✓";
}

/*endregion*/

/*region CheckBox*/

.bootstrap-table .card-views .card-view label input[type="checkbox"], .bs-checkbox input[type="checkbox"] {
    margin-top: .325rem;
}

.teo-edit-interaction-detail-context-menu {
    width: 180px;
}

/*endregion*/

/*region Dropzone*/

.dropzone.dz-clickable .dropzone-start,
.dropzone.dz-clickable .dropzone-cancel,
.dropzone.dz-clickable .dropzone-start *,
.dropzone.dz-clickable .dropzone-cancel * {
    cursor: pointer !important;
}

/*endregion*/

/*region Radial Menu*/

.teo-radial-menu {
    --teo-radial-size: 31rem;
    position: fixed;
    width: var(--teo-radial-size);
    height: var(--teo-radial-size);
    z-index: 95;
    transform: translate(41%, 41%) scale(.42);
    transform-origin: center;
    transition: transform .2s ease, right .3s ease, bottom .05s ease;
}

.teo-radial-menu-expanded {
    transform: translate(0, 0) scale(1);
}

.teo-radial-menu-ring,
.teo-radial-menu-segment {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.teo-radial-menu-ring {
    opacity: 0;
    transform: scale(.45);
    background: var(--teo-radial-divider-glow);
    box-shadow: 0 0 .8rem var(--teo-radial-divider-shadow), inset 0 0 .65rem var(--teo-radial-divider-shadow);
    transition: opacity .2s ease, transform .25s ease;
    pointer-events: none;
}

.teo-radial-menu-expanded .teo-radial-menu-ring {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.teo-radial-menu-segment {
    background: radial-gradient(circle at 50% 45%,
    var(--teo-radial-segment-highlight) 0%,
    var(--teo-radial-segment-background) 58%,
    var(--teo-radial-segment-shadow) 100%);
    border: 1px solid var(--teo-radial-border-color);
    box-shadow: inset 0 0 2.8rem var(--teo-radial-depth-shadow);
    cursor: pointer;
    filter: drop-shadow(0 0 .12rem var(--teo-radial-divider-shadow));
    transition: filter .18s ease, box-shadow .18s ease;
}

.teo-radial-menu-segment:hover,
.teo-radial-menu-segment-hover {
    background: radial-gradient(circle at 50% 45%,
    var(--teo-radial-segment-hover-highlight) 0%,
    var(--teo-radial-segment-hover-background) 65%,
    var(--teo-radial-segment-background) 100%);
    box-shadow: inset 0 0 3.4rem var(--teo-radial-hover-depth-shadow);
    filter: brightness(1.08) drop-shadow(0 0 .35rem var(--teo-radial-divider-glow));
}

.teo-radial-menu-center {
    position: absolute;
    inset: 31%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--teo-radial-border-color);
    border-radius: 50%;
    background: radial-gradient(circle at 45% 38%,
    var(--teo-radial-center-highlight) 0%,
    var(--teo-radial-center-background) 68%,
    var(--teo-radial-segment-shadow) 100%);
    box-shadow: 0 0 .5rem var(--teo-radial-divider-shadow), 0 0 1.2rem rgba(0, 0, 0, .3), inset 0 0 1.8rem var(--teo-radial-depth-shadow);
    cursor: pointer;
}

.teo-radial-menu-segment-content {
    position: absolute;
    z-index: 2;
    width: 9.5rem;
    height: 9.5rem;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.teo-radial-menu-item-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teo-radial-menu-item-image {
    width: auto;
    height: auto;
    max-width: 3rem;
    max-height: 3rem;
    object-fit: contain;
}

.teo-radial-menu-action-item .teo-radial-menu-item-image {
    max-width: 2rem;
    max-height: 2rem;
}

.teo-radial-menu-action-item {
    color: var(--bs-primary);
}

.teo-radial-menu-item-svg {
    width: 2rem;
    height: 2rem;
}

.teo-radial-menu-static-item .teo-radial-menu-item-image {
    max-width: 5.25rem;
    max-height: 5.25rem;
}

.teo-radial-menu-center .teo-radial-menu-static-item .teo-radial-menu-item-image {
    width: 92%;
    height: 92%;
    max-width: 92%;
    max-height: 92%;
}

.teo-radial-menu-range-item {
    position: relative;
    width: 9rem;
    height: 9rem;
    color: var(--teo-radial-foreground);
    font-size: 1rem;
}

.teo-radial-menu-range-negative,
.teo-radial-menu-range-positive,
.teo-radial-menu-range-value {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.teo-radial-menu-range-negative,
.teo-radial-menu-range-positive {
    width: 2.4rem;
    height: 1.6rem;
    filter: drop-shadow(0 0 .35rem rgba(var(--bs-primary-rgb), .35));
}

.teo-radial-menu-range-negative::before,
.teo-radial-menu-range-positive::before {
    content: '';
    width: 2.15rem;
    height: 1.35rem;
    background: var(--bs-primary);
    clip-path: polygon(0 50%, 42% 0, 42% 30%, 100% 30%, 100% 70%, 42% 70%, 42% 100%);
}

.teo-radial-menu-range-value {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: .65;
    font-size: .8rem;
}

.teo-radial-menu-zoom-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 8.5rem;
    height: 7rem;

    color: var(--bs-primary);
    font-size: 2.35rem;
    font-weight: 500;
    text-shadow: 0 0 .65rem rgba(var(--bs-primary-rgb), .35);
}

.teo-radial-menu-zoom-item::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: .2rem;
    bottom: .2rem;
    left: 50%;
    width: 1px;
    background: rgba(var(--bs-primary-rgb), .55);
    transform: translateX(-50%);
    pointer-events: none;
}

.teo-radial-menu-zoom-in,
.teo-radial-menu-zoom-out {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    pointer-events: none;
}

.teo-radial-menu-zoom-in {
    padding-left: .25rem;
}

.teo-radial-menu-zoom-out {
    padding-right: .25rem;
}

.teo-radial-menu-horizontal-range-item .teo-radial-menu-range-negative {
    left: .5rem;
    top: 32%;
    transform: translateY(-50%);
}

.teo-radial-menu-horizontal-range-item .teo-radial-menu-range-positive {
    right: .5rem;
    top: 68%;
    transform: translateY(-50%) rotate(180deg);
}

.teo-radial-menu-vertical-range-item .teo-radial-menu-range-negative {
    left: 32%;
    bottom: .35rem;
    transform: translateX(-50%) rotate(-90deg);
}

.teo-radial-menu-vertical-range-item .teo-radial-menu-range-positive {
    left: 68%;
    top: .35rem;
    transform: translateX(-50%) rotate(90deg);
}

.teo-radial-menu-vertical-range-item .teo-radial-menu-range-value {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.teo-radial-menu-range-knob {
    position: absolute;
    z-index: 4;
    width: 1.75rem;
    height: 1.75rem;
    border: .28rem solid #3b82f6;
    border-radius: 50%;
    background: #eaf3ff;
    box-shadow: 0 0 .35rem #3b82f6, 0 0 1rem rgba(59, 130, 246, .75);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}

.teo-radial-menu-range-active .teo-radial-menu-range-knob {
    opacity: 1;
}

@media (max-width: 760px) {
    .teo-radial-menu {
        display: none !important;
    }
}

@media (min-width: 761px) {
    .teo-hgm-mobile-decoration {
        display: none !important;
    }
}

.teo-radial-menu {
    --teo-radial-size: 31rem;
    position: fixed;
    width: var(--teo-radial-size);
    height: var(--teo-radial-size);
    z-index: 95;
    transform: translate(41%, 41%) scale(.42);
    transform-origin: center;
    transition: transform .2s ease, right .3s ease, bottom .05s ease;
}

.teo-radial-menu-expanded {
    transform: translate(0, 0) scale(1);
}

.teo-radial-menu-ring,
.teo-radial-menu-segment {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.teo-radial-menu-ring {
    opacity: 0;
    transform: scale(.45);
    background: var(--teo-radial-divider-glow);
    box-shadow: 0 0 .8rem var(--teo-radial-divider-shadow), inset 0 0 .65rem var(--teo-radial-divider-shadow);
    transition: opacity .2s ease, transform .25s ease;
    pointer-events: none;
}

.teo-radial-menu-expanded .teo-radial-menu-ring {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.teo-radial-menu-segment {
    background: radial-gradient(circle at 50% 45%,
    var(--teo-radial-segment-highlight) 0%,
    var(--teo-radial-segment-background) 58%,
    var(--teo-radial-segment-shadow) 100%);
    border: 1px solid var(--teo-radial-border-color);
    box-shadow: inset 0 0 2.8rem var(--teo-radial-depth-shadow);
    cursor: pointer;
    filter: drop-shadow(0 0 .12rem var(--teo-radial-divider-shadow));
    transition: filter .18s ease, box-shadow .18s ease;
}

.teo-radial-menu-segment:hover,
.teo-radial-menu-segment-hover {
    background: radial-gradient(circle at 50% 45%,
    var(--teo-radial-segment-hover-highlight) 0%,
    var(--teo-radial-segment-hover-background) 65%,
    var(--teo-radial-segment-background) 100%);
    box-shadow: inset 0 0 3.4rem var(--teo-radial-hover-depth-shadow);
    filter: brightness(1.08) drop-shadow(0 0 .35rem var(--teo-radial-divider-glow));
}

.teo-radial-menu-center {
    position: absolute;
    inset: 31%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--teo-radial-border-color);
    border-radius: 50%;
    background: radial-gradient(circle at 45% 38%,
    var(--teo-radial-center-highlight) 0%,
    var(--teo-radial-center-background) 68%,
    var(--teo-radial-segment-shadow) 100%);
    box-shadow: 0 0 .5rem var(--teo-radial-divider-shadow), 0 0 1.2rem rgba(0, 0, 0, .3), inset 0 0 1.8rem var(--teo-radial-depth-shadow);
    cursor: pointer;
}

.teo-radial-menu-segment-content {
    position: absolute;
    z-index: 2;
    width: 9.5rem;
    height: 9.5rem;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.teo-radial-menu-item-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teo-radial-menu-item-image {
    width: auto;
    height: auto;
    max-width: 3rem;
    max-height: 3rem;
    object-fit: contain;
}

.teo-radial-menu-action-item .teo-radial-menu-item-image {
    max-width: 2rem;
    max-height: 2rem;
}

.teo-radial-menu-center .teo-radial-menu-item-image {
    width: 70%;
    height: 70%;
    max-width: 70%;
    max-height: 70%;
}

.teo-radial-menu-static-item .teo-radial-menu-item-image {
    max-width: 5.25rem;
    max-height: 5.25rem;
}

.teo-radial-menu-center .teo-radial-menu-static-item .teo-radial-menu-item-image {
    width: 92%;
    height: 92%;
    max-width: 92%;
    max-height: 92%;
}

.teo-radial-menu-range-item {
    position: relative;
    width: 9rem;
    height: 9rem;
    color: var(--teo-radial-foreground);
    font-size: 1rem;
}

.teo-radial-menu-range-negative,
.teo-radial-menu-range-positive,
.teo-radial-menu-range-value {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.teo-radial-menu-range-negative,
.teo-radial-menu-range-positive {
    color: var(--bs-primary);
    font-size: 1.65rem;
    line-height: 1;
    text-shadow: 0 0 .65rem rgba(82, 151, 255, .55);
}

.teo-radial-menu-range-value {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: .65;
    font-size: .8rem;
}

.teo-radial-menu-zoom-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 8.5rem;
    height: 7rem;

    color: var(--bs-primary);
    font-size: 2.35rem;
    font-weight: 500;
    text-shadow: 0 0 .65rem rgba(var(--bs-primary-rgb), .35);
}

.teo-radial-menu-zoom-item::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: .2rem;
    bottom: .2rem;
    left: 50%;
    width: 1px;
    background: rgba(var(--bs-primary-rgb), .55);
    transform: translateX(-50%);
    pointer-events: none;
}

.teo-radial-menu-zoom-in,
.teo-radial-menu-zoom-out {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    pointer-events: none;
}

.teo-radial-menu-zoom-in {
    padding-left: .25rem;
}

.teo-radial-menu-zoom-out {
    padding-right: .25rem;
}

.teo-radial-menu-horizontal-range-item .teo-radial-menu-range-negative {
    left: .5rem;
    top: 32%;
    transform: translateY(-50%);
}

.teo-radial-menu-horizontal-range-item .teo-radial-menu-range-positive {
    right: .5rem;
    top: 68%;
    transform: translateY(-50%) rotate(180deg);
}

.teo-radial-menu-vertical-range-item .teo-radial-menu-range-negative {
    left: 32%;
    bottom: .35rem;
    transform: translateX(-50%) rotate(-90deg);
}

.teo-radial-menu-vertical-range-item .teo-radial-menu-range-positive {
    left: 68%;
    top: .35rem;
    transform: translateX(-50%) rotate(90deg);
}

.teo-radial-menu-vertical-range-item .teo-radial-menu-range-value {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.teo-radial-menu-range-knob {
    position: absolute;
    z-index: 4;
    width: 1.75rem;
    height: 1.75rem;
    border: .28rem solid #3b82f6;
    border-radius: 50%;
    background: #eaf3ff;
    box-shadow: 0 0 .35rem #3b82f6, 0 0 1rem rgba(59, 130, 246, .75);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}

.teo-radial-menu-range-active .teo-radial-menu-range-knob {
    opacity: 1;
}

@media (max-width: 760px) {
    .teo-radial-menu {
        display: none !important;
    }
}

@media (min-width: 761px) {
    .teo-hgm-mobile-decoration {
        display: none !important;
    }
}

.bg-primary-only {
    background-color: var(--bs-primary);
}

/*region Ribbon*/

.teo-ribbon {
    --teo-ribbon-accent: var(--bs-primary, #2563eb);
    --teo-ribbon-border: var(--bs-border-color, #d5dbe5);
    --teo-ribbon-background: var(--bs-body-bg, #fff);
    --teo-ribbon-muted: var(--bs-secondary-color, #64748b);
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-bottom: 1px solid var(--teo-ribbon-border);
    background: var(--teo-ribbon-background);
    box-shadow: 0 .18rem .75rem rgba(15, 23, 42, .06);
}

.teo-ribbon-header {
    display: flex;
    min-height: 2.15rem;
    align-items: stretch;
    border-bottom: 1px solid var(--teo-ribbon-border);
}

.teo-ribbon-header-content {
    display: flex;
    min-width: 0;
    align-items: center;
}

.teo-ribbon-tabs {
    display: flex;
    min-width: 0;
    min-height: 2.15rem;
    flex: 1;
    align-items: stretch;
    gap: .1rem;
    padding: 0 .55rem;
}

.teo-ribbon-collapse-button {
    display: inline-flex;
    width: 2.15rem;
    min-width: 2.15rem;
    align-items: center;
    justify-content: center;
    margin: .25rem .45rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .3rem;
    color: var(--teo-ribbon-muted);
    background: transparent;
    font-size: .75rem;
}

.teo-ribbon-collapse-button:hover {
    border-color: var(--teo-ribbon-border);
    color: var(--teo-ribbon-accent);
    background: color-mix(in srgb, var(--teo-ribbon-accent) 7%, transparent);
}

.teo-ribbon.is-collapsed .teo-ribbon-pages {
    display: none;
}

.teo-ribbon-tab-button {
    position: relative;
    padding: 0 .85rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: .78rem;
    font-weight: 550;
    transition: color 150ms ease, background-color 150ms ease;
}

.teo-ribbon-tab-button::after {
    position: absolute;
    right: .45rem;
    bottom: -1px;
    left: .45rem;
    height: 2px;
    background: transparent;
    content: '';
}

.teo-ribbon-tab-button:hover,
.teo-ribbon-tab-button.is-active {
    color: var(--teo-ribbon-accent);
    background: color-mix(in srgb, var(--teo-ribbon-accent) 7%, transparent);
}

.teo-ribbon-tab-button.is-active::after {
    background: var(--teo-ribbon-accent);
}

.teo-ribbon-pages {
    height: 5.35rem;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.teo-ribbon-tab {
    display: none;
    height: 100%;
    align-items: stretch;
    padding: .25rem .4rem;
}

.teo-ribbon-tab.is-active {
    display: flex;
}

.teo-ribbon-group {
    display: flex;
    min-width: max-content;
    flex-direction: column;
    padding: 0 .5rem;
    border-right: 1px solid var(--teo-ribbon-border);
}

.teo-ribbon-group-items {
    display: flex;
    min-height: 0;
    flex: 1;
    align-items: stretch;
    gap: .15rem;
}

.teo-ribbon-group-title {
    overflow: hidden;
    height: .95rem;
    color: var(--teo-ribbon-muted);
    font-size: .61rem;
    line-height: .95rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-ribbon-item {
    position: relative;
    min-width: 3.7rem;
}

button.teo-ribbon-item {
    display: flex;
    min-height: 3.7rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .18rem;
    padding: .25rem .45rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background: transparent;
    color: inherit;
    font-size: .68rem;
    line-height: .8rem;
    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

button.teo-ribbon-item > i {
    color: var(--teo-ribbon-accent);
    font-size: 1.18rem;
}

button.teo-ribbon-item:hover,
button.teo-ribbon-item.is-active {
    border-color: color-mix(in srgb, var(--teo-ribbon-accent) 28%, transparent);
    background: color-mix(in srgb, var(--teo-ribbon-accent) 10%, transparent);
}

button.teo-ribbon-item:hover {
    transform: translateY(-1px);
}

button.teo-ribbon-item.is-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teo-ribbon-accent) 18%, transparent);
}

.teo-ribbon-item.teo-disable {
    opacity: .43;
    pointer-events: none;
}

.teo-ribbon-item-badge {
    position: absolute;
    top: .1rem;
    right: .1rem;
    padding: .05rem .22rem;
    border-radius: .5rem;
    background: var(--teo-ribbon-accent);
    color: #fff;
    font-size: .48rem;
}

.teo-ribbon-combobox {
    display: flex;
    min-width: 7.5rem;
    justify-content: center;
    flex-direction: column;
    gap: .2rem;
    padding: .25rem;
    font-size: .67rem;
}

.teo-ribbon-combobox select {
    min-height: 1.75rem;
    border: 1px solid var(--teo-ribbon-border);
    border-radius: .25rem;
    background: var(--teo-ribbon-background);
    color: inherit;
    font-size: .7rem;
}

/*endregion*/

/*region Dock*/

.teo-dock-manager {
    --teo-dock-border: var(--bs-border-color, #d5dbe5);
    --teo-dock-panel-background: var(--bs-body-bg, #fff);
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

.teo-dock-main {
    display: grid;
    min-width: 0;
    min-height: 0;
    flex: 1;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
}

.teo-dock-center {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.teo-dock-zone {
    display: flex;
    min-width: 0;
    min-height: 0;
}

.teo-dock-main > .teo-dock-rail-left {
    grid-column: 1;
}

.teo-dock-main > .teo-dock-zone-left {
    grid-column: 2;
}

.teo-dock-main > .teo-dock-column {
    grid-column: 3;
}

.teo-dock-main > .teo-dock-zone-right {
    grid-column: 4;
}

.teo-dock-main > .teo-dock-rail-right {
    grid-column: 5;
}

.teo-dock-column {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.teo-dock-column > .teo-dock-center {
    flex: 1 1 auto;
}

.teo-dock-zone-left,
.teo-dock-zone-right {
    width: var(--teo-dock-zone-size, 16rem);
    flex-direction: column;
}

.teo-dock-zone-bottom {
    height: var(--teo-dock-zone-size, 13rem);
    flex: 0 0 auto;
    flex-direction: row;
}

.teo-dock-zone.is-empty {
    display: none;
}

.teo-dock-slot {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
}

.teo-dock-slot.is-empty {
    display: none;
}

.teo-dock-zone.is-split > .teo-dock-slot[data-teo-dock-slot="primary"] {
    flex: 0 0 calc(var(--teo-dock-split, 50%) - 3px);
}

.teo-dock-splitter {
    display: none;
    flex: 0 0 auto;
    background: var(--teo-dock-border);
    touch-action: none;
}

.teo-dock-zone.is-split > .teo-dock-splitter {
    display: block;
}

.teo-dock-zone-left > .teo-dock-splitter,
.teo-dock-zone-right > .teo-dock-splitter {
    height: 6px;
    cursor: ns-resize;
}

.teo-dock-zone-bottom > .teo-dock-splitter {
    width: 6px;
    cursor: ew-resize;
}

.teo-dock-zone-floating {
    position: absolute;
    z-index: 40;
    inset: 0;
    pointer-events: none;
}

.teo-dock-panel {
    --teo-dock-panel-width: 16rem;
    --teo-dock-panel-height: 13rem;
    position: relative;
    display: flex;
    width: var(--teo-dock-panel-width);
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    border-color: var(--teo-dock-border);
    background: var(--teo-dock-panel-background);
    color: inherit;
    transition: box-shadow 150ms ease;
}

.teo-dock-zone-left .teo-dock-panel {
    border-right: 1px solid var(--teo-dock-border);
}

.teo-dock-zone-right .teo-dock-panel {
    border-left: 1px solid var(--teo-dock-border);
}

.teo-dock-zone-bottom .teo-dock-panel {
    width: 100%;
    height: 100%;
    border-top: 1px solid var(--teo-dock-border);
}

.teo-dock-slot > .teo-dock-panel {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
}

.teo-dock-zone-floating .teo-dock-panel {
    position: absolute;
    width: var(--teo-dock-panel-width);
    height: var(--teo-dock-panel-height);
    min-width: 13rem;
    min-height: 7rem;
    overflow: hidden;
    resize: none;
    border: 1px solid var(--teo-dock-border);
    border-radius: .35rem;
    box-shadow: 0 .8rem 2.4rem rgba(15, 23, 42, .24);
    pointer-events: auto;
}

.teo-dock-panel.is-maximized {
    position: absolute;
    z-index: 45;
    top: 0;
    right: var(--teo-dock-rail-right, 0);
    bottom: 0;
    left: var(--teo-dock-rail-left, 0);
    width: auto;
    height: auto;
    border: 0;
}

.teo-dock-panel.is-maximized > .teo-dock-panel-resizer {
    display: none;
}

.teo-dock-drop-layer {
    position: absolute;
    z-index: 60;
    display: none;
    inset: 0;
    pointer-events: none;
}

.teo-dock-drop-layer.is-open {
    display: block;
}

.teo-dock-drop-target {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    border: 2px dashed color-mix(in srgb, var(--bs-primary, #2563eb) 55%, transparent);
    border-radius: .5rem;
    color: var(--bs-primary, #2563eb);
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 10%, transparent);
    font-size: .72rem;
    font-weight: 600;
    transition: background-color 120ms ease, transform 120ms ease;
}

.teo-dock-drop-target > i {
    font-size: 1.1rem;
}

.teo-dock-drop-target > small {
    font-size: .6rem;
    opacity: .75;
}

.teo-dock-drop-target.is-hot {
    border-style: solid;
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 28%, transparent);
    transform: scale(1.03);
}

.teo-dock-drop-target.is-current {
    opacity: .45;
}

.teo-dock-drop-left-primary,
.teo-dock-drop-left-secondary {
    left: calc(var(--teo-dock-rail-left, 0px) + 10px);
    width: 120px;
    height: calc(50% - 16px);
}

.teo-dock-drop-right-primary,
.teo-dock-drop-right-secondary {
    right: calc(var(--teo-dock-rail-right, 0px) + 10px);
    width: 120px;
    height: calc(50% - 16px);
}

.teo-dock-drop-left-primary,
.teo-dock-drop-right-primary {
    top: 10px;
}

.teo-dock-drop-left-secondary,
.teo-dock-drop-right-secondary {
    bottom: 10px;
}

.teo-dock-drop-bottom-primary {
    bottom: 10px;
    left: calc(var(--teo-dock-rail-left, 0px) + 140px);
    width: calc(50% - var(--teo-dock-rail-left, 0px) - 145px);
    height: 110px;
}

.teo-dock-drop-bottom-secondary {
    right: calc(var(--teo-dock-rail-right, 0px) + 140px);
    bottom: 10px;
    width: calc(50% - var(--teo-dock-rail-right, 0px) - 145px);
    height: 110px;
}

.teo-dock-drop-floating-primary {
    top: 50%;
    left: 50%;
    width: 170px;
    height: 90px;
    transform: translate(-50%, -50%);
}

.teo-dock-drop-floating-primary.is-hot {
    transform: translate(-50%, -50%) scale(1.03);
}

.teo-dock-drag-ghost {
    position: fixed;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    border: 1px solid var(--bs-border-color, #d5dbe5);
    border-radius: .4rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 .5rem 1.4rem rgba(15, 23, 42, .24);
    font-size: .75rem;
    font-weight: 600;
    pointer-events: none;
}

body.teo-dock-dragging {
    cursor: grabbing;
    user-select: none;
}

body.teo-dock-dragging iframe,
body.teo-dock-dragging canvas {
    pointer-events: none;
}

body.teo-dock-resizing[data-teo-dock-resize="split-vertical"] {
    cursor: ns-resize;
}

body.teo-dock-resizing[data-teo-dock-resize="split-horizontal"] {
    cursor: ew-resize;
}

.teo-dock-panel-header {
    display: flex;
    min-height: 2rem;
    align-items: center;
    gap: .4rem;
    padding: .25rem .35rem .25rem .55rem;
    border-bottom: 1px solid var(--teo-dock-border);
    background: color-mix(in srgb, currentColor 4%, transparent);
    user-select: none;
}

[data-teo-dock-position="floating"] .teo-dock-panel-header {
    cursor: move;
}

.teo-dock-panel-title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    font-size: .75rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-dock-panel-actions {
    position: relative;
    display: flex;
    gap: .05rem;
}

.teo-dock-panel-actions button {
    display: inline-flex;
    width: 1.45rem;
    height: 1.45rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: .2rem;
    background: transparent;
    color: inherit;
    font-size: .68rem;
}

.teo-dock-panel-actions button:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.teo-dock-panel-menu {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 30;
    display: none;
    width: 12.5rem;
    padding: .3rem;
    border: 1px solid var(--teo-dock-border);
    border-radius: .45rem;
    background: var(--teo-dock-panel-background);
    box-shadow: 0 .8rem 2rem rgba(15, 23, 42, .18);
}

.teo-dock-panel-menu.is-open {
    display: grid;
}

.teo-dock-panel-actions .teo-dock-panel-menu button {
    width: 100%;
    height: 2rem;
    justify-content: flex-start;
    gap: .6rem;
    padding: 0 .6rem;
    font-size: .72rem;
    text-align: left;
}

.teo-dock-panel-actions .teo-dock-panel-menu button i {
    width: 1rem;
    text-align: center;
}

.teo-dock-rotate {
    transform: rotate(90deg);
}

.teo-dock-panel-content {
    min-width: 0;
    min-height: 0;
    flex: 1;
    overflow: auto;
}

.teo-dock-panel-resizer {
    position: absolute;
    z-index: 8;
    display: block;
    background: transparent;
    touch-action: none;
    outline: none;
}

.teo-dock-panel-resizer:focus-visible {
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 32%, transparent);
}

[data-teo-dock-position="left"] > .teo-dock-panel-resizer {
    top: 0;
    right: -.25rem;
    bottom: 0;
    width: .5rem;
    cursor: ew-resize;
}

[data-teo-dock-position="right"] > .teo-dock-panel-resizer {
    top: 0;
    bottom: 0;
    left: -.25rem;
    width: .5rem;
    cursor: ew-resize;
}

[data-teo-dock-position="bottom"] > .teo-dock-panel-resizer {
    top: -.25rem;
    right: 0;
    left: 0;
    height: .5rem;
    cursor: ns-resize;
}

[data-teo-dock-position="floating"] > .teo-dock-panel-resizer {
    right: 0;
    bottom: 0;
    width: 1rem;
    height: 1rem;
    cursor: nwse-resize;
}

[data-teo-dock-position="floating"] > .teo-dock-panel-resizer::after {
    position: absolute;
    right: .2rem;
    bottom: .2rem;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid color-mix(in srgb, currentColor 38%, transparent);
    border-bottom: 2px solid color-mix(in srgb, currentColor 38%, transparent);
    content: '';
}

.teo-dock-panel.is-resizing {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary, #2563eb) 32%, transparent);
}

.teo-dock-panel.is-resizing::after {
    position: absolute;
    z-index: 7;
    content: '';
    inset: 0;
}

body.teo-dock-resizing {
    cursor: ew-resize;
    user-select: none;
}

body.teo-dock-resizing[data-teo-dock-resize="bottom"] {
    cursor: ns-resize;
}

body.teo-dock-resizing[data-teo-dock-resize="floating"] {
    cursor: nwse-resize;
}

body.teo-dock-resizing iframe,
body.teo-dock-resizing canvas {
    pointer-events: none;
}

.teo-dock-panel.is-minimized .teo-dock-panel-content,
.teo-dock-panel.is-minimized .teo-dock-panel-resizer,
.teo-dock-panel.is-minimized .teo-dock-panel-title,
.teo-dock-panel.is-minimized .teo-dock-panel-actions button:not([data-teo-dock-action="minimize"]) {
    display: none;
}

.teo-dock-panel.is-minimized {
    display: none;
}

.teo-dock-zone-left .teo-dock-panel.is-minimized,
.teo-dock-zone-right .teo-dock-panel.is-minimized {
    width: 2.2rem;
}

.teo-dock-zone-left .teo-dock-panel.is-minimized .teo-dock-panel-header,
.teo-dock-zone-right .teo-dock-panel.is-minimized .teo-dock-panel-header {
    height: 100%;
    align-items: center;
    flex-direction: column;
    padding: .45rem .2rem;
}

.teo-dock-zone-bottom .teo-dock-panel.is-minimized,
.teo-dock-zone-floating .teo-dock-panel.is-minimized {
    height: 2.1rem;
    min-height: 2.1rem;
    resize: none;
}

.teo-dock-rail {
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: center;
    flex-direction: column;
    gap: .3rem;
    padding: .45rem .25rem;
    border-left: 1px solid var(--teo-dock-border);
    background: var(--teo-dock-panel-background);
}

/* a rail with no launcher on it takes no room */
.teo-dock-rail:empty {
    display: none;
}

.teo-dock-rail-left {
    border-left: 0;
    border-right: 1px solid var(--teo-dock-border);
}

.teo-dock-rail-button {
    position: relative;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .4rem;
    color: var(--bs-secondary-color, #64748b);
    background: transparent;
    transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.teo-dock-rail-button > span:not(.teo-workbench-svg) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.teo-dock-rail-button:hover {
    color: var(--bs-primary, #2563eb);
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 8%, transparent);
    transform: translateY(-1px);
}

.teo-dock-rail-button.is-active {
    border-color: color-mix(in srgb, var(--bs-primary, #2563eb) 22%, transparent);
    color: var(--bs-primary, #2563eb);
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 12%, transparent);
}

.teo-dock-rail-button.is-active::before {
    position: absolute;
    top: .4rem;
    bottom: .4rem;
    left: -.3rem;
    width: 2px;
    border-radius: 2px;
    background: var(--bs-primary, #2563eb);
    content: '';
}

/*endregion*/

/*region Footer*/

.teo-footer {
    display: flex;
    min-height: 1.65rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 .55rem;
    border-top: 1px solid var(--bs-border-color, #d5dbe5);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #64748b);
    font-size: .68rem;
}

.teo-footer-items {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

.teo-footer-item {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.teo-footer-item > i {
    color: var(--bs-success, #16a34a);
}

.teo-footer-item-value {
    color: inherit;
    font-weight: 600;
}

/*endregion*/

/*endregion*/

/*region Dashboard */

/* The dashboard is the platform's command centre: energy strips that flow along the chrome,
   glass cards that lift and glow under the hand, an atmospheric paper behind them - and
   underneath the show, disciplined typography and theme tokens, so the same design holds on
   the light and the dark surface. */

.teo-dashboard-modal, .teo-dashboard-view {
    --bs-secondary-color: color-mix(in srgb, var(--bs-body-color) 62%, transparent);
    --bs-secondary-bg: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
}

@keyframes teo-dashboard-flow {
    to {
        background-position: -220% 0;
    }
}

.teo-dashboard-modal .modal-header {
    position: relative;
}

/* a current runs under the header, the platform's signature */
.teo-dashboard-modal .modal-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
    color-mix(in srgb, var(--bs-primary) 55%, transparent),
    var(--bs-primary) 30%,
    color-mix(in srgb, var(--bs-info) 85%, var(--bs-primary)) 50%,
    var(--bs-primary) 70%,
    color-mix(in srgb, var(--bs-primary) 55%, transparent));
    background-size: 220% 100%;
    animation: teo-dashboard-flow 7s linear infinite;
}

.teo-dashboard-modal .modal-header h3 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800 !important;
    letter-spacing: .01em;
    color: var(--bs-body-color) !important;
}

.teo-dashboard-modal .modal-header h3::before {
    content: "";
    width: 5px;
    height: 1.15em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--bs-info), var(--bs-primary));
    box-shadow: 0 0 10px color-mix(in srgb, var(--bs-primary) 55%, transparent);
}

.teo-dashboard-toolbar {
    gap: .4rem;
    padding: .3rem .4rem;
    border-radius: .475rem;
    border: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--bs-body-color) 4%, transparent);
}

.teo-dashboard-toolbar .btn.me-2 {
    margin-right: 0 !important;
}

.teo-dashboard-toolbar .btn.btn-primary {
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--bs-primary) 70%, transparent);
}

/* the paper: a faint drafting grid under two soft field glows */
.teo-dashboard-body {
    position: relative;
    background-color: var(--teo-background, var(--bs-body-bg)) !important;
    background-image: radial-gradient(52rem 34rem at 10% 0%, color-mix(in srgb, var(--bs-primary) 16%, transparent), transparent 62%),
    radial-gradient(46rem 30rem at 95% 100%, color-mix(in srgb, var(--bs-info) 12%, transparent), transparent 62%),
    radial-gradient(color-mix(in srgb, var(--bs-body-color) 10%, transparent) 1px, transparent 1px) !important;
    background-size: auto, auto, 22px 22px !important;
}

.teo-dashboard-body .teo-dashboard-widget {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem !important;
    background: color-mix(in srgb, var(--bs-body-color) 4%, var(--teo-background, var(--bs-body-bg))) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.teo-dashboard-body .teo-dashboard-widget::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: color-mix(in srgb, var(--bs-primary) 55%, transparent);
}

.teo-dashboard-body .teo-dashboard-widget:hover,
.teo-dashboard-body .teo-dashboard-widget:focus-within {
    border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
    box-shadow: 0 2px 4px rgba(0, 0, 0, .14), 0 12px 24px -16px rgba(0, 0, 0, .4);
}

.card-header.teo-dashboard-widget-header {
    min-height: 2.6rem !important;
    padding: .35rem .5rem .35rem 1rem !important;
    border-bottom: 1px solid var(--bs-border-color);
    background: transparent;
}

/* the caption: confident but disciplined - strong ink, an accent tick, spaced capitals */
.card-title.teo-dashboard-widget-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    font-size: .8rem !important;
    font-weight: 700 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bs-body-color) !important;
}

.card-title.teo-dashboard-widget-title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-body-color);
}

.card-title.teo-dashboard-widget-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--bs-info), var(--bs-primary));
    box-shadow: 0 0 8px color-mix(in srgb, var(--bs-primary) 65%, transparent);
}

/* card controls: always present, dressed as small chips that answer the hand */
.teo-dashboard-body .teo-dashboard-widget-toolbar {
    gap: .25rem;
}

.teo-dashboard-body .teo-dashboard-widget-toolbar .btn {
    border: 1px solid transparent;
    border-radius: .425rem;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.teo-dashboard-body .teo-dashboard-widget-toolbar .btn:hover {
    border-color: color-mix(in srgb, var(--bs-primary) 45%, transparent);
    background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
    transform: translateY(-1px);
}

/* the content keeps its distance from the card walls */
.teo-dashboard-body .teo-dashboard-card-body {
    padding: .85rem 1rem 1rem !important;
}

.teo-dashboard-body .grid-stack-placeholder > .placeholder-content {
    background-color: color-mix(in srgb, var(--bs-primary) 10%, transparent) !important;
    border: 1px dashed color-mix(in srgb, var(--bs-primary) 55%, transparent);
    border-radius: .625rem;
}

[id$="_empty_dashboard"] {
    animation: teo-dashboard-empty-fade-in .5s ease;
}

[id$="_empty_dashboard"] img {
    filter: drop-shadow(0 10px 28px color-mix(in srgb, var(--bs-primary) 80%, transparent));
    opacity: .9;
}

[id$="_empty_dashboard"] span {
    color: color-mix(in srgb, var(--bs-body-color) 65%, transparent);
    font-size: 1.05rem;
}

@keyframes teo-dashboard-empty-fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -46%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.teo-dashboard-modal .teo-dashboard-topbar {
    flex: 0 0 auto;
    padding: .4rem .75rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    overflow: visible;
}

.teo-dashboard-modal .teo-dashboard-pages {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.teo-dashboard-modal .teo-dashboard-page-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border: 1px solid transparent;
    border-radius: .475rem;
    color: var(--bs-body-color);
    background: transparent;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.teo-dashboard-modal .teo-dashboard-page-tab:hover {
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
}

.teo-dashboard-modal .teo-dashboard-page-tab.is-active {
    color: var(--bs-primary);
    border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-border-color));
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    font-weight: 700;
}

.teo-dashboard-modal .teo-dashboard-page-tab em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.35rem;
    padding: 0 .4rem;
    font-style: normal;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--bs-body-color) 14%, transparent);
}

.teo-dashboard-modal .teo-dashboard-page-tab.is-active em {
    background: var(--bs-primary);
    color: #fff;
}

.teo-dashboard-modal .teo-dashboard-page-add,
.teo-dashboard-modal .teo-dashboard-page-actions > .btn {
    flex: 0 0 auto;
}

.teo-dashboard-modal .teo-dashboard-page-actions .dropdown-menu {
    z-index: 1065;
    min-width: 12rem;
    padding: .5rem 0;
    border: 1px solid var(--bs-border-color);
    border-radius: .475rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3);
    background: var(--bs-body-bg);
}

.teo-dashboard-modal .teo-dashboard-page-actions .dropdown-item {
    padding: .55rem 1rem;
    font-size: .85rem;
    color: var(--bs-body-color);
}

.teo-dashboard-modal .teo-dashboard-page-actions .dropdown-item:hover,
.teo-dashboard-modal .teo-dashboard-page-actions .dropdown-item:focus {
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    color: var(--bs-body-color);
}

.teo-dashboard-modal .teo-dashboard-page-actions .dropdown-item.text-danger:hover,
.teo-dashboard-modal .teo-dashboard-page-actions .dropdown-item.text-danger:focus {
    background: color-mix(in srgb, var(--bs-danger) 14%, transparent);
    color: var(--bs-danger);
}

.teo-dashboard-modal .teo-dashboard-edit-toggle.active {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 16%, transparent);
    color: var(--bs-primary);
}

.teo-dashboard-modal.teo-dashboard-editing .teo-dashboard-widget-header {
    cursor: move;
}

.teo-dashboard-modal.teo-dashboard-editing .teo-dashboard-body {
    outline: 2px dashed color-mix(in srgb, var(--bs-primary) 40%, transparent);
    outline-offset: -6px;
}

.teo-dashboard-modal .teo-dashboard-widget-headline {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    flex: 1;
}

.teo-dashboard-modal .teo-dashboard-widget-meta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--bs-body-color) 68%, transparent);
    text-transform: none;
    letter-spacing: 0;
}

.teo-dashboard-modal .teo-dashboard-widget-status {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-body-color) 40%, transparent);
    flex: 0 0 auto;
}

.teo-dashboard-modal .teo-dashboard-widget-status.is-ok {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, .7);
}

.teo-dashboard-modal .teo-dashboard-widget-status.is-failed {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, .7);
}

.teo-dashboard-modal .teo-dashboard-widget-time {
    font-variant-numeric: tabular-nums;
}

.teo-dashboard-modal .teo-dashboard-widget-error {
    font-weight: 600;
}

.teo-dashboard-modal .teo-dashboard-item {
    position: relative;
}

.teo-dashboard-modal .teo-dashboard-widget-blank {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

.teo-dashboard-kind-picker {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
}

.teo-dashboard-kind-family {
    color: color-mix(in srgb, var(--bs-body-color) 70%, transparent);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .35rem;
}

.teo-dashboard-kind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .4rem;
}

.teo-dashboard-kind-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .55rem .4rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .475rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .72rem;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.teo-dashboard-kind-card > i {
    font-size: 1.1rem;
    color: var(--bs-primary);
}

.teo-dashboard-kind-card:hover {
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
    transform: translateY(-1px);
}

.teo-dashboard-kind-card.active {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}

.teo-dashboard-kind-hint {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
    padding: .4rem .55rem;
    border-radius: .475rem;
    background: color-mix(in srgb, var(--bs-body-color) 7%, transparent);
    color: color-mix(in srgb, var(--bs-body-color) 72%, transparent);
    font-size: .72rem;
}

.teo-dashboard-modal .teo-dashboard-number {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
}

.teo-dashboard-modal .teo-dashboard-number-value {
    color: var(--bs-body-color);
    font-size: clamp(24px, 6vw, 44px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
}

.teo-dashboard-modal .teo-dashboard-number-label {
    color: var(--bs-secondary-color);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.teo-dashboard-modal .teo-dashboard-number-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.teo-dashboard-modal .teo-dashboard-number-delta.is-up {
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), .12);
}

.teo-dashboard-modal .teo-dashboard-number-delta.is-down {
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), .12);
}

.teo-dashboard-modal .teo-dashboard-stats {
    display: grid;
    height: 100%;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 6px;
    padding: 6px;
    overflow: auto;
}

.teo-dashboard-modal .teo-dashboard-stat {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: .475rem;
    background: var(--bs-secondary-bg);
}

.teo-dashboard-modal .teo-dashboard-stat-label {
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 9.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.teo-dashboard-modal .teo-dashboard-stat-value {
    color: var(--bs-body-color);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.1;
}

.teo-dashboard-modal .teo-dashboard-stat > .teo-dashboard-number-delta {
    align-self: flex-start;
    font-size: 10px;
}

.teo-dashboard-modal .teo-dashboard-trend {
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: 8px 10px 4px;
}

.teo-dashboard-modal .teo-dashboard-trend-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.teo-dashboard-modal .teo-dashboard-trend-value {
    color: var(--bs-body-color);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
}

.teo-dashboard-modal .teo-dashboard-trend-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
}

.teo-dashboard-modal .teo-dashboard-trend-period {
    color: var(--bs-secondary-color);
    font-family: var(--bs-font-monospace);
    font-size: 9px;
}

.teo-dashboard-modal .teo-dashboard-trend-spark {
    min-height: 0;
    flex: 1 1 auto;
}

.teo-dashboard-modal .teo-dashboard-ranking {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 4px 6px;
    overflow: auto;
    list-style: none;
}

.teo-dashboard-modal .teo-dashboard-ranking-row {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
    border-radius: .25rem;
}

.teo-dashboard-modal .teo-dashboard-ranking-row:hover {
    background: var(--bs-secondary-bg);
}

.teo-dashboard-modal .teo-dashboard-ranking-rank {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    border-radius: 50%;
    color: var(--bs-secondary-color);
    background: var(--bs-border-color);
    font-family: var(--bs-font-monospace);
    font-size: 10px;
    font-weight: 700;
}

.teo-dashboard-modal .teo-dashboard-ranking-row.is-top .teo-dashboard-ranking-rank {
    color: var(--bs-white);
    background: var(--bs-primary);
}

.teo-dashboard-modal .teo-dashboard-ranking-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
}

.teo-dashboard-modal .teo-dashboard-ranking-name {
    overflow: hidden;
    color: var(--bs-body-color);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-dashboard-modal .teo-dashboard-ranking-track,
.teo-dashboard-modal .teo-dashboard-progress-track {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--bs-border-color);
}

.teo-dashboard-modal .teo-dashboard-ranking-fill,
.teo-dashboard-modal .teo-dashboard-progress-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--bs-primary);
    transition: width .25s ease;
}

.teo-dashboard-modal .teo-dashboard-ranking-value,
.teo-dashboard-modal .teo-dashboard-progress-value {
    flex: 0 0 auto;
    color: var(--bs-body-color);
    font-family: var(--bs-font-monospace);
    font-size: 10.5px;
    font-weight: 700;
}

.teo-dashboard-modal .teo-dashboard-progress {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    overflow: auto;
}

.teo-dashboard-modal .teo-dashboard-progress-row {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(60px, 32%) 1fr auto 36px;
    align-items: center;
    gap: 8px;
}

.teo-dashboard-modal .teo-dashboard-progress-name {
    overflow: hidden;
    color: var(--bs-body-color);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-dashboard-modal .teo-dashboard-progress-track {
    height: 6px;
    border-radius: 3px;
}

.teo-dashboard-modal .teo-dashboard-progress-fill.is-high {
    background: var(--bs-success);
}

.teo-dashboard-modal .teo-dashboard-progress-fill.is-mid {
    background: var(--bs-warning);
}

.teo-dashboard-modal .teo-dashboard-progress-fill.is-low {
    background: var(--bs-danger);
}

.teo-dashboard-modal .teo-dashboard-progress-percent {
    color: var(--bs-secondary-color);
    font-family: var(--bs-font-monospace);
    font-size: 10px;
    text-align: right;
}

.teo-dashboard-modal .teo-dashboard-note {
    display: flex;
    height: 100%;
    gap: 10px;
    padding: 10px 12px;
    overflow: auto;
}

.teo-dashboard-modal .teo-dashboard-note > i {
    flex: 0 0 auto;
    color: var(--bs-primary);
    font-size: 16px;
}

.teo-dashboard-modal .teo-dashboard-note > p {
    margin: 0;
    color: var(--bs-body-color);
    font-size: 11.5px;
    line-height: 1.55;
}

.teo-dashboard-modal .teo-dashboard-rings {
    display: grid;
    height: 100%;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    align-content: safe center;
    gap: 8px;
    padding: 8px;
    overflow: auto;
}

.teo-dashboard-modal .teo-dashboard-ring {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.teo-dashboard-modal .teo-dashboard-ring-dial {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 50%;
}

.teo-dashboard-modal .teo-dashboard-ring-hole {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    font-family: var(--bs-font-monospace);
    font-size: 11px;
    font-weight: 700;
}

.teo-dashboard-modal .teo-dashboard-ring-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--bs-body-color);
    font-size: 10.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-dashboard-modal .teo-dashboard-ring-value {
    color: var(--bs-secondary-color);
    font-family: var(--bs-font-monospace);
    font-size: 9px;
}

.teo-dashboard-modal .teo-dashboard-share {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
    overflow: auto;
}

.teo-dashboard-modal .teo-dashboard-share-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.teo-dashboard-modal .teo-dashboard-share-total-value {
    color: var(--bs-body-color);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.teo-dashboard-modal .teo-dashboard-share-bar {
    display: flex;
    height: 14px;
    overflow: hidden;
    border-radius: 7px;
    background: var(--bs-border-color);
}

.teo-dashboard-modal .teo-dashboard-share-segment {
    display: block;
    height: 100%;
    min-width: 2px;
}

.teo-dashboard-modal .teo-dashboard-share-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.teo-dashboard-modal .teo-dashboard-share-legend.is-column {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
}

.teo-dashboard-modal .teo-dashboard-share-item {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
}

.teo-dashboard-modal .teo-dashboard-share-item > i {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 2px;
}

.teo-dashboard-modal .teo-dashboard-share-name {
    overflow: hidden;
    color: var(--bs-body-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-dashboard-modal .teo-dashboard-share-item > b {
    color: var(--bs-body-color);
    font-family: var(--bs-font-monospace);
}

.teo-dashboard-modal .teo-dashboard-share-item > small {
    color: var(--bs-secondary-color);
    font-family: var(--bs-font-monospace);
    font-size: 9px;
}

.teo-dashboard-modal .teo-dashboard-waffle {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    overflow: auto;
}

.teo-dashboard-modal .teo-dashboard-waffle-grid {
    display: grid;
    width: min(100%, 160px);
    flex: 0 0 auto;
    aspect-ratio: 1;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
}

.teo-dashboard-modal .teo-dashboard-waffle-grid > i {
    display: block;
    border-radius: 2px;
    background: var(--bs-border-color);
}

.teo-dashboard-modal .teo-dashboard-bullet {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    overflow: auto;
}

.teo-dashboard-modal .teo-dashboard-bullet-row {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(60px, 30%) 1fr auto;
    align-items: center;
    gap: 8px;
}

.teo-dashboard-modal .teo-dashboard-bullet-name,
.teo-dashboard-modal .teo-dashboard-compare-name,
.teo-dashboard-modal .teo-dashboard-status-name,
.teo-dashboard-modal .teo-dashboard-gantt-name {
    overflow: hidden;
    color: var(--bs-body-color);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-dashboard-modal .teo-dashboard-bullet-track {
    position: relative;
    display: block;
    height: 12px;
    overflow: hidden;
    border-radius: 2px;
}

.teo-dashboard-modal .teo-dashboard-bullet-band {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--bs-border-color);
}

.teo-dashboard-modal .teo-dashboard-bullet-band.is-far {
    width: 100%;
    opacity: .5;
}

.teo-dashboard-modal .teo-dashboard-bullet-fill {
    position: absolute;
    top: 3px;
    left: 0;
    height: 6px;
    border-radius: 1px;
    background: var(--bs-primary);
}

.teo-dashboard-modal .teo-dashboard-bullet-fill.is-reached {
    background: var(--bs-success);
}

.teo-dashboard-modal .teo-dashboard-bullet-target {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    margin-left: -1px;
    background: var(--bs-body-color);
}

.teo-dashboard-modal .teo-dashboard-bullet-value {
    color: var(--bs-body-color);
    font-family: var(--bs-font-monospace);
    font-size: 10.5px;
    font-weight: 700;
}

.teo-dashboard-modal .teo-dashboard-bullet-value > small {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.teo-dashboard-modal .teo-dashboard-compare {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px;
    overflow: auto;
}

.teo-dashboard-modal .teo-dashboard-compare-head,
.teo-dashboard-modal .teo-dashboard-compare-row {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(60px, 28%) 1fr 1fr 64px;
    align-items: center;
    gap: 8px;
}

.teo-dashboard-modal .teo-dashboard-compare-head {
    color: var(--bs-secondary-color);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
}

.teo-dashboard-modal .teo-dashboard-compare-cell {
    position: relative;
    display: block;
    height: 16px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--bs-border-color);
}

.teo-dashboard-modal .teo-dashboard-compare-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--bs-primary);
}

.teo-dashboard-modal .teo-dashboard-compare-bar.is-previous {
    opacity: .4;
}

.teo-dashboard-modal .teo-dashboard-compare-cell > b {
    position: absolute;
    top: 0;
    right: 4px;
    color: var(--bs-body-color);
    font-family: var(--bs-font-monospace);
    font-size: 10px;
    line-height: 16px;
}

.teo-dashboard-modal .teo-dashboard-compare-delta {
    display: flex;
    justify-content: flex-end;
}

.teo-dashboard-modal .teo-dashboard-timeline {
    display: flex;
    height: 100%;
    flex-direction: column;
    margin: 0;
    padding: 6px 10px;
    overflow: auto;
    list-style: none;
}

.teo-dashboard-modal .teo-dashboard-timeline-row {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 68px 12px 1fr;
    align-items: start;
    gap: 6px;
    padding: 3px 0 7px;
}

.teo-dashboard-modal .teo-dashboard-timeline-row::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: -4px;
    left: 79px;
    width: 1px;
    background: var(--bs-border-color);
}

.teo-dashboard-modal .teo-dashboard-timeline-row:last-child::before {
    display: none;
}

.teo-dashboard-modal .teo-dashboard-timeline-time {
    padding-top: 2px;
    color: var(--bs-secondary-color);
    font-family: var(--bs-font-monospace);
    font-size: 9px;
    text-align: right;
}

.teo-dashboard-modal .teo-dashboard-timeline-dot {
    width: 8px;
    height: 8px;
    margin: 4px 2px;
    border-radius: 50%;
    background: var(--bs-primary);
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

.teo-dashboard-modal .teo-dashboard-timeline-row.is-success .teo-dashboard-timeline-dot {
    background: var(--bs-success);
}

.teo-dashboard-modal .teo-dashboard-timeline-row.is-warning .teo-dashboard-timeline-dot {
    background: var(--bs-warning);
}

.teo-dashboard-modal .teo-dashboard-timeline-row.is-danger .teo-dashboard-timeline-dot {
    background: var(--bs-danger);
}

.teo-dashboard-modal .teo-dashboard-timeline-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.teo-dashboard-modal .teo-dashboard-timeline-title {
    overflow: hidden;
    color: var(--bs-body-color);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-dashboard-modal .teo-dashboard-timeline-detail {
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-dashboard-modal .teo-dashboard-status {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    overflow: auto;
}

.teo-dashboard-modal .teo-dashboard-status-row {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 16px minmax(60px, 40%) 1fr;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: .25rem;
    background: var(--bs-secondary-bg);
}

.teo-dashboard-modal .teo-dashboard-status-row > i {
    font-size: 13px;
}

.teo-dashboard-modal .teo-dashboard-status-row.is-success > i {
    color: var(--bs-success);
}

.teo-dashboard-modal .teo-dashboard-status-row.is-warning > i {
    color: var(--bs-warning);
}

.teo-dashboard-modal .teo-dashboard-status-row.is-danger > i {
    color: var(--bs-danger);
}

.teo-dashboard-modal .teo-dashboard-status-row.is-info > i {
    color: var(--bs-primary);
}

.teo-dashboard-modal .teo-dashboard-status-text {
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-dashboard-modal .teo-dashboard-gantt {
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: 4px 10px 6px;
    overflow: hidden;
}

.teo-dashboard-modal .teo-dashboard-gantt-body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    overflow: auto;
}

.teo-dashboard-modal .teo-dashboard-gantt-row {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(70px, 30%) 1fr;
    align-items: center;
    gap: 8px;
}

.teo-dashboard-modal .teo-dashboard-gantt-row.is-head {
    height: 18px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--bs-border-color);
}

.teo-dashboard-modal .teo-dashboard-gantt-scale {
    position: relative;
    display: block;
    height: 100%;
}

.teo-dashboard-modal .teo-dashboard-gantt-scale > span {
    position: absolute;
    top: 2px;
    padding-left: 3px;
    border-left: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-family: var(--bs-font-monospace);
    font-size: 9px;
    white-space: nowrap;
}

.teo-dashboard-modal .teo-dashboard-gantt-lane {
    position: relative;
    display: block;
    height: 14px;
    border-radius: 2px;
    background: var(--bs-border-color);
}

.teo-dashboard-modal .teo-dashboard-gantt-bar {
    position: absolute;
    top: 2px;
    height: 10px;
    border-radius: 2px;
}

.teo-dashboard-modal .teo-dashboard-gantt-bar.is-open {
    opacity: .55;
}

.teo-dashboard-modal .teo-dashboard-gantt-today {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: var(--bs-danger);
}

/*endregion*/

/* region Detail Tab */

.teo-detail-tab-title {
    display: inline-block;
    max-width: 20ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teo-tab-more-menu .teo-detail-tab-title {
    max-width: none;
}

/* endregion */