.carousel-slide {
    animation: carousel-slide .4s cubic-bezier(1,0,0,1)
}

@keyframes carousel-slide {
    0% {
        transform: scale(.2);
        box-shadow: 0 0 10em var(--color-shadow)
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 4em var(--color-shadow)
    }
}

.animation-slide {
    animation: sliding .25s
}

@keyframes sliding {
    0% {
        margin-inline-end: -1em
    }

    100% {
        margin-inline-end: 0
    }
}

.rotate-slider {
    animation: rotate-slider .25s 1 cubic-bezier(.79,.14,.15,.86)
}

@keyframes rotate-slider {
    0% {
        margin-inline-start: -196px
    }

    100% {
        margin-inline-start: 0
    }
}

.rotate-card {
    animation: rotate-card .25s 1
}

@keyframes rotate-card {
    0% {
        transform: translateY(-100px)
    }

    100% {
        transform: none
    }
}

@keyframes shake {
    0% {
        transform: translate(1px,1px) rotate(0)
    }

    10% {
        transform: translate(-1px,-2px) rotate(-1deg)
    }

    20% {
        transform: translate(-3px,0) rotate(1deg)
    }

    30% {
        transform: translate(3px,2px) rotate(0)
    }

    40% {
        transform: translate(1px,-1px) rotate(1deg)
    }

    50% {
        transform: translate(-1px,2px) rotate(-1deg)
    }

    60% {
        transform: translate(-3px,1px) rotate(0)
    }

    70% {
        transform: translate(3px,1px) rotate(-1deg)
    }

    80% {
        transform: translate(-1px,-1px) rotate(1deg)
    }

    90% {
        transform: translate(1px,2px) rotate(0)
    }

    100% {
        transform: translate(1px,-2px) rotate(-1deg)
    }
}

@-webkit-keyframes spinning {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes spinning {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes collapse-card {
    0% {
        height: 100px
    }

    100% {
        height: 0
    }
}

.rotate {
    transition: transform .25s
}

.rotate-180 {
    transform: rotate(180deg)
}

.slide-down {
    animation: slide-down .25s
}

@keyframes slide-down {
    0% {
        transform: translateY(-5em)
    }

    100% {
        transform: translateY(0)
    }
}

.slide-up {
    animation: slide-up .25s
}

@keyframes slide-up {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-3em)
    }
}

.scale-remove-corner {
    animation: scale-remove-corner .25s 1
}

@keyframes scale-remove-corner {
    0% {
        border-radius: 2em;
        transform: scale(.1)
    }

    100% {
        border-radius: 0;
        transform: none
    }
}

.rotate-180 {
    animation: rotate-180 .25s .5s
}

@keyframes rotate-180 {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(180deg)
    }
}

@keyframes loading-data {
    0% {
        opacity: .5
    }

    25% {
        opacity: 1
    }

    50% {
        opacity: .5
    }

    75% {
        opacity: 1
    }

    100% {
        opacity: .5
    }
}

:root {
    --font-family: "Segoe UI Variable Display","Segoe UI",-apple-system,"Helvetica Neue";
    --font-size: 15px;
    --position-start: 0;
    --position-end: unset;
    --bg-gradient: linear-gradient(0deg, var(--color-7), var(--color-6));
    --header-height: 150px;
    --menubar-height: 4em;
    --border-radius-input: 0.5em;
    --border-radius-button: 0.5em;
    --border-radius-card: 0.5em;
    --box-shadow-card: 0px 2px 5px var(--color-shadow);
    --size-unit: 1px;
    --width-splitter: 4px;
    --width-button-icon: 1.5em;
    --translate-x-100: 0;
    --img-filter: grayscale(1);
    --zoom-offset: 0em;
    --direction-offset: 1;
    --direction-rotate: 0deg;
    --bg-table-row-alt: var(--color-main);
  --color-gradient-1: #005bff;
  --color-gradient-2: #00c5ff;
  --color-gradient-3: #07b9ef;
    scroll-padding: calc(var(--header-height) + 10px);
    scroll-behavior: smooth
}

.flex {
    display: flex
}

.flex-col {
    display: flex;
    flex-direction: column
}

    .flex-col.reverse {
        flex-direction: column-reverse
    }

.flex-col-row {
    display: flex;
    flex-direction: column
}

    .flex-col-row.reverse {
        flex-direction: column-reverse
    }

.flex-row-col {
    display: flex;
    flex-direction: row
}

    .flex-row-col.reverse {
        flex-direction: row-reverse
    }

.flex-wrap {
    flex-wrap: wrap
}

.flex-1 {
    flex: 1
}

.flex-1-0-0 {
    flex: 1;
    flex-shrink: 0;
    flex-basis: 0
}

.d-flex {
    display: none !important
}

.d-flex-col {
    display: none !important
}

.d-inline {
    display: inline !important
}

.d-none {
    display: none !important
}

.block, .d-block {
    display: block !important
}

.d-contents {
    display: contents !important
}

.d-inline-flex {
    display: inline-flex !important
}

.d-none-flex {
    display: none !important
}

.m-flex {
    display: flex !important
}

.m-flex-col {
    display: flex !important;
    flex-direction: column
}

.hidden {
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0
}

.collapsed {
    visibility: collapse !important;
    display: none !important
}

.content-center {
    place-content: center !important
}

.content-center-start {
    place-content: center !important
}

.items-center {
    align-items: center !important
}

.items-start {
    align-items: flex-start !important
}

.items-end {
    align-items: flex-end !important
}

.align-start {
    align-items: flex-start !important
}

.align-center {
    align-items: center !important
}

.align-end {
    align-items: flex-end !important
}

.items-center-start {
    align-items: center !important
}

.items-center-end {
    place-items: center !important
}

.items-start-center {
    align-items: start !important
}

.items-stretch-center {
    place-items: stretch
}

.justify-text {
    text-align: justify !important
}

.content-center, .justify-center {
    justify-content: center !important
}

.content-start, .justify-start {
    justify-content: flex-start !important
}

.content-end, .justify-end {
    justify-content: flex-end !important
}

.justify-center-end {
    justify-content: center !important
}

.justify-center-start {
    justify-content: center !important
}

.justify-center-between {
    justify-content: center !important
}

.space-between {
    justify-content: space-between !important
}

.space-evenly {
    justify-content: space-evenly !important
}

.space-around {
    justify-content: space-around !important
}

.gap-sm {
    gap: .25em !important
}

.gap-0 {
    gap: 0 !important
}

.gap-1 {
    gap: .5em !important
}

.gap-2 {
    gap: 1em !important
}

.gap-3 {
    gap: 1.5em !important
}

.gap-4 {
    gap: 2em !important
}

.gap-5 {
    gap: 2.5em !important
}

.gap-6 {
    gap: 3em !important
}

.gap-1-2 {
    gap: .5em !important;
    transition: gap .25s
}

.gap-1-3 {
    gap: .5em !important
}

.fg-0 {
    flex-grow: 0 !important
}

.fg-1 {
    flex-grow: 1 !important
}

[class*=grid-] {
    display: grid
}

[class*=" grid-auto"], [class^=grid-auto] {
    --width-element: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(var(--width-element),1fr));
    gap: 1em
}

.grid {
    display: grid !important
}

.resize {
    resize: both
}

.resize-v {
    resize: vertical
}

.resize-h {
    resize: horizontal
}

.no-resize {
    resize: none
}

.no-wrap {
    white-space: nowrap !important
}

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

.no-user-select {
    user-select: none !important
}

.no-events {
    pointer-events: none !important
}

.no-border {
    border: none !important
}

.no-background {
    background: 0 0 !important
}

.no-outline {
    outline: 0 !important
}

.no-appearance {
    -moz-appearance: textfield;
    appearance: textfield
}

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

.text-select {
    user-select: text
}

.wrap {
    white-space: pre-wrap !important
}

.break-word {
    word-break: break-word
}

.start {
    left: var(--position-start) !important;
    right: var(--position-end) !important
}

.end {
    left: var(--position-end) !important;
    right: var(--position-start) !important
}

.circular {
    border-radius: 50% !important
}

.inset-0 {
    inset: 0 !important
}

.inset-1 {
    inset: .5em !important
}

.z-index-0 {
    z-index: 0 !important
}

.z-index-1 {
    z-index: 1 !important
}

.position-absolute {
    position: absolute !important
}

.position-sticky {
    position: sticky !important
}

.position-relative {
    position: relative !important
}

.position-fixed {
    position: fixed !important
}

.position-initial {
    position: initial !important
}

.position-center {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%
}

    .position-center.top {
        bottom: unset;
        translate: -50% 0
    }

    .position-center.bottom {
        top: unset
    }

    .position-center.end, .position-center.start {
        translate: 0 -50%
    }

.top-center {
    top: 50%;
    transform: translateY(-50%)
}

.cursor-initial {
    cursor: initial !important
}

.cursor-pointer {
    cursor: pointer !important
}

.text-center-start {
    text-align: center !important
}

.overflow-visible {
    overflow: visible !important
}

.overflow-hidden {
    overflow: hidden !important
}

.overflow-auto {
    overflow: auto !important
}

.overflow-stable {
    overflow: auto !important;
    scrollbar-gutter: stable
}

.overflow-initial {
    overflow: initial !important
}

.underline {
    text-decoration: underline
}

.line-through {
    text-decoration: line-through
}

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

.trim-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.pre-wrap {
    white-space: pre-wrap
}

.uppercase {
    text-transform: uppercase !important
}

.transparent {
    background-color: transparent !important
}

.bg-current {
    background-color: currentColor
}

.bg-main {
    background-color: var(--color-main) !important;
    transition: background-color .5s !important
}

.bg-main-light {
    background-color: var(--color-main-light) !important;
    transition: background-color .5s,color .5s
}

.bg-main-dark {
    background-color: var(--color-main-dark) !important;
    transition: background-color .5s,color .5s
}

.bg-primary-lighter {
    background-color: var(--color-primary-lighter) !important
}

.bg-primary-light {
    background-color: var(--color-primary-light) !important
}

.bg-primary {
    background-color: var(--color-primary) !important
}

.bg-primary-dark {
    background-color: var(--color-primary-dark) !important
}

.bg-primary-darker {
    background-color: var(--color-primary-darker) !important
}

.bg-secondary-lighter {
    background-color: var(--color-secondary-lighter) !important
}

.bg-secondary-light {
    background-color: var(--color-secondary-light) !important
}

.bg-secondary {
    background-color: var(--color-secondary) !important
}

.bg-secondary-dark {
    background-color: var(--color-secondary-dark) !important
}

.bg-secondary-darker {
    background-color: var(--color-secondary-darker) !important
}

.bg-button {
    background-color: var(--color-button) !important;
    transition: background-color .5s,color .5s
}

.bg-transparent {
    background-color: transparent !important
}

.bg-gradient {
    background: var(--bg-gradient) !important
}

.bg-light {
    background-color: var(--color-light) !important
}

.bg-5-light {
    background-color: var(--color-5-light) !important
}

.bg-1 {
    background-color: var(--color-1) !important
}

.bg-2 {
    background-color: var(--color-2) !important
}

.bg-3 {
    background-color: var(--color-3) !important
}

.bg-4 {
    background-color: var(--color-4) !important
}

.bg-5 {
    background-color: var(--color-primary) !important
}

.bg-6 {
    background-color: var(--color-6) !important
}

.bg-7 {
    background-color: var(--color-7) !important
}

.bg-white {
    background-color: #fff !important
}

.grayscale {
    filter: grayscale(1) !important
}

.glass {
    background: 0 0 !important;
    backdrop-filter: blur(10px) !important
}

.color-preview {
    background-color: currentColor
}

.color-maroon {
    color: var(--color-maroon) !important
}

.color-text {
    color: var(--color-text) !important
}

.color-text-light {
    color: var(--color-text-light) !important
}

.color-placeholder {
    color: var(--color-text-placeholder) !important
}

.color-primary-lighter {
    color: var(--color-primary-lighter) !important
}

.color-primary-light {
    color: var(--color-primary-light) !important
}

.color-primary {
    color: var(--color-primary) !important
}

.color-primary-dark {
    color: var(--color-primary-dark) !important
}

.color-primary-darker {
    color: var(--color-primary-darker) !important
}

.color-secondary {
    color: var(--color-secondary) !important
}

.color-secondary-dark {
    color: var(--color-secondary-dark) !important
}

.color-secondary-darker {
    color: var(--color-secondary-darker) !important
}

.color-1 {
    color: var(--color-1) !important
}

.color-2 {
    color: var(--color-2) !important
}

.color-3 {
    color: var(--color-3) !important
}

.color-4 {
    color: var(--color-4) !important
}

.color-5 {
    color: var(--color-5) !important
}

.color-6 {
    color: var(--color-6) !important
}

.color-7 {
    color: var(--color-7) !important
}

.color-8 {
    color: var(--color-8) !important
}

.color-logo {
    color: var(--color-logo);
    fill: var(--color-logo)
}

.color-white {
    color: var(--color-white) !important
}

.color-black {
    color: #000 !important
}

.color-main {
    color: var(--color-main-light) !important
}

.color-invalid {
    color: var(--color-invalid) !important
}

.color-info {
    color: var(--color-info) !important
}

.color-success {
    color: var(--color-success) !important
}

.color-danger {
    color: var(--color-danger) !important
}

.color-warning {
    color: var(--color-warning) !important
}

.color-question {
    color: var(--color-question) !important
}

.color-border {
    color: var(--color-border) !important
}

.italic {
    font-style: italic !important
}

.underline {
    text-decoration: underline
}

.text-start {
    text-align: start !important
}

.text-end {
    text-align: end !important
}

.text-center {
    text-align: center !important
}

.fs-sm {
    font-size: 90% !important
}

.fs-md {
    font-size: 115% !important
}

.fs-1 {
    font-size: 100% !important
}

.fs-2 {
    font-size: 110% !important
}

.fs-3 {
    font-size: 120% !important
}

.fs-4 {
    font-size: 130% !important
}

.fs-5 {
    font-size: 140% !important
}

.fs-6 {
    font-size: 150% !important
}

.fs-mid {
    font-size: 105% !important
}

.fw-normal {
    font-weight: 400 !important
}

.fw-bold {
    font-weight: 500 !important
}

.fw-300 {
    font-weight: 300 !important
}

.fw-400 {
    font-weight: 400 !important
}

.fw-500 {
    font-weight: 500 !important
}

.fw-600 {
    font-weight: 600 !important
}

.fw-700 {
    font-weight: 700 !important
}

.text-1 {
    font-size: calc(clamp(1.1em,1.8vw,3em) + var(--zoom-offset)) !important
}

.text-2 {
    font-size: calc(clamp(1em,2vw,4em) + var(--zoom-offset)) !important
}

.text-3 {
    font-size: calc(clamp(1em,1.2vw,2em) + var(--zoom-offset)) !important;
    display: none
}

.text-shadow {
    text-shadow: 0 .1em 0 rgba(0,0,0,.568627451) !important
}

.text-balance {
    white-space: balance
}

.lh-0 {
    line-height: 0 !important
}

.lh-1 {
    line-height: .5em !important
}

.lh-2 {
    line-height: 1em !important
}

.lh-3 {
    line-height: 1.5em !important
}

.lh-3 {
    line-height: 2em !important
}

.m-0-auto {
    margin: 0 auto !important
}

.m-sm {
    margin: .25em !important
}

.m-0 {
    margin: 0 !important
}

.m-1 {
    margin: .5em !important
}

.m-2 {
    margin: 1em !important
}

.m-3 {
    margin: 1.5em !important
}

.m-4 {
    margin: 2em !important
}

.m-5 {
    margin: 2.5em !important
}

.m-6 {
    margin: 3em !important
}

.m-7 {
    margin: 3.5em !important
}

.m-8 {
    margin: 4em !important
}

.m-9 {
    margin: 4.5em !important
}

.m-10 {
    margin: 5em !important
}

.m-11 {
    margin: 5.5em !important
}

.m-12 {
    margin: 6em !important
}

.ms-auto {
    margin-inline-start: auto !important
}

.ms-sm {
    margin-inline-start: .25em !important
}

.ms-0 {
    margin-inline-start: 0 !important
}

.ms-1 {
    margin-inline-start: .5em !important
}

.ms-2 {
    margin-inline-start: 1em !important
}

.ms-3 {
    margin-inline-start: 1.5em !important
}

.ms-4 {
    margin-inline-start: 2em !important
}

.ms-5 {
    margin-inline-start: 2.5em !important
}

.ms-6 {
    margin-inline-start: 3em !important
}

.ms-7 {
    margin-inline-start: 3.5em !important
}

.ms-8 {
    margin-inline-start: 4em !important
}

.ms-9 {
    margin-inline-start: 4.5em !important
}

.ms-10 {
    margin-inline-start: 5em !important
}

.ms-11 {
    margin-inline-start: 5.5em !important
}

.ms-12 {
    margin-inline-start: 6em !important
}

.me-auto {
    margin-inline-end: auto !important
}

.me-sm {
    margin-inline-end: .25em !important
}

.me-0 {
    margin-inline-end: 0 !important
}

.me-1 {
    margin-inline-end: .5em !important
}

.me-2 {
    margin-inline-end: 1em !important
}

.me-3 {
    margin-inline-end: 1.5em !important
}

.me-4 {
    margin-inline-end: 2em !important
}

.me-5 {
    margin-inline-end: 2.5em !important
}

.me-6 {
    margin-inline-end: 3em !important
}

.me-7 {
    margin-inline-end: 3.5em !important
}

.me-8 {
    margin-inline-end: 4em !important
}

.me-9 {
    margin-inline-end: 4.5em !important
}

.me-10 {
    margin-inline-end: 5em !important
}

.me-11 {
    margin-inline-end: 5.5em !important
}

.me-12 {
    margin-inline-end: 6em !important
}

.mt-auto {
    margin-block-start: auto !important
}

.mt-sm {
    margin-top: .25em !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .5em !important
}

.mt-2 {
    margin-top: 1em !important
}

.mt-3 {
    margin-top: 1.5em !important
}

.mt-4 {
    margin-top: 2em !important
}

.mt-5 {
    margin-top: 2.5em !important
}

.mt-6 {
    margin-top: 3em !important
}

.mt-7 {
    margin-top: 3.5em !important
}

.mt-8 {
    margin-top: 4em !important
}

.mt-9 {
    margin-top: 4.5em !important
}

.mt-10 {
    margin-top: 5em !important
}

.mt-11 {
    margin-top: 5.5em !important
}

.mt-12 {
    margin-top: 6em !important
}

.mb-auto {
    margin-bottom: auto !important
}

.mb-sm {
    margin-bottom: .25em !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .5em !important
}

.mb-2 {
    margin-bottom: 1em !important
}

.mb-3 {
    margin-bottom: 1.5em !important
}

.mb-4 {
    margin-bottom: 2em !important
}

.mb-5 {
    margin-bottom: 2.5em !important
}

.mb-6 {
    margin-bottom: 3em !important
}

.mb-7 {
    margin-bottom: 3.5em !important
}

.mb-8 {
    margin-bottom: 4em !important
}

.mb-9 {
    margin-bottom: 4.5em !important
}

.mb-10 {
    margin-bottom: 5em !important
}

.mb-11 {
    margin-bottom: 5.5em !important
}

.mb-12 {
    margin-bottom: 6em !important
}

.p-sm {
    padding: .25em !important
}

.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: .5em !important
}

.p-2 {
    padding: 1em !important
}

.p-3 {
    padding: 1.5em !important
}

.p-4 {
    padding: 2em !important
}

.p-5 {
    padding: 2.5em !important
}

.p-6 {
    padding: 3em !important
}

.p-7 {
    padding: 3.5em !important
}

.p-8 {
    padding: 4em !important
}

.p-9 {
    padding: 4.5em !important
}

.p-10 {
    padding: 5em !important
}

.p-11 {
    padding: 5.5em !important
}

.p-12 {
    padding: 6em !important
}

.ps-sm {
    padding-inline-start: .25em !important
}

.ps-0 {
    padding-inline-start: 0 !important
}

.ps-1 {
    padding-inline-start: .5em !important
}

.ps-2 {
    padding-inline-start: 1em !important
}

.ps-3 {
    padding-inline-start: 1.5em !important
}

.ps-4 {
    padding-inline-start: 2em !important
}

.ps-5 {
    padding-inline-start: 2.5em !important
}

.ps-6 {
    padding-inline-start: 3em !important
}

.ps-7 {
    padding-inline-start: 3.5em !important
}

.ps-8 {
    padding-inline-start: 4em !important
}

.ps-9 {
    padding-inline-start: 4.5em !important
}

.ps-10 {
    padding-inline-start: 5em !important
}

.ps-11 {
    padding-inline-start: 5.5em !important
}

.ps-12 {
    padding-inline-start: 6em !important
}

.pe-sm {
    padding-inline-end: .25em !important
}

.pe-0 {
    padding-inline-end: 0 !important
}

.pe-1 {
    padding-inline-end: .5em !important
}

.pe-2 {
    padding-inline-end: 1em !important
}

.pe-3 {
    padding-inline-end: 1.5em !important
}

.pe-4 {
    padding-inline-end: 2em !important
}

.pe-5 {
    padding-inline-end: 2.5em !important
}

.pe-6 {
    padding-inline-end: 3em !important
}

.pe-7 {
    padding-inline-end: 3.5em !important
}

.pe-8 {
    padding-inline-end: 4em !important
}

.pe-9 {
    padding-inline-end: 4.5em !important
}

.pe-10 {
    padding-inline-end: 5em !important
}

.pe-11 {
    padding-inline-end: 5.5em !important
}

.pe-12 {
    padding-inline-end: 6em !important
}

.pt-sm {
    padding-top: .25em !important
}

.pt-0 {
    padding-top: 0 !important
}

.pt-1 {
    padding-top: .5em !important
}

.pt-2 {
    padding-top: 1em !important
}

.pt-3 {
    padding-top: 1.5em !important
}

.pt-4 {
    padding-top: 2em !important
}

.pt-5 {
    padding-top: 2.5em !important
}

.pt-6 {
    padding-top: 3em !important
}

.pt-7 {
    padding-top: 3.5em !important
}

.pt-8 {
    padding-top: 4em !important
}

.pt-9 {
    padding-top: 4.5em !important
}

.pt-10 {
    padding-top: 5em !important
}

.pt-11 {
    padding-top: 5.5em !important
}

.pt-12 {
    padding-top: 6em !important
}

.pb-sm {
    padding-bottom: .25em !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: .5em !important
}

.pb-2 {
    padding-bottom: 1em !important
}

.pb-3 {
    padding-bottom: 1.5em !important
}

.pb-4 {
    padding-bottom: 2em !important
}

.pb-5 {
    padding-bottom: 2.5em !important
}

.pb-6 {
    padding-bottom: 3em !important
}

.pb-7 {
    padding-bottom: 3.5em !important
}

.pb-8 {
    padding-bottom: 4em !important
}

.pb-9 {
    padding-bottom: 4.5em !important
}

.pb-10 {
    padding-bottom: 5em !important
}

.pb-11 {
    padding-bottom: 5.5em !important
}

.pb-12 {
    padding-bottom: 6em !important
}

.pi-2 {
    padding-inline: 1em !important
}

.br-sm {
    border-radius: .25em !important
}

.br-0 {
    border-radius: 0 !important
}

.br-1 {
    border-radius: .5em !important
}

.br-2 {
    border-radius: 1em !important
}

.br-3 {
    border-radius: 1.2em !important
}

.br-4 {
    border-radius: 2em !important
}

.br-5 {
    border-radius: 2.5em !important
}

.br-6 {
    border-radius: 3em !important
}

.br-ss-0 {
    border-start-start-radius: 0 !important
}

.br-se-0 {
    border-start-end-radius: 0 !important
}

