/* global variables */
:root {
    --pri: #7daa1d;
    --pri-l: #7daa1daa;
    --pri-u: #7daa1d55;
    --pri-x: #7daa1d22;
    --sec: #da833f;
    --sec-l: #da833faa;
    --sec-u: #da833f55;
    --sec-x: #da833f22;
    --def: #333;
    --def-l: #777;
    --def-u: #bbb;
    --def-x: #ededed;
    --def-i: #f8f8f8;
    --war: #983d78;
    --war-l: #983d78aa;
    --war-u: #983d7855;
    --war-x: #983d7822;
}

/*
 * print exactly what it renders on screen,
 */
@media print {
    .card {
        border: solid 1px var(--def-u);
    }

    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
        background: white !important;
        transform: none !important; /* fixes scaling bugs */
    }

    /* Remove page breaks, margins, headers/footers */
    @page {
        margin: 0;
        size: A4 portrait;
    }

    html, body {
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

}

.rmb {
    font-size: larger;
}

.rmb::before {
    content: "￥";
    font-size: x-small;
    font-weight: normal;
}

.price {
    color: crimson;
}

button output {
    font-size: 1.125rem;
}

.qty {
    vertical-align: middle;
    display: inline-flex;
    background-color: #f8f8f8;
    color: #333;
    height: auto !important;
    box-sizing: border-box;
    padding: 4px;
    border: 0;
    font-size: inherit;
    transition: .2s ease-in-out;
    transition-property: color, background-color, border;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    text-align: right;
}

.qty.active {
    color: #fff;
    background-color: var(--pri);
}

output.subtotal {
    min-width: 1px;
    box-sizing: border-box;
    width: 100%;
    padding-right: 4px;
    max-width: 100%;
    height: 100%;
    background-color: #666;
    color: #fff;
    align-items: center;
    justify-content: end;
}

.suffix {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f6f6;
    width: 3rem;
    height: 2rem;
    box-sizing: border-box;
    color: #999;
}

body.kanban {
    background-color: black;
    color: white;
    font-size: 2rem;
    flex-direction: column;
}

#carousel {
    height: 100vh;
    overflow: hidden;
}

#carousel ul {
    animation: scroll 60s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}


#ebody {
    display: flex;
    flex-direction: column;
}

/* narrow screen */
@media (orientation: portrait) {

    #ebody > main {
        display: flex;
        flex-direction: column;
        height: calc(100% - 3rem);
    }

    #brw {
        flex: 1 1 0;
    }

    #vc {
        height: auto;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4px;
    }

    #am {
        flex: 1 1 0;
        height: 50% !important;

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 8px;
        justify-content: center;
        align-items: center;
        padding: 4px;
        max-width: 100%;
        margin: 0 auto;
    }
}

/* wide screen */
@media (orientation: landscape) {

    #ebody > main {
        display: flex;
        flex-direction: row;
        height: calc(100% - 3rem);
    }

    #brw {
        flex: 1 1 0;
    }

    #vc {
        width: auto;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4px;
    }

    #am {
        flex: 1 1 0;
        width: 50% !important;

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 8px;
        justify-content: center;
        align-items: center;
        padding: 4px;
        max-width: 100%;
        margin: 0 auto;
    }

}

#vc {

}

#vc > div {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 4px;
}

#vc > div > video {
    width: 100%;
    aspect-ratio: 1 / 1;
    filter: brightness(1.2) contrast(1.0);
    max-width: 160px;
    max-height: 160px;
    object-fit: cover;
    object-position: center; /* Centers the crop */
    background-color: var(--def-u);
}

#am > div {
    aspect-ratio: 1 / 1;
    width: 100%;
    /* lets aspect-ratio control height */
    height: auto;
    align-self: start;
    border-radius: 8px;
    background-color:var(--def-i);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

#am > div > button {
    font-size: 16px;
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 100;
}

#am > div > canvas {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
}

#am > div.off {
    background-color: var(--def-x);
}

#am > div.ready {
    background-color: var(--def-x);
}

#am > div.normal {
    background-color: white;
}


#io {
    height: 3rem;
}

#io > div {
    margin: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--def-u);
}

#io > div > i {
    font-size: 16px;
}

#io > div.off {
    color: var(--def-u);
}

#io > div.ready {
    color: var(--def);
}

#io > div.normal {
    color: var(--pri);
}

#io > div.busy {
    color: white;
    background-color: var(--pri);
}

#io > div.fail {
    color: var(--war-l);
}

#vcall {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 2;
    width: 100%;
    max-height: 240px;
    z-index: 1000;
    padding: 4px;
    background-color: var(--def);
    justify-content: space-evenly;
    align-items: center;
}

#vcall.xl {
    height: calc(50vw + 3rem);
    max-height: calc(240px + 3rem);
}

#vcall > video {
    width: 100%;
    aspect-ratio: 1 / 1;
    filter: brightness(1.2) contrast(1.0);
    max-width: 160px;
    max-height: 160px;
    object-fit: cover;
    object-position: center; /* Centers the crop */
    background-color: var(--def-u);
}

