html {
    --colorBackground: #ffffff;
    --colorText: #000;
    --colorHover: #FAF2C3;
    --colorHoverText: #000000;
    --colorSelected: #f29d00;
    --colorSelectedText: #000000;
    --colorLight: #fffcee;
    --colorLightBorder: #ddd;
    --colorShadow: #888;
    --colorImportant: #ff6000;
    --colorDiscount: #FCAA6F;
    --colorDiscountText: #000;
    --colorSearch: #3FA;
    --colorAccept: #87bb09;
}

/*@media (prefers-color-scheme: dark) {
    html {
        --colorBackground: #111;
        --colorText: #FFF;
        --colorHover: #483300;
        --colorHoverText: #FFF;
        --colorSelected: #f29d00;
        --colorSelectedText: #000000;
        --colorLight: #251a00;
        --colorLightBorder: #444;
    }

    body {
        background-color: #222;
    }

    #page {
        background-color: var(--colorBackground);
        color: var(--colorText);
    }

    #header, #sidebar {
        background: var(--colorHover);
        color: var(--colorHoverText: #FFF);
    }
}*/

.textarea-full {
    width: 100%;
    height: 100%;
    resize: none;
}

.select-list {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    border: 1px solid black;
    padding: .1em;
    border-radius: .25em;
    box-sizing: border-box;
    margin-top: .25em;
    background: var(--colorBackground);
    z-index: 10;
    max-height: 15em;
    overflow-y: auto;
}

.select-option {
    padding: .2em .4em;
    border-radius: .2em;
}

.select-option.selected {
    background-color: var(--colorSelected);
    color: var(--colorSelectedText);
    background-image: url('/obchod/images/right.png');
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 2em;
}

.select-option:hover {
    background-color: var(--colorHover);
    color: var(--colorHoverText);
    cursor: pointer;
}

.grid-column-all {
    grid-column: 1 / -1;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.grid {
    display: grid;
}

.inventory-item {
    width: 100%;
    font-size: 0.9em;
    text-align: center;
    text-indent: 0;
    border: 1px solid var(--colorLightBorder);
    padding: .5em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    box-shadow: .2em .2em .5em var(--colorShadow);
    border-radius: .5em;
    background-color: var(--colorLight);
    transition: filter .5s ease-in, background-color .25s ease-in-out, flex-basis 0.2s;
}

.inventory-item:hover {
    transform-origin: center;
    z-index: 1;
    background-color: var(--colorHover) !important;
}

.inventory-item:hover .item-background {
    filter: opacity(50%) blur(.1rem);
}

.item-gradient, .item-background {
    left: 0;
    top: 0;
    border-radius: .5em;
    width: 100%;
    height: 100%;
    position: absolute;
}

.item-background {
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: opacity(40%) blur(.1rem);
    transition: filter .25s ease-in;
}

.item-gradient {
    z-index: -1;
    filter: opacity(90%);
    background: linear-gradient(130deg, transparent, var(--colorBackground), transparent);
}

    .bbalicek.full {
        grid-column: 1 / -1;
    }

    #content .bbalicek img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }

        #content .bbalicek img.small {
            max-width: 175px;
        }

.bbalicek-popis {
    text-align: left;
}

.bbalicek-varianta {
    font-size: 1em;
    font-style: italic;
}

.bbalicek-detail-button {
    color: #147;
    cursor: pointer;
}

.bbalicek .flex-center {
    justify-content: center;
    align-items: center;
    display: flex;
    flex: 1 1 auto;
}

.inventory button, .inventory input {
    border: 1px solid var(--colorShadow);
    font-size: 1.2em;
    padding: 0.25em .5em;
    border-radius: .25em;
    transition: background-color .15s ease-out;
}

.item-to-cart button, .item-to-cart input {
    flex: 1;
    min-width: 0;
}

.inventory button:hover {
    background-color: var(--colorSelected);
    color: var(--colorSelectedText);
}

.inventory button:active {
    border-style: inset;
    background-color: var(--colorHover);
}

.bsortiment > *:not(:last-child) {
    margin-bottom: 5px;
}

.bsortiment * {
    margin-top: 0;
}

.inventory-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
    grid-gap: 0.5em;
    margin: .5em 0;
}

    .item-endorsement {
        font-size: 0.8em;
    }

.bsortiment h3 {
    font-size: 135%;
    color: #147;
}