.br-es-0 {
    border-end-start-radius: 0 !important
}

.br-ee-0 {
    border-end-end-radius: 0 !important
}

.br-inner {
    --border-radius-card: 0.35rem
}

.rounded {
    border-radius: 100vmax !important
}

.fill {
    width: 100% !important;
    height: 100% !important
}

.w-fill {
    width: 100% !important
}

.w-fit {
    width: fit-content !important
}

.h-fill {
    height: 100%
}

.h-fit {
    height: fit-content !important
}

.w-auto {
    width: auto !important
}

.h-auto {
    height: auto !important
}

.h-min-content {
    height: min-content !important
}

.w-sm {
    width: .25em
}

.w-0 {
    width: 0
}

.w-1 {
    width: .5em
}

.w-2 {
    width: 1em !important
}

.w-3 {
    width: 1.5em !important
}

.w-4 {
    width: 2em
}

.w-5 {
    width: 2.5em
}

.w-6 {
    width: 3em
}

.w-7 {
    width: 3.5em
}

.w-8 {
    width: 4em !important
}

.w-9 {
    width: 4.5em
}

.w-10 {
    width: 5em
}

.w-11 {
    width: 5.5em
}

.w-12 {
    width: 6em
}

.h-sm {
    height: .25em
}

.h-0 {
    height: 0
}

.h-1 {
    height: .5em
}

.h-2 {
    height: 1em !important
}

.h-3 {
    height: 1.5em !important
}

.h-4 {
    height: 2em
}

.h-5 {
    height: 2.5em
}

.h-6 {
    height: 3em
}

.h-7 {
    height: 3.5em
}

.h-8 {
    height: 4em !important
}

.h-9 {
    height: 4.5em
}

.h-10 {
    height: 5em
}

.h-11 {
    height: 6.5em
}

.h-12 {
    height: 6em
}

.opacity-0 {
    opacity: 0
}

.opacity-1 {
    opacity: 1
}

.opacity-25 {
    opacity: .25
}

.opacity-50 {
    opacity: .5
}

.opacity-65 {
    opacity: .65
}

.opacity-75 {
    opacity: .75
}

.opacity-80 {
    opacity: .8
}

.inactive {
    opacity: .6
}

.fit-contain {
    object-fit: contain
}

.fit-cover {
    object-fit: cover
}

.top, .top-0 {
    top: 0 !important
}

.bottom, .bottom-0 {
    bottom: 0 !important
}

.border-top {
    border-top: var(--size-unit) solid var(--color-border) !important;
    transition: border-color .5s
}

.border-bottom {
    border-bottom: var(--size-unit) solid var(--color-border) !important;
    transition: border-color .5s
}

.border-color {
    border-color: var(--color-border) !important
}

.border-start {
    border-inline-start: var(--size-unit) solid var(--color-border) !important;
    transition: border-color .5s
}

.border-end {
    border-inline-end: var(--size-unit) solid var(--color-border) !important;
    transition: border-color .5s
}

.border {
    border: var(--size-unit) solid var(--color-border) !important;
    transition: border-color .5s,border-color .5s
}

.border-light {
    border-color: var(--color-border-light) !important
}

.border-dark {
    border-color: var(--color-border-dark) !important
}

.border-current {
    border-color: currentColor !important
}

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

.border-secondary {
    border-color: var(--color-secondary) !important
}

.box-shadow {
    box-shadow: 0 2px 5px var(--color-shadow) !important
}

.box-shadow-2 {
    box-shadow: 0 2px 2px rgba(0,0,0,.2392156863) !important
}

.drop-shadow {
    filter: drop-shadow(0 2px 5px var(--color-shadow))
}

.btn-shadow {
    box-shadow: 0 1px 1px var(--color-shadow) !important
}

.hover-gap {
    transition: all .25s !important
}

    .hover-gap:hover {
        gap: 1em
    }

.grayscale-hover-normal {
    filter: grayscale(1);
    transition: all .25s !important
}

    .grayscale-hover-normal:hover {
        filter: none
    }

.hover-scale {
    transition: all .25s !important
}

    .hover-scale:hover {
        transform: scale(1.1)
    }

.hover-light {
    transition: filter .25s
}

    .hover-light:hover {
        filter: brightness(115%) !important
    }

.hover-shadow {
    transition: box-shadow .1s
}

    .hover-shadow:hover {
        box-shadow: 0 2px 3px var(--color-shadow) !important
    }

.hover-color {
    transition: background-color .1s
}

    .hover-color:hover {
        background-color: var(--color-primary-lighter) !important
    }

.hover-danger {
    transition: background-color .1s
}

    .hover-danger:hover {
        background-color: rgba(255,0,0,.1411764706) !important;
        color: var(--color-invalid) !important
    }

.hover-marked:hover {
    background-color: var(--color-marked)
}

.hover-underline:hover {
    text-decoration: underline
}

.img-white {
    filter: brightness(0) invert(1)
}

.marked {
    background-color: var(--color-marked) !important
}

.removed {
    font-style: italic;
    color: red;
    text-decoration: line-through
}

.disabled-hidden:disabled {
    display: none
}

.safe-area {
    padding-top: var(--menubar-height)
}

.flip-h {
    transform: scaleX(-1)
}

.flip-v {
    transform: rotate(180deg);
    transform-origin: center
}

input.no-appearance::-webkit-inner-spin-button, input.no-appearance::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input.no-appearance[type=number] {
    -moz-appearance: textfield
}

.toasts {
    position: fixed;
    top: 3em;
    padding: 10px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    place-items: flex-end;
    gap: 1em;
    pointer-events: none
}

.toast {
    --icon: var(--icon-info);
    --color: var(--color-text);
    border-radius: .25em;
    position: relative;
    box-shadow: 0 5px 7px 1px var(--color-shadow);
    display: flex;
    place-items: center;
    font-size: var(--font-size);
    font-weight: 500;
    animation: slide-down .25s;
    border: var(--size-unit) solid var(--color);
    border-inline-start-width: 5px;
    background-color: var(--color-main-light);
    overflow: hidden
}

    .toast:has(.toast-dismiss) .toast-message {
        padding-inline-end: 3em
    }

    .toast .toast-icon {
        background-image: var(--icon);
        background-repeat: no-repeat no-repeat;
        background-position: center;
        background-size: 2em;
        padding-inline-end: 2.5em;
        position: relative;
        width: 4em;
        height: 4em
    }

    .toast .toast-message {
        padding: 1em;
        padding-inline-start: 0
    }

    .toast .toast-dismiss {
        pointer-events: auto;
        position: absolute;
        top: 0;
        left: var(--position-end);
        right: var(--position-start);
        background-color: transparent;
        color: currentColor;
        border: none;
        width: 2.25em;
        height: 2.25em;
        display: flex;
        place-content: center;
        place-items: center;
        border-radius: .25em;
        margin: 5px;
        opacity: .5;
        transition: opacity .2s,background-color .2s
    }

        .toast .toast-dismiss:hover {
            opacity: 1;
            background-color: var(--color-main-dark)
        }

.toast-info {
    --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22ZM12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75ZM12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z' fill='%23064eab'/%3E%3C/svg%3E");
    --color: var(--color-info)
}

.toast-success {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22ZM16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z' fill='%23038969'/%3E%3C/svg%3E");
    --color: var(--color-success)
}

.toast-warning {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 10.4167C3 7.21907 3 5.62028 3.37752 5.08241C3.75503 4.54454 5.25832 4.02996 8.26491 3.00079L8.83772 2.80472C10.405 2.26824 11.1886 2 12 2C12.8114 2 13.595 2.26824 15.1623 2.80472L15.7351 3.00079C18.7417 4.02996 20.245 4.54454 20.6225 5.08241C21 5.62028 21 7.21907 21 10.4167V11.9914C21 17.6294 16.761 20.3655 14.1014 21.5273C13.38 21.8424 13.0193 22 12 22C10.9807 22 10.62 21.8424 9.89856 21.5273C7.23896 20.3655 3 17.6294 3 11.9914V10.4167ZM12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V12C12.75 12.4142 12.4142 12.75 12 12.75C11.5858 12.75 11.25 12.4142 11.25 12V8C11.25 7.58579 11.5858 7.25 12 7.25ZM12 16C12.5523 16 13 15.5523 13 15C13 14.4477 12.5523 14 12 14C11.4477 14 11 14.4477 11 15C11 15.5523 11.4477 16 12 16Z' fill='%239f4700'/%3E%3C/svg%3E");
    --color: var(--color-warning)
}

.toast-danger {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12ZM12 6.25C12.4142 6.25 12.75 6.58579 12.75 7V13C12.75 13.4142 12.4142 13.75 12 13.75C11.5858 13.75 11.25 13.4142 11.25 13V7C11.25 6.58579 11.5858 6.25 12 6.25ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z' fill='%23cf1f1f'/%3E%3C/svg%3E");
    --color: var(--color-danger)
}

* {
    box-sizing: border-box;
    scrollbar-width: thin
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-dark);
    -webkit-border-radius: .5em
}

::-webkit-scrollbar-corner {
    background: 0 0
}

::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background: 0 0
}

::-moz-selection {
    color: #fff;
    background: var(--color-primary)
}

::selection {
    background: var(--color-primary) !important;
    color: #fff !important
}

::view-transition-old(root) {
    animation-delay: .7s
}

::view-transition-new(root) {
    animation: circle-in 1s
}

@keyframes slide-in {
    from {
        translate: -100% 0
    }

    to {
        translate: 0 0
    }
}

@keyframes move-in {
    from {
        translate: 0 -100%
    }

    to {
        translate: 0 0
    }
}

@keyframes circle-in {
    from {
        clip-path: circle(0 at 50% 0)
    }

    to {
        clip-path: circle(120% at 50% 0)
    }
}

:root {
    --padding-menu-link: 0em 1em
}

body {
    font-family: var(--font-family),serif;
    font-size: var(--font-size);
    color: var(--color-text);
    background-color: var(--color-main-dark);
    margin: 0;
    overflow-x: hidden;
    transition: background-color .5s,color .5s
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    margin: 0
}

h4 {
    font-size: 130%
}

h5 {
    font-size: 120%
}

h6 {
    font-size: 110%
}

h1 {
    font-size: 2.75em;
    font-weight: 600
}

h2 {
    font-size: 2.25em;
    font-weight: 600
}

h3 {
    font-size: 1.5em
}

p {
    font-size: var(--font-size);
    line-height: 1.4em;
    margin: 0;
    padding: 0
}

b {
    font-weight: 500
}

button {
    font-family: inherit;
    font-size: inherit;
    user-select: none;
    outline: 0
}

input {
    color: inherit
}

a {
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    outline: 0
}

hr {
    border-inline: none;
    border-top: var(--size-unit) solid var(--color-border);
    border-bottom: none
}

.disabled {
    pointer-events: none;
    opacity: .6;
    user-select: none
}

.col-resizer, .row-resizer {
    background-color: transparent;
    transition: border-color .3s;
    position: relative;
    z-index: 1
}

    .col-resizer.sm, .row-resizer.sm {
        --width-splitter: 0.25em
    }

    .col-resizer.active, .col-resizer:hover, .row-resizer.active, .row-resizer:hover {
        background-color: var(--color-primary-light);
        border-color: var(--color-primary) !important
    }

.row-resizer {
    height: var(--width-splitter);
    min-height: var(--width-splitter);
    cursor: ns-resize
}

    .row-resizer.overlap {
        margin-block-start: calc(var(--width-splitter) * -1)
    }

.col-resizer {
    width: var(--width-splitter);
    min-width: var(--width-splitter);
    cursor: ew-resize
}

    .col-resizer.overlap {
        margin-inline-start: calc(var(--width-splitter) * -1)
    }

.under-construction {
    font-size: 3em;
    text-align: center;
    padding: 3em 0
}

.container {
    width: 100%;
    margin: 0 auto;
    padding-inline: 1em;
    transition: width .25s,margin .25s
}

.menubar {
    user-select: none;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 12;
    height: var(--menubar-height);
    transition: height .25s,background-color .5s,border-color .5s
}

    .menubar .container {
        padding: 0
    }

    .menubar .divider {
        border-inline-start: var(--size-unit) solid var(--color-separator)
    }

    .menubar .menu-item {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-4em);
        transition: transform .25s
    }

    .menubar.has-menu .menu-item {
        opacity: 1;
        pointer-events: auto;
        transform: none
    }

    .menubar.scrolling {
        box-shadow: 0 15px 20px -18px var(--color-shadow);
        border-color: transparent !important;
        background-color: var(--color-main-light)
    }

    .menubar.scrolling-blur {
        box-shadow: 0 15px 20px -18px var(--color-shadow);
        border-color: transparent !important;
        backdrop-filter: blur(20px)
    }

        .menubar.scrolling-blur:before {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--color-main-light);
            opacity: .5
        }

    .menubar.expanded {
        background-color: var(--color-main-light);
        box-shadow: none
    }

    .menubar.transparent .container {
        background: rgba(0,0,0,.2509803922) !important;
        border-radius: 0 0 .5em .5em
    }

    .menubar .social-links {
        display: none
    }

.menu-link a, .menu-link button, a.menu-link, button.menu-link {
    border: none;
    color: currentColor;
    background-color: transparent;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: var(--padding-menu-link);
    height: var(--menubar-height);
    cursor: pointer;
    outline: 0;
    outline-offset: -2em;
    font-size: var(--font-size);
    transition: height .25s,background-color 50ms,outline-offset .15s,padding .15s;
    position: relative
}

    .menu-link a img, .menu-link a label, .menu-link button img, .menu-link button label, a.menu-link img, a.menu-link label, button.menu-link img, button.menu-link label {
        pointer-events: none
    }

    .menu-link a:hover, .menu-link button:hover, a.menu-link:hover, button.menu-link:hover {
        background-color: var(--color-border)
    }

    .menu-link a:focus, .menu-link button:focus, a.menu-link:focus, button.menu-link:focus {
        outline: 1px dashed currentColor;
        outline-offset: -1px
    }

    .menu-link a.active, .menu-link button.active, a.menu-link.active, button.menu-link.active {
        color: var(--color-primary)
    }

.menu-icon {
    display: flex;
    flex-direction: column;
    place-items: flex-end;
    gap: .4em;
    transition: gap .1s
}

    .menu-icon span {
        display: block;
        width: 1.4em;
        height: .14em;
        background-color: currentColor;
        border-radius: .3em;
        transition: width .2s ease-in,transform .2s ease-in .2s
    }

        .menu-icon span:first-child {
            width: 1.8em
        }

        .menu-icon span:last-child {
            width: 1em
        }

    .menu-icon.close {
        gap: 0
    }

        .menu-icon.close span:nth-child(2) {
            display: none
        }

        .menu-icon.close span:first-child {
            transform: rotate(45deg) translateY(.1em);
            width: 1.8em
        }

        .menu-icon.close span:last-child {
            transform: rotate(135deg) translateY(.05em);
            width: 1.8em
        }

    .menu-icon:hover {
        color: var(--color-primary)
    }

    .menu-icon.gradient span {
        background: linear-gradient(45deg,var(--color-primary),var(--color-secondary))
    }

.drawer {
    --color-border: var(--color-border-light);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 11;
    transform: translateY(-200%);
    flex-direction: column;
    transition: transform .5s,filter .5s,opacity .5s;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, .3019607843));
    overflow-y: auto;
    background: 0 0;
    backdrop-filter: blur(5px)
}

    .drawer.within-menu {
        max-height: calc(100vh - 4em)
    }

    .drawer .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        background-color: rgba(0,0,0,.168627451);
        opacity: 0;
        transition: background-color .5s .5s,opacity .5s .5s
    }

        .drawer .overlay.show {
            opacity: 1
        }

    .drawer .content {
        background-color: var(--color-main-light);
        transition: background-color .5s,clip-path .25s;
        height: 100%
    }

    .drawer .scrollable {
        position: absolute;
        box-shadow: inset 0 0 8px -4px var(--color-shadow);
        padding: 1em 1em 2em 1em
    }

    .drawer .notches {
        height: 1em;
        direction: ltr !important
    }

        .drawer .notches span {
            width: 1.5em;
            transition: height .25s,border-width .1s .1s,transform .25s .1s;
            border-top: .2em solid #cacaca;
            border-bottom: .2em solid #cacaca;
            height: .6em
        }

        .drawer .notches:hover span {
            height: 0;
            background-color: #cacaca;
            border-top-width: .15em;
            border-bottom-width: .15em
        }

            .drawer .notches:hover span:first-child {
                transform: rotate(-30deg) translateX(.2em)
            }

            .drawer .notches:hover span:last-child {
                transform: rotate(30deg) translateX(-.2em)
            }

    .drawer.show {
        transform: translateY(0)
    }

    .drawer a {
        border-radius: .75em
    }

    .drawer .link {
        display: flex;
        place-items: center;
        width: 100%;
        gap: .5em;
        border: var(--size-unit) solid var(--color-main-dark);
        padding: .5em;
        user-select: none;
        transition: color .5s,border-color .5s
    }

        .drawer .link .external {
            --width-button-icon: .75em;
            margin: .4em;
            opacity: .5
        }

        .drawer .link.no-icon {
            padding: .8em 1em
        }

        .drawer .link:hover {
            background-color: var(--color-main-dark)
        }

            .drawer .link:hover .external {
                opacity: 1
            }

        .drawer .link * {
            pointer-events: none
        }

        .drawer .link img {
            width: 2em;
            height: 2em
        }

.page-header {
    display: flex;
    flex-direction: column;
    gap: .5em;
    text-align: center;
    padding: 3em 0 2em 0
}

.page-header-h {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1em 0;
    color: var(--color-primary)
}

    .page-header .navigation a, .page-header-h .navigation a {
        color: var(--color-primary)
    }

    .page-header h1, .page-header-h h1 {
        margin: 0;
        font-size: 1.75em
    }

.section-header {
    background: var(--bg-gradient);
    margin: 0 auto;
    border-radius: 2em;
    padding: .4em 1em;
    color: var(--color-primary);
    font-weight: 500;
    border: none;
    display: inline-flex;
    align-items: center
}

.navigation {
    display: flex;
    place-items: center
}

    .navigation a, .navigation span {
        display: flex;
        align-items: center
    }

    .navigation span {
        opacity: .8
    }

        .navigation a:after, .navigation span:after {
            content: "";
            width: .35em;
            height: .35em;
            border-top: .1em solid var(--color-text);
            border-right: .1em solid var(--color-text);
            transform: rotate(calc(var(--direction-rotate) + 45deg));
            margin: 0 .75em;
            opacity: .5;
            display: inline-block
        }

.dropzone {
    transition: outline .25s
}

    .dropzone input {
        opacity: 0;
        position: absolute;
        z-index: -1;
        inset: 0
    }

    .dropzone.file-over {
        color: var(--color-primary);
        border-color: var(--color-primary) !important;
        background-color: var(--color-primary-lighter)
    }

.badge {
    background-color: var(--color-main-dark);
    padding: 0 .5em;
    border-radius: .5em;
    min-height: 1.25em;
    display: flex;
    place-content: center;
    place-items: center
}

    .badge.badge-danger {
        font-size: 90%;
        padding: 0 .4em;
        line-height: .9em;
        color: #fff;
        background-color: var(--color-invalid)
    }

    .badge.badge-info, .badge.badge-warning {
        font-size: 90%;
        padding: 0 .4em;
        line-height: .9em;
        color: #fff;
        background-color: var(--color-info)
    }

    .badge.badge-warning {
        background-color: var(--color-warning)
    }

    .badge.badge-success {
        font-size: 90%;
        padding: 0 .4em;
        line-height: .9em;
        color: #fff;
        background-color: var(--color-success)
    }

    .badge.badge-cart {
        position: absolute;
        top: .5em;
        margin-inline-end: 1em;
        border-radius: 100vmax;
        padding: 0 .5em
    }

.tag {
    display: flex;
    gap: .25rem;
    place-items: center;
    background-color: var(--color-main-dark);
    padding: .25rem .5rem;
    font-size: 90%;
    border-radius: .25rem
}

    .tag .btn {
        padding: 0;
        border-radius: 3px;
        background-color: transparent;
        transition: background-color .15s,color .15s,opacity .15s;
        opacity: .7
    }

        .tag .btn:hover {
            opacity: 1;
            background-color: var(--color-danger);
            color: #fff
        }

.loader .checkbox, .loader .date, .loader .img, .loader .number, .loader .status, .loader .title {
    display: block;
    background-color: var(--color-border);
    animation: loading-data 2s infinite
}

.loader .checkbox {
    width: 1em;
    height: 1em;
    margin: 0 1em !important
}

.loader .status {
    width: 1em;
    height: 1em;
    margin: 0 auto
}

.loader .img {
    width: 2.8em;
    height: 2.8em;
    margin: -.5em auto
}

.loader .title {
    width: 20em;
    height: 1em
}

.loader .number {
    width: 2em;
    height: 1em;
    margin: 0 auto
}

.loader .date {
    width: 5em;
    height: 1em;
    margin: 0 auto
}

.circle-loader {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-primary-lighter);
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform: translate(-50%,-50%)
}

@keyframes spin {
    to {
        transform: translate(-50%,-50%) rotate(360deg)
    }
}

.spinner {
    border: .2em solid currentColor;
    border-bottom: .2em solid transparent;
    transform: translateZ(0);
    animation: spinning .4s infinite linear
}

    .spinner, .spinner:after {
        border-radius: 50%;
        width: 1.25em;
        height: 1.25em
    }

.dropdown:not(.active) .tree-view, .dropdown:not(.active) .tree-view *, .modal:not(.show) > .modal-content .tree-view, .modal:not(.show) > .modal-content .tree-view * {
    pointer-events: none !important
}

wq-icon, wq-tree-view {
    display: contents
}

wq-report-layout {
    --margin-page-content: 0
}

    wq-report-layout .printable {
        overflow: hidden;
        z-index: 0
    }

a wq-icon, button wq-icon {
    pointer-events: none
}

:root {
    --padding-button: 0.7em 1.25em;
    --color-outline: #0000004f
}

.btn {
    border: none;
    border-radius: var(--border-radius-button);
    padding: var(--padding-button);
    cursor: pointer;
    font-size: var(--font-size);
    outline: 2px solid transparent;
    color: inherit;
    background-color: var(--color-button);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    user-select: none;
    transition: filter .5s,background-color .5s,color .5s,outline-offset .5s,gap .5s
}

    .btn * {
        pointer-events: none
    }

.btn-primary {
    --color-outline: var(--color-primary-light);
    background-color: var(--color-primary);
    color: var(--color-white) !important
}

.btn-secondary {
    --color-outline: var(--color-secondary-light);
    background-color: var(--color-secondary);
    color: var(--color-white) !important
}

.btn-info {
    --color-outline: var(--color-info-light);
    color: #fff;
    background-color: var(--color-info)
}

.btn-success {
    --color-outline: var(--color-success-light);
    background-color: var(--color-success);
    color: #fff
}

.btn-warning {
    --color-outline: var(--color-warning-light);
    background-color: var(--color-warning);
    color: #fff
}

.btn-danger {
    --color-outline: var(--color-danger-light);
    color: var(--color-white);
    background-color: var(--color-danger)
}

.btn-question {
    --color-outline: var(--color-question-light);
    color: var(--color-white);
    background-color: var(--color-question)
}

.btn.btn-sm {
    padding: 0 .5em;
    font-size: 90%;
    line-height: 100%;
    height: 2em
}

.btn.btn-md {
    padding: .4em 1em
}

.btn.btn-lg {
    padding: .75em 1em;
    font-size: 110%
}

.btn.btn-icon {
    padding: 0;
    width: 2.75em;
    height: 2.75em;
    overflow: hidden
}

    .btn.btn-icon.btn-md {
        width: 2.25em;
        height: 2.25em;
        min-width: 2.25em;
        min-height: 2.25em
    }

    .btn.btn-icon.btn-sm {
        --width-button-icon: 1em;
        width: 2em;
        height: 2em;
        min-width: 2em;
        min-height: 2em
    }

