::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: var(--scroll_background_color);
}
::-webkit-scrollbar-thumb {
    border: var(--scroll_thumb_border);
    border-radius: var(--scroll_thumb_border-radius);
    background: var(--scroll_thumb_background_color);
}
::-webkit-scrollbar-corner {
    background: transparent;
}

ul {
    margin: 0;
}

html {
    background: var(--generic_background_color);
}

body {
    width: 100%;
    height: 100%;
    background: var(--generic_background_color);
    font-size: var(--page_scale);
    margin: 0;
    position: relative;
    box-sizing: border-box;
}

* {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--generic_font_color);
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
    outline: none;
    outline-offset: -1px;
}

*:focus:not(.virtual_list) {
    outline: var(--theme_outline);
}

a.link {
    color: var(--generic_font_link_color);
    display: contents;
}

.virtual_list_item:focus-within {
    outline: var(--theme_outline);
}

.active * {
    outline: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="color"] {
    border-width: 0;
    padding: 0;
}

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

input[type=number] {
    -moz-appearance: textfield;
}

input[type="number"],
input[type="text"],
input[type="password"] {
    color: var(--input_font_color);
    background: var(--input_background_color);
}

input[type="checkbox"]:hover:not([disabled]),
input[type="radio"]:hover:not([disabled]) {
    outline: var(--theme_outline);
}


html {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
}

.reset_page_style,
.reset_page_style * {
}

.flex_min {
    flex: 0 1 auto;
}

.flex_page_style,
.flex_page_style * {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.flex_shrink {
    flex: 0 1 auto;
}

.flex_grow {
    flex: 1 0 auto;
}

.flex_column {
    flex-direction: column;
}

.flex_row {
    flex-direction: row;
}

*[contenteditable] * {
    display: initial;
}

.no_select {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.styled_button.interactable.focus,
.styled_button.interactable:focus-within,
.styled_button.interactable:hover:not(.disabled) {
    background: var(--theme_button_background_hover_color);
}

.styled_button.interactable:active:not(.disabled) {
    background: var(--theme_button_background_hover_color);
}

.styled_button.interactable:hover:active:not(.disabled) {
    background: var(--theme_button_background_active_color);
}

.button_bar .styled_button {
    user-select: none;
}

.styled_button {
    background: var(--theme_button_background_color);
    padding: var(--theme_button_padding);
    margin: var(--theme_button_margin);
    border-radius: var(--theme_button_border_radius);
    justify-content: center;
    align-items: center;
    padding: 0.125em 0.4em;
    font-size: var(--small_font_size);
    padding: 0.2em;
}

.spotlight_cont {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -1;
}

.spotlight {
    background: var(--spotlight_background);
    position: absolute;
    pointer-events: none;
    opacity: 0.2;
}

.spotlight_1 {
    position: absolute;
    top: -2%;
    left: 14%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 70%;
}

.spotlight_1 {
    position: absolute;
    top: 4%;
    left: 10%;
    transform: translate(-50, -50%);
    width: 280%;
    height: 320%;
}

.spotlight_2 {
    position: absolute;
    top: -2%;
    right: 0%;
    transform: translate(50%, -50%);
    width: 80%;
    height: 70%;
    opacity: 0.5;
}

.title_focus_bar {
    position: absolute;
    top: 0;
    width: 100%;
    pointer-events: none;
    height: 1px;
    opacity: 0;
    background: var(--focus_bar_background_color);
}

body.window_focused .title_focus_bar {
    opacity: 0.8;
}

.virtual_list_item {
    border: 1px solid var(--generic_border_color);
}

.virtual_list_item:hover {
    background: var(--list_item_background_hover);
}

.virtual_list_item.selected,
.virtual_list_item:active {
    background: var(--list_item_background_hover);
}

.virtual_list_item.selected:after,
.virtual_list_item:active:after {
    outline: var(--theme_outline);
    content: "";
    width: 100%;
    height: 100%;
    position:absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}

.reader_only {
    font-size: 0 !important;
}