@import url(https://fonts.bunny.net/css?family=rubik:400,500,600,700,800);

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --secondary-foreground: 197.94 94.69% 22.16% !important;
    }

    .dark {
        --secondary-foreground: 196.74 32.82% 74.31% !important;
    }
}

a, h1, h2, h3, h4, h5, h6, label, p {
    font-family: rubik, sans-serif;
}

h1 {
    font-weight: 800 !important;
}

p.font-medium, span.caption-text {
    font-weight: 600;
}

/* Make all headers E3 blue */
h1, h2, h3, h4, h5, h6, label.sd-tab-label, p.font-medium, span.caption-text, span.hidden.font-bold, div.sd-card-title {
    color: hsl(var(--secondary-foreground));
}

code, span.pre {
    font-family: "JetBrains Mono", monospace !important;
}

#content ol p, #content ol > li, #content ol.arabic.simple {
    margin-top: 0;
}

.sd-sphinx-override p, #content ul:not(.search) p, #content ul:not(.search) > li {
    margin-top: 0.5rem;
}


@media (min-width: 1400px) {
    .container {
        max-width: 1920px;
    }
}

.checkbox-wrapper-11 {
    --text: #414856;
    --check: #FF5E39;
    --disabled: #C3C8DE;
    --border-radius: 10px;
    border-radius: var(--border-radius);
    position: relative;
    padding: 5px;
    display: grid;
    grid-template-columns: 30px auto;
    align-items: center;
}

.checkbox-wrapper-11 label {
    color: var(--text);
    position: relative;
    cursor: pointer;
    display: grid;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    transition: color 0.3s ease;
}

.checkbox-wrapper-11 label::before,
.checkbox-wrapper-11 label::after {
    content: "";
    position: absolute;
}

.checkbox-wrapper-11 label::before {
    height: 2px;
    width: 8px;
    left: -27px;
    background: var(--check);
    border-radius: 2px;
    transition: background 0.3s ease;
}

.checkbox-wrapper-11 label:after {
    height: 4px;
    width: 4px;
    top: 8px;
    left: -25px;
    border-radius: 50%;
}

.checkbox-wrapper-11 input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    height: 15px;
    width: 15px;
    outline: none;
    border: 0;
    margin: 0 15px 0 0;
    cursor: pointer;
    background: var(--background);
    display: grid;
    align-items: center;
}

.checkbox-wrapper-11 input[type=checkbox]::before, .checkbox-wrapper-11 input[type=checkbox]::after {
    content: "";
    position: absolute;
    height: 2px;
    top: auto;
    background: var(--check);
    border-radius: 2px;
}

.checkbox-wrapper-11 input[type=checkbox]::before {
    width: 0px;
    right: 60%;
    transform-origin: right bottom;
}

.checkbox-wrapper-11 input[type=checkbox]::after {
    width: 0px;
    left: 40%;
    transform-origin: left bottom;
}

.checkbox-wrapper-11 input[type=checkbox]:checked::before {
    -webkit-animation: check-01-11 0.4s ease forwards;
    animation: check-01-11 0.4s ease forwards;
}

.checkbox-wrapper-11 input[type=checkbox]:checked::after {
    -webkit-animation: check-02-11 0.4s ease forwards;
    animation: check-02-11 0.4s ease forwards;
}

.checkbox-wrapper-11 input[type=checkbox]:checked + label {
    color: var(--disabled);
    -webkit-animation: move-11 0.3s ease 0.1s forwards;
    animation: move-11 0.3s ease 0.1s forwards;
}

.checkbox-wrapper-11 input[type=checkbox]:checked + label::before {
    background: var(--disabled);
    -webkit-animation: slice-11 0.4s ease forwards;
    animation: slice-11 0.4s ease forwards;
}

.checkbox-wrapper-11 input[type=checkbox]:checked + label::after {
    -webkit-animation: firework-11 0.5s ease forwards 0.1s;
    animation: firework-11 0.5s ease forwards 0.1s;
}

@-webkit-keyframes move-11 {
    50% {
        padding-left: 8px;
        padding-right: 0px;
    }
    100% {
        padding-right: 4px;
    }
}

@keyframes move-11 {
    50% {
        padding-left: 8px;
        padding-right: 0px;
    }
    100% {
        padding-right: 4px;
    }
}

@-webkit-keyframes slice-11 {
    60% {
        width: 100%;
        left: 4px;
    }
    100% {
        width: 100%;
        left: -2px;
        padding-left: 0;
    }
}

@keyframes slice-11 {
    60% {
        width: 100%;
        left: 4px;
    }
    100% {
        width: 100%;
        left: -2px;
        padding-left: 0;
    }
}

@-webkit-keyframes check-01-11 {
    0% {
        width: 4px;
        top: auto;
        transform: rotate(0);
    }
    50% {
        width: 0px;
        top: auto;
        transform: rotate(0);
    }
    51% {
        width: 0px;
        top: 8px;
        transform: rotate(45deg);
    }
    100% {
        width: 5px;
        top: 8px;
        transform: rotate(45deg);
    }
}

@keyframes check-01-11 {
    0% {
        width: 4px;
        top: auto;
        transform: rotate(0);
    }
    50% {
        width: 0px;
        top: auto;
        transform: rotate(0);
    }
    51% {
        width: 0px;
        top: 8px;
        transform: rotate(45deg);
    }
    100% {
        width: 5px;
        top: 8px;
        transform: rotate(45deg);
    }
}

@-webkit-keyframes check-02-11 {
    0% {
        width: 4px;
        top: auto;
        transform: rotate(0);
    }
    50% {
        width: 0px;
        top: auto;
        transform: rotate(0);
    }
    51% {
        width: 0px;
        top: 8px;
        transform: rotate(-45deg);
    }
    100% {
        width: 10px;
        top: 8px;
        transform: rotate(-45deg);
    }
}

@keyframes check-02-11 {
    0% {
        width: 4px;
        top: auto;
        transform: rotate(0);
    }
    50% {
        width: 0px;
        top: auto;
        transform: rotate(0);
    }
    51% {
        width: 0px;
        top: 8px;
        transform: rotate(-45deg);
    }
    100% {
        width: 10px;
        top: 8px;
        transform: rotate(-45deg);
    }
}

@-webkit-keyframes firework-11 {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 -2px #FF5E39, 0 0 0 -2px #FF5E39, 0 0 0 -2px #FF5E39, 0 0 0 -2px #FF5E39, 0 0 0 -2px #FF5E39, 0 0 0 -2px #FF5E39;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        box-shadow: 0 -15px 0 0px #FF5E39, 14px -8px 0 0px #FF5E39, 14px 8px 0 0px #FF5E39, 0 15px 0 0px #FF5E39, -14px 8px 0 0px #FF5E39, -14px -8px 0 0px #FF5E39;
    }
}

@keyframes firework-11 {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 -2px #FF5E39, 0 0 0 -2px #FF5E39, 0 0 0 -2px #FF5E39, 0 0 0 -2px #FF5E39, 0 0 0 -2px #FF5E39, 0 0 0 -2px #FF5E39;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        box-shadow: 0 -15px 0 0px #FF5E39, 14px -8px 0 0px #FF5E39, 14px 8px 0 0px #FF5E39, 0 15px 0 0px #FF5E39, -14px 8px 0 0px #FF5E39, -14px -8px 0 0px #FF5E39;
    }
}