.btn:disabled {
    pointer-events: none;
    opacity: .35
}

.btn:hover {
    filter: brightness(105%)
}

.btn:focus, .btn:focus-within {
    filter: brightness(95%);
    outline-color: var(--color-outline);
    outline-offset: 0
}

[class*=" btn-light"], [class^=btn-light] {
    --color-outline: currentColor;
    color: var(--color-button)
}

.btn-light-primary {
    --color-button: var(--color-primary);
    background-color: var(--color-primary-light)
}

.btn-light-secondary {
    --color-button: var(--color-secondary);
    background-color: var(--color-secondary-light)
}

.btn-light-info {
    --color-button: var(--color-info);
    background-color: var(--color-info-light)
}

.btn-light-success {
    --color-button: var(--color-success);
    background-color: var(--color-success-light)
}

.btn-light-warning {
    --color-button: var(--color-warning);
    background-color: var(--color-warning-light)
}

.btn-light-danger {
    --color-button: var(--color-danger);
    background-color: var(--color-danger-light)
}

[class*=" btn-outline"], [class^=btn-outline] {
    background-color: transparent;
    --color-button: var(--color-text);
    color: var(--color-button);
    border: var(--size-unit) solid var(--color-button)
}

    [class*=" btn-outline"]:hover, [class^=btn-outline]:hover {
        filter: none;
        color: #fff;
        background-color: var(--color-button)
    }

    [class*=" btn-outline"].active, [class^=btn-outline].active {
        background-color: var(--color-primary);
        color: #fff
    }

.btn-outline-primary {
    --color-outline: var(--color-primary-light);
    --color-button: var(--color-primary)
}

.btn-outline-secondary {
    --color-outline: var(--color-secondary-light);
    --color-button: var(--color-secondary)
}

.btn-outline-info {
    --color-outline: var(--color-info-light);
    --color-button: var(--color-info)
}

.btn-outline-success {
    --color-outline: var(--color-success-light);
    --color-button: var(--color-success)
}

.btn-outline-warning {
    --color-outline: var(--color-warning-light);
    --color-button: var(--color-warning)
}

.btn-outline-danger {
    --color-outline: var(--color-danger-light);
    --color-button: var(--color-danger)
}

.btn-outline-light {
    --color-button: var(--color-border-dark);
    color: var(--color-text)
}

[class*=" btn-flat"], [class^=btn-flat] {
    --color-outline: currentColor;
    background-color: transparent
}

    [class*=" btn-flat"]:hover, [class^=btn-flat]:hover {
        background-color: var(--color-button)
    }

.btn-flat {
    --color-button: var(--color-primary-lighter)
}

.btn-flat-primary {
    --color-button: var(--color-primary-light)
}

.btn-flat-secondary {
    --color-button: var(--color-secondary-light)
}

.btn-flat-info {
    --color-button: var(--color-info-light)
}

.btn-flat-success {
    --color-button: var(--color-success-light)
}

.btn-flat-warning {
    --color-button: var(--color-warning-light)
}

.btn-flat-danger {
    --color-button: var(--color-danger-light)
}

.btn-primary-lighter {
    background-color: var(--color-primary-lighter);
    color: var(--color-primary)
}

.btn-main {
    background-color: var(--color-main-light)
}

.btn-1 {
    --color-outline: #cad5075c;
    background-color: var(--color-1);
    color: var(--color-5-fixed)
}

.btn-1-light {
    --color-outline: #cad507;
    color: var(--color-primary);
    background-color: var(--color-hover)
}

.btn-input {
    background-color: var(--color-input);
    border: var(--size-unit) solid var(--color-border)
}

    .btn-input .btn-circle {
        width: 2em;
        height: 2em;
        min-height: auto;
        background: 0 0;
        border-radius: 50%;
        padding: 0 !important
    }

        .btn-input .btn-circle:hover:not([disabled]) {
            background-color: var(--color-button);
            color: var(--color-primary);
            filter: none
        }

    .btn-input.active {
        background-color: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
        outline-color: var(--color-primary-light)
    }

    .btn-input:disabled {
        cursor: default;
        opacity: .6;
        filter: none
    }

.btn-next i {
    transition: margin .25s
}

.btn-next:hover:not(:disabled) i {
    margin-inline-start: 1em
}

.btn-scale {
    transition: filter .25s,background-color .5s,color .5s,transform .25s
}

    .btn-scale:hover:not(:disabled) {
        transform: scale(1.1)
    }

.btn-link {
    background-color: transparent;
    border-bottom: var(--size-unit) solid currentColor;
    border-radius: 0;
    padding: 0;
    font-weight: 400
}

.btn-export {
    animation: btn-export-animation .4s infinite linear;
    background-color: var(--color-primary);
    color: #fff
}

.btn-group {
    display: flex
}

    .btn-group .btn:first-of-type {
        border-start-end-radius: 0;
        border-end-end-radius: 0
    }

    .btn-group .btn:last-child {
        border-start-start-radius: 0;
        border-end-start-radius: 0
    }

    .btn-group .btn.active {
        box-shadow: inset 0 1px 3px var(--color-shadow)
    }

    .btn-group .divider {
        height: 100% !important;
        background-color: var(--color-text);
        opacity: .3
    }

.btn svg, a svg, button svg {
    width: var(--width-button-icon);
    height: var(--width-button-icon);
    min-width: var(--width-button-icon);
    min-height: var(--width-button-icon)
}

.icon-lg {
    --width-button-icon: 1.5em
}

@keyframes btn-export-animation {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.card {
    --color-title: var(--color-text);
    --padding-card: 1em;
    border-radius: var(--border-radius-card);
    background-color: var(--color-main-light);
    overflow: hidden;
    border: var(--size-unit) solid var(--color-border);
    transition: background-color .5s,box-shadow .5s,border-color .5s
}

    .card.overflow-visible > .card-section {
        border-radius: .5em .5em 0 0
    }

    .card .card-inner {
        background-color: var(--color-main);
        border-radius: .5em;
        transition: background-color .5s,box-shadow .5s,border-color .5s
    }

    .card .card-title {
        padding: 1em
    }

        .card .card-title h3 {
            color: var(--color-title);
            margin: 0;
            font-size: 1.2em;
            font-weight: 500
        }

        .card .card-title p {
            padding: 0;
            margin: 0
        }

.card-section {
    color: var(--color-primary);
    font-size: 135%;
    font-weight: 500;
    padding: .8em 1em;
    transition: background-color .5s,color .5s
}

a.card, button.card {
    color: inherit
}

    a.card:active, button.card:active {
        opacity: .9
    }

.card-info {
    background-color: var(--color-info-light);
    color: var(--color-info);
    border: var(--size-unit) solid var(--color-info);
    overflow: auto
}

.card-success {
    background-color: var(--color-success-light);
    color: var(--color-success);
    border: var(--size-unit) solid var(--color-success);
    overflow: auto
}

.card-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
    border: var(--size-unit) solid var(--color-warning);
    overflow: auto
}

.card-danger {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
    border: var(--size-unit) solid var(--color-danger);
    overflow: auto
}

.m--10 {
    margin-inline: -5em
}

.carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

    .carousel .carousel-item {
        width: 100%;
        overflow: hidden;
        position: relative
    }

    .carousel .indicators {
        position: absolute;
        bottom: 0;
        opacity: .9
    }

    .carousel.no-opacity .next, .carousel.no-opacity .prev {
        opacity: 1
    }

.carousel-shadow {
    box-shadow: var(--box-shadow-card)
}

.carousel-indicator {
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background-color: var(--color-main-dark);
    display: inline-block;
    box-shadow: inset 0 1px 0 var(--color-shadow);
    transition: width .25s,height .25s,background-color .5s
}

    .carousel-indicator.active {
        background-color: var(--color-primary)
    }

.next, .prev {
    background-color: transparent;
    display: flex;
    justify-content: center;
    place-items: center;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    border: var(--size-unit) solid var(--color-text);
    color: var(--color-text);
    opacity: .65;
    cursor: pointer;
    transition: opacity .25s
}

    .next:hover:not(:disabled), .prev:hover:not(:disabled) {
        opacity: 1
    }

    .next:disabled, .prev:disabled {
        cursor: default;
        color: gray !important
    }

    .next.white, .prev.white {
        border-color: var(--color-white)
    }

    .next.sm, .prev.sm {
        border: none;
        width: 40px !important;
        height: 40px !important;
        color: #fff;
        background-color: rgba(0,0,0,.1098039216)
    }

.carousel-full {
    position: relative
}

    .carousel-full .buttons {
        display: flex;
        width: 100%;
        pointer-events: none;
        border-radius: var(--border-radius-button);
        filter: drop-shadow(0 0 2px #000)
    }

        .carousel-full .buttons .next, .carousel-full .buttons .prev {
            margin: 0;
            pointer-events: auto;
            border-color: transparent;
            transition: margin .25s,border-color .5s
        }

        .carousel-full .buttons.background {
            background-color: var(--color-shadow)
        }

.carousel-main {
    height: clamp(12em,34vw,40vw)
}

    .carousel-main .slider {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%
    }

.carousel-loader .carousel-item {
    animation: loading-data 2s infinite
}

    .carousel-loader .carousel-item h1, .carousel-loader .carousel-item h2, .carousel-loader .carousel-item h3 {
        width: 12em;
        background-color: var(--color-text-placeholder);
        margin: 0;
        height: 1em;
        transition: background-color .5s
    }

    .carousel-loader .carousel-item h1 {
        height: 2em;
        width: 8em
    }

    .carousel-loader .carousel-item h3 {
        display: none
    }

    .carousel-loader .carousel-item .btn {
        background-color: var(--color-text-placeholder);
        width: 10em;
        height: 3em
    }

.carousel-loader .next, .carousel-loader .prev {
    opacity: 1;
    border-width: .15em;
    border-color: var(--color-text-placeholder) !important;
    --color-white: var(--color-text-placeholder)
}

@media (min-width:40em) {
    .carousel .next, .carousel .prev {
        width: 2.5em;
        height: 2.5em
    }

    .carousel-full .buttons .next, .carousel-full .buttons .prev {
        margin: 1em;
        border-color: #fff;
        border-width: 2px
    }

        .carousel-full .buttons .next.sm, .carousel-full .buttons .prev.sm {
            margin: .5em
        }

    .carousel-indicator {
        width: .8em;
        height: .8em
    }
}

@media (min-width:56em) {
    .carousel-main .slider .text-3 {
        display: block;
        max-width: 50%
    }

    .carousel-main .slider .btn {
        padding: .6em 2em;
        margin-top: 2em
    }

        .carousel-main .slider .btn img {
            width: 2.6em
        }

    .carousel-loader .carousel-item h1, .carousel-loader .carousel-item h2, .carousel-loader .carousel-item h3 {
        width: 20em
    }

    .carousel-loader .carousel-item h1 {
        height: 2.5em;
        width: 10em
    }

    .carousel-loader .carousel-item h2 {
        height: 1.5em
    }

    .carousel-loader .carousel-item h3 {
        width: 30em;
        display: block
    }

    .carousel-loader .carousel-item .btn {
        height: 3.5em;
        width: 12em
    }
}

:root {
    --padding-menu-item: 0.75em 0.8em;
    --left-dropdown-menu: 100%;
    --right-dropdown-menu: unset
}

.dropdown {
    --rotate-icon: 0deg;
    user-select: none
}

    .dropdown.active {
        --rotate-icon: 180deg
    }

        .dropdown.active > .dropdown-menu {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto
        }

    .dropdown.dropdown-hidden .dropdown-menu, .dropdown.dropdown-hidden:before {
        display: none !important
    }

    .dropdown.dropdown-full {
        position: initial;
        display: contents
    }

        .dropdown.dropdown-full.active > .dropdown-toggle:before {
            content: var(--icon-menu)
        }

        .dropdown.dropdown-full.active > .dropdown-menu {
            transform: translateY(0) scale(1)
        }

        .dropdown.dropdown-full .dropdown-toggle {
            padding-inline: 1.2em
        }

        .dropdown.dropdown-full .dropdown-menu {
            border-radius: 0;
            box-shadow: 0 12px 10px rgba(0,0,0,.3882352941);
            transform: translateY(-10em) scale(.5)
        }

.dropdown-toggle:not(.no-arrow):after {
    content: "";
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: .8;
    transform: rotate(var(--rotate-icon));
    transition: transform .2s;
    margin-inline-start: auto;
    border-left: .35em solid transparent;
    border-right: .35em solid transparent;
    border-top: .35em solid currentColor
}

.dropdown-toggle * {
    pointer-events: none
}

.dropdown-menu {
    position: fixed;
    top: calc(100% + .25em);
    background-color: var(--color-main-light);
    border-radius: var(--border-radius-card);
    box-shadow: 0 7px 15px 5px var(--color-shadow);
    display: flex;
    flex-direction: column;
    max-height: max(100vh - 10px,10em);
    max-width: max(80vw,10em);
    width: fit-content;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .5em;
    pointer-events: none;
    transform: translateY(-3em);
    transition: opacity 150ms,transform 150ms;
    z-index: 99998
}

    .dropdown-menu.dropdown-menu-select {
        --padding-menu-item: 0.5em 0.8em;
        max-height: 28em
    }

    .dropdown-menu.bottom-up {
        top: unset;
        bottom: calc(100% + .25em);
        transform: translateY(3em);
        box-shadow: 0 -7px 15px 5px var(--color-shadow)
    }

    .dropdown-menu.small {
        --font-size: 90%
    }

    .dropdown-menu .dropdown-heading {
        font-weight: 500;
        font-size: var(--font-size);
        padding: .2em .5em;
        width: max-content;
        opacity: .6
    }

    .dropdown-menu hr {
        border: none;
        margin: .5em;
        opacity: .5;
        border-top: var(--size-unit) solid var(--color-border)
    }

    .dropdown-menu:has(.dropdown-menu) {
        overflow: initial
    }

    .dropdown-menu .dropdown-menu {
        position: absolute;
        top: 100%;
        left: var(--left-dropdown-menu);
        right: var(--right-dropdown-menu);
        min-width: fit-content;
        transform: translateY(-3.5em)
    }

        .dropdown-menu .dropdown-menu.active {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(-3em)
        }

    .dropdown-menu.glass .dropdown-menu {
        background: 0 0 !important;
        backdrop-filter: blur(10px) !important
    }

.dropdown-header {
    white-space: nowrap;
    font-weight: 700;
    padding: .8em;
    display: flex;
    place-items: center;
    gap: .5em
}

.dropdown-item {
    cursor: default;
    display: flex;
    align-items: center;
    gap: .5em;
    color: var(--color-text);
    padding: var(--padding-menu-item);
    background-color: transparent;
    border: none;
    border-radius: .25em;
    font-size: var(--font-size);
    width: max-content;
    min-width: 100%;
    user-select: none
}

    .dropdown-item.active:not(:disabled), .dropdown-item.selected:not(:disabled), .dropdown-item:focus:not(:disabled), .dropdown-item:hover:not(:disabled) {
        background-color: var(--color-primary-lighter);
        color: var(--color-primary)
    }

    .dropdown-item.active, .dropdown-item.selected {
        color: var(--color-primary) !important;
        background-color: var(--color-primary-light) !important
    }

        .dropdown-item.active > .dropdown-menu, .dropdown-item.selected > .dropdown-menu {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(-3.1em)
        }

    .dropdown-item:disabled {
        opacity: .5
    }

    .dropdown-item.checkbox {
        padding: .5em !important
    }

    .dropdown-item.checkable {
        padding-inline-start: 2.5em;
        position: relative
    }

        .dropdown-item.checkable.checked:after, .dropdown-item.checkable.checked:before {
            content: "";
            position: absolute;
            left: var(--position-start);
            right: var(--position-end)
        }

        .dropdown-item.checkable.checked:before {
            width: 1.5em;
            height: 1.5em;
            border: var(--size-unit) solid currentColor;
            border-radius: .25em;
            margin-inline-start: .5em;
            opacity: .5
        }

        .dropdown-item.checkable.checked:after {
            width: .7em;
            height: .34em;
            border-left: .15em solid currentColor;
            border-bottom: .15em solid currentColor;
            transform: rotate(315deg);
            margin-inline-start: .9em;
            margin-bottom: .2em
        }

    .dropdown-item:has(.dropdown-menu) {
        position: relative
    }

        .dropdown-item:has(.dropdown-menu):after {
            content: "";
            width: 0;
            height: 0;
            pointer-events: none;
            opacity: .8;
            transform: translateX(1em);
            border-top: .35em solid transparent;
            border-bottom: .35em solid transparent;
            border-left: .35em solid currentColor;
            margin-inline-start: auto;
            padding-inline-end: 1em
        }

html[dir=rtl] {
    --left-dropdown-menu: unset;
    --right-dropdown-menu: 100%
}

    html[dir=rtl] .dropdown-item:has(.dropdown-menu):after {
        border-right: .35em solid currentColor;
        border-left: none;
        transform: translateY(-1px) translateX(-1em)
    }

.context-menu {
    position: fixed;
    min-width: 14em;
    max-height: 100vh;
    transform-origin: 0 50%;
    transform: translateY(-1em)
}

:root {
    --height-input: 2.8em;
    --padding-input: 0em 1em;
    --width-input-checkbox: 1.55em;
    --gap-fields: 1em
}

[class*=fields-] {
    display: grid;
    gap: var(--gap-fields)
}

.form {
    display: flex;
    flex-direction: column;
    gap: 1em
}

.input-field, .input-readonly, input, select, textarea {
    outline: 0;
    border: var(--size-unit) solid var(--color-border);
    padding: var(--padding-input);
    min-height: var(--height-input);
    border-radius: var(--border-radius-input);
    font-size: var(--font-size);
    font-family: inherit;
    color: inherit;
    background-color: var(--color-input);
    transition: border-color .5s,background-color .5s
}

    .input-field:active:not(:disabled), .input-field:focus-within:not(:disabled), .input-field:focus:not(:disabled), .input-readonly:active:not(:disabled), .input-readonly:focus-within:not(:disabled), .input-readonly:focus:not(:disabled), input:active:not(:disabled), input:focus-within:not(:disabled), input:focus:not(:disabled), select:active:not(:disabled), select:focus-within:not(:disabled), select:focus:not(:disabled), textarea:active:not(:disabled), textarea:focus-within:not(:disabled), textarea:focus:not(:disabled) {
        border-color: var(--color-primary);
        outline: 2px solid var(--color-primary-light)
    }

    .input-field::placeholder, .input-readonly::placeholder, input::placeholder, select::placeholder, textarea::placeholder {
        color: var(--color-text-placeholder)
    }

    .input-field:disabled, .input-readonly:disabled, input:disabled, select:disabled, textarea:disabled {
        background-color: var(--color-main)
    }

    .input-field:hover, .input-readonly:hover, input:hover, select:hover, textarea:hover {
        border-color: var(--color-primary-light)
    }

textarea {
    border-radius: var(--border-radius-input);
    padding-block: .5em
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none
}

    select:not(:disabled) {
        cursor: pointer
    }

input[type=checkbox], input[type=radio] {
    --size-unit: .08em;
    appearance: none;
    min-width: var(--width-input-checkbox);
    width: var(--width-input-checkbox);
    max-width: var(--width-input-checkbox);
    min-height: var(--width-input-checkbox);
    height: var(--width-input-checkbox);
    max-height: var(--width-input-checkbox);
    padding: 0;
    margin: .25em;
    position: relative;
    display: flex;
    place-items: center;
    place-content: center
}

input[type=checkbox] {
    border-radius: .25em
}

    input[type=checkbox].indeterminate, input[type=checkbox]:checked, input[type=checkbox]:indeterminate {
        border-color: var(--color-primary);
        font-weight: 700;
        background-color: var(--color-primary) !important
    }

        input[type=checkbox].indeterminate:after, input[type=checkbox]:checked:after, input[type=checkbox]:indeterminate:after {
            content: "";
            position: absolute;
            width: .7em;
            height: .34em;
            border-left: .15em solid #fff;
            border-bottom: .15em solid #fff;
            transform: rotate(315deg);
            margin: 0;
            bottom: .55em;
            transition: border .25s,transform .25s
        }

        input[type=checkbox].indeterminate:after, input[type=checkbox]:indeterminate:after {
            border-left: none;
            transform: rotate(360deg);
            margin-bottom: .1em
        }

input[type=radio]:checked {
    border-color: var(--color-text)
}

input[type=radio] {
    border-radius: 50%
}

    input[type=radio]:checked:after {
        content: "";
        position: absolute;
        width: .75em;
        height: .75em;
        border-radius: 50%;
        background-color: var(--color-primary)
    }

.input-round {
    width: 100%;
    padding: .8em;
    border-radius: 2em;
    border: var(--size-unit) solid gray;
    outline: 0;
    font-family: inherit
}

.input-trim {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.input-file, .input-spinner {
    padding: 0 .2em
}

    .input-file button, .input-spinner button {
        width: 2em;
        height: 2em;
        background: 0 0
    }

        .input-file button:hover, .input-spinner button:hover {
            background-color: #efefef;
            color: var(--color-primary);
            box-shadow: none !important
        }

.input-spinner {
    display: flex
}

    .input-spinner button {
        display: flex;
        place-content: center;
        place-items: center;
        border: var(--size-unit) solid var(--color-text);
        background-color: transparent;
        padding: 0;
        width: 1em;
        height: 1em;
        margin: 1px;
        opacity: 0;
        transition: opacity .25s
    }

    .input-spinner:hover button {
        opacity: 1
    }

        .input-spinner:hover button:hover {
            border-color: var(--color-primary);
            background-color: var(--color-button)
        }

        .input-spinner:hover button:disabled {
            pointer-events: none;
            opacity: .5
        }

.input-iban {
    display: flex
}

    .input-iban input {
        border-radius: 0;
        text-align: center;
        flex: 1;
        padding: .6em 0;
        width: 4ch
    }

        .input-iban input:first-of-type {
            border-start-start-radius: var(--border-radius-input);
            border-end-start-radius: var(--border-radius-input)
        }

        .input-iban input:last-of-type {
            border-start-end-radius: var(--border-radius-input);
            border-end-end-radius: var(--border-radius-input);
            width: 1ch !important;
            max-width: 4ch
        }

        .input-iban input:focus {
            z-index: 1
        }

.input-group-btn {
    z-index: 1;
    box-shadow: none;
    margin-inline-start: -4px;
    border: var(--size-unit) solid var(--color-border);
    background-color: var(--color-input);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--border-radius-input);
    border-end-end-radius: var(--border-radius-input)
}

.input-date small {
    font-size: 80%
}

.input-date .days {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: .2rem
}

.input-date .btn.btn-sm.offset {
    background-color: rgba(255,201,182,.1294117647);
    opacity: .8
}

.input-date .btn.btn-sm.active {
    background-color: var(--color-primary);
    color: #fff
}

.input-field {
    display: flex;
    place-items: center;
    gap: .25em;
    border: var(--size-unit) solid var(--color-border);
    border-radius: var(--border-radius-input);
    background-color: var(--color-input);
    overflow: hidden;
    position: relative;
    padding: 0;
    min-width: 8em;
    min-height: var(--height-input);
    transition: border-color .5s,background-color .5s,color .5s
}

    .input-field:focus-within {
        border-color: var(--color-primary);
        outline: 2px solid var(--color-primary-light)
    }

    .input-field:not(.input-html) .dropdown, .input-field:not(.input-html) input[type=number], .input-field:not(.input-html) input[type=password], .input-field:not(.input-html) input[type=text], .input-field:not(.input-html) select, .input-field:not(.input-html) textarea {
        margin: 0;
        height: auto;
        border: none;
        outline: 0 !important;
        border-radius: 0;
        overflow: hidden;
        background-color: transparent;
        text-overflow: ellipsis;
        min-height: var(--height-input);
        position: relative;
        width: 100%
    }

    .input-field .input-divider {
        width: var(--size-unit);
        background: var(--color-border);
        height: 2.25em
    }

    .input-field .input-toggle {
        border: none;
        background: 0 0;
        border-right: 0;
        color: currentColor;
        cursor: pointer;
        position: absolute;
        inset: 0
    }

    .input-field .input-actions {
        --width-button-icon: 1.25em;
        display: flex;
        margin-inline-start: auto;
        padding-inline-end: .25em
    }

        .input-field .input-actions button {
            display: flex;
            place-content: center;
            place-items: center;
            width: calc(var(--height-input) - .75em);
            padding: 0;
            color: var(--color-text);
            background: 0 0;
            border: none;
            border-radius: .25em;
            cursor: pointer;
            transition: filter .15s;
            height: calc(var(--height-input) - .75em)
        }

            .input-field .input-actions button:hover {
                color: var(--color-primary);
                background-color: var(--color-primary-lighter)
            }

            .input-field .input-actions button:focus {
                color: #fff !important;
                outline-color: var(--color-primary-light) !important;
                background-color: var(--color-primary) !important
            }

        .input-field .input-actions .divider {
            width: var(--size-unit);
            height: 2em;
            background-color: var(--color-border);
            margin: 0 .25em
        }

        .input-field .input-actions .input-field {
            border: none;
            outline: 0
        }

    .input-field progress {
        position: absolute;
        bottom: -1px;
        width: calc(100% - 1em);
        height: 3px;
        margin: 0 auto;
        pointer-events: none
    }

    .input-field.dropdown:not(.input-date), .input-select, select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='.65' viewBox='0 0 1024 1024'%3E%3Cpath d='M620.6 562.3l36.2 36.2L512 743.3 367.2 598.5l36.2-36.2L512 670.9l108.6-108.6zM512 353.1l108.6 108.6 36.2-36.2L512 280.7 367.2 425.5l36.2 36.2L512 353.1z'/%3E%3C/svg%3E");
        background-repeat: no-repeat no-repeat;
        background-position: calc(100% - .25em) center;
        background-size: 2em;
        position: relative;
        min-height: var(--height-input);
        padding: var(--padding-input);
        padding-inline-end: 2.25em
    }

