:root {
    --color-primary: #f2a900;
    --color-primary-light: #d39300;
    --color-primary-dark: #7e5800;
    --color-secondary: #353535;
    --color-secondary-light: #858585;
    --color-nearly-black: #1e1e1e;
    --color-gray: #4a4a4a;
    --color-third: #f3f2f3;

    --color-white: #ffffff;
    --color-black: #000000;

    --color-text-color: #333333;
    --color-text-color-light: #9b9b9b;

    --color-background-grey: #dedede;
    --color-background-grey2: #f5f5f5;

    --color-border-grey: #f3f3f3;

    --color-grey-v1: #555555;
    --color-grey-v2: #707070;
    --color-grey-v3: #bfbfbf;

    --default-font-size: 16px;

    --color-environment-indicator: #ff8833;
    --color-environment-indicator-staging: #33c5ff;
}

.environmentIndicator {
    z-index: 9001;
    cursor: pointer;
    opacity: 0.4;

    position: fixed;
    top: -100px;
    left: -100px;
    width: 200px;
    padding-top: 145px;

    background-color: var(--color-environment-indicator);
    color: var(--color-white);

    font-size: 36px;
    font-family: "Arial", sans-serif;

    line-height: 50px;
    text-align: center;
    vertical-align: baseline;
    transform: rotate(315deg);
}

.environmentIndicator.staging {
    background-color: var(--color-environment-indicator-staging);
}

@font-face {
    font-family: 'Bender';
    src: url("/assets/fonts/Bender.otf") format("opentype");
}

body {
    font-family: 'Bender', sans-serif;
    background: #333333;
    color: #e1e1e1;
    background-image: url("/assets/images/background.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.navbar {
    backdrop-filter: blur(60px);
    background: rgba(0, 0, 0, .8);
}

.navbar a,
footer a {
    color: #c3bfaf!important;
    text-decoration: none;
}

.box {
    backdrop-filter: blur(29px);
    background: rgba(0, 0, 0, .6);
    font-size: 20px;
}

.box-dark {
    background: rgba(0, 0, 0, .8);
}

.box.disabled {
    filter: blur(2px) grayscale(1);
}

.row.disabled {
    filter: opacity(0.5) grayscale(1);
}

main {
    color: #c3bfaf!important;
}

.smaller-line-height {
    line-height: 10px;
}

.settings-header {
    backdrop-filter: blur(22px);
    background: rgba(0, 0, 0, 0.4);
}

.settings-header li:hover,
.settings-header li.active {
    background: #ffffde;
}

.settings-header li:hover a,
.settings-header li.active a {
    color: #13110b!important;
}

.settings-header a {
    text-decoration: none;
    color: #c3bfaf!important;
    font-size: 28px;
}

.name {
    font-size: 55px;
    border: 1px solid #5E6262;
    border-radius: 0;
    background: #121311;
    color: #c3bfaf;
    text-align: center;
    background-repeat: no-repeat;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label:before {
    content: " ";
    background-image: url(/assets/icons/checkbox.png);
    height: 25px;
    width: 25px;
    display: inline-block;
    margin-right: 10px;
}

input[type="checkbox"]:checked + label:before {
    background-image: url(/assets/icons/checkbox_selected.png)!important;
}

select,
button,
.input-group-text,
input[type="text"],
input[type="number"],
input[type="file"],
input[type="file"]::file-selector-button {
    border-radius: 0!important;
    border-color: #5E6262!important;
    background: #121311!important;
    color: #c3bfaf!important;
    text-align: center;
    background-repeat: no-repeat!important;
}

select.UniqueId {
    color: #cb8b00!important;
    background-image: url(/assets/icons/icon_unique_id.png)!important;
    background-position: 30% 50%!important;
}

select.Unheard {
    color: #55d0e6!important;
    background-image: url(/assets/icons/icon_user_unheard_small.png)!important;
    background-position: 28% 50%!important;
}

select.Sherpa {
    color: #86aa7c!important;
    background-image: url(/assets/icons/icon_user_sherpa_small.png)!important;
    background-position: 39% 50%!important;
}

select.Emissary {
    color: #7141ca!important;
    background-image: url(/assets/icons/icon_user_emissary_small.png)!important;
    background-position: 37% 50%!important;
}

select.Developer {
    color: #134288!important;
    background-image: url(/assets/icons/icon_developer.png)!important;
    background-position: 37% 50%!important;
}

.table {
    --bs-table-color: #c3bfaf;
    --bs-table-bg: transparent;
}

footer {
    backdrop-filter: blur(60px);
    background: rgba(0, 0, 0, .8);
}

input[type="range"]::-webkit-slider-thumb {
    border-radius: 20% 0 20% 0;
    top: 18px;
    position: relative;
    background: #1b1d1d;
    padding: 10px;
    background-image: url(/assets/icons/arrow_up_tiny.png);
    background-position: center center;
    background-repeat: no-repeat;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: #292a28;
    height: 6px;
}

input[type="range"] + .dots {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    top: -23px;
    position: relative;
}

input[type="range"] + .dots .dot {
    width: 2px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.range-value {
    background: #121414;
    display: inline-block;
    width: 64px;
    text-align: center;
    padding: 2px 0;
}

h1 {
    text-align: center;
    font-weight: bold;
    letter-spacing: 11px;
    background: rgba(0, 0, 0, 0.8);
    padding: 9px;
}

.dropdown-menu {
    --bs-dropdown-color: #e1e1e1;
    --bs-dropdown-bg: #333333;
}

.dropdown-item:focus, .dropdown-item:hover {
    --bs-dropdown-link-hover-bg: #222222;
}

footer .disclaimer {
    font-size: 0.7rem!important;
}