:root {
    scroll-padding-top: calc(var(--top_bar-height) + 15px);

    --branding-border-height: 7px;
    --header-height: 100px;
    --main-padding-y: 73px;
    --main-padding-x: 31px;
    --main-inset-left: 220px;
    --top_bar-height: 50px;
    --test-top_bar-margin: 20px;

    --font-xxsmall: 0.625rem; /* 10px */
    --font-xsmall: 0.75rem; /* 12px */
    --font-small: 0.875rem; /* 14px */
    --font-base: 1rem; /* 16px */
    --font-large: 1.125rem; /* 18px */
    --font-xlarge: 1.25rem; /* 20px */
    --font-xxlarge: 1.5rem; /* 24px */
    --font-xxxlarge: 2rem; /* 32px */
    --font-4xlarge: 2.5rem; /* 40px */

    /* Color variables                  Corresponding functional color variables */
    --color-gold: #ffd700;
    --color-silver: #c0c0c0;
    --color-bronze: #cd7f32;
    --color-red: #ff411a;          /* --color-error */
    --color-orange: #E47F43;
    --color-yellow: #ffbe00;       /* --color-warning */
    --color-green: #39a137;    /* --color-success */
    --color-light-blue: #667eac;   /* --button-inverted-highlight */
    --color-purple: #8a90b7;       /* --bubble-background */
    --color-light-gray: #cacaca; /* --divider-color-2 */
    --color-medium-gray: #949494;  /* --color-neutral */
    --color-gray: #aaaaaa;         /* --divider-color-3 */

    /* This is a special case, and should remain the same for both light and dark mode. */
    --success-text-color: #39a137;

    --supporter-highlight-color: #f0b034;
    --color-kattis: #ffbe00;

    /* Light theme colors */
    --branding-border: light-dark(white, white); /* Note that this is really just a fallback for the actual branding colors. */

    --color-success:         light-dark(var(--success-text-color), #1b7b18);
    --color-partial-success: light-dark(#9cd09b, #7aab79);
    --color-warning:         light-dark(#ffbe00, #e3ad00);
    --color-error:           light-dark(#ff411a, #c12100);
    --color-success-pale:    light-dark(#aeefa6, #418738);
    --color-warning-pale:    light-dark(#ffe699, #c79a0f);
    --color-error-pale:      light-dark(#ff9494, #c34b4b);
    --color-neutral:         light-dark(#949494, #797979);
    --color-pending:         light-dark(#d9d9d9, #a7a7a7);
    --color-info:            light-dark(#355591, #1c325d);
    --link-color:            light-dark(var(--color-info), #87abee);
    --color-freeze:          light-dark(#65d3ff, #48b2dd);
    --color-freeze-2:        light-dark(#8dcfe9, #6fb4cf);

    --color-success-hover: light-dark(#59b057, #3c793a);
    /* --color-warning-hover: light-dark(#ffbe00, #ffbe00); */
    --color-error-hover:   light-dark(#ff5e42, #c1452c);
    --color-neutral-hover: light-dark(#a1a1a1, #828282);

    --color-easy: var(--color-success);
    --color-medium: var(--color-warning);
    --color-hard: var(--color-error);
    --base-chip-color: light-dark(#515151, #666);

    --partial-gradient-1: light-dark(#ffd15c, #d8ad41);
    --partial-gradient-2: light-dark(#bedf81, #a3c26a);

    --diff-left:            light-dark(#ffd0d0, #614b4b);
    --diff-right:           light-dark(#d0ffd0, #525f52);
    --diff-left-highlight:  light-dark(#ff8080, #8d3737);
    --diff-right-highlight: light-dark(#50dd50, #438d43);

    --rejudge-no-change:          light-dark(#c2f8b8, #65a35b);
    --rejudge-change:             light-dark(#ffab9f, #9b665e);
    --rejudge-no-change-filtered: light-dark(#e3ffe2, #5b835a);
    --rejudge-change-filtered:    light-dark(#ffdfda, #856863);
    --rejudge-unjudged:           light-dark(#cbcbcb, #939393);

    --billing-feature:          light-dark(#fcd9aa, #7a6a55);
    --billing-feature-contrast: light-dark(#fdcb88, #725c3e);
    --billing-popular:          light-dark(#e1f1e1, #515f4d);
    --billing-popular-contrast: light-dark(#d7e7dc, #475545);

    --background-gradient-start: light-dark(#f1f2fc, #111115);
    --background-gradient-end:   light-dark(#f7f7f7, #151515);
    --input-background:          light-dark(#fff,    #666);
    --input-background-disabled: light-dark(#eee,    #999);
    --input-addon-text-color:    light-dark(#212529, #d1d8df);
    --input-addon-background:    light-dark(#e9ecef, #5d5d5d);
    --input-addon-border-color:  light-dark(#ced4da, #7f8387);
    --blockquote-background:     light-dark(#f7f8f9, #474849);
    --blockquote-color:          light-dark(#898992, #c9c9d2);
    --blockquote-border-color:   light-dark(#e7e7e8, #79797d);
    --button-inverted-highlight: light-dark(#667eac, #7096df);

    --divider-color-alpha: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.25));
    --divider-color-1:     light-dark(#d9d9d9, #777);
    --divider-color-2:     light-dark(#cacaca, #888);
    --divider-color-3:     light-dark(#aaa,    #999);

    --text-color:           light-dark(#000,    #eee);
    --bright-text-color:    light-dark(#fff,    whitesmoke);
    --em-text-color:        light-dark(gray,    #9f9f9f);
    --gray-link-color:      light-dark(#909090, #bbb);
    --sample-heading-color: light-dark(#2a353a, #bac7cd);

    --select2-color:                          light-dark(#444,    #eee);
    --select2-selected-background:            light-dark(#ddd,    #aaa);
    --select2-choice-background:              light-dark(#e4e4e4, #7e7e7e);
    --select2-choice-remove-color:            light-dark(#999,    #d2d2d2);
    --select2-choice-remove-hover-background: light-dark(#f1f1f1, #adadad);

    --code-background:                         light-dark(#f0f0f0, #616161);
    --containers-background:                   light-dark(#fff,    #333);
    --containers-background-shadowed:          light-dark(#fff,    #444);
    --containers-background-highlighted:       light-dark(#ffeb9c, #8f814d);
    --containers-background-contrast:          light-dark(#f3f3f9, #434347);
    --containers-background-shadowed-contrast: light-dark(#f3f3f9, #5a5a5e);
    --top-bar-background:                      light-dark(#f2f2fb, #27272c);
    --breadcrumb-color:                        light-dark(#666,    #aaa);
    --bubble-background:                       light-dark(#8a90b7, #6e77af);
    --ace-background:                          light-dark(#fff,    #1d1f21);
    --speedometer-background:                  light-dark(#dcdde6, #505056);
    --clar-answer-background:                  light-dark(#f3f9f4, #5f6560);

    --bookmark-background:    light-dark(#e1e2ec, #404145);
    --bookmark-subtext-color: light-dark(#76767b, #a6a6b1);

    --challenge-gradient-start:       light-dark(#e9b252, #a07b3b);
    --challenge-gradient-end:         light-dark(#e98c2e, #ae681d);
    --challenge-completed-background: light-dark(#dae9da, #323f32);
    --gold-star-color:                light-dark(gold,    #ddbb00); /* d1b100 */

    --header-background:            light-dark(#8a90b7, #343257);
    --table-odd-background:         light-dark(white, var(--containers-background-contrast));
    --table-even-background:        light-dark(var(--containers-background-contrast), #3a3a3d);
    --table-highlight-background:   light-dark(#e9f7e9, #4d554d);
    --table-highlight-border-color: light-dark(#9cd09b, #5d835b);
    --table-footer-border-color:    light-dark(#e9eaed, #4e4f51);
}

/* Special case vars */
:root {
    /* Dark mode scrollbar colors */
    --scrollbar-background: #333;
    --scrollbar-thumb-color: #888;
    --scrollbar-hover-color: #aaa;
}

/* Set color-scheme based on which override classes are present */
/* Copy to Clipboard icon has a bunch of special styles since we can't directly change its color.
Same with certain elements of the intelligence test. Dark mode versions of these are further down. */
:root {
    color-scheme: light dark;
    --clipboard-icon-opacity: 0.2;
    --clipboard-icon-filter: none;
    --intelligence-test-filter: none;
    --progress-slider-marker-filter: none;
    --problem-statement-figure-filter: none;
}
:root.theme_light {
    color-scheme: light;
}
:root.theme_dark {
    color-scheme: dark;
}

/* Always apply light theme in printable reports */
@media print {
    :root {
        color-scheme: light;
    }
}

* {
    box-sizing: border-box;
}

/* Special dark mode styles (need to be duplicated between here and the .theme_dark class */
@media (prefers-color-scheme: dark) {
    :root:not(.theme_light) {
        --clipboard-icon-opacity: 0.3;
        --clipboard-icon-filter: invert(100%);
        --intelligence-test-filter: invert(0.85);
        --progress-slider-marker-filter: invert(100%);
        --problem-statement-figure-filter: invert(90%) hue-rotate(180deg);
        --problem-statement-no-invert-filter: brightness(90%);
    }

    :not(.theme_light) ::-webkit-scrollbar {
        background: var(--scrollbar-background);
    }

    :not(.theme_light) ::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb-color);
        border-radius: 6px;
        border: 3px solid var(--scrollbar-background);
    }

    :not(.theme_light) ::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-hover-color);
    }
    :root:not(.theme_light) {
        scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-background);
    }

    :not(.theme_light) option:disabled {
        color: #aaa;
    }
}
.theme_dark {
    --clipboard-icon-opacity: 0.3;
    --clipboard-icon-filter: invert(100%);
    --intelligence-test-filter: invert(0.85);
    --progress-slider-marker-filter: invert(100%);
    --problem-statement-figure-filter: invert(90%) hue-rotate(180deg);
}
.theme_dark ::-webkit-scrollbar {
    background: var(--scrollbar-background);
}

.theme_dark ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: 6px;
    border: 3px solid var(--scrollbar-background);
}

.theme_dark ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover-color);
}
.theme_dark :root {
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-background);
}

.theme_dark option:disabled {
    color: #aaa;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh
}

body {
    background-image: linear-gradient(143deg, var(--background-gradient-start) 22%, var(--background-gradient-end) 75%);
    display: block;
    font-family: "Ubuntu", sans-serif;
    font-size: var(--font-base);
    color: var(--text-color)
}

body.header-collapsed {
    --main-inset-left: 70px;
}

body.l-body_grid {
    display: grid;
    grid-template-columns: var(--main-inset-left);
    grid-template-rows: var(--top_bar-height);
    transition: grid-template-columns 1s ease;
}

.content_padding {
    padding: var(--main-padding-y) var(--main-padding-x);
}

h1 {
    font-size: var(--font-xxxlarge);
    margin: 0;
}

h2 {
    font-size: var(--font-xlarge);
    margin: 0;
}

h3 {
    font-size: var(--font-base);
    font-weight: 600;
    margin: 0;
}

h4 {
    font-size: var(--font-base);
    font-weight: 600;
    margin: 0;
}

button {
    font-family: "Ubuntu", sans-serif;
}

label {
    font-weight: 500;
    font-size: var(--font-base);
}

label.label-plain {
    font-weight: inherit;
    font-size: inherit;
}

select {
    padding: 11px 19px;
    font-size: var(--font-base);
    font-weight: 400;
    border-radius: 3px;
    border: solid 1px var(--divider-color-2);
    background: var(--input-background);
    color: var(--text-color);
    position: relative;
}

.select-normal_padding {
    padding-left: 12px;
}

input {
    border-radius: 3px;
    border: solid 1px var(--divider-color-2);
    background-color: var(--input-background);
    color: var(--text-color);
    font-size: var(--font-base);
    line-height: 1.33;
    padding: 10px 12px;
    font-family: "Ubuntu", sans-serif;
    min-width: 40px;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    min-width: 0.3rem;
    min-height: 0.3rem;
    width: 0.3rem;
    height: 0.3rem;
    max-width: 0.3rem;
    max-height: 0.3rem;
    padding: 0.375rem;
    position: relative;
    cursor: pointer;
    vertical-align: text-top;
}

input[type="checkbox"]:active,
input[type="checkbox"]:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

input[type="checkbox"]:checked {
    background-color: var(--button-inverted-highlight);
    border-color: var(--button-inverted-highlight);
}

input[type="checkbox"]:checked:after {
    font-family: "Font Awesome 5 Free", sans-serif;
	content: "\f00c";
    font-weight: 600;
	font-size: 0.6rem;
	position: absolute;
	top: -0.03rem;
	left: 0.07rem;
	color: #fff;
}

input[type="checkbox"]:disabled {
    opacity: 0.4;
}

input[type="color"]:first-child {
    padding: 0;
    margin: 0;
    border: 1px solid var(--divider-color-2);
    box-shadow: none;
    border-radius: 4px 0 0 4px;
    background: none;
    margin-right: -1px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px 0 0 3px;
}

input[type="color"]:nth-child(2) {
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    border-radius: 4px 0 0 4px;
    background: #f0bc12;
    outline: none;
}

input[type="color" i] {
    cursor: pointer;
    border-radius: 4px 0 0 4px;
    border: none;
    min-height: 100%;
    height: 44px;
    width: 40px;
    display: block;
}

input[type="color" i] ~ input[type="text" i] {
    border-radius: 0 4px 4px 0;
}

input[type="color" i] ~ i.fa-eye-dropper {
    position: absolute;
    left: 13px;
    top: 13px;
    pointer-events: none;
    color: white;
}

input:focus {
    outline: none;
}

input:disabled:not([type="submit"]) {
    cursor: not-allowed;
    background-color: var(--input-background-disabled);
    opacity: 1;
}

input:disabled:checked {
    background-color: var(--color-gray);
}

.input-medium {
	width: 180px;
}

.input-small {
	width: 120px;
}

.input-tiny {
	width: 90px;
}

.show-hide-icon {
	width: 1.5em;
	cursor: pointer;
}

.show-hide-icon:hover {
	color: var(--lt-color-gray-600);
}

textarea {
    border-radius: 3px;
    border: solid 1px var(--divider-color-2);
    background-color: var(--input-background);
    color: var(--text-color);
    font-size: var(--font-base);
    line-height: 1.33;
    padding: 10px 12px;
    font-family: "Ubuntu", sans-serif;
    width: 100%;
}

textarea:disabled {
    cursor: not-allowed;
    background-color: var(--input-background-disabled);
    opacity: 1;
}

a {
    text-decoration: none;
    color: var(--link-color);
}

a:hover {
    text-decoration: underline;
}

img {
    object-fit: cover;
}

ul {
    margin: 0;
    padding-left: 20px;
}

li {
    line-height: 23px;
}

hr {
    border-color: var(--divider-color-1);
    border-style: solid;
    border-width: 1px 0 0 0;
    margin: 22px 0;
    width: 100%;
}

hr.vertical {
    border-width: 0 0 0 1px;
    margin: 0;
    align-self: stretch;
    width: 1px;
}

code {
    font-family: monospace;
    font-variant-ligatures: none;
    background: var(--code-background);
    padding: 0px 2px;
    border-radius: 5px;
}

.prose {
    max-width: 700px;
}

.prose p {
    line-height: 1.5rem;
    margin: 0.5rem 0;
}

.prose h2 {
    margin-top: 1.4rem;
    margin-bottom: 0.3rem;
}

.prose h3 {
    margin-top: 1.3rem;
    margin-bottom: 0.1rem;
}

.prose h4 {
    margin-top: 1.2rem;
}

.prose h1:first-child,
.prose h2:first-child,
.prose h3:first-child,
.prose h4:first-child {
    margin-top: 0rem;
}

.prose .source-highlight {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Toggle/switch button */
.toggle-control {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 31px;
}

/* Hide default HTML checkbox */
.toggle-control input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.toggle-control .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--divider-color-1);
    -webkit-transition: .4s;
    transition: .4s;
}

.toggle-control .slider:before {
    position: absolute;
    content: "";
    height: 23px;
    width: 23px;
    left: 3px;
    bottom: 4px;
    background-color: var(--bright-text-color);
    -webkit-transition: .4s;
    transition: .4s;
}

.toggle-control input:checked + .slider {
    background-color: var(--bubble-background);
}

.toggle-control input:focus + .slider {
    box-shadow: 0 0 1px  var(--bubble-background);
}

.toggle-control input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

.toggle-control .slider.round,
.toggle-control .slider.round:before {
    border-radius: 15px;
}

.toggle-label {
    font-weight: normal;
    cursor: pointer;
}

/* some pages use raw h1 and ul tags for simple text, which look bad with 0 margin */
.margin-reset h1,
.margin-reset h2,
.margin-reset h3,
.margin-reset h4,
.margin-reset ul {
    margin: revert;
}

/*
  File upload control
*/

.file-upload-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.file-upload-input label {
    margin-top: 5px;
    font-weight: 100;
    cursor: pointer;
    border-radius: 20.5px;
    font-size: var(--font-small);
    padding: 12px 35px;
    background: var(--color-medium-gray);
    color: #fff;
}

.file-upload-input .img-preview {
    position: relative;
}

.file-upload-input .img-preview img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    border: 1px solid var(--divider-color-2);
    border-radius: 4px;
}
.file-upload-input .img-preview.no-image {
    display: none;
}
.file-upload-input .img-preview .img-remove {
    cursor: pointer;
    position: absolute;
    bottom: -10px;
    right: -10px;
    display: block;
    text-align: center;
    padding-top: 6px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: var(--color-error);
    color: white;
}