.checkbox {
    display: flex;
    align-items: center !important;
    gap: .2em;
    margin: 0;
    padding: 0 !important;
    user-select: none
}

.switch {
    display: flex;
    align-items: center !important;
    gap: .5em;
    user-select: none
}

    .switch input[type=checkbox] {
        width: 2.75em;
        height: 1.5em;
        min-width: 2.75em;
        min-height: 1.5em;
        border-radius: 100vmax;
        margin: 0;
        transition: background-color .5s
    }

        .switch input[type=checkbox]:after {
            content: "";
            border: none;
            position: absolute;
            top: 50%;
            width: .8em;
            height: .8em;
            border-radius: 50%;
            background-color: var(--color-border-dark);
            transform: translateY(-50%);
            transition: left .25s,border-radius .25s,height .25s;
            left: .25em
        }

        .switch input[type=checkbox]:checked:after {
            background-color: #fff;
            left: 1.55em
        }

        .switch input[type=checkbox].indeterminate:after, .switch input[type=checkbox]:indeterminate:after {
            background-color: #fff;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            border-radius: 0;
            height: .2em
        }

.instructions {
    flex-grow: 0
}

.validations {
    display: flex;
    flex-direction: column;
    gap: .5em
}

    .validations .validation-item {
        display: flex;
        align-items: center;
        gap: .5em;
        border-radius: .5em;
        cursor: pointer
    }

        .validations .validation-item:hover {
            text-decoration: underline
        }

.required:after {
    content: "*";
    color: var(--color-invalid)
}

.field, .field-float {
    --display-error: none;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: .25em
}

    .field label, .field-float label {
        user-select: none
    }

    .field textarea, .field-float textarea {
        resize: vertical
    }

    .field input, .field select, .field textarea, .field-float input, .field-float select, .field-float textarea {
        width: 100%
    }

    .field .field-indicator, .field-float .field-indicator {
        position: absolute;
        z-index: 9;
        pointer-events: none;
        bottom: -1.3em;
        padding: 0 .25em;
        right: var(--position-start);
        left: var(--position-end);
        opacity: .75
    }

    .field .field-validation, .field-float .field-validation {
        display: var(--display-error);
        position: absolute;
        z-index: 9;
        transition: opacity 1.2ms,bottom .2s;
        pointer-events: none;
        line-height: .9em;
        bottom: -.3em;
        color: var(--color-invalid);
        background: var(--color-input);
        white-space: nowrap;
        padding: 0 .25em;
        margin-inline-start: .75em;
        border-radius: .5em
    }

    .field-float.validation .field-validation, .field.validation .field-validation {
        z-index: 10
    }

    .field-float:has(.ng-touched):has(.ng-invalid), .field:has(.ng-touched):has(.ng-invalid) {
        --display-error: block
    }

        .field-float:has(.ng-touched):has(.ng-invalid) label:not(.novalidate), .field:has(.ng-touched):has(.ng-invalid) label:not(.novalidate) {
            color: var(--color-invalid)
        }

        .field-float:has(.ng-touched):has(.ng-invalid) input:not(.novalidate,[type=checkbox]), .field-float:has(.ng-touched):has(.ng-invalid) select:not(.novalidate), .field-float:has(.ng-touched):has(.ng-invalid) textarea:not(.novalidate), .field:has(.ng-touched):has(.ng-invalid) input:not(.novalidate,[type=checkbox]), .field:has(.ng-touched):has(.ng-invalid) select:not(.novalidate), .field:has(.ng-touched):has(.ng-invalid) textarea:not(.novalidate) {
            border-color: var(--color-invalid) !important;
            outline-color: var(--color-danger-light) !important
        }

    .field .field-hint, .field-float .field-hint {
        position: absolute;
        top: 100%;
        left: var(--position-end);
        right: var(--position-start)
    }

    .field-float .placeholder, .select .placeholder {
        position: absolute;
        left: var(--position-start) !important;
        right: var(--position-end) !important;
        top: -.8em;
        font-size: 90%;
        margin: 0 1em;
        color: var(--color-text-light);
        padding: 0 .15em;
        white-space: nowrap;
        background-color: transparent !important;
        z-index: 0;
        transition: color .5s;
        pointer-events: none
    }

        .field-float .placeholder:after, .select .placeholder:after {
            content: "";
            background-color: var(--color-input);
            position: absolute;
            top: .6em;
            left: 0;
            width: 100%;
            height: .4em;
            pointer-events: none;
            z-index: -1
        }

        .field-float .placeholder.bg-main-dark:after, .select .placeholder.bg-main-dark:after {
            background-color: var(--color-main-dark)
        }

.otp-field {
    direction: ltr !important
}

    .otp-field input {
        width: 2em;
        border-radius: .5rem;
        text-align: center;
        font-size: 26px;
        padding: .5rem;
        height: 3em;
        border-width: .1rem
    }

.form-disabled input, .form-disabled select {
    pointer-events: none
}

.form-disabled .required:after, .form-disabled .select:after {
    display: none
}

.filters {
    display: flex;
    flex-direction: column;
    gap: 1.75em;
    height: 100%
}

.field-container > .fields, .field-container > .filters {
    padding: .5em 1.5em 1.5em 1.5em
}

.fields {
    display: grid;
    gap: var(--gap-fields)
}

.form-fields {
    display: flex;
    flex-direction: column;
    gap: 1em
}

fieldset.fields {
    border-radius: var(--border-radius-card);
    border-width: var(--size-unit);
    border-color: var(--color-border)
}

    fieldset.fields legend {
        font-weight: 700;
        padding-inline: 1em
    }

.status-width {
    width: 10em
}

.pagination {
    --height-input: 2.5em
}

    .pagination .btn {
        padding: 0;
        height: var(--height-input);
        width: var(--height-input)
    }

    .pagination .field select {
        width: 7em
    }

    .pagination .field .placeholder {
        margin: 0 .5em;
        pointer-events: none
    }

.read-only .required:after {
    content: none
}

.read-only .input-actions button {
    display: none
}

.read-only .input-select, .read-only select {
    background-image: none
}

.read-only .no-actions {
    pointer-events: none
}

.read-only button.no-actions {
    display: none
}

.read-only [appDnd] {
    pointer-events: none !important
}

.item-template {
    pointer-events: none !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important
}

html[dir=rtl] .input-field.dropdown, html[dir=rtl] .input-select, html[dir=rtl] select {
    background-position: .25em center
}

.dark .input-field.dropdown:not(.input-date), .dark .input-select, .dark select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='.65' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23c0c2c8' d='M620.6 562.3l36.2 36.2L512 743.3 367.2 598.5l36.2-36.2L512 670.9l108.6-108.6zM512 353.1l108.6 108.6 36.2-36.2L512 280.7 367.2 425.5l36.2 36.2L512 353.1z'/%3E%3C/svg%3E")
}

@media (min-width:40em) {
    .input-iban {
        margin: 0
    }

        .input-iban input {
            padding: var(--padding-input);
            width: 5em;
            font-size: var(--font-size)
        }

            .input-iban input:last-of-type {
                width: 5em !important;
                max-width: 5em
            }
}

@media (min-width:75em) {
    .instructions.fixed {
        position: fixed
    }
}

table {
    --p-th: 0.75em .5em;
    --p-td: 0.7em .5em;
    width: 100%;
    border-collapse: collapse
}

    table.stripped tbody tr:nth-child(odd) {
        background-color: var(--bg-table-row-alt)
    }

    table.bordered {
        border: var(--size-unit) solid var(--color-border)
    }

        table.bordered td, table.bordered th {
            border: var(--size-unit) solid var(--color-border)
        }

    table.border-separate {
        border-collapse: separate
    }

    table.text-start td, table.text-start th {
        text-align: start !important
    }

    table.text-center td, table.text-center th {
        text-align: center !important
    }

thead th {
    user-select: none;
    transition: color .5s,border-color .5s
}

    thead th:hover {
        border-bottom-color: var(--color-primary);
        color: var(--color-primary)
    }

tbody tr {
    transition: background-color .5s
}

    tbody tr:hover {
        background-color: var(--color-primary-lighter) !important
    }

    tbody tr.selected {
        background-color: var(--color-primary-lighter) !important;
        outline: var(--size-unit) dashed var(--color-primary);
        outline-offset: -1px
    }

    tbody tr.active {
        color: var(--color-primary)
    }

    tbody tr.tr-view.tr-view-line td {
        white-space: nowrap;
        text-overflow: ellipsis;
        width: fit-content
    }

th {
    padding: var(--p-th);
    font-weight: 500;
    text-align: center;
    border: var(--size-unit) solid var(--color-border-light)
}

    th:first-child {
        border-inline-start: none
    }

    th:last-child {
        border-inline-end: none
    }

    th.sortable {
        cursor: pointer;
        white-space: nowrap
    }

    th.th-sn {
        max-width: 4em;
        width: 4em
    }

    th.th-id {
        max-width: 5em;
        width: 5em
    }

        th.th-id .checkbox input {
            margin: 0
        }

    th.th-mobile {
        max-width: 6em;
        width: 6em
    }

    th.th-number {
        max-width: 6em;
        width: 6em
    }

    th.th-status {
        max-width: 8em;
        width: 8em
    }

    th.th-name {
        max-width: 12em;
        width: 12em
    }

    th.th-img {
        max-width: 3em;
        width: 3em
    }

    th.tooltip:hover:after, th.tooltip:hover:before {
        --scale: 1;
        --bottom: 0em
    }

    th.tooltip:after, th.tooltip:before {
        --scale: 0;
        --bottom: 3em;
        position: absolute;
        content: "";
        transform: scale(var(--scale));
        transition: transform .25s
    }

    th.tooltip:before {
        content: attr(data-tooltip);
        padding: 1em;
        width: max-content;
        max-width: 100%;
        top: 7em;
        border-radius: .5em;
        text-align: center;
        z-index: 10;
        color: var(--color-green);
        background-color: var(--color-hover);
        box-shadow: 0 0 1em var(--color-shadow);
        left: 50%;
        transform: translateX(-50%) translateY(var(--bottom)) scale(var(--scale));
        border: var(--size-unit) solid var(--color-1)
    }

td {
    padding: var(--p-td);
    text-overflow: ellipsis;
    cursor: default;
    max-width: 17em
}

    td.td-img {
        padding: 0;
        position: relative;
        text-align: center
    }

        td.td-img img {
            width: 2.5em;
            height: 2.5em;
            vertical-align: middle
        }

        td.td-img span {
            position: absolute;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%
        }

    td.td-action {
        position: relative
    }

        td.td-action button {
            position: absolute;
            inset: 0;
            border-radius: 0;
            border: none;
            background-color: transparent;
            color: var(--color-text);
            cursor: pointer
        }

            td.td-action button:hover {
                background-color: var(--color-button)
            }

            td.td-action button.disabled {
                opacity: 1
            }

.table-container {
    overflow: auto
}

.table-wrap-cells td, .table-wrap-cells th {
    white-space: initial
}

.table-sticky-header thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--color-main-light);
    box-shadow: 0 1px 1px var(--color-border)
}

    .table-sticky-header thead th {
        font-weight: 500;
        border-block: none
    }

.table-details {
    --p-th: 1em;
    --p-td: 1em
}

    .table-details.sm, .table-details.small, .table-details.table-details-small {
        --p-th: .5em;
        --p-td: 0.5em
    }

        .table-details.sm th, .table-details.small th, .table-details.table-details-small th {
            opacity: .75;
            font-weight: 400
        }

    .table-details.hovered tbody tr:hover {
        background-color: var(--color-primary-lighter)
    }

    .table-details td, .table-details th {
        border: none
    }

    .table-details tr {
        border-bottom: var(--size-unit) solid var(--color-border-light)
    }

    .table-details.no-end-border tr:last-of-type {
        border-bottom: none
    }

.sort-asc, .sort-desc {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none
}

    .sort-asc:after, .sort-asc:before, .sort-desc:after, .sort-desc:before {
        font-style: normal
    }

    .sort-asc:before {
        color: #c7c6c5;
        content: "↑"
    }

    .sort-asc:after {
        color: var(--color-primary);
        content: "↓"
    }

    .sort-desc:before {
        color: var(--color-primary);
        content: "↑"
    }

    .sort-desc:after {
        color: #c7c6c5;
        content: "↓"
    }

.tab-control {
    --background-tab-control: var(--color-main-light);
    --widt-border: 0;
    --border-block-start-item: var(--width-border) solid transparent;
    --border-block-end-item: var(--width-border) solid transparent;
    --border-inline-start-item: var(--width-border) solid transparent;
    --border-inline-end-item: var(--width-border) solid transparent;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%
}

    .tab-control.shadow .tab-item.active {
        box-shadow: 0 0 3px 0 var(--color-shadow)
    }

    .tab-control.shadow .tab-content.active {
        box-shadow: 0 1px 3px -1px var(--color-shadow)
    }

    .tab-control .tab-control-nav {
        margin-bottom: calc(var(--size-unit) * -1);
        display: flex;
        padding-inline: var(--border-radius-card);
        transition: background-color .5s
    }

    .tab-control .tab-item {
        color: var(--color-text);
        cursor: default;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .75em 1em;
        border-block-start: var(--border-block-start-item);
        border-block-end: var(--border-block-end-item);
        border-inline-start: var(--border-inline-start-item);
        border-inline-end: var(--border-inline-end-item);
        background: 0 0;
        outline: 0;
        position: relative;
        white-space: nowrap;
        margin: 0;
        user-select: none;
        font-weight: 500;
        border-start-start-radius: var(--border-radius-button);
        border-start-end-radius: var(--border-radius-button)
    }

        .tab-control .tab-item.tab-responsive {
            display: none
        }

        .tab-control .tab-item.tab-file {
            padding: .5em 1.5em
        }

        .tab-control .tab-item.tab-brand {
            height: 100%;
            padding-block: 0;
            gap: .2em;
            font-size: 1em
        }

            .tab-control .tab-item.tab-brand i {
                font-size: 1.05em
            }

        .tab-control .tab-item.tab-icon {
            width: 2.5em;
            font-size: 1.05em;
            height: 100%;
            line-height: 1.05em;
            padding-block: 0
        }

        .tab-control .tab-item.tab-orange {
            background-color: rgba(255,132,2,.0901960784)
        }

            .tab-control .tab-item.tab-orange.active {
                color: #dc5000 !important
            }

            .tab-control .tab-item.tab-orange:before {
                content: "";
                position: absolute;
                top: 0;
                width: 100%;
                height: .2em;
                background-color: #ee7d3d
            }

        .tab-control .tab-item.tab-blue {
            background-color: rgba(2,113,255,.0784313725)
        }

            .tab-control .tab-item.tab-blue.active {
                color: #0a61d1 !important
            }

            .tab-control .tab-item.tab-blue:before {
                content: "";
                position: absolute;
                top: 0;
                width: 100%;
                height: .2em;
                background-color: #5194e9
            }

        .tab-control .tab-item.tab-default {
            background-color: rgba(0,0,0,.231372549)
        }

            .tab-control .tab-item.tab-default.active {
                color: #000
            }

            .tab-control .tab-item.tab-default:before {
                content: "";
                position: absolute;
                top: 0;
                width: 100%;
                height: .2em;
                background-color: rgba(0,0,0,.231372549)
            }

        .tab-control .tab-item:hover:not(:disabled) {
            background-color: rgba(0,0,0,.0666666667)
        }

        .tab-control .tab-item:focus:not(:disabled) {
            background-color: rgba(0,0,0,.2)
        }

        .tab-control .tab-item:disabled {
            opacity: .5
        }

        .tab-control .tab-item.active {
            color: var(--color-primary) !important;
            background-color: var(--background-tab-control) !important;
            border-color: var(--color-border);
            border-block-end-color: var(--background-tab-control)
        }

        .tab-control .tab-item :not(button,a) {
            pointer-events: none
        }

    .tab-control .tab-content {
        padding: .2em .4em .1em .4em;
        height: 100%;
        gap: .5em;
        transform: translateX(-4em);
        display: none;
        opacity: 0;
        z-index: 1;
        background-color: var(--background-tab-control);
        transition: transform .25s;
        flex: 1;
        border-radius: var(--border-radius-card)
    }

        .tab-control .tab-content.active {
            opacity: 1;
            display: block;
            transform: none
        }

        .tab-control .tab-content:first-of-type {
            background-color: #ff0
        }

    .tab-control.bg-main {
        background-color: transparent !important
    }

        .tab-control.bg-main .tab-content.active, .tab-control.bg-main .tab-item.active {
            background-color: var(--color-main) !important
        }

.tab-control-bottom {
    flex-direction: column-reverse
}

    .tab-control-bottom > .tab-control-nav {
        margin: calc(var(--size-unit) * -1) 0 0
    }

        .tab-control-bottom > .tab-control-nav .tab-item {
            border-radius: 0;
            border-end-start-radius: var(--border-radius-button);
            border-end-end-radius: var(--border-radius-button)
        }

            .tab-control-bottom > .tab-control-nav .tab-item.active {
                border-color: var(--color-border);
                border-block-start-color: var(--background-tab-control)
            }

.tab-control-start {
    flex-direction: row
}

    .tab-control-start > .tab-control-nav {
        margin: 0;
        margin-inline-end: calc(var(--size-unit) * -1);
        flex-direction: column;
        height: 100%;
        padding: 0;
        padding-block: var(--border-radius-card)
    }

        .tab-control-start > .tab-control-nav .tab-item {
            border-radius: 0;
            border-start-start-radius: var(--border-radius-button);
            border-end-start-radius: var(--border-radius-button)
        }

            .tab-control-start > .tab-control-nav .tab-item.active {
                border-color: var(--color-border);
                border-inline-end-color: var(--background-tab-control)
            }

    .tab-control-start .tab-content {
        flex: 1
    }

.tab-control-end {
    flex-direction: row-reverse
}

    .tab-control-end > .tab-control-nav {
        margin: 0;
        margin-inline-start: calc(var(--size-unit) * -1);
        flex-direction: column;
        height: 100%;
        padding: 0;
        padding-block: var(--border-radius-card)
    }

        .tab-control-end > .tab-control-nav .tab-item {
            border-radius: 0;
            border-start-end-radius: var(--border-radius-button);
            border-end-end-radius: var(--border-radius-button)
        }

            .tab-control-end > .tab-control-nav .tab-item.active {
                border-color: var(--color-border);
                border-inline-start-color: var(--background-tab-control)
            }

    .tab-control-end .tab-content {
        flex: 1
    }

.tab-control-bordered, .tab-control.bordered {
    --width-border: var(--size-unit)
}

    .tab-control-bordered > .tab-control-nav, .tab-control.bordered > .tab-control-nav {
        z-index: 2
    }

    .tab-control-bordered .tab-content, .tab-control.bordered .tab-content {
        border: var(--width-border) solid var(--color-border);
        overflow: auto
    }

    .tab-control-bordered .tab-item.active, .tab-control.bordered .tab-item.active {
        position: relative
    }

        .tab-control-bordered .tab-item.active:after, .tab-control.bordered .tab-item.active:after {
            content: "";
            position: absolute
        }

.tab-control-main-light {
    --background-tab-control: var(--color-main)
}

@media (min-width:68em) {
    .tab-control .tab-item.tab-responsive {
        display: flex
    }
}

.tab-control-vertical .tab-item {
    writing-mode: vertical-rl
}

.tab-control-vertical .tab-item {
    border-radius: 0;
    border-start-start-radius: var(--border-radius-button);
    border-end-start-radius: var(--border-radius-button)
}

    .tab-control-vertical .tab-item.active {
        border-color: var(--color-border);
        border-inline-end-color: var(--background-tab-control)
    }

.tab-control-vertical.tab-control-bottom .tab-item {
    border-radius: 0;
    border-start-end-radius: var(--border-radius-button);
    border-end-end-radius: var(--border-radius-button)
}

    .tab-control-vertical.tab-control-bottom .tab-item.active {
        border-color: var(--color-border);
        border-inline-start-color: var(--background-tab-control)
    }

.tab-control-vertical.tab-control-start .tab-item {
    border-radius: 0;
    border-end-start-radius: var(--border-radius-button);
    border-end-end-radius: var(--border-radius-button)
}

    .tab-control-vertical.tab-control-start .tab-item.active {
        border-color: var(--color-border);
        border-block-start-color: var(--background-tab-control)
    }

.tab-control-vertical.tab-control-end .tab-item {
    border-radius: 0;
    border-start-start-radius: var(--border-radius-button);
    border-start-end-radius: var(--border-radius-button)
}

    .tab-control-vertical.tab-control-end .tab-item.active {
        border-color: var(--color-border);
        border-block-end-color: var(--background-tab-control)
    }

