@import url('./main-layout.css');
html {
    position: relative;
    --lumo-font-size: 1rem;
    --lumo-font-size-xxxl: 1.75rem;
    --lumo-font-size-xxl: 1.375rem;
    --lumo-font-size-xl: 1.125rem;
    --lumo-font-size-l: 1rem;
    --lumo-font-size-m: 0.875rem;
    --lumo-font-size-s: 0.8125rem;
    --lumo-font-size-xs: 0.75rem;
    --lumo-font-size-xxs: 0.6875rem;
    --lumo-line-height-m: 1.4;
    --lumo-line-height-s: 1.2;
    --lumo-line-height-xs: 1.1;
    --lumo-size-xl: 3rem;
    --lumo-size-l: 2.5rem;
    --lumo-size-m: 2rem;
    --lumo-size-s: 1.75rem;
    --lumo-size-xs: 1.5rem;
    --lumo-space-xl: 1.875rem;
    --lumo-space-l: 1.25rem;
    --lumo-space-m: 0.625rem;
    --lumo-space-s: 0.3125rem;
    --lumo-space-xs: 0.1875rem;
    --vaadin-form-item-label-width: 12em;
    --vaadin-user-color-0: #df0b92;
    --vaadin-user-color-1: #650acc;
    --vaadin-user-color-2: #097faa;
    --vaadin-user-color-3: #ad6200;
    --vaadin-user-color-4: #bf16f3;
    --vaadin-user-color-5: #084391;
    --vaadin-user-color-6: #078836;
    --vaadin-indicator-color-bg: #5dade2;
}

span.prefixed {
    margin: 0;
    padding: 10px;
    color: var(--lumo-contrast-90pct);
    background-color: var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius) 0 0 var(--lumo-border-radius);
}

span.suffixed {
    margin: 0;
    padding: 10px;
    color: var(--lumo-contrast-90pct);
    background-color: var(--lumo-contrast-20pct);
    border-radius: var(--lumo-border-radius) 0 0 var(--lumo-border-radius);
}

.flexible {
    display: flex;
}

.v-loading-indicator {
    display: block !important;
    background-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5000;

}

.v-loading-indicator[style*="none"] {
    width: 10%;
    opacity: 0;
    animation: none;
    transition: opacity 500ms 300ms, width 300ms;
}

.v-loading-indicator:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 8px;
    box-sizing: border-box;
    border: 32px solid var(--vaadin-indicator-color-bg);
    border-color: transparent var(--vaadin-indicator-color-bg) transparent var(--vaadin-indicator-color-bg);
    animation: lds-hourglass 1.2s infinite;
}

.v-loading-indicator.first:after {
    background-color: skyblue;
}

.v-loading-indicator.second:after {
    background-color: salmon;
}

.v-loading-indicator.third:after {
    background-color: red;
}

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
        transform: rotate(1800deg);
    }
}


@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0);
    } 40% {
          transform: scale(1.0);
      }
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}