:root {
    --main-bg: #f9f9f9;
    --text-color: #333333;
    --title-color: #111111;

    --link-color: #0088cc;
    --link-color-hover: #0099e6;

    --input-bg-color: #ffffff;
    --input-border-color: #ced4da;
    --input-text-color: #777777;

    --btn-default-bg: #ffffff;
    --btn-default-text: #333333;
    --btn-default-hover: #555555;
    --btn-default-bg-hover: #cccccc;

    --btn-primary-bg: #0088cc;
    --btn-primary-text: #eeeeee;
    --btn-primary-text-hover: #ffffff;
    --btn-primary-bg-hover: #0099e6;
}
html.dark {
    --main-bg: #1d2127;
    --text-color: #aaaaaa;
    --title-color: #ffffff;

    --link-color: #0088cc;
    --link-color-hover: #0099e6;

    --input-bg-color: #1a1d22;
    --input-border-color: #282d36;
    --input-text-color: #eeeeee;

    --btn-default-bg: #1a1d22;
    --btn-default-text: #eeeeee;
    --btn-default-text-hover: #aaaaaa;
    --btn-default-bg-hover: #474747;

    --btn-primary-bg: #0088cc;
    --btn-primary-text: #eeeeee;
    --btn-primary-text-hover: #ffffff;
    --btn-primary-bg-hover: #0099e6;
}

.scrollable {
    max-height: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
}
.scroll-x {
    overflow-y: hidden;
}
.scroll-y {
    overflow-x: hidden;
}
.scrollable::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scrollable::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}
.scrollable::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
    outline: 1px solid slategrey;
    border-radius: 4px;
}
.scrollable::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
.scrollable::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.5);
}
.hide {
    display: none;
}
.show {
    display: block;
}