.modal {
    --border-raidus-modal: 0;
    --place-modal-content-x: center;
    --place-modal-content-y: center;
    --height-modal-content: auto;
    --place-modal-top: 0;
    --place-modal-bottom: 0;
    --place-modal-right: 0;
    --place-modal-left: unset;
    --margin-modal-content: 0;
    --max-height-modal-content: 100vh;
    --width-modal-content: 32em;
    --max-width-modal-content: 100vw;
    --transform-modal-content: translateY(20em);
    --modal-content-shadow: 0px 1px 2px var(--color-shadow);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s
}

    .modal.modal-glass .modal-content {
        background: 0 0;
        overflow: hidden
    }

        .modal.modal-glass .modal-content:after, .modal.modal-glass .modal-content:before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1
        }

        .modal.modal-glass .modal-content:after {
            backdrop-filter: blur(5px)
        }

        .modal.modal-glass .modal-content:before {
            background: radial-gradient(var(--color-primary-light),var(--color-blur-light))
        }

        .modal.modal-glass .modal-content .modal-footer {
            background: var(--color-blur-light)
        }

        .modal.modal-glass .modal-content .card {
            border: none;
            background: var(--color-blur-light)
        }

    .modal.modal-print {
        --padding-input: 0.15em 0.5em;
        --height-input: 32px;
        display: none
    }

        .modal.modal-print:last-child {
            display: block
        }

        .modal.modal-print .modal-header {
            background-color: var(--color-main);
            border-bottom: var(--size-unit) solid var(--color-border-dark);
            height: var(--menubar-height)
        }

            .modal.modal-print .modal-header input, .modal.modal-print .modal-header select {
                width: 7em
            }

        .modal.modal-print .modal-content {
            background-color: var(--color-main-dark)
        }

    .modal .modal-header {
        display: flex;
        place-items: center;
        gap: .5em;
        user-select: none;
        padding: .5em;
        min-height: 4em
    }

        .modal .modal-header > h1 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-inline-start: .5em;
            font-size: 120%;
            font-weight: 400
        }

    .modal .modal-content {
        position: absolute;
        inset: 0;
        opacity: 0;
        display: flex;
        flex-direction: column;
        height: var(--height-modal-content);
        width: var(--width-modal-content);
        margin-inline-start: auto;
        background-color: var(--color-main-light);
        border-radius: var(--border-raidus-modal);
        box-shadow: 0 0 10px 4px var(--color-shadow) !important;
        transform: var(--transform-modal-content);
        transition: transform .2s,width .2s,height .2s
    }

        .modal .modal-content .modal-body {
            padding: 1em;
            height: 100%;
            overflow: auto
        }

        .modal .modal-content .modal-footer {
            display: flex;
            place-items: center;
            gap: .5em;
            padding: 1em;
            bottom: 0;
            background-color: var(--color-main);
            margin-top: auto;
            border-radius: var(--border-radius-card)
        }

            .modal .modal-content .modal-footer.primary {
                background-color: var(--color-primary-lighter)
            }

    .modal .btn-maximize {
        display: flex
    }

    .modal .btn-restore {
        display: none
    }

    .modal .btn-reset {
        display: none
    }

    .modal.show {
        opacity: 1;
        pointer-events: auto
    }

        .modal.show > .backdrop {
            background-color: rgba(0,0,0,.2784313725)
        }

        .modal.show > .modal-content {
            transform: none
        }

    .modal.full .btn-maximize {
        display: none
    }

    .modal.full .btn-restore {
        display: flex
    }

    .modal.full > .modal-content > .modal-header .modal-resize-options {
        outline: 2px solid var(--color-primary-light);
        border-radius: .25em;
        background: var(--color-primary-light)
    }

    .modal.center {
        --border-raidus-modal: 0.75em
    }

        .modal.center > .modal-content > .modal-header .screen-center {
            background-color: var(--color-primary)
        }

    .modal.start {
        --transform-modal-content: translateX(calc(var(--direction-offset) * -100%))
    }

        .modal.start > .modal-content > .modal-header .screen-start {
            background-color: var(--color-primary)
        }

    .modal.end {
        --transform-modal-content: translateX(calc(var(--direction-offset) * 100%))
    }

        .modal.end > .modal-content > .modal-header .screen-end {
            background-color: var(--color-primary)
        }

    .modal.top {
        --transform-modal-content: translateY(-100%)
    }

        .modal.top > .modal-content > .modal-header .screen-top {
            background-color: var(--color-primary)
        }

    .modal.bottom {
        --transform-modal-content: translateY(100%)
    }

        .modal.bottom > .modal-content > .modal-header .screen-bottom {
            background-color: var(--color-primary)
        }

.btn-modal {
    padding: .25em .5em;
    background-color: transparent;
    border: none;
    height: 3em;
    min-height: 3em;
    min-width: 3em;
    outline: var(--size-unit) solid transparent;
    transition: outline-color .1s;
    box-shadow: none
}

    .btn-modal:disabled {
        opacity: .5
    }

    .btn-modal i, .btn-modal svg {
        opacity: .6
    }

    .btn-modal.btn-square {
        width: 3em
    }

    .btn-modal.btn-bordered {
        outline-color: var(--color-border)
    }

    .btn-modal.btn-danger {
        color: var(--color-danger)
    }

    .btn-modal:hover:not(:disabled) {
        outline-color: var(--color-outline)
    }

        .btn-modal:hover:not(:disabled) i, .btn-modal:hover:not(:disabled) svg {
            opacity: 1
        }

    .btn-modal:focus, .btn-modal:focus-within {
        outline-width: 2px
    }

.modal-resize-options {
    display: grid;
    gap: .5em;
    grid-template-rows: 3em 6em 3em;
    grid-template-columns: 3em 6em 3em;
    grid-template-areas: ". screen-top ." "screen-start screen-center screen-end" ". screen-bottom ."
}

    .modal-resize-options .btn:hover {
        background-color: var(--color-primary-light)
    }

    .modal-resize-options .screen-top {
        grid-area: screen-top
    }

    .modal-resize-options .screen-center {
        grid-area: screen-center
    }

    .modal-resize-options .screen-bottom {
        grid-area: screen-bottom
    }

    .modal-resize-options .screen-start {
        grid-area: screen-start
    }

    .modal-resize-options .screen-end {
        grid-area: screen-end
    }

.backdrop {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    transition: background-color .5s !important
}

:root {
    --height-window-header: 4em;
    --height-window-tool-header: var(--height-window-header);
    --border-radius-window-tool-header: 0;
    --size-window-icon: 1.25em;
    --background-window-headerbar: #efefef;
    --background-window-headerbar-focused: #f3d382;
    --background-window-toolbar: #dfdfdf;
    --color-window-headerbar: var(--color-text);
    --padding-window-content: .75em;
    --box-shadow-window: 0px 7px 26px -6px #0000004d;
    --color-window-active: var(--color-primary);
    --border-radius-window: .5em;
    --font-size-window-header: 105%
}

.window {
    position: fixed;
    z-index: 999;
    background-color: var(--color-main);
    box-shadow: var(--box-shadow-window);
    display: flex;
    flex-direction: column;
    min-width: 200px;
    min-height: 200px;
    user-select: none;
    overflow: hidden;
    border-radius: var(--border-radius-window);
    transform-origin: 50% 50%;
    transition: opacity .5s,width .5s,height .5s,left .5s,top .5s !important;
    pointer-events: auto;
    cursor: default;
    outline: var(--size-unit) solid var(--color-border-dark)
}

    .window.window-tool {
        --background-window-headerbar: var(--color-window-active);
        --box-shadow-window: 0px 7px 26px -6px var(--color-primary);
        border: var(--size-unit) solid var(--color-window-active);
        outline: 0
    }

        .window.window-tool .window-resize {
            pointer-events: auto
        }

    .window.moved-resized {
        transition: none !important
    }

    .window.minimized {
        height: var(--height-window-header) !important;
        width: initial !important;
        top: calc(100% - 4.25em) !important;
        left: 2em !important;
        max-height: initial !important;
        min-height: initial !important;
        overflow: hidden
    }

        .window.minimized .window-content {
            display: none;
            overflow: hidden
        }

        .window.minimized .btn-control-minimize, .window.minimized .btn-control-normal {
            display: none !important
        }

        .window.minimized .btn-control-restore {
            display: flex !important
        }

    .window.maximized {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        top: 0 !important;
        border-width: 0;
        border-radius: 0
    }

        .window.maximized .btn-control-maximize {
            display: none !important
        }

        .window.maximized .btn-control-normal {
            display: flex !important
        }

    .window.closed, .window.closed * {
        opacity: 0 !important;
        pointer-events: none !important
    }

    .window.glass {
        background-color: transparent;
        backdrop-filter: blur(12px)
    }

    .window.background-gray {
        background-color: #efeff0
    }

    .window .toolbar {
        top: 0;
        padding: .2em;
        display: flex;
        place-items: stretch;
        background-color: var(--color-main);
        border: none
    }

        .window .toolbar a, .window .toolbar button {
            border-radius: .15em;
            height: 2em
        }

            .window .toolbar a i, .window .toolbar button i {
                color: currentColor
            }

    .window .window-content {
        flex: 1;
        height: 100%;
        overflow: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: var(--padding-window-content)
    }

.window-header {
    display: flex;
    place-items: center;
    gap: .5em;
    user-select: none;
    padding: .5em;
    min-height: 4em
}

    .window-header > h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-inline-start: .5em;
        font-size: 120%;
        font-weight: 400;
        pointer-events: none
    }

    .window-header .btn-control-normal, .window-header .btn-control-restore {
        display: none !important
    }

.window-dialog {
    pointer-events: auto !important
}

    .window-dialog:before {
        content: "";
        background-color: rgba(255,255,255,0);
        position: fixed;
        inset: 0
    }

    .window-dialog .window-content, .window-dialog .window-header {
        z-index: 1
    }

