:root {
    interpolate-size: allow-keywords;
    --border-color: lightgray;
    --default-panel-color: #ffffff;
    --filled-panel-color: #dfdfdf;
    --small-gap: 4pt;
    --medium-gap: 8pt;
    --large-gap: 16pt;
    --width-1: 20pt;
    --width-2: 40pt;
    --width-3: 80pt;
    --font-size-1: 12pt;
    --font-size-2: 14pt;
    --font-size-3: 16pt;
    --font-size-4: 18pt;
    --font-size-5: 20pt;
    --hidden-toggle-1: none;
    --hidden-toggle-2: none;
    --hidden-toggle-3: none;
}

/* Size adjustments */

div.width-1 {
    width: var(--width-1);
}

div.width-2 {
    width: var(--width-2);
}

div.width-3 {
    width: var(--width-3);
}

div.width-full {
    width: 100%;
}

div.height-full {
    height: 100%;
}

div.button-width {
    width: 36pt;
}

div.hidden-toggle-1 {
    display: var(--hidden-toggle-1);
}

div.hidden-toggle-2 {
    display: var(--hidden-toggle-2);
}

div.hidden-toggle-3 {
    display: var(--hidden-toggle-3);
}

div.hidden {
    display: none;
}

div.animateHeight {
    transition: 
        max-height 0.3s ease-in-out,
        display 0.3s ease allow-discrete;
}

div.defaultHeight {
    overflow: hidden;
    transition-duration: 0s;
    max-height: 50pt;
}

div.hiddenHeight {
    overflow: hidden;
    max-height: 0pt;
    display: none;
}

div.animateWidth {
    transition: 
        max-width 0.3s ease-in-out,
        display 0.3s ease allow-discrete;
}

div.defaultWidth {
    overflow: hidden;
    transition-duration: 0s;
    max-width: 50pt;
}

div.hiddenWidth {
    overflow: hidden;
    max-width: 0pt;
    display: none;
}

.green {
    color: green;
}

.lightgreen {
    color: lightgreen;
}

.softgreen {
    color: #28a745;
}

.softblue {
    color: #2196F3;
}

.bold {
    font-weight: bold;
}

.orange {
    color: orange;
}

.darkgray {
    color: #333333;
}

.background-lightgray {
    background-color: #f0f0f0;
}

.font-size-1 {
    font-size: var(--font-size-1);
}

.font-size-2 {
    font-size: var(--font-size-2);
}

.font-size-3 {
    font-size: var(--font-size-3);
}

.font-size-4 {
    font-size: var(--font-size-4);
}

.font-size-5 {
    font-size: var(--font-size-5);
}


.padding-small {
    padding: 4pt;
}

.padding-medium {
    padding: 8pt;
}

.padding-large {
    padding: 16pt;
}

/* Container classes */ 

.cntr {
    display: flex;
    box-sizing: border-box;
}

.cntr-white {
    background-color: #fff;
    --border-color: gray;
}

.cntr-rows {
    flex-direction: column;
}

.cntr-columns {
    flex-direction: row;
}

.cntr-centered {
    justify-content: center;
    align-items: center;
}

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

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

.cntr-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

/* - */

/* Instruction for children of parent */

.cntr-fully-adjust > * {
    flex-grow: 1;
    flex-shrink: 1;
}

.cntr-grow-only > * {
    flex-grow: 1;
    flex-shrink: 0;
}

.cntr-shrink-only > * {
    flex-grow: 0;
    flex-shrink: 1;
}

.cntr-prevent-size-change > * {
    flex-grow: 0;
    flex-shrink: 0;
}

.cntr-initial-size-reset > * {
    flex-basis: 0;
}

.cntr-initial-size-weighted > * {
    flex-basis: auto;
}

/* - */


/* Individual overrides */

.cntr-override-fully-adjust {
    flex-grow: 1;
    flex-shrink: 1;
}

.cntr-override-grow-only {
    flex-grow: 1;
    flex-shrink: 0;
}

.cntr-override-shrink-only {
    flex-grow: 0;
    flex-shrink: 1;
}

.cntr-override-prevent-size-change {
    flex-grow: 0;
    flex-shrink: 0;
}

.cntr-override-initial-size-reset {
    flex-basis: 0;
}

.cntr-override-initial-size-weighted {
    flex-basis: auto;
}

.cntr-override-hidden-when-overflow {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 1;
}

/* - */

.cntr-round-bordered {
    border: 2pt solid var(--border-color);
    border-radius: var(--medium-gap);
    padding: var(--small-gap);
}

.cntr-border {
    border: 2pt solid var(--border-color);
}

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

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

.cntr-gap-small {
    gap: var(--small-gap);
}

.cntr-gap-medium {
    gap: var(--medium-gap);
}

.cntr-gap-large {
    gap: var(--large-gap);
}


@media (prefers-reduced-motion: reduce) {
    .button {
        transition: none;
    }
}

@-webkit-keyframes spinner-rotate {

    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {

        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

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


.spinner {
    margin: 0.5em;
    border-top: 0.2em solid rgba(128, 128, 128, 0.2);
    border-right: 0.2em solid rgba(128, 128, 128, 0.2);
    border-bottom: 0.2em solid rgba(128, 128, 128, 0.2);
    border-left: 0.2em solid #999999;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: -spinner-rotate 1.1s infinite linear;
    animation: spinner-rotate 1.1s infinite linear;
}

.spinner-container-visible {
    overflow: hidden;
    max-width: 200pt;
    opacity: 1;
    height: 2.5em;
    vertical-align: middle;
    visibility: visible;
    transition-duration: 0s;
}

.spinner-container-hidden {
    overflow: hidden;
    max-width: 0pt;
    opacity: 0;
    height: 0em;
    vertical-align: middle;
    visibility: hidden;
    transition:
        opacity 0.2s ease-in,
        max-width 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        height 0.3s ease-in-out;
}

.hidden {
    display: none;
}

input.number-input-entry {
    -moz-appearance:textfield;
}

input.number-input-entry::-webkit-outer-spin-button,
input.number-input-entry::-webkit-inner-spin-button {
    -webkit-appearance: none;
}