<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.loaders {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
}

.loaders:not([data-visible="true"]) {
    opacity: 0;
}

.loader {
    --icon-color: white;
    --text-color: white;
    --link-color: var(--dk-blue);
    background-color: var(--gold);
    padding: 1rem 2rem;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    border-radius: 4px; 
    /*display: flex;*/
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 1.5rem;
    translate: 0;
    opacity: 0;
    transition: all 500ms ease;
}

    .loader[hidden] {
        translate: calc(100% + 1rem);
    }


.loader[data-status="complete"] {
    background-color: var(--green);
    --icon-color: white;
    --text-color: white;
    --link-color: var(--dk-blue);
}

.loader[data-status="error"] {
    background-color: #db5151;
    --icon-color: white;
    --text-color: white;
    --link-color: var(--gold);
}

.loader p {
    margin: 0;
    color: var(--text-color);
    line-height: 1.5;
}

.loader .heading {
    font-weight: bold;
    font-size: 1.6rem;
}

.loader .paragraph {
    font-size: 1.1rem;
}

.loader .paragraph:empty {
    display: none;
}

.loader .paragraph a {
    color: var(--link-color)
}

.loader .paragraph :is(a:hover, a:focus) {
    text-decoration: underline;
}

.loader svg {
    width: 32px;
    height: 32px;
    grid-column: 2;
    grid-row: 1;
}

.loader #error {
    fill: var(--icon-color);
    border: 2px solid var(--icon-color);
    border-radius: 50%;
    padding: 2px;
}

.loader:not([data-status="error"]) #error {
    opacity: 0;
}

.loader[data-status="error"] #check {
    opacity: 0;
}

#tick {
    /*stroke: var(--check-color);*/
    stroke: white;
    stroke-width: 6;
    transition: all 1s;
}

#circle {
    /*stroke: var(--spinner-color);*/
    stroke: var(--icon-color);
    stroke-width: 6;
    transform-origin: 50px 50px 0;
    transition: all 1s, stroke 500ms ease;
}

.loader:not([data-status="complete"]) #tick {
    opacity: 0;
}

.loader[data-status="complete"] #tick {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 8s ease-out forwards;
}

.loader[data-status="loading"] #circle {
    /*stroke: var(--spinner-color);*/
    stroke: var(--icon-color);
    stroke-dasharray: 314;
    stroke-dashoffset: 1000;
    animation: spin 3s linear infinite;
}

.loader[data-status="complete"] #circle {
    stroke-dashoffset: 66;
    /*stroke: var(--check-color);*/
    stroke: var(--icon-color);
}

#circle {
    stroke-dasharray: 500;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
        stroke-dashoffset: 66;
    }

    50% {
        transform: rotate(540deg);
        stroke-dashoffset: 314;
    }

    100% {
        transform: rotate(1080deg);
        stroke-dashoffset: 66;
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
</pre></body></html>