.window-tool {
    --height-window-header: 3em;
    --height-window-tool-header: 25px;
    --border-radius-window: .25em;
    --border-radius-window-tool-header: 4px;
    user-select: none;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

    .window-tool.docked .btn-control-maximize, .window-tool.docked .btn-control-minimize {
        display: none !important
    }

    .window-tool.docked:focus-within .window-header {
        background-color: var(--background-window-headerbar-focused);
        color: #343434
    }

    .window-tool .window-header {
        min-height: var(--height-window-header);
        padding: 0 .25em;
        gap: .25rem
    }

        .window-tool .window-header h1 {
            font-size: 95%
        }

        .window-tool .window-header button {
            --width-button-icon: 1.25em;
            width: 2em;
            height: 2em;
            min-width: 2em;
            min-height: 2em;
            padding: 0
        }

            .window-tool .window-header button.btn-control-pin {
                --width-button-icon: 1.15em
            }

    .window-tool .window-content {
        padding: 0;
        display: flex;
        flex-direction: column;
        flex: 1;
        border-top: 1px solid var(--color-border)
    }

    .window-tool .filter, .window-tool .tools {
        display: flex;
        place-items: center;
        padding: 0;
        gap: 0;
        flex-wrap: nowrap
    }

    .window-tool .tools {
        --height-window-tool-header: 2.25em;
        padding: 5px;
        gap: 5px
    }

    .window-tool .filter {
        --color-input: transparent;
        place-items: center;
        padding-inline-end: .25em
    }

        .window-tool .filter input[type=number], .window-tool .filter input[type=text], .window-tool .filter select {
            background-color: var(--color-input);
            border: none;
            border-radius: 0;
            width: 100%;
            min-height: 2em;
            height: 2em
        }

        .window-tool .filter:focus-within {
            outline-offset: -2px;
            outline: var(--outline-focus)
        }

            .window-tool .filter:focus-within input {
                outline: 0
            }

    .window-tool .window-resize {
        pointer-events: none
    }

.window-resizer {
    position: absolute;
    height: 200px;
    width: 200px;
    top: 100px;
    left: 100px;
    outline: .1em dashed #0058ff
}

.window-resize {
    position: absolute;
    background-color: transparent;
    z-index: 10;
    width: 100%;
    height: 100%
}

.window-resize-n {
    height: 8px;
    top: -3px;
    cursor: n-resize
}

.window-resize-w {
    width: 8px;
    left: -3px;
    cursor: w-resize
}

.window-resize-e {
    width: 8px;
    right: -3px;
    cursor: e-resize
}

.window-resize-s {
    height: 8px;
    bottom: -3px;
    cursor: s-resize
}

.window-resize-ne {
    height: 10px;
    width: 10px;
    top: -2px;
    right: -2px;
    cursor: ne-resize
}

.window-resize-nw {
    height: 10px;
    width: 10px;
    top: -2px;
    left: -2px;
    cursor: nw-resize
}

.window-resize-sw {
    height: 10px;
    width: 10px;
    bottom: -2px;
    left: -2px;
    cursor: sw-resize
}

.window-resize-se {
    height: 10px;
    width: 10px;
    bottom: -2px;
    right: -2px;
    cursor: se-resize
}

.window.resize-none .window-resize {
    display: none
}

.dock-button {
    display: flex;
    place-content: center;
    place-items: center;
    width: 2.5em;
    height: 2.5em;
    opacity: .75;
    border: var(--size-unit) solid var(--color-primary);
    background-color: var(--color-button);
    z-index: 99999;
    outline-offset: -2px;
    border-radius: 3px;
    box-shadow: 0 0 18px var(--color-shadow);
    transition: box-shadow .2s,outline-offset .1s
}

    .dock-button:before {
        content: "";
        width: 0;
        height: 0;
        background-color: rgba(37,78,240,.4117647059);
        top: var(--drop-area-top);
        bottom: var(--drop-area-bottom);
        outline: 3px solid var(--color-window-active);
        outline-offset: -3px;
        position: absolute;
        z-index: -1;
        transition: width .2s,height .2s;
        pointer-events: none
    }

    .dock-button:hover {
        background-color: var(--color-window-active);
        box-shadow: 0 0 18px var(--color-text);
        border-color: currentColor
    }

        .dock-button:hover:before {
            width: 100%;
            height: 100%
        }

    .dock-button span {
        display: block;
        width: 1.5em;
        height: 1em;
        border: var(--size-unit) solid #000;
        border-top-width: 2px;
        background-color: #fff
    }

        .dock-button span.vertical {
            width: 1em;
            height: 1.5em
        }

.dock-area {
    position: relative;
    overflow: hidden
}

    .dock-area .dock-content {
        position: absolute;
        inset: 0;
        opacity: 0;
        display: flex;
        place-content: center;
        place-items: center;
        user-select: none;
        pointer-events: none;
        z-index: 9999;
        transition: opacity .2s
    }

    .dock-area.p-0 .tab-content {
        padding: 0;
        overflow: hidden
    }

details.list {
    --icon-closed: url(https://cdn.samabase.com/1.0.0/svg/folder.svg);
    --icon-opened: url(https://cdn.samabase.com/1.0.0/svg/folder_opened.svg);
    overflow: hidden;
    position: relative
}

    details.list summary {
        padding: .25em
    }

        details.list summary::marker {
            content: none
        }

        details.list summary i {
            background-image: var(--icon-closed)
        }

    details.list[open] > summary i {
        background-image: var(--icon-opened) !important
    }

    details.list .list {
        overflow: hidden
    }

    details.list::before {
        content: "";
        position: absolute;
        top: 0;
        width: 1px;
        height: calc(100% - 1px);
        left: var(--position-start);
        right: var(--position-end);
        margin-inline: 13px;
        z-index: 1;
        border-inline-start: 1px dotted currentColor;
        opacity: .25
    }

    details.list .list-item {
        padding-block: .25em !important;
        padding-inline-start: 2.5em !important;
        position: relative;
        transition: none;
        display: flex;
        place-items: center;
        gap: .5em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

        details.list .list-item.active {
            font-weight: 500
        }

            details.list .list-item.active::before {
                background-color: var(--color-primary-hover)
            }

        details.list .list-item i {
            display: block;
            width: 18px;
            height: 18px;
            min-width: 18px;
            min-height: 18px
        }

            details.list .list-item i.icon-file {
                background-image: url(https://cdn.samabase.com/1.0.0/svg/file_type_text.svg)
            }

        details.list .list-item:before {
            content: "";
            position: absolute;
            inset: 0
        }

        details.list .list-item:after {
            content: "";
            position: absolute;
            width: 1em;
            height: 1px;
            border-block-start: 1px dotted currentColor;
            opacity: .25;
            top: calc(50% - 1px);
            left: var(--position-start);
            right: var(--position-end);
            margin-inline-start: 15px
        }

.dark {
    --box-shadow-window: rgba(0, 0, 0, 0.03) 0px -1px 0px inset,rgb(0 0 0 / 91%) 0 1px 10px,rgb(0 0 0 / 62%) 0 -8px 36px
}

@media print {
    .window {
        display: none
    }
}

.accordion {
    --grid-template-rows: 0fr;
    --rotate-icon: 0deg
}

    .accordion > button {
        color: currentColor;
        background-color: transparent;
        border-radius: var(--border-radius-button);
        cursor: pointer;
        padding: .75em
    }

    .accordion .title {
        width: 100%;
        pointer-events: none;
        user-select: none;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important
    }

        .accordion .title a, .accordion .title button {
            pointer-events: auto
        }

    .accordion.active, .accordion.show {
        --grid-template-rows: 1fr;
        --rotate-icon: 180deg
    }

    .accordion .accordion-toggle:not(.no-arrow):after {
        content: "";
        width: 0;
        height: 0;
        pointer-events: none;
        opacity: .8;
        transform: rotate(var(--rotate-icon));
        transition: transform .4s;
        margin-inline-start: auto;
        border-left: .35em solid transparent;
        border-right: .35em solid transparent;
        border-top: .35em solid currentColor
    }

    .accordion .accordion-content {
        display: grid;
        grid-template-rows: var(--grid-template-rows);
        overflow: hidden;
        transition: grid-template-rows .4s
    }

    .accordion .expandable {
        min-height: 0;
        overflow: hidden
    }

    .accordion.card {
        padding: .25em
    }

        .accordion.card .accordion-toggle {
            border-radius: .5em
        }

.progress-bar.fixed {
    position: fixed;
    z-index: 9999;
    top: 0;
    margin: 0
}

.progress-bar {
    --background-progressbar: var(--color-border);
    --width-progressbar: 0;
    width: 100%;
    height: 4px
}

    .progress-bar:after {
        content: "";
        width: 100%;
        height: 3px;
        background: var(--background-progressbar);
        border-radius: 100vmax;
        display: block
    }

    .progress-bar.progress:after {
        animation: progressing .5s infinite linear
    }

    .progress-bar.moving:after {
        --width-progressbar: 10rem;
        animation: moving .5s infinite linear
    }

    .progress-bar.green {
        --background-progressbar: var(--color-3)
    }

    .progress-bar.blue {
        --background-progressbar: blue
    }

    .progress-bar.gradient {
        --background-progressbar: linear-gradient(45deg, var(--color-primary), var(--color-secondary))
    }

    .progress-bar.gradient-maroon-green {
        --background-progressbar: linear-gradient(45deg, var(--color-primary), var(--color-3))
    }

    .progress-bar.gradient-blue {
        --background-progressbar: linear-gradient(45deg, #8585ff, #4848ff, #0000ff)
    }

    .progress-bar.gradient-green {
        --background-progressbar: linear-gradient(45deg, var(--color-3), var(--color-2), var(--color-1))
    }

    .progress-bar.pattern-green:after {
        background-image: linear-gradient(90deg,transparent 50%,var(--color-2) 50%);
        background-size: 50px 50px
    }

@keyframes progressing {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@keyframes moving {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(100%)
    }
}

:root {
    --ruler-size: 1.5em;
    --ruler-num-c: #888;
    --ruler-num-fz: 10px;
    --ruler-num-pi: 0.75ch;
    --ruler-x: 1;
    --ruler-y: 1;
    --ruler-unit: max(.07em, 1px);
    --ruler1-h: .5em;
    --ruler1-space: 5;
    --ruler2-h: 1.5em;
    --ruler2-space: 50
}

.paper-page {
    transition: transform .4s
}

.ruler {
    position: sticky;
    top: 0;
    z-index: 4
}

.ruler-top {
    height: var(--ruler-size);
    border-bottom: var(--size-unit) solid var(--color-border-dark)
}

    .ruler-top .ruler-content {
        width: var(--paper-width);
        height: 100%;
        background-color: var(--color-main-light);
        margin: 0 auto;
        position: absolute;
        inset: 0
    }

    .ruler-top:after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient(90deg,var(--color-border-dark) 0 var(--ruler-unit),transparent 0),linear-gradient(90deg,var(--color-border-dark) 0 var(--ruler-unit),transparent 0);
        background-repeat: repeat-x;
        background-size: calc(var(--ruler-unit) * var(--ruler1-space)) var(--ruler1-h),calc(var(--ruler-unit) * var(--ruler2-space)) var(--ruler2-h);
        margin-inline-start: calc(var(--ruler-size) - 1px)
    }

.ruler-left {
    position: absolute;
    left: var(--position-start);
    right: var(--position-end);
    width: var(--ruler-size);
    height: calc(var(--paper-height) + var(--ruler-size) + var(--ruler-size) + 2em);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 0;
    border-inline-end: var(--size-unit) solid var(--color-border-dark)
}

    .ruler-left .ruler-content {
        width: 100%;
        height: var(--paper-height);
        background-color: var(--color-main-light);
        margin: auto 0;
        position: absolute;
        inset: 0
    }

    .ruler-left:after {
        content: "";
        inset: 0;
        position: absolute;
        pointer-events: none;
        background-image: linear-gradient(0deg,var(--color-border-dark) 0 var(--ruler-unit),transparent 0),linear-gradient(0deg,var(--color-border-dark) 0 var(--ruler-unit),transparent 0);
        background-repeat: repeat-y;
        background-size: var(--ruler1-h) calc(var(--ruler-unit) * var(--ruler1-space) * var(--ruler-y)),var(--ruler2-h) calc(var(--ruler-unit) * var(--ruler2-space) * var(--ruler-y));
        margin-top: var(--ruler-size)
    }

.line {
    z-index: 2;
    opacity: .65;
    outline: 1px solid transparent;
    transition: opacity .2s
}

    .line:before {
        content: "";
        position: absolute;
        outline: .1em solid currentColor
    }

    .line:after {
        content: attr(data-value);
        position: absolute;
        color: #fff;
        background-color: var(--color-primary);
        font-size: 89%;
        padding: .35em 1em;
        box-shadow: 0 var(--size-unit) 3px var(--color-shadow);
        border-radius: .2em;
        opacity: 0
    }

    .line:hover {
        opacity: 1;
        color: var(--color-primary)
    }

    .line.active {
        color: var(--color-primary);
        opacity: 1
    }

        .line.active:after {
            opacity: 1
        }

.line-left, .line-right {
    position: absolute;
    margin-top: 1.1em;
    border-inline-end: .1em dotted currentColor;
    cursor: ew-resize
}

    .line-left:before, .line-right:before {
        top: -1em;
        left: 50%;
        width: .55em;
        height: 1em;
        box-shadow: 0 2px 2px 1px var(--color-shadow);
        transform: translateX(-50%)
    }

    .line-left:after, .line-right:after {
        left: 50%;
        transform: translateX(-50%);
        top: .5em
    }

.line-bottom, .line-top {
    position: absolute;
    height: 0;
    left: var(--position-start);
    right: var(--position-end);
    border-top: .1em dotted currentColor;
    cursor: ns-resize;
    margin-inline-start: 1.25em
}

    .line-bottom:before, .line-top:before {
        top: 50%;
        left: var(--position-start);
        right: var(--position-end);
        transform: translateY(-50%) translateX(calc(var(--direction-offset) * -1em));
        width: 1em;
        height: .55em;
        box-shadow: 2px 0 2px 1px var(--color-shadow)
    }

    .line-bottom:after, .line-top:after {
        top: 50%;
        left: var(--position-start);
        right: var(--position-end);
        transform: translateY(-50%) translateX(calc(var(--direction-offset) * .5em))
    }

@media print {
    .ruler {
        display: none !important
    }
}

.list-view {
    --w-list-view-item: auto;
    --h-list-view-item: auto;
    display: flex;
    flex-wrap: wrap
}

    .list-view.list-view-colors {
        --w-list-view-item: 5em;
        --h-list-view-item: 6em
    }

        .list-view.list-view-colors.md {
            --w-list-view-item: 4.5em;
            --h-list-view-item: 5.5em;
            font-size: 90%
        }

    .list-view.bordered {
        border: var(--size-unit) solid var(--color-border);
        padding: .25em;
        gap: .25em
    }

        .list-view.bordered .list-view-item {
            border: var(--size-unit) solid var(--color-border)
        }

.list-view-item {
    background: 0 0;
    color: currentColor;
    border: none;
    width: var(--w-list-view-item);
    height: var(--h-list-view-item);
    cursor: pointer;
    padding: .5em;
    user-select: none
}

    .list-view-item.bordered {
        border: var(--size-unit) solid var(--color-border-light)
    }

    .list-view-item:hover {
        background-color: var(--color-primary-lighter)
    }

    .list-view-item.active {
        background-color: var(--color-primary-light);
        border-color: var(--color-primary-light);
        color: var(--color-primary)
    }

.segmented-control {
    height: 100%;
    --bg-active: var(--color-main-light);
    --color-active: var(--color-primary)
}

    .segmented-control.horizontal {
        display: flex;
        place-items: center
    }

        .segmented-control.horizontal .btn:first-child {
            border-start-start-radius: var(--border-radius-button);
            border-end-start-radius: var(--border-radius-button)
        }

        .segmented-control.horizontal .btn:last-child {
            border-start-end-radius: var(--border-radius-button);
            border-end-end-radius: var(--border-radius-button)
        }

    .segmented-control.vertical {
        display: flex;
        place-content: center;
        flex-direction: column
    }

        .segmented-control.vertical .btn:first-child {
            border-start-start-radius: var(--border-radius-button);
            border-start-end-radius: var(--border-radius-button)
        }

        .segmented-control.vertical .btn:last-child {
            border-end-start-radius: var(--border-radius-button);
            border-end-end-radius: var(--border-radius-button)
        }

    .segmented-control.default .btn {
        transition: none
    }

        .segmented-control.default .btn.active {
            background-color: var(--bg-active);
            color: var(--color-active)
        }

    .segmented-control.sliding {
        --left: 50%;
        --right: 50%;
        --top: 50%;
        --width: 2em;
        --height: 2em;
        --border-radius-button: .25em;
        background-color: var(--color-button);
        border-radius: var(--border-radius-input);
        padding: .25em;
        position: relative;
        isolation: isolate;
        box-shadow: inset 0 1px 5px -1px var(--color-shadow)
    }

        .segmented-control.sliding .btn {
            background: 0 0;
            outline: 0;
            transition: background-color .5s,color .5s
        }

            .segmented-control.sliding .btn:hover:not(.active) {
                outline: var(--size-unit) solid currentColor;
                outline-offset: calc(var(--size-unit) * -1)
            }

            .segmented-control.sliding .btn.active {
                color: var(--color-active)
            }

        .segmented-control.sliding:after {
            content: "";
            position: absolute;
            width: var(--width);
            height: var(--height);
            left: var(--left);
            top: var(--top);
            bottom: 0;
            background-color: var(--bg-active);
            box-shadow: 0 2px 5px var(--color-shadow);
            border-radius: var(--border-radius-button);
            z-index: -1;
            transition: left .5s,right .5s,top .5s,bottom .5s,width .5s,height .5s
        }

    .segmented-control.active-primary {
        --bg-active: var(--color-primary);
        --color-active: var(--color-white)
    }

    .segmented-control.segment-rounded {
        --border-radius-input: 100vmax
    }

        .segmented-control.segment-rounded.vertical {
            border-radius: .5em !important
        }

        .segmented-control.segment-rounded .btn {
            border-radius: 100vmax !important
        }

        .segmented-control.segment-rounded:after {
            border-radius: 100vmax
        }

@media (min-width:48em) {
    :root {
        --padding-menu-link: 0 1.15em
    }

    .d-flex {
        display: flex !important
    }

    .d-flex-col {
        display: flex !important;
        flex-direction: column
    }

    .m-flex, .m-flex-col {
        display: none !important
    }

    .grid-2 {
        grid-template-columns: 1fr 1fr
    }

    .grid-3 {
        grid-template-columns: 1fr 1fr 1fr
    }

    .p-0-1 {
        padding: .5em !important
    }

    .p-0-2 {
        padding: 1em !important
    }

    .content-center-start {
        place-content: flex-start !important
    }

    .grid-auto-5 {
        --width-element: 10em
    }

    .grid-auto-10 {
        --width-element: 10em
    }

    .grid-auto-15 {
        --width-element: 15em
    }

    .grid-auto-20 {
        --width-element: 20em
    }

    .grid-auto-25 {
        --width-element: 15em
    }

    .grid-auto-30 {
        --width-element: 30em
    }

    .grid-auto-35 {
        --width-element: 35em
    }

    .grid-auto-40 {
        --width-element: 40em
    }

    .flex-col-row {
        flex-direction: row
    }

        .flex-col-row.reverse {
            flex-direction: row
        }

    .flex-row-col {
        display: flex;
        flex-direction: column
    }

        .flex-row-col.reverse {
            flex-direction: column-reverse
        }

    .justify-center-between {
        justify-content: space-between !important
    }

    .fields-2 {
        grid-template-columns: 1fr 1fr
    }

    .fields-3 {
        grid-template-columns: 1fr 1fr 1fr
    }

    .fields-4 {
        grid-template-columns: repeat(4,1fr)
    }

    .fields-1-3 {
        grid-template-columns: 1fr 3fr
    }

    .fields-1-2 {
        grid-template-columns: 1fr 2fr
    }

    .fields-3-1 {
        grid-template-columns: 3fr 1fr
    }

    .menubar .social-links {
        display: flex
    }

    .menubar .divider {
        display: inline-block
    }

    .drawer .link {
        width: 18em
    }

        .drawer .link span {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden
        }

    .drawer .content {
        clip-path: ellipse(100% 55% at 48% 44%);
        height: auto
    }

    .drawer .scrollable {
        box-shadow: none;
        position: initial;
        padding: 0
    }

    .page-header-h {
        flex-direction: row;
        justify-content: space-between
    }

    .accessiblity-bar {
        flex-direction: row-reverse;
        justify-content: space-between
    }

    .section-header {
        font-size: calc(1.3em + var(--zoom-offset))
    }

        .section-header.small {
            font-size: .8em
        }
}

@media (min-width:68em) {
    .container {
        width: 90%
    }

    .items-start-center {
        align-items: center !important
    }

    .items-center-start {
        align-items: flex-start !important
    }

    .items-center-end {
        place-items: flex-end !important
    }

    .items-stretch-center {
        place-items: center
    }

    .justify-center-end {
        justify-content: flex-end !important
    }

    .justify-center-start {
        justify-content: flex-start !important
    }

    .text-center-start {
        text-align: start !important
    }

    .d-none-flex {
        display: flex !important
    }

    .gap-1-2 {
        gap: 1em !important
    }

    .gap-0-2 {
        gap: 1em !important
    }

    .gap-1-3 {
        gap: 1.5em !important
    }
}

@media (min-width:75em) {
    .form {
        flex-direction: row
    }

        .form .details {
            min-width: 60em;
            max-width: 60em
        }
}

@media (min-width:110em) {
    .container {
        width: 70%
    }

        .container.container-wide {
            width: 70%
        }
}

html[dir=rtl] {
    --direction-offset: -1;
    --direction-rotate: 180deg;
    --position-start: unset;
    --position-end: 0;
    --translate-x-100: -100%
}

    html[dir=rtl] .bidirectional {
        transform: rotate(180deg)
    }

:root {
    --paper-width: 210mm;
    --paper-height: 297mm;
    --paper-padding: 60px;
    --paper-angle: 0deg;
    --paper-zoom: 1
}

.on-print {
    display: none
}

.page-break-before {
    page-break-before: always !important;
    page-break-inside: avoid !important
}

.page-break-after {
    page-break-after: always !important;
    page-break-inside: avoid !important
}

.break-inside-avoid {
    page-break-inside: avoid !important
}

.running-header {
    background: 0 0 !important;
    border: none !important
}

.paper-padding-sm {
    --paper-padding: 20px
}

.printable {
    height: 100%;
    overflow: auto
}

.paper-pages {
    counter-reset: pageNumber header1;
    min-width: min-content;
    outline: 0;
    transform-origin: 50% 50%;
    transform: scale(var(--paper-zoom));
    transition: transform .4s
}

    .paper-pages .header-1 {
        counter-increment: header1
    }

        .paper-pages .header-1:before {
            content: counter(header1) ". ";
            color: var(--color-5);
            font-size: 1em
        }

    .paper-pages:last-child {
        page-break-after: auto
    }

.paper-page {
    counter-increment: pageNumber;
    position: relative;
    width: min(100%,var(--paper-width));
    min-height: var(--paper-height);
    max-width: 100%;
    transition: background-color .5s,width .5s,height .5s,min-width .5s,min-height .5s,transform .5s;
    user-select: text;
    overflow: hidden;
    background-color: var(--color-main-light);
    outline: 0;
    box-shadow: 0 2px 5px 3px var(--color-shadow);
    margin: 1em auto;
    padding: var(--paper-padding);
    display: flex;
    flex-direction: column;
    transform: rotate(var(--paper-angle))
}

    .paper-page.medium table {
        --p-td: 0.35em .5em;
        --p-th: 0.35em .5em
    }

    .paper-page.medium * {
        font-size: 99%
    }

    .paper-page.Landscape, .paper-page.landscape {
        width: min(100%,var(--paper-height));
        min-height: var(--paper-width)
    }

    .paper-page .table-print tr:hover {
        background-color: transparent
    }

    .paper-page .table-print td, .paper-page .table-print th {
        border: var(--size-unit) solid var(--color-border);
        text-align: center;
        word-break: keep-all;
        white-space: pre-wrap
    }

    .paper-page .table-print th {
        background-color: var(--color-main-dark)
    }

    .paper-page .paper-body {
        flex: 1
    }

    .paper-page .page-number::before {
        content: counter(pageNumber)
    }

.table-report.md {
    --p-th: 0.5em .5em;
    --p-td: 0.5em .5em
}

.table-report.sm {
    --p-th: 8px 3px;
    --p-td: 3px;
    font-size: 12px
}

.A100 {
    --paper-width: 100%;
    --paper-height: 100%
}

.A0 {
    --paper-width: 841mm;
    --paper-height: 1189mm
}

    .A0.Landscape {
        --paper-height: 841mm;
        --paper-width: 1189mm
    }

.A1 {
    --paper-width: 594mm;
    --paper-height: 841mm
}

    .A1.Landscape {
        --paper-height: 594mm;
        --paper-width: 841mm
    }

.A2 {
    --paper-width: 420mm;
    --paper-height: 594mm
}

    .A2.Landscape {
        --paper-height: 420mm;
        --paper-width: 594mm
    }

.A3 {
    --paper-width: 297mm;
    --paper-height: 420mm
}

    .A3.Landscape {
        --paper-height: 297mm;
        --paper-width: 420mm
    }

.A4 {
    --paper-width: 56.75em;
    --paper-height: 80.15em
}

    .A4.Landscape {
        --paper-height: 56.75em;
        --paper-width: 80.15em
    }

.A5 {
    --paper-width: 148mm;
    --paper-height: 210mm
}

    .A5.Landscape {
        --paper-height: 148mm;
        --paper-width: 210mm
    }

.A6 {
    --paper-width: 105mm;
    --paper-height: 148mm
}

    .A6.Landscape {
        --paper-height: 105mm;
        --paper-width: 148mm
    }

.A7 {
    --paper-width: 74mm;
    --paper-height: 105mm
}

    .A7.Landscape {
        --paper-height: 74mm;
        --paper-width: 105mm
    }

.A8 {
    --paper-width: 52mm;
    --paper-height: 74mm
}

    .A8.Landscape {
        --paper-height: 52mm;
        --paper-width: 74mm
    }

.A9 {
    --paper-width: 37mm;
    --paper-height: 52mm
}

    .A9.Landscape {
        --paper-height: 37mm;
        --paper-width: 52mm
    }

.A10 {
    --paper-width: 26mm;
    --paper-height: 37mm
}

    .A10.Landscape {
        --paper-height: 26mm;
        --paper-width: 37mm
    }

@media print {
    :root {
        --color-main: #fff;
        --color-text: #000;
        --color-main-light: #fff;
        --paper-padding: 0 !important
    }

    .paper-padding-sm {
        --paper-padding: 0 !important
    }

    body, html {
        height: 99%
    }

    body {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: auto !important
    }

        body.overflow-hidden {
            overflow: auto !important
        }

        body :not(.printable.active,.printable *) {
            visibility: collapse;
            padding: 0 !important;
            margin: 0 !important;
            box-sizing: initial !important;
            display: contents !important;
            position: absolute !important;
            pointer-events: none !important;
            font-size: 0
        }

            body :not(.printable.active,.printable *):after, body :not(.printable.active,.printable *):before {
                content: none !important
            }

        body .printable:not(.active) {
            display: none !important
        }

    .printable.active {
        overflow: initial;
        inset: 0;
        position: absolute;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        font-size: var(--font-size)
    }

        .printable.active .flex {
            display: flex;
            flex-direction: row
        }

        .printable.active .flex-col {
            display: flex;
            flex-direction: column
        }

        .printable.active .on-print {
            display: initial
        }

        .printable.active * {
            visibility: visible !important;
            pointer-events: auto
        }

    .paper-page {
        font-size: var(--font-size);
        margin: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
        width: 100%;
        min-height: 0
    }

        .paper-page.paper-fit {
            min-height: auto;
            width: 100vw !important;
            height: 100vh !important
        }

    td, th, tr {
        page-break-inside: avoid
    }

    .sort-asc, .sort-desc {
        display: none
    }

    .context-menu, .menubar, .modal:not(.modal-print), .no-print, .sidebar, aside {
        display: none !important
    }
}

.report-container h3 {
    padding: 1em 0;
    background-image: url(https://islam.gov.qa/cdn/svg/title-deco.svg);
    background-repeat: no-repeat;
    background-position: 50%
}

:root {
    --url-deco: url("https://islam.gov.qa/cdn/svg/decoration.svg")
}

.page-deco {
    background: var(--color-main-light) var(--url-deco) no-repeat;
    background-size: 100%
}

.paper-page-decoration, .paper-page.deco {
    background: var(--color-main-light) var(--url-deco) no-repeat
}

.paper-page.deco {
    background: var(--color-main-light) var(--url-deco) no-repeat
}

.paper-page .report-title {
    color: var(--color-primary);
    text-align: center;
    font-size: 150%;
    width: 100%;
    display: block;
    font-weight: 500
}

    .paper-page .report-title svg {
        display: none
    }

    .paper-page .report-title.deco svg {
        height: .8em;
        display: block;
        margin: 0 auto
    }

    .paper-page .report-title:empty {
        display: none
    }

.paper-page article {
    font-size: var(--font-size);
    page-break-inside: avoid
}

    .paper-page article p {
        padding-bottom: 1em
    }

    .paper-page article a {
        color: var(--color-primary);
        text-decoration: underline
    }

.paper-page h1 {
    font-size: 140%;
    color: var(--color-primary);
    padding: 1em 0 .25em 0
}

.paper-page h2 {
    font-size: 130%;
    color: var(--color-secondary);
    padding: .75em 0 0 0
}

.paper-page h3 {
    font-size: 120%;
    color: var(--color-4);
    padding: .25em 0 0 0
}

.paper-page h4 {
    font-size: 110%;
    padding: .75em 0 0 0
}

.paper-page h5 {
    font-size: 105%;
    padding: .75em 0 0 0;
    color: var(--color-primary)
}

.paper-page ol, .paper-page ul {
    margin: 0
}

.framework-arch h1, .framework-arch h2, .framework-arch h3, .framework-arch h4, .framework-arch h5 {
    color: #fff;
    padding: .5em;
    margin: 0;
    text-align: center
}

.framework-arch h1 {
    background-color: #7d1d6b;
    padding: .75em;
    font-size: 160%
}

.framework-arch h2 {
    background-color: #1a4e9a
}

.framework-arch h3 {
    background-color: #50164a
}

.framework-arch h4 {
    background-color: #903
}

.framework-arch h5 {
    background-color: #066;
    padding: .5em
}

.block-container {
    border: 2px solid #818181;
    padding: .25em
}

.cell-head {
    border: none;
    padding: .25em 1em;
    font-weight: 500
}

.cell-data {
    background-color: rgba(111,132,218,.5411764706);
    border: var(--size-unit) solid currentColor;
    padding: .25em 1em
}

.table-report {
    border-spacing: .25em;
    border-collapse: separate
}

    .table-report th {
        background-color: var(--color-primary);
        color: #fff;
        text-align: center;
        border: var(--size-unit) solid var(--color-text)
    }

    .table-report td {
        border: var(--size-unit) solid var(--color-secondary)
    }

.report-container .table-report {
    border-spacing: 5px;
    border-collapse: separate
}

    .report-container .table-report tr {
        page-break-inside: avoid;
        page-break-after: auto;
        outline: 1px solid transparent;
        outline-offset: 2px;
        transition: outline-color .2s
    }

        .report-container .table-report tr:hover {
            background-color: transparent !important;
            outline-color: var(--color-text);
            border-radius: 5px
        }

    .report-container .table-report thead {
        position: relative
    }

        .report-container .table-report thead .watermark {
            position: absolute;
            transform: translateY(30vh) translateX(-50%);
            left: 50%;
            font-size: 5em;
            top: 50%;
            pointer-events: none;
            opacity: .15;
            font-weight: 800
        }

    .report-container .table-report tbody tr:nth-child(even) td {
        background-color: #e8e8e8
    }

        .report-container .table-report tbody tr:nth-child(even) td span {
            background-color: #e8e8e8
        }

    .report-container .table-report td, .report-container .table-report th {
        border: none;
        background-color: var(--color-main);
        border-radius: 5px;
        padding: 5px;
        margin: 2px;
        text-align: center
    }

    .report-container .table-report th {
        background-color: var(--color-primary);
        color: #fff;
        font-weight: 500;
        white-space: nowrap;
        padding: 10px 3px
    }

    .report-container .table-report td span {
        background-color: var(--color-main);
        padding: .25em;
        display: flex;
        place-content: center;
        place-items: center;
        border-radius: 0
    }

    .report-container .table-report td .data-row:first-of-type span {
        border-start-start-radius: 5px;
        border-start-end-radius: 5px
    }

    .report-container .table-report td .data-row:last-of-type span {
        border-end-start-radius: 5px;
        border-end-end-radius: 5px
    }

    .report-container .table-report td .data-row.selected span {
        color: var(--color-warning)
    }

.report-layout {
    min-height: 100vh;
    background-color: var(--color-main-dark) !important
}

    .report-layout .page-content {
        background-color: var(--color-main) !important
    }

    .report-layout .group-header {
        padding: .5em 1em;
        color: var(--color-primary);
        background-color: var(--color-info-light);
        margin-bottom: .25em;
        align-self: flex-start
    }

        .report-layout .group-header strong {
            font-weight: 500
        }

:root {
    --height-menubar: 4em;
    --border-radius-sidebar: 0;
    --margin-sidebar-offset: 0px;
    --box-shadow-sidebar: none;
    --border-inline-start-sidebar: none;
    --width-sidebar: 18em;
    --padding-sidebar: 1em;
    --background-sidebar: var(--color-main);
    --background-sidebar-gradient: linear-gradient(0deg, var(--color-primary-darker), var(--color-primary));
    --deco-sidebar: url("https://cdn.samabase.com/samabase/svg/waves-1.png");
    --deco-sidebar-opacity: .12;
    --deco-sidebar-repeat: round;
    --paper-padding: 40px;
    --padding-nav-link: .85em 1em;
    --background-nav-link: transparent;
    --background-nav-link-hover: var(--color-primary-lighter);
    --color-nav-link-hover: var(--color-primary);
    --background-nav-link-active: var(--color-primary);
    --color-nav-link: var(--color-text);
    --color-nav-link-active: white;
    --border-radius-nav-link: .5em;
    --menubar-height: var(--height-menubar);
    --background-menubar: transparent;
    --padding-main: 1em;
    --border-radius-card: 0.75rem;
    --border-raidus-modal: 0.75em;
    --border-radius-tree-view-item: var(--border-radius-button);
    --display-btn-label: none
}

body {
    background-color: var(--color-main);
    transition: background-color .5s,color .5s
}

.app {
    min-height: 100vh
}

    .app .sidebar {
        grid-area: sidebar;
        background: var(--background-sidebar);
        border-inline-end: var(--border-inline-start-sidebar);
        box-shadow: var(--box-shadow-sidebar);
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--margin-sidebar-offset);
        bottom: var(--margin-sidebar-offset);
        left: var(--margin-sidebar-offset);
        margin-left: 0;
        margin-right: calc(100vw - var(--width-sidebar));
        z-index: 99;
        border-radius: var(--border-radius-sidebar);
        width: var(--width-sidebar);
        user-select: none;
        white-space: nowrap;
        overflow: hidden;
        transition: width .5s,margin .5s,box-shadow .5s,background-color .5s,color .5s,border-radius .5s,left .5s,right .5s,top .5s,bottom .5s
    }

        .app .sidebar.sidebar-rounded {
            --border-radius-sidebar: 1em
        }

        .app .sidebar.sidebar-bordered {
            --border-inline-start-sidebar: 1px dashed var(--color-border)
        }

        .app .sidebar.sidebar-shadow {
            --box-shadow-sidebar: 0 0 7px 3px var(--color-shadow)
        }

        .app .sidebar.sidebar-deco:after {
            background-image: var(--deco-sidebar);
            content: "";
            position: absolute;
            inset: 0;
            background-repeat: var(--deco-sidebar-repeat);
            height: 100%;
            opacity: var(--deco-sidebar-opacity);
            z-index: -1
        }

        .app .sidebar.sidebar-deco.deco-waves {
            --deco-sidebar-repeat: round;
            --deco-sidebar: url("https://islam.gov.qa/cdn/assets/website/waves-1.png")
        }

        .app .sidebar.native {
            --color-nav-link: var(--color-icon)
        }

            .app .sidebar.native.sidebar-shadow {
                --box-shadow-sidebar: 0 0 7px 0 var(--color-shadow)
            }

        .app .sidebar .app-version, .app .sidebar .input-search, .app .sidebar .user-account-card {
            background-color: var(--color-border);
            border: none
        }

        .app .sidebar.colored, .app .sidebar.gradient {
            --color-nav-link: white;
            --color-nav-link-hover: white;
            --background-nav-link-active: #ffffffe6;
            --color-nav-link-active: var(--color-primary)
        }

            .app .sidebar.colored .link:hover, .app .sidebar.gradient .link:hover {
                color: rgba(255,255,255,.9019607843)
            }

            .app .sidebar.colored .app-desc, .app .sidebar.colored .app-name, .app .sidebar.gradient .app-desc, .app .sidebar.gradient .app-name {
                color: var(--color-nav-link)
            }

            .app .sidebar.colored .app-version, .app .sidebar.colored .input-search, .app .sidebar.colored .user-account-card, .app .sidebar.gradient .app-version, .app .sidebar.gradient .input-search, .app .sidebar.gradient .user-account-card {
                background-color: var(--color-primary-dark);
                color: var(--color-nav-link);
                --color-text: var(--color-nav-link)
            }

                .app .sidebar.colored .app-version ::placeholder, .app .sidebar.colored .input-search ::placeholder, .app .sidebar.colored .user-account-card ::placeholder, .app .sidebar.gradient .app-version ::placeholder, .app .sidebar.gradient .input-search ::placeholder, .app .sidebar.gradient .user-account-card ::placeholder {
                    color: var(--background-nav-link-active)
                }

        .app .sidebar.gradient {
            --background-nav-link-hover: var(--color-primary-dark);
            --background-sidebar: var(--color-primary)
        }

            .app .sidebar.gradient:before {
                content: "";
                background: linear-gradient(45deg,rgba(0,0,0,.3098039216),transparent 90%);
                position: absolute;
                inset: 0;
                z-index: -1
            }

        .app .sidebar.colored {
            --background-sidebar: var(--color-primary-dark);
            --background-nav-link-hover: var(--color-primary-darker)
        }

        .app .sidebar.clear {
            --background-sidebar: var(--color-main-light)
        }

        .app .sidebar .accordion i {
            pointer-events: none
        }

        .app .sidebar .accordion .expandable .nav-link {
            padding-inline-start: 2em
        }

        .app .sidebar .input-search {
            margin: .25em 1em;
            color: var(--color-nav-link);
            border: none;
            outline: 0
        }

            .app .sidebar .input-search button {
                color: var(--color-nav-link)
            }

    .app .menubar {
        background-color: var(--background-menubar);
        padding: .5em;
        gap: .25em;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        transition: margin .5s,height .5s
    }

        .app .menubar .menu-link {
            color: var(--color-icon);
            height: 3em;
            border-radius: var(--border-radius-nav-link);
            padding: 0 .75em;
            min-height: 3em
        }

            .app .menubar .menu-link:hover {
                background-color: var(--background-nav-link-hover)
            }

            .app .menubar .menu-link.active {
                background-color: var(--background-nav-link-active);
                color: var(--color-nav-link-active)
            }

    .app main {
        padding: var(--padding-main);
        position: absolute;
        top: var(--menubar-height);
        bottom: 0;
        left: 0;
        right: 0;
        transition: margin .5s
    }

    .app.scrolling .menubar {
        backdrop-filter: blur(8px);
        box-shadow: 0 15px 20px -18px var(--color-shadow)
    }

    .app.scrolling.toolbar-sticky .toolbar.sticky-toolbar:first-of-type {
        position: sticky;
        top: var(--height-menubar);
        background-color: var(--color-main);
        box-shadow: 0 0 6px -2px var(--color-shadow);
        border-radius: 0;
        z-index: 1
    }

    .app:has(.sidebar-floating) {
        --margin-sidebar-offset: .5em
    }

    .app.full-width {
        --width-sidebar: 0
    }

        .app.full-width .sidebar {
            overflow: hidden;
            box-shadow: none
        }

    .app.full-height {
        --menubar-height: 0
    }

        .app.full-height main {
            --padding-main: 1em
        }

        .app.full-height .menubar {
            padding: 0;
            overflow: hidden
        }

    .app.button-labels {
        --display-btn-label: block
    }

.nav-links {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: var(--padding-sidebar);
    flex: 1 0 0
}

.nav {
    display: flex;
    flex-direction: column;
    gap: .5em
}

.sub-nav .arrow {
    pointer-events: none;
    margin-inline-start: auto;
    transition: transform .2s
}

.sub-nav.active .arrow {
    transform: rotate(180deg)
}

.nav-link {
    display: flex;
    place-items: center;
    gap: 1em;
    padding: var(--padding-nav-link);
    background-color: var(--background-nav-link);
    border-radius: var(--border-radius-nav-link);
    user-select: none;
    margin-bottom: .25em;
    color: var(--color-nav-link);
    white-space: nowrap
}

    .nav-link:not(.sub-nav):hover {
        background-color: var(--background-nav-link-hover);
        color: var(--color-nav-link-hover)
    }

    .nav-link:not(.sub-nav).active {
        background-color: var(--background-nav-link-active);
        color: var(--color-nav-link-active)
    }

    .nav-link span {
        overflow: hidden;
        max-width: calc(var(--width-sidebar) - 6em);
        white-space: nowrap;
        text-overflow: ellipsis
    }

.app-title {
    position: relative;
    padding: 1em 1em 1.5em 1em;
    margin-bottom: .5em
}

    .app-title:hover {
        background-color: var(--color-primary-dark);
        --color-text: var(--color-nav-link-active)
    }

        .app-title:hover .app-desc, .app-title:hover .app-name, .app-title:hover .app-version {
            color: var(--color-nav-link-active)
        }

    .app-title .app-name {
        font-weight: 800;
        font-size: 170%;
        color: var(--color-primary);
        white-space: nowrap
    }

    .app-title .app-desc {
        color: var(--color-primary)
    }

    .app-title .app-version {
        padding: .15em .75em;
        font-size: 80%;
        white-space: nowrap
    }

.page-title {
    font-size: 175%;
    font-weight: 700
}

.card {
    padding: 1.5em
}

.header {
    margin-bottom: .5em
}

    .header .btn-toolbar {
        min-height: var(--height-input)
    }

.search-box {
    width: 14em;
    transition: width .2s
}

    .search-box:focus, .search-box:focus-within {
        width: 20em
    }

    .search-box input {
        flex: 1;
        min-width: 0
    }

tbody tr:hover .btn-toolbar {
    --color-icon: var(--color-primary);
    background-color: var(--color-primary-lighter)
}

.layout-data .statistics {
    position: fixed;
    z-index: 99999;
    margin: .5em;
    border: var(--size-unit) solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: 1em;
    backdrop-filter: blur(10px);
    pointer-events: none
}

    .layout-data .statistics .btn, .layout-data .statistics a, .layout-data .statistics button {
        pointer-events: auto
    }

.layout-data.use-background-mode {
    padding: 0 !important
}

    .layout-data.use-background-mode .content, .layout-data.use-background-mode .header, .layout-data.use-background-mode .pagination, .layout-data.use-background-mode .toolbar {
        display: none
    }

.toolbar {
    display: flex;
    place-items: center;
    gap: .5em;
    padding-block: .5em;
    border: var(--size-unit) solid var(--color-border);
    padding: 1em;
    border-radius: var(--border-radius-card);
    margin-bottom: .5em;
    transition: border-color .25s
}

    .toolbar .divider {
        width: var(--size-unit);
        background: var(--color-border);
        height: 2.5em;
        margin: 0 .5em;
        opacity: .75
    }

.btn-toolbar {
    --padding-button: .55em .55em;
    transition: none;
    color: var(--color-icon)
}

    .btn-toolbar.btn-clear {
        --padding-button: .5em .75em;
        background-color: transparent
    }

    .btn-toolbar.btn-sm {
        --padding-button: 0.25em .5em;
        min-height: 0;
        font-size: 90%
    }

    .btn-toolbar.btn-danger, .btn-toolbar.btn-warning {
        color: #fff
    }

    .btn-toolbar:hover {
        --color-icon: var(--color-primary);
        background-color: var(--color-primary-lighter)
    }

    .btn-toolbar.active, .btn-toolbar.selected, .btn-toolbar:focus, .btn-toolbar:focus-within {
        --color-icon: white !important;
        outline-color: var(--color-primary-light) !important;
        background-color: var(--color-primary) !important
    }

    .btn-toolbar:disabled {
        pointer-events: none;
        opacity: .5
    }

    .btn-toolbar .btn-label {
        display: var(--display-btn-label)
    }

.inline-actions {
    display: flex;
    place-items: center;
    gap: .5em
}

.auth-loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    background-color: var(--color-main-dark);
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
    gap: .5em;
    pointer-events: none;
    user-select: none
}

    .auth-loader img {
        width: 12rem
    }

[data-placeholder] {
    position: relative
}

    [data-placeholder]:after {
        position: absolute;
        pointer-events: none;
        opacity: .5
    }

    [data-placeholder]:empty:after {
        content: attr(data-placeholder)
    }

[data-tooltip] {
    --opacity: 0;
    position: relative
}

    [data-tooltip]:after, [data-tooltip]:before {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        opacity: var(--opacity);
        pointer-events: none
    }

    [data-tooltip]:before {
        content: attr(data-tooltip);
        background: #000;
        z-index: 999;
        color: #fff;
        width: max-content;
        top: -25px;
        padding: .25em 1em;
        border-radius: .25em
    }

    [data-tooltip]:after {
        content: "";
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 7px solid #000;
        top: -8px
    }

    [data-tooltip]:hover {
        --opacity: .75
    }

        [data-tooltip]:hover:before {
            top: -35px
        }

    [data-tooltip].adjust-tooltip:before {
        margin-inline: calc(var(--direction-offset) * 85% * -1)
    }

    [data-tooltip].adjust-tooltip:after {
        margin-inline: calc(var(--direction-offset) * -.76em)
    }

th {
    text-align: start
}

    th:has(.col-header) {
        --p-th: 1em .5em;
        position: relative;
        padding: 0;
        overflow: hidden
    }

        th:has(.col-header) .col-header {
            padding: var(--p-th);
            overflow: hidden
        }

    th .col-resizer {
        height: 100%;
        background-color: transparent;
        position: absolute;
        top: 0;
        right: -2px;
        margin-inline-end: 1px
    }

        th .col-resizer:hover {
            background-color: var(--color-primary-light)
        }

.filter-tabs {
    display: flex;
    gap: 4px;
    margin-top: .5em;
    padding-inline: 1em
}

    .filter-tabs button {
        font-family: inherit;
        font-size: inherit;
        color: currentColor;
        background-color: transparent;
        border: var(--size-unit) solid var(--color-border);
        border-bottom: none;
        padding: .75em 1.5em;
        border-start-start-radius: var(--border-radius-button);
        border-start-end-radius: var(--border-radius-button);
        position: relative;
        margin-bottom: -1px;
        display: flex;
        place-items: center;
        gap: .5em;
        overflow: hidden;
        cursor: pointer;
        transition: border-color .25s
    }

        .filter-tabs button:before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0;
            width: 3px;
            height: 20px;
            background: currentColor;
            border-radius: 3px;
            top: 0;
            margin-inline-start: .75em;
            transition: top .1s
        }

        .filter-tabs button:after {
            content: "";
            position: absolute;
            inset: 5px;
            background-color: currentColor;
            border-radius: 5px;
            z-index: 0;
            opacity: 0
        }

        .filter-tabs button:hover:before {
            opacity: .75;
            top: calc(50% - 10px)
        }

        .filter-tabs button.active {
            border-color: var(--color-border);
            border-bottom: 2px solid var(--color-main-light)
        }

            .filter-tabs button.active:before {
                top: calc(50% - 10px);
                opacity: 1
            }

            .filter-tabs button.active:after {
                opacity: .1
            }

.badge-inherit {
    margin-inline-start: .5em;
    background-color: currentColor;
    border-radius: 100vmax
}

    .badge-inherit .count {
        color: #fff
    }

.user-system-default, .user-system-flat {
    border-radius: .5em;
    margin-bottom: .5em
}

    .user-system-default .progress-bar, .user-system-flat .progress-bar {
        margin-top: .25em
    }

.user-system-default {
    box-shadow: 0 2px 5px var(--color-shadow) !important;
    background-color: var(--color-main-light)
}

.user-system-flat {
    background-color: var(--color-main-light)
}

    .user-system-flat:hover {
        background-color: var(--color-main-dark) !important
    }

    .user-system-flat.selected, .user-system-flat:hover {
        background-color: var(--color-primary-lighter) !important
    }

    .user-system-flat .btn {
        background: 0 0
    }

@media (min-width:56em) {
    :root {
        --padding-main: 0 1.5em 2em 1.5em
    }

    .app main {
        margin-inline-start: calc(var(--width-sidebar) + var(--margin-sidebar-offset))
    }

    .app .menubar {
        margin-inline-start: calc(var(--width-sidebar) + var(--margin-sidebar-offset))
    }
}

html[dir=rtl] .sidebar {
    right: var(--margin-sidebar-offset);
    left: unset;
    margin-right: 0;
    margin-left: calc(100vw - var(--width-sidebar) + var(--margin-sidebar-offset))
}

.details-pane {
    width: 0;
    overflow: hidden;
    transition: width .25s
}

    .details-pane.active {
        width: 450px
    }

.app-glass, .glass {
    --bg-blur: radial-gradient(var(--color-primary-lighter), var(--color-blur-light));
    --color-input: var(--color-blur-light);
    --color-button: #9d9d9d59
}

    .app-glass .toast, .glass .toast {
        background: 0 0;
        backdrop-filter: blur(10px)
    }

    .app-glass .dropdown-menu, .glass .dropdown-menu {
        background: 0 0 !important;
        backdrop-filter: blur(12px) !important;
        border: var(--size-unit) solid var(--color-main-light);
        border-bottom: var(--size-unit) solid var(--color-main)
    }

        .app-glass .dropdown-menu:before, .glass .dropdown-menu:before {
            content: "";
            background: var(--bg-blur);
            position: absolute;
            inset: 0;
            z-index: -1
        }

        .app-glass .dropdown-menu .card, .glass .dropdown-menu .card {
            background: var(--color-blur-light);
            border: var(--size-unit) solid var(--color-main-light);
            border-bottom: var(--size-unit) solid var(--color-main)
        }

        .app-glass .dropdown-menu .input-field, .glass .dropdown-menu .input-field {
            background: 0 0
        }

    .app-glass .tab-control, .glass .tab-control {
        --width-border: var(--size-unit);
        --background-tab-control: var(--color-blur-light)
    }

        .app-glass .tab-control .tab-content.active, .app-glass .tab-control .tab-item.active, .glass .tab-control .tab-content.active, .glass .tab-control .tab-item.active {
            border-color: var(--color-main-light)
        }

        .app-glass .tab-control .tab-item, .glass .tab-control .tab-item {
            border-bottom-width: 0
        }

            .app-glass .tab-control .tab-item.active, .glass .tab-control .tab-item.active {
                box-shadow: none;
                margin: 0
            }

    .app-glass .modal, .glass .modal {
        transition: none
    }

    .app-glass .modal-content, .app-glass .window, .glass .modal-content, .glass .window {
        background: var(--bg-blur);
        border: var(--size-unit) solid var(--color-main-light);
        border-bottom: var(--size-unit) solid var(--color-main);
        overflow: hidden
    }

        .app-glass .modal-content .card, .app-glass .window .card, .glass .modal-content .card, .glass .window .card {
            background: var(--color-blur-light);
            border: var(--size-unit) solid var(--color-main-light);
            border-bottom: var(--size-unit) solid var(--color-main)
        }

        .app-glass .modal-content:after, .app-glass .modal-content:before, .app-glass .window:after, .app-glass .window:before, .glass .modal-content:after, .glass .modal-content:before, .glass .window:after, .glass .window:before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1
        }

        .app-glass .modal-content:after, .app-glass .window:after, .glass .modal-content:after, .glass .window:after {
            backdrop-filter: blur(12px)
        }

        .app-glass .modal-content .modal-footer, .app-glass .window .modal-footer, .glass .modal-content .modal-footer, .glass .window .modal-footer {
            border-top: var(--size-unit) solid var(--color-main-light);
            background: 0 0
        }

    .app-glass .field-container:not(:has(.tab-control)), .glass .field-container:not(:has(.tab-control)) {
        background: var(--color-blur-light);
        margin: 0 1em 1em 1em;
        border-radius: var(--border-radius-button);
        padding-block: 1.5em;
        border: var(--size-unit) solid var(--color-main-light);
        border-bottom: var(--size-unit) solid var(--color-main)
    }

:root {
    color-scheme: light;
    --color-maroon: #a71c46;
    --color-logo: #a30033;
    --color-icon: #1c274c;
    --color-primary: #a71c46;
    --color-primary-light: #8a153842;
    --color-primary-lighter: #8a153817;
    --color-primary-dark: #830b2f;
    --color-primary-darker: #5f001d;
    --color-primary-hover: #8a153812;
    --color-secondary: #a39161;
    --color-secondary-light: #a2947542;
    --color-secondary-lighter: #a2947517;
    --color-secondary-dark: #796f49;
    --color-secondary-hover: #a2947580;
    --color-info: #064eab;
    --color-success: #0c896b;
    --color-warning: #ad5813;
    --color-danger: #d81d1d;
    --color-question: #5b45a7;
    --color-info-light: #9bd6fa61;
    --color-success-light: #c3e9e2;
    --color-warning-light: #edd6c0;
    --color-danger-light: #f5c9d0;
    --color-question-light: #9f84f980;
    --color-white: #fff;
    --color-text: #313131;
    --color-text-light: #838383;
    --color-text-lighter: #d7d6d6;
    --color-placeholder: #bec8d0;
    --color-text-placeholder: #0000002b;
    --color-highlight: #004eff26;
    --color-highlight-light: #004eff0a;
    --color-blur-light: #ffffffcc;
    --color-green: #006749;
    --color-main: #f6f6f6;
    --color-main-light: #fff;
    --color-main-dark: #efefef;
    --color-nav: #fff;
    --color-input: #fff;
    --color-invalid: #f00;
    --color-light: #04664829;
    --color-button: #e4e4e4;
    --color-border: #0000002b;
    --color-border-light: #0000000a;
    --color-border-dark: #9f9f9f;
    --color-hover: #cad50733;
    --color-shadow: #00000038;
    --color-marked: #ffff0036;
    --color-1: #cad507;
    --color-2: #87c272;
    --color-3: #41ab34;
    --color-4: #2d8469;
    --color-5: #017e59;
    --color-6: #2fcca1;
    --color-7: #bef9b5;
    --color-8: #b92051;
    --color-5-fixed: #006749;
    --color-5-light: #00674a08
}

.color-maroon {
    --color-primary: #a71c46;
    --color-primary-light: #8a153842;
    --color-primary-lighter: #8a153817;
    --color-primary-dark: #830b2f;
    --color-primary-darker: #5f001d
}

.color-gold {
    --color-primary: #a39161;
    --color-primary-light: #a391614d;
    --color-primary-lighter: #a3916133;
    --color-primary-dark: #7e704a;
    --color-primary-darker: #5e5337
}

.color-flat {
    --color-primary: #7b7b7b;
    --color-primary-light: #7b7b7b3d;
    --color-primary-lighter: #7b7b7b21;
    --color-primary-dark: #4a4949;
    --color-primary-darker: #272727
}

.color-green {
    --color-primary: #047059;
    --color-primary-light: #04705936;
    --color-primary-lighter: #04705924;
    --color-primary-dark: #004b3ceb;
    --color-primary-darker: #023328
}

.color-blue {
    --color-primary: #1e4796;
    --color-primary-light: #154cb530;
    --color-primary-lighter: #154cb51a;
    --color-primary-dark: #00266ee6;
    --color-primary-darker: #022058
}

.color-violet {
    --color-primary: #832b64;
    --color-primary-light: #be39902b;
    --color-primary-lighter: #be399017;
    --color-primary-dark: #630041;
    --color-primary-darker: #5c003c
}

.color-brown {
    --color-primary: #854925;
    --color-primary-light: #85492536;
    --color-primary-lighter: #8549251f;
    --color-primary-dark: #672700;
    --color-primary-darker: #401a03
}

:root.dark {
    color-scheme: dark;
    --color-nav: #ccc;
    --color-text: #c0c2c8;
    --color-text-lighter: #7f7d7d;
    --color-main: #252528;
    --color-main-light: #28282a;
    --color-main-dark: #1a1a1c;
    --color-shadow: #00000045;
    --color-border: #000;
    --color-border-light: #00000075;
    --color-border-dark: #000;
    --color-text-placeholder: #c0c2c852;
    --color-blur-light: #343434b5;
    --color-input: #1a1a1e;
    --color-invalid: #d60000;
    --color-1: #a9b310;
    --color-5: #009368;
    --color-6: #114839;
    --color-7: #113229;
    --color-light: #004731b0;
    --color-button: #4e4f52;
    --color-hover: #2b2d0b;
    --color-icon: #ffffff;
    --color-info: #95c3ff;
    --img-filter: brightness(0) invert(1)
}

    :root.dark .bright {
        filter: brightness(125%)
    }

    :root.dark.color-maroon {
        --color-primary: #770f2f;
        --color-primary-light: #d15c7f75;
        --color-primary-lighter: #8a153817;
        --color-primary-dark: #600823;
        --color-primary-darker: #5f001d
    }

    :root.dark.color-gold {
        --color-primary: #a39161;
        --color-primary-light: #a391614d;
        --color-primary-lighter: #a3916133;
        --color-primary-dark: #7e704a;
        --color-primary-darker: #5e5337
    }

    :root.dark.color-flat {
        --color-primary: #7b7b7b;
        --color-primary-light: #7b7b7b3d;
        --color-primary-lighter: #7b7b7b21;
        --color-primary-dark: #4a4949;
        --color-primary-darker: #272727
    }

    :root.dark.color-green {
        --color-primary: #0b725c;
        --color-primary-light: #097b6336;
        --color-primary-lighter: #0c6e5924;
        --color-primary-dark: #096552eb;
        --color-primary-darker: #033e31
    }

    :root.dark.color-blue {
        --color-primary: #2d549f;
        --color-primary-light: #154cb530;
        --color-primary-lighter: #154cb51a;
        --color-primary-dark: #00266ee6;
        --color-primary-darker: #022058;
        --color-text-placeholder: white
    }

    :root.dark.color-violet {
        --color-primary: #832b64;
        --color-primary-light: #be39902b;
        --color-primary-lighter: #be399017;
        --color-primary-dark: #630041;
        --color-primary-darker: #5c003c
    }

    :root.dark.color-brown {
        --color-primary: #854925;
        --color-primary-light: #85492536;
        --color-primary-lighter: #8549251f;
        --color-primary-dark: #672700;
        --color-primary-darker: #401a03
    }

    :root.dark .invert-icon img {
        filter: brightness(0) invert(1)
    }

    :root.dark .invert-icon svg path {
        fill: #fff
    }

    :root.dark .bright-icon img, :root.dark .bright-icon svg {
        filter: brightness(1.5)
    }

    :root.dark .dim-lighting {
        filter: brightness(90%)
    }

    :root.dark .grayscale-hover-normal {
        filter: brightness(0) invert(1);
        opacity: .75
    }

        :root.dark .grayscale-hover-normal:hover {
            filter: brightness(110%);
            opacity: 1
        }

[class*=" icon-"], [class^=icon-] {
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: 100%;
    width: 1.5em;
    height: 1.5em;
    display: block
}

.icon-lock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath opacity='0.5' d='M2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.75736 10 5.17157 10 8 10H16C18.8284 10 20.2426 10 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16Z' fill='%23d94906'/%3E%3Cpath d='M12 18C13.1046 18 14 17.1046 14 16C14 14.8954 13.1046 14 12 14C10.8954 14 10 14.8954 10 16C10 17.1046 10.8954 18 12 18Z' fill='%23d94906'/%3E%3Cpath d='M6.75 8C6.75 5.10051 9.10051 2.75 12 2.75C14.8995 2.75 17.25 5.10051 17.25 8V10.0036C17.8174 10.0089 18.3135 10.022 18.75 10.0546V8C18.75 4.27208 15.7279 1.25 12 1.25C8.27208 1.25 5.25 4.27208 5.25 8V10.0546C5.68651 10.022 6.18264 10.0089 6.75 10.0036V8Z' fill='%23d94906'/%3E%3C/svg%3E")
}

.icon-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' class='w-3'%3E%3Cpath opacity='0.5' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' fill='green'%3E%3C/path%3E%3Cpath d='M16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z' fill='green'%3E%3C/path%3E%3C/svg%3E")
}

