:root {
    --hl-black: #1a1a1a;
    --hl-white: #ffffff;
    --hl-yellow: #fce200;
    --hl-green: #cdddd5;
    --hl-gray: #d9d8d6;
    --hl-radius: 6px;
    --hl-font-title: "Jost", var(--client-font);
    --hl-font-text: "Quicksand", sans-serif;
    --hl-text-scale: 1;
    --hl-letter-spacing: 0;
    --hl-line-height: 1.5;
    --group-main: var(--hl-yellow);
    --group-main-text: var(--hl-black);
    --group-accent: var(--hl-black);
    --group-accent-text: var(--hl-white);
    --bs-border-radius: var(--hl-radius);
    --bs-body-font-family: var(--hl-font-text);
}

html {
    font-size: calc(100% * var(--hl-text-scale));
}

body {
    font-family: var(--hl-font-text);
    letter-spacing: var(--hl-letter-spacing);
    line-height: var(--hl-line-height);
    color: var(--hl-black);
    background-color: var(--hl-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hl-font-title);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.skip-link {
    position: absolute;
    left: 0;
    top: -100px;
    z-index: 2000;
    padding: .75rem 1rem;
    background: var(--hl-black);
    color: var(--hl-white);
}

.skip-link:focus {
    top: 0;
}

:focus-visible {
    outline: 3px solid var(--hl-black);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hl-yellow);
}

.btn,
.dropdown-item,
.nav-link,
.navbar-toggler {
    min-height: 44px;
    min-width: 44px;
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 0;
    min-height: 0;
    accent-color: var(--hl-black);
    flex: 0 0 auto;
}

.form-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding-left: 0;
    margin-bottom: 0;
}

.form-check .form-check-input {
    float: none;
    margin: 0;
}

.form-check-label {
    margin: 0;
}

.form-check-inline {
    display: inline-flex;
    margin-right: 1.25rem;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--hl-yellow);
    border-color: var(--hl-yellow);
    color: var(--hl-black);
}

.btn-black {
    background-color: var(--hl-black);
    border-color: var(--hl-black);
    color: var(--hl-white);
}

.card,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.modal-content {
    border-radius: var(--hl-radius);
}

.hl-block-green {
    background-color: var(--hl-green);
    color: var(--hl-black);
}

.hl-block-gray {
    background-color: var(--hl-gray);
    color: var(--hl-black);
}

#navbar {
    border-bottom: 4px solid var(--group-main);
}

.hl-group-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .75rem;
    border-radius: var(--hl-radius);
    background: var(--group-main);
    color: var(--group-main-text);
    font-weight: 700;
    text-decoration: none;
}

.hl-group-badge img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
    background: var(--hl-white);
}

.hl-group-accent {
    background: var(--group-accent);
    color: var(--group-accent-text);
}

.hl-logo-plate {
    display: inline-block;
}

.hl-logo-header {
    height: calc(var(--size-logo) * .6);
    width: auto;
}

.hl-on-dark {
    display: none;
}

[data-theme="dark"] .hl-on-light,
[data-theme="stage"] .hl-on-light {
    display: none;
}

[data-theme="dark"] .hl-on-dark,
[data-theme="stage"] .hl-on-dark {
    display: revert;
}

[data-contrast="high"] {
    --hl-gray: #ffffff;
    --hl-green: #ffffff;
    --bs-border-color: #000000;
}

[data-contrast="high"] body {
    color: #000000;
}

[data-contrast="high"] .text-muted,
[data-contrast="high"] .form-text {
    color: #000000 !important;
}

[data-contrast="high"] .card,
[data-contrast="high"] .form-control,
[data-contrast="high"] .form-select {
    border: 2px solid #000000;
}

[data-spacing="wide"] {
    --hl-letter-spacing: .12em;
    --hl-line-height: 1.9;
}

[data-spacing="wide"] p,
[data-spacing="wide"] li {
    word-spacing: .16em;
}

[data-dyslexia="on"] {
    --hl-font-text: "Verdana", "Tahoma", sans-serif;
    --hl-font-title: "Verdana", "Tahoma", sans-serif;
    --hl-letter-spacing: .06em;
}

[data-theme="stage"] {
    color-scheme: dark;
    --bs-body-bg: #000000;
    --bs-body-color: #f2f2f2;
    --bs-border-color: #444444;
    --hl-black: #f2f2f2;
    --hl-white: #000000;
}

[data-theme="stage"] body {
    background-color: #000000;
    color: #f2f2f2;
}

[data-theme="stage"] .navbar,
[data-theme="stage"] .card,
[data-theme="stage"] .dropdown-menu,
[data-theme="stage"] .modal-content,
[data-theme="stage"] .form-control,
[data-theme="stage"] .form-select {
    background-color: #0d0d0d !important;
    color: #f2f2f2;
    border-color: #444444;
}

[data-theme="stage"] .navbar .navbar-brand,
[data-theme="stage"] .navbar .nav-link,
[data-theme="stage"] .text-muted,
[data-theme="stage"] a {
    color: #f2f2f2 !important;
}

[data-theme="stage"] .btn-primary,
[data-theme="stage"] .btn-primary:hover {
    background-color: var(--hl-yellow);
    color: #1a1a1a !important;
}

[data-theme="stage"] .btn-black {
    background-color: #f2f2f2;
    color: #000000;
}

[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

.hl-display-panel {
    min-width: 18rem;
    padding: 1rem;
}

.hl-publisher-line {
    font-size: .875rem;
}

.hl-login-logo {
    height: 170px;
    width: auto;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .hl-login-logo {
        height: 120px;
    }

    .hl-login-form {
        width: 100% !important;
    }
}

.hl-dropzone {
    border-style: dashed !important;
    border-color: var(--hl-black) !important;
    background: var(--hl-gray);
    cursor: pointer;
}

.hl-dropzone-active {
    background: var(--hl-green);
}

lod-library,
lod-file-drop,
lod-song {
    display: block;
}