/*library components*/
.reel.reel-properties {
    --indicator-color: var(--orangecolor);
    --indicator-bgcolor: var(--app-black-color);
    --indicator-inline-space: 0px;
    --indicator-block-space: 2px;
    --indicator-padding: 0.25rem 0.5rem;
    --button-color: var(--orangecolor);
    --button-bgcolor: transparent;
    --button-hover-color: var(--orangecolor);
    --button-hover-bgcolor: var(--app-black-color);
}


.slider.slider-properties {
    --accent-color: var(--bluecolor);
    --thumb-scale: 1.8;
    --thumb-shadow-opacity: 0.5;
    --tooltip-color: var(--bluecolor);
    --tooltip-thumb-distance: 1.2rem;
    --tooltip-border-color: var(--bluecolor);
    --tooltip-border-size: 2px;
    --tooltip-background-color: var(--app-black-color);
    margin-inline: 0.75rem;
}

    .slider.slider-properties[data-is-disabled] {
        --accent-color: var(--lightgraycolor);
        --tooltip-color: var(--mediumgraycolor);
        --tooltip-border-color: var(--mediumgraycolor);
        pointer-events: none;
    }


.switch.switch-properties {
    --on-track-color: var(--greencolor);
    --off-track-color: var(--darkgraycolor);
    --on-thumb-color: var(--whitesmokecolor);
    --off-thumb-color: var(--lightgraycolor);
    --transition-duration: 0.25s;
}

.warnning-switch.switch.switch-properties {
    --on-track-color: var(--redcolor);
    --off-track-color: var(--darkgraycolor);
    --on-thumb-color: var(--whitesmokecolor);
    --off-thumb-color: var(--lightgraycolor);
    --transition-duration: 0.25s;
}


.input-properties {
    --input-color: var(--app-control-color);
    --input-bgcolor: var(--app-control-bgcolor);
    --input-disabled-bgcolor: var(--app-disabled-bgcolor);
    --input-disabled-color: var(--app-disabled-color);
    --input-brcolor: var(--app-control-brcolor);
    --input-disabled-brcolor: var(--app-disabled-brcolor);
    --input-focus-brcolor: var(--app-theme-color);
    --input-focus-bgcolor: var(--app-black-color);
    --input-hover-brcolor: var(--app-highlight-color);
    --input-padding-inline: 0.5rem;
    --input-padding-block: 0.5rem;
    --input-border-radius: 0.5rem;
    --input-placeholder-color: var(--graycolor);
    --input-border-width: 2px;
}

textarea.input {
    line-height: 1.5;
    text-wrap: pretty;
}


.navigation-curtain-container.navigation-curtain-properties {
    --bar-bg-color: var(--app-layout-bgcolor);
    --bar-color: var(--app-header-color);
    --bar-backdrop-filter: var(--app-backdrop-filter);
    --curtain-bg-color: transparent;
    --curtain-color: transparent;
}


.group.group-properties {
    --gap: 0.5rem;
    --label-color: var(--app-theme-color);
    --label-disabled-color: var(--app-disabled-color);
    --label-font-weight: normal;
    --label-font-size: 0.9375rem;
}

[dir="rtl"] .group.group-properties {
    --label-font-size: 1rem;
}

.group .group-header > :is(label, span) {
    line-height: 1;
}


.snackbar-item.snackbar-item-properties {
    --bg-color: var(--app-control-bgcolor);
    --text-color: var(--app-control-color);
    --outline-color: var(--app-control-brcolor);
}


.date-input.date-input-properties {
    --label-focus-color: var(--app-highlight-color);
    --invalid-border-color: var(--redcolor);
    --input-focus-bgcolor: var(--app-control-bgcolor);
    --input-focus-color: var(--app-highlight-color);
    --input-selection-color: var(--app-highlight-color);
}


.window.window-properties {
    --backdrop-color: var(--app-window-backdrop-color);
}


.message-box-frame.message-box-properties {
    --padding: 0.5rem;
    --backgdrop-color: var(--app-messagebox-backdrop-color);
    --background-color: var(--app-messagebox-bgcolor);
    --header-end-brcolor: var(--app-messagebox-header-end-brcolor);
    --header-color: var(--app-header-color);
    --body-padding-block: 2rem;
    --body-color: var(--app-content-color);
    --border-width: 2px;
}