.icon-disabled {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' class='w-3'%3E%3Cpath opacity='0.5' d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' fill='orangeRed'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.25 12C7.25 9.37665 9.37665 7.25 12 7.25C14.6234 7.25 16.75 9.37665 16.75 12C16.75 14.6234 14.6234 16.75 12 16.75C9.37665 16.75 7.25 14.6234 7.25 12ZM8.75 12C8.75 10.2051 10.2051 8.75 12 8.75C13.7949 8.75 15.25 10.2051 15.25 12C15.25 13.7949 13.7949 15.25 12 15.25C10.2051 15.25 8.75 13.7949 8.75 12Z' fill='orangeRed'/%3E%3C/svg%3E")
}

.icon-warning {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 10.4167C3 7.21907 3 5.62028 3.37752 5.08241C3.75503 4.54454 5.25832 4.02996 8.26491 3.00079L8.83772 2.80472C10.405 2.26824 11.1886 2 12 2C12.8114 2 13.595 2.26824 15.1623 2.80472L15.7351 3.00079C18.7417 4.02996 20.245 4.54454 20.6225 5.08241C21 5.62028 21 7.21907 21 10.4167V11.9914C21 17.6294 16.761 20.3655 14.1014 21.5273C13.38 21.8424 13.0193 22 12 22C10.9807 22 10.62 21.8424 9.89856 21.5273C7.23896 20.3655 3 17.6294 3 11.9914V10.4167ZM12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V12C12.75 12.4142 12.4142 12.75 12 12.75C11.5858 12.75 11.25 12.4142 11.25 12V8C11.25 7.58579 11.5858 7.25 12 7.25ZM12 16C12.5523 16 13 15.5523 13 15C13 14.4477 12.5523 14 12 14C11.4477 14 11 14.4477 11 15C11 15.5523 11.4477 16 12 16Z' fill='%239f4700'/%3E%3C/svg%3E")
}

