/* Reset & Base */
*, *:after, *:before {
    box-sizing: border-box;
    font-display: swap;
}

body {
    margin: 0;
    padding: 0;
}

/* Loading */
#loadingDiv {
    background: #34495e;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100000;
}

.loader {
    height: 64px;
    left: calc(50% - 32px);
    top: calc(50% - 32px);
    perspective: 800px;
    width: 64px;
}

.inner, .loader {
    border-radius: 50%;
    position: absolute;
}

.inner {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

.inner.one {
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #efeffa;
    left: 0;
    top: 0;
}

.inner.two {
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #efeffa;
    right: 0;
    top: 0;
}

.inner.three {
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #efeffa;
    left: 0;
    top: 0;
}

@keyframes rotate-one {
    0% { transform: rotateX(35deg) rotateY(-45deg) rotate(0deg); }
    100% { transform: rotateX(35deg) rotateY(-45deg) rotate(360deg); }
}

@keyframes rotate-two {
    0% { transform: rotateX(50deg) rotateY(10deg) rotate(0deg); }
    100% { transform: rotateX(50deg) rotateY(10deg) rotate(360deg); }
}

@keyframes rotate-three {
    0% { transform: rotateX(35deg) rotateY(55deg) rotate(0deg); }
    100% { transform: rotateX(35deg) rotateY(55deg) rotate(360deg); }
}

/* Blink animation for warning text */
.blink-text {
    animation: blink 1.7s linear infinite;
    -webkit-animation: blink 1.7s linear infinite;
}

@keyframes blink {
    0% { transform: scale(.9); }
    50% { transform: scale(1.2); }
    to { transform: scale(.9); }
}

/* Input number spinner removal */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.q-field__native[type=number] { -moz-appearance: textfield; }
.q-field__native::-webkit-inner-spin-button,
.q-field__native::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Remove filled input bottom border */
.q-field--filled .q-field__control:before {
    border: none !important;
}
.q-field--filled .q-field__control:after {
    display: none !important;
}