@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');

h1 {
    text-align: center;
    font-size: 30px;
    color: darkorange;
    margin: 3%;
}

h2 {
    text-align: center;
    font-size: 14px;
    font-weight: normal;
}

.login-form {
    display: flex;
    justify-content: center;
}

.login-input {
    margin-bottom: 10px;
    width: 300px;
    padding: 3px;
    border-width: thin;
    border-color: lightgray;
}

.vh-1001 {
    height: calc(100vh - 90px) !important;
}
/* HTML: <div class="loader"></div> */
.partedwheel {
    width: 5%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid;
    border-color: #000 #0000;
    animation: l1 1s infinite;
    top: 50%;
    left: 55%;
    position: absolute;
}

@keyframes l1 {
    to {
        transform: rotate(.5turn)
    }
}

/* HTML: <div class="loader"></div> */
.circleFill {
    --r1: 154%;
    --r2: 68.5%;
    width: 5%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(var(--r1) var(--r2) at top,#0000 79.5%,#269af2 80%), radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%), radial-gradient(var(--r1) var(--r2) at top,#0000 79.5%,#269af2 80%), #ccc;
    background-size: 50.5% 220%;
    background-position: -100% 0%,0% 0%,100% 0%;
    background-repeat: no-repeat;
    animation: l9 2s infinite linear;
    top: 50%;
    left: 55%;
    position: absolute;
}
@keyframes l9 {
    33% {
        background-position: 0% 33%,100% 33%,200% 33%
    }

    66% {
        background-position: -100% 66%,0% 66%,100% 66%
    }

    100% {
        background-position: 0% 100%,100% 100%,200% 100%
    }
}
/* HTML: <div class="loader"></div> */
.bubbles {
    width: 5%;
    aspect-ratio: 1;
    background: radial-gradient(farthest-side,#ffa516 90%,#0000) center/16px 16px, radial-gradient(farthest-side,green 90%,#0000) bottom/12px 12px;
    background-repeat: no-repeat;
    animation: l17 1s infinite linear;
    top: 50%;
    left: 55%;
    position: absolute;
}

    .bubbles::before {
        content: "";
        position: absolute;
        width: 8px;
        aspect-ratio: 1;
        inset: auto 0 16px;
        margin: auto;
        background: #ccc;
        border-radius: 50%;
        transform-origin: 50% calc(100% + 10px);
        animation: inherit;
        animation-duration: 0.5s;
    }

@keyframes l17 {
    100% {
        transform: rotate(1turn)
    }
}
/* HTML: <div class="loader"></div> */
.opistcircule {
    width: 5%;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-color: #ccc #0000;
    animation: l16 1s infinite linear;
    top: 50%;
    left: 55%;
    position: absolute;
}

    .opistcircule::before,
    .opistcircule::after {
        content: "";
        grid-area: 1/1;
        margin: 2px;
        border: inherit;
        border-radius: 50%;
    }

    .opistcircule::before {
        border-color: #f03355 #0000;
        animation: inherit;
        animation-duration: .5s;
        animation-direction: reverse;
    }

    .opistcircule::after {
        margin: 8px;
    }
@keyframes l16 {
    100% {
        transform: rotate(1turn)
    }
}
/* HTML: <div class="loader"></div> */
.wheel {
    width: 5%;
    aspect-ratio: 1;
    color: #854f1d;
    border-radius: 50%;
    display: grid;
    background: conic-gradient(from 90deg at 4px 4px,#0000 90deg,currentColor 0) -4px -4px/calc(50% + 2px) calc(50% + 2px), radial-gradient(farthest-side,currentColor 6px,#0000 7px calc(100% - 6px),currentColor calc(100% - 5px)) no-repeat;
    animation: l10 2s infinite linear;
    top: 50%;
    left: 55%;
    position: absolute;
}

.lwheel:before {
    content: "";
    border-radius: inherit;
    background: inherit;
    transform: rotate(45deg);
}

@keyframes l10 {
    to {
        transform: rotate(.5turn)
    }
}

/* HTML: <div class="loader"></div> */
.halfcircule {
    width: 5.5%;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: #25b09b;
    animation: l15 1s infinite linear;
    top: 50%;
    left: 55%;
    position: absolute;
}

    .halfcircule::before,
    .halfcircule::after {
        content: "";
        grid-area: 1/1;
        margin: 2px;
        border: inherit;
        border-radius: 50%;
        animation: l15 2s infinite;
    }

    .halfcircule::after {
        margin: 8px;
        animation-duration: 3s;
    }

@keyframes l15 {
    100% {
        transform: rotate(1turn)
    }
}
/* HTML: <div class="loader"></div> */
.dots {
    --d: 22px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    color: #25b09b;
    box-shadow: calc(1*var(--d)) calc(0*var(--d)) 0 0, calc(0.707*var(--d)) calc(0.707*var(--d)) 0 1px, calc(0*var(--d)) calc(1*var(--d)) 0 2px, calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px, calc(-1*var(--d)) calc(0*var(--d)) 0 4px, calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px, calc(0*var(--d)) calc(-1*var(--d)) 0 6px;
    animation: l27 1s infinite steps(8);
    top: 50%;
    left: 55%;
    position: absolute;
}

@keyframes l27 {
    100% {
        transform: rotate(1turn)
    }
}
.spinner {
    border: 8px solid silver;
    border-top: 8px solid #337AB7;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    animation: spin 800ms linear infinite;
    top: 45%;
    left: 50%;
    position: absolute;
}
@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}
@media print {
    #section-to-print {
        position: absolute;
        left: 0;
        top: 0;
    }

    html,
    body {
        max-width: 100mm;
        max-height: 35mm;
        width: fit-content;
        font-family: Calibri;
        font-size: 1rem;
    }

    article {
        padding: 20px 0 0 18px;
        margin-right: 18px;
        display: grid;
        grid-template-columns: 40mm 40mm;
        grid-gap: 36px;
        page-break-after: always;
    }

    p {
        margin: 0;
    }

    section {
        display: flex;
        flex-direction: column;
    }

        section header {
            text-transform: uppercase;
            font-weight: bold;
            text-align: center;
        }

        section main {
            display: flex;
            justify-content: space-between;
        }

        section footer {
            text-align: center;
        }
}