.icon-error {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z' fill='orangeRed' fill-opacity='0.5'/%3E%3Cpath d='M15.5355 8.46447C15.9261 8.85502 15.9261 9.48818 15.5355 9.87873L13.4142 12L15.5355 14.1213C15.9261 14.5118 15.9261 15.145 15.5355 15.5355C15.145 15.9261 14.5118 15.9261 14.1213 15.5355L12 13.4142L9.87868 15.5355C9.48816 15.9261 8.85499 15.9261 8.46447 15.5355C8.07394 15.145 8.07394 14.5118 8.46447 14.1213L10.5858 12L8.46447 9.87873C8.07394 9.48818 8.07394 8.85502 8.46447 8.46447C8.85499 8.07394 9.48816 8.07394 9.87868 8.46447L12 10.5858L14.1213 8.46447C14.5118 8.07394 15.145 8.07394 15.5355 8.46447Z' fill='orangeRed'/%3E%3C/svg%3E")
}

.icon-minus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' fill='gray' fill-opacity='0.5'/%3E%3Crect x='7' y='11' width='10' height='2' rx='1' fill='gray'/%3E%3C/svg%3E")
}

:root {
    --image-width: 100%;
    --rotate-degree: 0deg;
    --scale-x: 1;
    --scale-y: 1
}

.image-preview {
    height: var(--image-width);
    min-height: var(--image-width);
    transform: rotate(var(--rotate-degree)) scaleX(var(--scale-x)) scaleY(var(--scale-y));
    transition: transform .3s ease,width .3s ease,min-width .3s ease,height .3s ease,min-height .3s ease
}

[class*=action-], [class*=status-], [class^=action-], [class^=status-] {
    padding: .25em 1.25em;
    border-radius: 100vmax
}

.status-1 {
    background-color: var(--color-info-light);
    color: var(--color-info)
}

.status-2 {
    background-color: var(--color-danger-light);
    color: var(--color-danger)
}

.status-3 {
    background-color: var(--color-success-light);
    color: var(--color-success)
}

.action-1 {
    background-color: var(--color-success-light);
    color: var(--color-success)
}

.action-2 {
    background-color: var(--color-info-light);
    color: var(--color-info)
}

.action-3 {
    background-color: var(--color-danger-light);
    color: var(--color-danger)
}

.reject-reason-container {
    background-color: #ffe5e5;
    border-left: 4px solid #ff4d4d;
    padding: 10px;
    margin-top: 10px;
    font-family: Arial,sans-serif;
    max-width: 500px;
    border-radius: 5px
}

.reject-label {
    font-weight: 700;
    color: #c00
}

.reject-text {
    color: #900;
    margin: 5px 0 0
}

.workflow-step-item {
    --height-input: 100%;
    --border-radius-input: 0;
    padding: 5px;
    margin-bottom: 5px;
    gap: 5px;
    display: grid;
    grid-template-columns: 3.5em 1fr 1fr 1fr 14em 5em 3em;
    background: var(--color-main);
    min-height: 3.75em
}

:root {
    --color-tag-stick-note: #f4e28d;
    --color-tag-orange: #f3ddc4;
    --color-tag-red: #eac1c1;
    --color-tag-violet: #e4d6f6;
    --color-tag-blue: #ccdef5;
    --color-tag-green: #bfecc5
}

[class*=" tag-"], [class^=tag-] {
    --tag-background: gray;
    padding: .2em .75em;
    font-size: 90%;
    display: flex;
    place-items: center;
    border-start-start-radius: .2em;
    border-end-start-radius: .2em;
    background-color: var(--tag-background) !important;
    color: #313131;
    border: none !important;
    position: relative;
    white-space: nowrap;
    user-select: none;
    margin-inline-end: .4em
}

    [class*=" tag-"] span, [class^=tag-] span {
        white-space: pre-wrap
    }

        [class*=" tag-"] span.trim-ellipsis, [class^=tag-] span.trim-ellipsis {
            max-width: 8em
        }

    [class*=" tag-"]:before, [class^=tag-]:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: .8em solid transparent;
        border-inline-start: .4em solid var(--tag-background);
        border-bottom: .8em solid transparent;
        left: var(--position-end);
        right: var(--position-start);
        transform: translateX(calc(100% * var(--direction-offset)))
    }

    [class*=" tag-"]:after, [class^=tag-]:after {
        content: "";
        position: absolute;
        width: .25em;
        height: .25em;
        background: currentColor;
        border-radius: 50%;
        opacity: .5;
        left: var(--position-end);
        right: var(--position-start)
    }

    [class*=" tag-"]:hover, [class^=tag-]:hover {
        box-shadow: 0 1px 2px var(--color-shadow)
    }

.tag-Orange, .tag-orange {
    --tag-background: var(--color-tag-orange)
}

.tag-Green, .tag-green {
    --tag-background: var(--color-tag-green)
}

.tag-Blue, .tag-blue {
    --tag-background: var(--color-tag-blue)
}

.tag-Red, .tag-red {
    --tag-background: var(--color-tag-red)
}

.tag-Violet, .tag-violet {
    --tag-background: var(--color-tag-violet)
}

.tag-StickyNote {
    --tag-background: var(--color-tag-stick-note)
}

.form-tag-popup {
    color: #313131
}

    .form-tag-popup .modal-header {
        gap: 0
    }

        .form-tag-popup .modal-header .btn-modal {
            margin: 0 .25em
        }

    .form-tag-popup textarea::placeholder {
        color: currentColor
    }

.popup-StickyNote .modal-content {
    background-color: var(--color-tag-stick-note)
}

.popup-Orange .modal-content {
    background-color: var(--color-tag-orange)
}

.popup-Green .modal-content {
    background-color: var(--color-tag-green)
}

.popup-Blue .modal-content {
    background-color: var(--color-tag-blue)
}

.popup-Red .modal-content {
    background-color: var(--color-tag-red)
}

.popup-Violet .modal-content {
    background-color: var(--color-tag-violet)
}

.color-orange {
    color: var(--color-tag-orange)
}

.color-green {
    color: var(--color-tag-green)
}

.time-line {
    position: relative;
    padding: 2em 0;
    display: flex;
    flex-direction: column;
    gap: 1em
}

    .time-line:before {
        content: "";
        width: 3px;
        background: linear-gradient(45deg,transparent,var(--color-primary) 30%);
        position: absolute;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;
        box-sizing: content-box;
        border-radius: .25em
    }

    .time-line .time-step {
        display: flex;
        cursor: pointer
    }

        .time-line .time-step .time-span {
            --angle-background: 90deg;
            --angle-position: 1;
            width: calc(50% - 10px);
            background: linear-gradient(calc(var(--angle-background) * var(--direction-offset)),#8f1237,var(--color-primary));
            color: #fff;
            display: flex;
            padding: 1em;
            font-size: 90%;
            border-radius: .5em;
            position: relative;
            filter: drop-shadow(0 3px 2px var(--color-shadow))
        }

            .time-line .time-step .time-span:after {
                content: "";
                z-index: 1;
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-inline-start: 10px solid var(--color-primary);
                position: absolute;
                right: var(--position-start);
                left: var(--position-end);
                transform: translateX(calc(100% * var(--direction-offset) * var(--angle-position))) translateY(-50%);
                top: 50%
            }

        .time-line .time-step:nth-child(even) {
            flex-direction: row-reverse
        }

            .time-line .time-step:nth-child(even) .time-span {
                --angle-background: 235deg
            }

                .time-line .time-step:nth-child(even) .time-span:after {
                    --angle-position: -1;
                    right: var(--position-end);
                    left: var(--position-start);
                    border-inline-start: none;
                    border-inline-end: 10px solid var(--color-primary)
                }

[class*=timeline-action-], [class^=timeline-action-] {
    padding: .15em 1em;
    border-radius: 100vmax;
    position: absolute;
    top: 0;
    right: 0;
    margin: 5px;
    opacity: .95;
    font-size: 90%
}

.timeline-action-1 {
    background-color: var(--color-success)
}

.timeline-action-2 {
    background-color: var(--color-info)
}

.timeline-action-3 {
    background-color: var(--color-danger)
}

.drag-handle {
    cursor: move;
    opacity: .6
}

    .drag-handle:hover {
        opacity: 1
    }

.cdk-drag-preview {
    box-shadow: 0 0 12px 0 var(--color-shadow)
}

.cdk-drag-placeholder {
    opacity: 0
}

.cdk-drag-animating {
    transition: transform .2s
}

.drop-list.cdk-drop-list-dragging .drop-list:not(.cdk-drag-placeholder) {
    transition: transform .2s
}

.drop-list.cdk-drop-list-dragging .drag-item:not(.cdk-drag-placeholder) {
    transition: transform .2s
}

.html-editor {
    cursor: initial;
    padding: 0;
    place-items: initial
}

    .html-editor .html-toolbar {
        border-bottom: var(--size-unit) solid var(--color-border-light);
        background-color: var(--color-input)
    }

        .html-editor .html-toolbar .group {
            display: flex;
            place-items: center;
            gap: .2em;
            padding: .2em;
            border-radius: .5em
        }

        .html-editor .html-toolbar input, .html-editor .html-toolbar select {
            border: var(--size-unit) solid var(--color-border);
            border-radius: var(--border-radius-input);
            min-width: 2em;
            min-height: 0;
            height: 2em
        }

        .html-editor .html-toolbar .btn {
            border-color: var(--color-border)
        }

    .html-editor .html-code-view, .html-editor .html-text-view {
        outline: 0;
        padding: var(--padding-input);
        padding-top: .5em;
        overflow: hidden;
        overflow-y: auto;
        cursor: text
    }

    .html-editor .html-code-view {
        font-family: Consolas,sans-serif
    }

:root {
    --height-tree-view-item: 3em;
    --padding-tree-view-item: 0;
    --size-indent: 1em;
    --wrap-tree-view-item: nowrap;
    --background-tree-item-active: var(--color-primary-lighter);
    --width-arrow: 1.5em
}

.tree-view {
    --icon-folder: url(https://islam.gov.qa/cdn/svg/folder.svg);
    --icon-folder-expanded: url(https://islam.gov.qa/cdn/svg/folder_opened.svg);
    --icon-size: 1.45em;
    overflow: auto;
    height: 100%
}

    .tree-view.tree-view-auto {
        --height-tree-view-item: auto;
        --wrap-tree-view-item: initial;
        --padding-tree-view-item: 3px
    }

    .tree-view.tree-view-index a:hover {
        text-decoration: underline;
        cursor: pointer
    }

    .tree-view ul {
        margin: 0;
        padding: 0;
        position: relative;
        list-style: none
    }

        .tree-view ul li {
            --tree-depth: 1;
            --padding-start: calc(var(--size-indent) * var(--tree-depth) + var(--width-arrow));
            position: relative;
            z-index: 1;
            user-select: none;
            margin: 0;
            padding: 0;
            opacity: 0;
            pointer-events: none;
            height: 0;
            transform: translateX(calc(var(--direction-offset) * -.25em));
            flex-direction: column;
            transition: transform .3s
        }

            .tree-view ul li:has(.tree-view-itemspan.arrow) {
                --padding-start: calc(var(--size-indent) * var(--tree-depth))
            }

            .tree-view ul li:before {
                content: "";
                position: absolute;
                margin-inline-start: calc(var(--size-indent) * var(--tree-depth) - .25em);
                width: 1px;
                height: 100%;
                z-index: -1;
                border-inline-start: 1px solid var(--color-text);
                opacity: .1
            }

            .tree-view ul li.expanded > ul > li {
                opacity: 1;
                pointer-events: auto;
                height: auto;
                transform: none
            }

            .tree-view ul li.expanded > .tree-view-item span.icon:not(.file) {
                background-image: var(--icon-folder-expanded)
            }

            .tree-view ul li.expanded > .tree-view-item .arrow::before {
                transform: rotate(calc(var(--direction-offset) * 90deg))
            }

            .tree-view ul li .tree-view-item {
                --width-input-checkbox: 1.4em;
                cursor: pointer;
                min-width: 100%;
                display: flex;
                place-items: center;
                border: none;
                color: var(--color-text);
                background-color: transparent;
                padding-block: var(--padding-tree-view-item);
                padding-inline-start: var(--padding-start);
                height: var(--height-tree-view-item);
                border-radius: var(--border-radius-tree-view-item)
            }

                .tree-view ul li .tree-view-item:hover {
                    background-color: var(--color-primary-lighter)
                }

                .tree-view ul li .tree-view-item.active {
                    background-color: var(--background-tree-item-active);
                    outline: var(--size-unit) dashed var(--color-primary);
                    outline-offset: -1px
                }

                .tree-view ul li .tree-view-item .label, .tree-view ul li .tree-view-item label {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: var(--wrap-tree-view-item);
                    position: relative;
                    align-content: center
                }

                .tree-view ul li .tree-view-item .label {
                    padding: 0 .25em
                }

                .tree-view ul li .tree-view-item span {
                    cursor: default;
                    width: var(--width-arrow);
                    min-width: var(--width-arrow);
                    height: 2em;
                    min-height: 2em
                }

                .tree-view ul li .tree-view-item .checkbox input[type=checkbox] {
                    margin-inline-end: .5em
                }

                .tree-view ul li .tree-view-item .arrow {
                    cursor: default;
                    display: flex;
                    place-content: center;
                    place-items: center;
                    background-color: transparent
                }

                    .tree-view ul li .tree-view-item .arrow:before {
                        content: "";
                        width: 0;
                        height: 0;
                        opacity: .75;
                        border-top: 4px solid transparent;
                        border-bottom: 4px solid transparent;
                        border-inline-start: 5px solid currentColor;
                        transition: transform .3s
                    }

                    .tree-view ul li .tree-view-item .arrow:hover::before {
                        opacity: 1
                    }

                .tree-view ul li .tree-view-item span.icon {
                    background-image: var(--icon-folder);
                    background-size: var(--icon-size);
                    background-repeat: no-repeat no-repeat;
                    background-position: 50%;
                    width: var(--icon-size);
                    min-width: var(--icon-size);
                    height: var(--icon-size);
                    min-height: var(--icon-size)
                }

                    .tree-view ul li .tree-view-item span.icon.file {
                        --icon-folder: url(https://islam.gov.qa/cdn/svg/file_type_text.svg)
                    }

                    .tree-view ul li .tree-view-item span.icon.file-outline {
                        --icon-folder: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath opacity="0.5" d="M15.3929 4.05365L14.8912 4.61112L15.3929 4.05365ZM19.3517 7.61654L18.85 8.17402L19.3517 7.61654ZM21.654 10.1541L20.9689 10.4592V10.4592L21.654 10.1541ZM3.17157 20.8284L3.7019 20.2981H3.7019L3.17157 20.8284ZM20.8284 20.8284L20.2981 20.2981L20.2981 20.2981L20.8284 20.8284ZM14 21.25H10V22.75H14V21.25ZM2.75 14V10H1.25V14H2.75ZM21.25 13.5629V14H22.75V13.5629H21.25ZM14.8912 4.61112L18.85 8.17402L19.8534 7.05907L15.8947 3.49618L14.8912 4.61112ZM22.75 13.5629C22.75 11.8745 22.7651 10.8055 22.3391 9.84897L20.9689 10.4592C21.2349 11.0565 21.25 11.742 21.25 13.5629H22.75ZM18.85 8.17402C20.2034 9.3921 20.7029 9.86199 20.9689 10.4592L22.3391 9.84897C21.9131 8.89241 21.1084 8.18853 19.8534 7.05907L18.85 8.17402ZM10.0298 2.75C11.6116 2.75 12.2085 2.76158 12.7405 2.96573L13.2779 1.5653C12.4261 1.23842 11.498 1.25 10.0298 1.25V2.75ZM15.8947 3.49618C14.8087 2.51878 14.1297 1.89214 13.2779 1.5653L12.7405 2.96573C13.2727 3.16993 13.7215 3.55836 14.8912 4.61112L15.8947 3.49618ZM10 21.25C8.09318 21.25 6.73851 21.2484 5.71085 21.1102C4.70476 20.975 4.12511 20.7213 3.7019 20.2981L2.64124 21.3588C3.38961 22.1071 4.33855 22.4392 5.51098 22.5969C6.66182 22.7516 8.13558 22.75 10 22.75V21.25ZM1.25 14C1.25 15.8644 1.24841 17.3382 1.40313 18.489C1.56076 19.6614 1.89288 20.6104 2.64124 21.3588L3.7019 20.2981C3.27869 19.8749 3.02502 19.2952 2.88976 18.2892C2.75159 17.2615 2.75 15.9068 2.75 14H1.25ZM14 22.75C15.8644 22.75 17.3382 22.7516 18.489 22.5969C19.6614 22.4392 20.6104 22.1071 21.3588 21.3588L20.2981 20.2981C19.8749 20.7213 19.2952 20.975 18.2892 21.1102C17.2615 21.2484 15.9068 21.25 14 21.25V22.75ZM21.25 14C21.25 15.9068 21.2484 17.2615 21.1102 18.2892C20.975 19.2952 20.7213 19.8749 20.2981 20.2981L21.3588 21.3588C22.1071 20.6104 22.4392 19.6614 22.5969 18.489C22.7516 17.3382 22.75 15.8644 22.75 14H21.25ZM2.75 10C2.75 8.09318 2.75159 6.73851 2.88976 5.71085C3.02502 4.70476 3.27869 4.12511 3.7019 3.7019L2.64124 2.64124C1.89288 3.38961 1.56076 4.33855 1.40313 5.51098C1.24841 6.66182 1.25 8.13558 1.25 10H2.75ZM10.0298 1.25C8.15538 1.25 6.67442 1.24842 5.51887 1.40307C4.34232 1.56054 3.39019 1.8923 2.64124 2.64124L3.7019 3.7019C4.12453 3.27928 4.70596 3.02525 5.71785 2.88982C6.75075 2.75158 8.11311 2.75 10.0298 2.75V1.25Z" fill="%231C274C"/%3E%3Cpath d="M13 2.5V5C13 7.35702 13 8.53553 13.7322 9.26777C14.4645 10 15.643 10 18 10H22" stroke="%231C274C" stroke-width="1.5"/%3E%3C/svg%3E')
                    }

                    .tree-view ul li .tree-view-item span.icon.plus {
                        --icon-folder: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath opacity="0.5" d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke="%231C274C" stroke-width="1.5"/%3E%3Cpath d="M15 12L12 12M12 12L9 12M12 12L12 9M12 12L12 15" stroke="%231C274C" stroke-width="1.5" stroke-linecap="round"/%3E%3C/svg%3E');
                        --icon-folder-expanded: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath opacity="0.5" d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke="%231C274C" stroke-width="1.5"/%3E%3Cpath d="M15 12H9" stroke="%231C274C" stroke-width="1.5" stroke-linecap="round"/%3E%3C/svg%3E')
                    }

            .tree-view ul li > ul > li {
                --tree-depth: 2
            }

                .tree-view ul li > ul > li > ul > li {
                    --tree-depth: 3
                }

                    .tree-view ul li > ul > li > ul > li > ul > li {
                        --tree-depth: 4
                    }

                        .tree-view ul li > ul > li > ul > li > ul > li > ul > li {
                            --tree-depth: 5
                        }

                            .tree-view ul li > ul > li > ul > li > ul > li > ul > li > ul > li {
                                --tree-depth: 6
                            }

                                .tree-view ul li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
                                    --tree-depth: 7
                                }

                                    .tree-view ul li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
                                        --tree-depth: 8
                                    }

                                        .tree-view ul li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
                                            --tree-depth: 9
                                        }

                                            .tree-view ul li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
                                                --tree-depth: 10
                                            }

                                                .tree-view ul li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
                                                    --tree-depth: 11
                                                }

                                                    .tree-view ul li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
                                                        --tree-depth: 12
                                                    }

                                                        .tree-view ul li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
                                                            --tree-depth: 13
                                                        }

                                                            .tree-view ul li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
                                                                --tree-depth: 14
                                                            }

                                                                .tree-view ul li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
                                                                    --tree-depth: 15
                                                                }

        .tree-view ul.active > li {
            opacity: 1;
            pointer-events: auto;
            height: auto;
            transform: none
        }

            .tree-view ul.active > li::before {
                content: none
            }

.no-events .tree-view * {
    pointer-events: none !important
}

.data-grid {
    font-size: var(--font-size)
}

    .data-grid.md {
        --font-size: 14px
    }

    .data-grid.sm {
        --font-size: 12px
    }

    .data-grid.th-no-wrap .col-header {
        white-space: nowrap
    }

    .data-grid table tr.selected, .data-grid table tr:focus, .data-grid table tr:focus-within, .data-grid table tr:hover {
        background-color: var(--color-highlight-light)
    }

    .data-grid table td, .data-grid table th {
        border: var(--size-unit) solid var(--color-border)
    }

        .data-grid table td:first-of-type, .data-grid table th:first-of-type {
            border-inline-start: none
        }

        .data-grid table td:last-of-type, .data-grid table th:last-of-type {
            border-inline-end: none
        }

    .data-grid table th {
        padding: 0 !important;
        border-inline-end: 0
    }

        .data-grid table th button {
            background-color: var(--color-main);
            width: 100%;
            border: none;
            height: 3em;
            font-weight: 500;
            color: var(--color-text)
        }

            .data-grid table th button:focus {
                background: linear-gradient(0deg,var(--color-main-light),var(--color-main-dark))
            }

            .data-grid table th button .checkbox {
                padding: 0 .15em !important
            }

    .data-grid table td {
        padding: .4em .4em;
        overflow: hidden;
        height: 0
    }

        .data-grid table td:focus, .data-grid table td:focus-within {
            outline: 2px solid var(--color-highlight);
            outline-offset: -2px
        }

        .data-grid table td .input-field, .data-grid table td input[type=text] {
            background: 0 0
        }

        .data-grid table td:has(.ng-invalid.ng-touched) {
            background-color: rgba(255,0,0,.0392156863);
            outline: 1px solid var(--color-danger);
            outline-offset: -1px
        }

        .data-grid table td:hover {
            background-color: var(--color-highlight-light)
        }

    .data-grid td:has(input) {
        padding: 0 !important
    }

    .data-grid .col-header {
        background-color: var(--color-main)
    }

    .data-grid .input-field, .data-grid input[type=email], .data-grid input[type=number], .data-grid input[type=password], .data-grid input[type=tel], .data-grid input[type=text], .data-grid select, .data-grid textarea {
        border-radius: 0 !important;
        border: none;
        width: 100%;
        outline: 0 !important;
        height: 100%
    }

    .data-grid textarea {
        resize: vertical;
        height: var(--height-input)
    }

    .data-grid .actions {
        display: flex;
        place-items: center;
        place-content: center;
        gap: .25em
    }

        .data-grid .actions .btn {
            padding: 0;
            width: 2em;
            height: 2em
        }