:root {
    --accent-color: rgb(0, 75, 204);
    --accent-color-disabled: rgb(165, 165, 165);
    --released-color: green;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 0.8rem;
    background-color: #333;
    padding-left: 64px;
    padding-right: 64px;
    padding-top: 4px;
}

h1 {
    font-size: 20px;
    margin-bottom: 20px;
}

h2 {
    font-size: 16px;
}

button {
    cursor: pointer;
}

.card {
    border: 1px solid whitesmoke;
    padding: 30px;
    background-color: white;
    margin-bottom: 1px;
    border-radius: 2px;
}

.invisible {
    visibility: hidden;
}

/* Spinner. Usage:
    <div class="spin"></div>
 */

@keyframes spinner {
    0% {
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }

    100% {
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}

.spin::before {
    animation: 1.5s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 5px #cfd0d1;
    border-bottom-color: #1c87c9;
    border-radius: 50%;
    content: "";
    height: 80px;
    width: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
}