.bsortiment img {
    border: 2px solid transparent;
}

.bsortiment img:hover {
    border: 2px solid gray;
}

.akce-skola.gray {
    background-color: #EEE;
}

.akce-skola.yellow {
    background-color: #FAF2C3;
}

.recommended-row {
    display: flex;
    overflow-x: auto;
    width: 100%;
    padding-bottom: .5em;
}
.recommended-row .inventory-item {
  min-width: 15em;
  font-size: 60%;
}

.select { position: relative; min-width: 2em; min-height: 2.4em; width: 100%; }
.select input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; }
.table-row { display: contents; }
.table-cell { padding: .5em; border: 1px solid lightgray; width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box; grid-column: var(--column); }
.table { display: grid; grid-template-columns: repeat(var(--columns), auto); align-items: center; border: 1px solid black; }
.table-head { display: contents; font-weight: bold; }
.table-body, .table-foot { display: contents; }
.highlight .table-cell { background-color: var(--colorImportant); }
.hint-input { position: relative; }
.hint-input .close { position: absolute; right: 0; top: 0; max-height: 100%; filter: opacity(.6); }
.hint-input .close:hover { cursor: pointer; filter: none; }
.color-picker { display: flex; flex-direction: column; align-items: center; --saturation: 100%; --hue: 0; --light: 100%; --size: 400px; }
.color-picker-wheel { width: var(--size); height: var(--size); background-image: radial-gradient(circle, #FFF 0%, #FFF0 calc(var(--size)*.25), #000 calc(var(--size)*.5), #000), conic-gradient( hsl(0, var(--saturation), 50%), hsl(90, var(--saturation), 50%), hsl(180, var(--saturation), 50%), hsl(270, var(--saturation), 50%), hsl(360, var(--saturation), 50%) ); border-radius: 50%; position: relative; }
.color-picker-bar { width: 1.5em; height: var(--size); background-image: linear-gradient(to bottom, hsl(var(--hue), 0%, var(--light)), hsl(var(--hue), 100%, var(--light))); outline: 2px solid black; margin: .5em; position: relative; }
.color-picker-slider { width: 100%; left: 0; position: absolute; height: 1em; border: 1px solid white; outline: 1px solid black; background-color: hsl(var(--hue), var(--saturation), var(--light)); margin-top: -.5em; pointer-events: none; box-sizing: border-box; }
.color-picker-preview { border-radius: 50%; width: 1.5em; height: 1.5em; border: 2px solid black; }
.color-picker-point { border-radius: 50%; border: 1px solid white; outline: 1px solid black; background-color: hsl(var(--hue), var(--saturation), var(--light)); position: absolute; width: 1em; height: 1em; pointer-events: none; margin: -.5em; box-sizing: border-box; }
.uploader-buttons { margin: .5em; display: flex; flex-direction: column; }
.uploader-buttons button { margin-right: auto; margin-top: .5em; padding: 0.2em 1.2em; }

.text-center { text-align: center; }
.border-hover:hover { outline: .2em solid var(--colorSelected); cursor: context-menu; }
.like-link { cursor: pointer; color: #06c; }
.like-link:hover { color: #147; text-decoration: underline; }


.checkbox-button {
    appearance: none;
    border: .2em outset black;
    border-radius: .2em;
    width: 1.75em;
    height: 1.75em;
    min-width: 1.75em;
    min-height: 1.75em;
    background-color: var(--colorShadow);
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: luminosity;
}
.checkbox-button:hover {
    background-color: var(--colorHover);
}
.checkbox-button:checked {
    background-color: var(--colorSelected);
    border-style: inset;
    background-blend-mode: initial;
}

.tooltip:after {
    padding: 2px;
    display:none;
    position: relative;
    top: -20px;
    right: -30px;
    width: 150px;
    text-align: center;
    background-color: var(--colorHover);
    color: var(--colorHoverText);
    border: 1px solid var(--colorSelected);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    z-index: 999;
}

.tooltip:hover:after {
    display: block;
}

.loading::after {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  display: block;
  background-color: #0008;
  content: "";
  pointer-events: all;
  z-index: 10000;
  background-image: url('images/loading_big.gif');
  background-repeat: no-repeat;
  background-position: center;
}

.switch .option:hover { background-color: var(--colorHover); }
.switch .option.selected { background-color: var(--colorSelected); }