.table.table-properties {
    /*header*/
    --header-box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 1);
    --th-bg-color: var(--app-table-header-bg-color);
    --th-color: var(--app-table-header-color);
    --th-padding: 1rem 0.5rem;
    /*row*/
    --tr-bg-color1: var(--app-table-row-bgcolor);
    --tr-bg-color2: var(--app-table-row-bgcolor);
    --tr-color: var(--app-table-row-color);
    --tr-hover-bg-color: var(--app-table-row-hover-bgcolor);
    --tr-hover-color: var(--app-table-row-hover-color);
    --td-padding: 2rem 0.2rem;
    /*lines*/
    --horizontal-lines-width: 0px;
    --vertical-lines-width: 0px;
    --lines-color: var(--app-black-color);
    /*selected*/
    --tr-selected-outline-color: var(--orangecolor);
    --tr-selected-outline-width: 3px;
    --tr-selected-color: var(--app-theme-color);
    /* opted out */
    --tr-opted-out-bg-color: var(--darkgraycolor);
    --tr-opted-out-color: var(--lightgraycolor);
    --tr-opted-out-opacity: 1;
}

    .table.table-properties th {
        font-weight: normal;
    }

    .table.table-properties tr {
        border-radius: 0.75rem;
    }

.loader-frame.loader-properties {
    --spinner-border-width: 3px;
    --spinner-diameter: 50px;
    --spinner-background-color: var(--app-highlight-transparent-color);
    --spinner-color1: transparent;
    --spinner-color2: var(--bluecolor);
    --spinner-shadow: 0 2px 8px -1px rgba(0,0,0,1);
    --spinner-down-height: 10svh;
}

.search-input.search-input-properties {
    --search-input-border-color: var(--app-highlight-color);
    --search-input-bg-color: var(--app-control-bgcolor);
    --search-input-color: var(--app-highlight-color);
    --search-input-placeholder-color: var(--graycolor);
    --search-input-font-size: 1rem;
    --search-input-font-weight: normal;
}

.search-debouncer.search-debouncer-properties {
    background-color: var(--app-black-color);
    border: 2px solid var(--app-highlight-color);
    color: var(--app-theme-color);
    border-radius: 2.0em;
    font-size: 1.1em;
    gap: 0.5em;
    padding: 0em 0.5em;
    --focus-bgcolor: var(--app-black-color);
    --focus-color: var(--orangecolor);
    --focus-brcolor: var(--orangecolor);
    --placeholder-color: var--mediumgraycolor);
    --focus-placeholder-color: var(--graycolor);
}

    .search-debouncer.search-debouncer-properties .search-debouncer-input {
        padding: 0.75rem 0em;
    }

    .scroller {
        padding-inline-end: 0px;
    }

@media (width < 32rem) {
    .message-box {
        zoom: 0.9;
    }

    .snackbar-item.snackbar-item-properties {
        zoom: 0.9;
    }
}

/*app components*/
.select-culture-container.select-culture-properties {
    --select-bgcolor: var(--app-control-bgcolor);
    --select-color: var(--app-theme-color);
}

td:has(.table-remove-button) {
    padding-inline: 0.5rem;
}

.table-remove-button {
    background-color: transparent;
    color: var(--app-theme-color);
    font-size: 1.2rem;
}

    .table-remove-button:hover {
        color: var(--redcolor);
    }

.table-weight-record {
    display: grid;
    grid-auto-rows: min-content;
    align-content: center;
    justify-content: center;
    justify-items: center;
    line-height: 1;
    gap: 0.1em;
}

    .table-weight-record .table-weight-value-units {
        display: flex;
        justify-content: center;
        direction: ltr;
        align-items: baseline;
        gap: 0.1em;
        color: var(--greencolor);
    }

.table-weight-value-units .weight-value {
    font-size: 1em;
}

.table-weight-value-units .weight-units {
    font-size: 0.8em;
}

.table-weight-record .with-truck-trailer {
    width: max-content;
    font-size: 0.8em;
}


.input-string.input-string-list-properties {
    --ul-max-height: 7.5rem;
    --ul-color: var(--app-color);
    --ul-bg-color: var(--app-black-color);
    --ul-box-shadow: 0rem 0.2rem 0.2rem -0.2rem rgba(0, 0, 0, 0.5);
    --ul-border-radius: 0.5rem;
    --ul-scrollbar-track-bgcolor: transparent;
    --ul-scrollbar-thumb-bgcolor: var(--app-scrollbar-thumb-bgcolor);
    --ul-scrollbar-thumb-radius: var(--app-scrollbar-width);
    --li-padding-block: 0.5rem;
    --li-padding-inline: 1rem;
    --li-hover-bgcolor: var(--app-highlight-color);
    --li-hover-color: var(--app-black-color);
}

.tooltip.tooltip-properties {
    --bg-color: var(--app-black-color);
    --color: var(--app-theme-color);
    --offset: 0.25rem;
    --z-index: 10;
}


.hint.hint-properties {
    --bg-color: var(--app-highlight-color);
    --color: var(--app-black-color);
    --z-index: 100;
    --padding: 0.5rem;
    --border-radius: 0.5rem;
    --offset: 0.25rem;
    --border: 0px solid var(--app-highlight-color);
    font-weight: bold;
}