#callend {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 1203;
    background-color: red !important;
    color: white;
    border-radius: 50%;
}

#amform {
    overflow-y: scroll;
}

#amform fieldset {
    border: none;
    gap: 1rem;
    padding: 0;
    position: relative;
}


#amform fieldset > fieldset {
    padding-left: 3rem;
}


#amform section {
    max-width: 80vw;
    display: grid;
    grid-gap: 4px;
    grid-template-columns: repeat(auto-fit, minmax(340px, auto));
    padding: 4px;
    text-align: right;
    margin-left: auto !important;
    justify-content: end;
}

#amform legend {
    float: left;
}

fieldset.level0 {

}

fieldset.level1 {
    background-color: var(--def-i);
}

fieldset.level2 {
    background-color: var(--def-x);
}

fieldset.level3 {
    background-color: var(--def-u);
}


#amform label {
    display: inline-flex; /* or just flex */
    align-items: center; /* vertically center the checkbox + text */
    gap: 0.5rem; /* space between checkbox and text */
    cursor: pointer;
}

#amform label > span {
    width: 10rem;
    margin-left: auto !important;
    justify-content: end;
}

#amboard {
    margin: 0;
    display: flex;
    padding: 12px !important;
    font-size: 15px;
}

#amboard > nav {
    gap: 4px;
}

#amboard button {
    min-width: 80px;
    background-color: var(--def-l);
    color: white;
    gap: 4px;
}

#amboard button:disabled {
    background-color: var(--def-u);
    color: white;
}

#amboard button:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

#amboard button:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

@page {
    size: A4;
    margin: 0;
}

@media print {

    html,
    body {
        width: 210mm -5mm;
        height: 297mm -5mm;
        margin: 2.5mm;
    }

    .uk-pagination {
        display: none;
    }
}

/* CROPPIE */

.croppie-container {
    width: 100%;
    height: 100%;
}

.croppie-container .cr-image {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    max-height: none;
    max-width: none;
}

.croppie-container .cr-boundary {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
    position: absolute;
    border: 2px solid #fff;
    box-sizing: border-box;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.croppie-container .cr-resizer {
    z-index: 2;
    box-shadow: none;
    pointer-events: none;
}

.croppie-container .cr-resizer-vertical,
.croppie-container .cr-resizer-horisontal {
    position: absolute;
    pointer-events: all;
}

.croppie-container .cr-resizer-vertical::after,
.croppie-container .cr-resizer-horisontal::after {
    display: block;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    width: 10px;
    height: 10px;
    content: '';
}

.croppie-container .cr-resizer-vertical {
    bottom: -5px;
    cursor: row-resize;
    width: 100%;
    height: 10px;
}

.croppie-container .cr-resizer-vertical::after {
    left: 50%;
    margin-left: -5px;
}

.croppie-container .cr-resizer-horisontal {
    right: -5px;
    cursor: col-resize;
    width: 10px;
    height: 100%;
}

.croppie-container .cr-resizer-horisontal::after {
    top: 50%;
    margin-top: -5px;
}

.croppie-container .cr-original-image {
    display: none;
}

.croppie-container .cr-vp-circle {
    border-radius: 50%;
}

.croppie-container .cr-overlay {
    z-index: 1;
    position: absolute;
    cursor: move;
    touch-action: none;
}

.croppie-container .cr-slider-wrap {
    width: 75%;
    margin: 15px auto;
    text-align: center;
}

.croppie-result {
    position: relative;
    overflow: hidden;
}

.croppie-result img {
    position: absolute;
}

.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.cr-slider {
    -webkit-appearance: none;
    /*removes default webkit styles*/
    /*border: 1px solid white; */
    /*fix for FF unable to apply focus style bug */
    width: 300px;
    /*required for proper track sizing in FF*/
    max-width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: transparent;
}

.cr-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

.cr-slider:focus {
    outline: none;
}

.cr-slider::-moz-range-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

/*hide the outline behind the border*/
.cr-slider:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

.cr-slider::-ms-track {
    width: 100%;
    height: 5px;
    background: transparent;
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    border-color: transparent;
    /*leave room for the larger thumb to overflow with a transparent border */
    border-width: 6px 0;
    color: transparent;
    /*remove default tick marks*/
}

.cr-slider::-ms-fill-lower {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.cr-slider::-ms-fill-upper {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.cr-slider::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: 1px;
}

.cr-slider:focus::-ms-fill-lower {
    background: rgba(0, 0, 0, 0.5);
}

.cr-slider:focus::-ms-fill-upper {
    background: rgba(0, 0, 0, 0.5);
}

.cr-rotate-controls {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 1;
}

.cr-rotate-controls button {
    border: 0;
    background: none;
}

.cr-rotate-controls i:before {
    display: inline-block;
    font-style: normal;
    font-weight: 900;
    font-size: 22px;
}

.cr-rotate-l i:before {
    content: '↺';
}

.cr-rotate-r i:before {
    content: '↻';
}