#wave, #wave2 { display: none; }
 
::-webkit-scrollbar-track {
    background: #333
}

::-webkit-scrollbar-thumb {
    background: #555;
    border: 2px solid #333
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

a {
    color: #ffa600;
    text-decoration: none;
}

a:hover {
    color: #ffc107;
    text-decoration: underline;
}

body {
    background: #333;
    font-family: var(--font);
    color: #ddd;
}

body.bg-white {
    background: rgb(40, 40, 40);
}

a.dark,
a.dark:hover {
    color: #555;
}

/* Default Buttons */

button {
    background: rgba(255, 255, 255, .1);
    color: rgb(var(--primary));
}


button.light {
    background: white;
    border: 2px solid transparent;
    color: black;
}

button.negative {
    background: rgb(187, 70, 70);
    color: rgb(243, 164, 164);
}

button.positive {
    background: rgb(61, 151, 61);
    color: rgb(164, 243, 164);
}

button:not(:disabled):not(.positive):not(.negative):hover {
    background: #ffa600;
    color: #111;
}

/* Header */

header {
    background: #222;
    
}

header .page-back:hover,
header .page-reload:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Page Cookie */

content .cookie-container {
    background: #101010;
}

/* Page Container */

.container .box {
    background: rgba(22,22,22,.5);
    border: 1px solid #222;
    box-shadow: none;
}

.container .box .box-header-emoji {
    background: #333
}

/* Page Container: Transparent */

.container .box.light {
    background: rgba(22,22,22,.5);
}

.container .box.light.hover:hover {
    background: rgb(var(--primary));
    color: #111;
}

.container .box.light.hover:hover b {
    color: black;
}

.container .box.light b {
    color: rgb(var(--primary));
}
/* Page Container: Negative */

.container .box.negative {
    background: rgba(187, 70, 70, 0.2);
    border-color: rgba(187, 70, 70, 0.2);
}

.container .box.negative.hover:hover {
    background: rgb(187, 70, 70);
    color: white;
}

.container .box.negative.hover:hover b {
    color: white;
}

.container .box.negative b {
    color: rgb(187, 70, 70);
}

.container .box.negative p {
    font-size: 0.9em;
}

/* Quiz Rating */

.quiz-rating button {
    background: rgba(22,22,22, .7);
    color: #ddd;
}
.quiz-rating button:hover {
    background: rgba(0, 0, 0, .2) !important;
    color: #ddd !important;
}

.game-container .game-emoji-content .emoji {
    background: rgba(255, 255, 255, .2);
}

/* Footer */

footer {
    grid-area: footer;
}

footer .navigation {
    background: rgba(22, 22, 22, .5);
    border-top: 1px solid rgba(0, 0, 0, .1);
}

footer .navigation li a {
    color: #555;
}

footer .navigation li a:hover,
footer .navigation li.prevent a,
footer .navigation li.prevent a:hover {
    background: rgba(var(--primary), 0.1);
    color: rgb(var(--primary));
}

footer .navigation li.prevent:before {
    background: rgb(var(--primary));
}

/* Tabs */

.tabs li a {
    color: #555;
}

.tabs li a:hover {
    background: rgba(var(--primary), 0.1);
    color: rgb(var(--primary));
}

.tabs li a.prevent {
    background: rgba(var(--primary), 0.1);
    color: rgb(var(--primary));
}

.tabs li a.prevent:after {
    background: rgb(var(--primary));
}

/* Misc Menu */

.misc-menu li:not(.title) {
    background: #333;
}

.misc-menu li a {
    color: #ddd
}

.misc-menu li:not(.title):hover {
    background: #444;
}

.misc-menu li:not(.title):hover a,
.misc-menu li:not(.title):hover i {
    color: rgb(var(--primary));
}

/* Timer */

.timer > .progress-backlight {
    background: #111;
}

.timer > .progress {
    background: rgb(var(--primary));
}
.timer > .progress[tip]:after {
    background: black;
    color: #aaa;
}

/* Progress */

.progress > .progress-backlight {
    background: #111;
}

.progress > .progress-backlight[current]:before,
.progress > .progress-backlight[next]:after {
    color: #aaa;
}

/* Rating */

.rating input + label {
    color: rgb(var(--primary));
}

.rating input + label.fa-heart {
    color: #ee2351;
}

.rating input:checked + label ~ label {
    color: #555;
}

.loader:before {
    background: rgba(0, 0, 0, 0.9);
}

.loader:after {
    border: 5px solid rgb(var(--primary));
}

/* Fonts */

.carter-one {
    font-family: "Carter One";
}

/* Mozilla ALert */

.mozilla-info:after {
    background: black;
    color: rgb(var(--primary));
}

/* Input + Textarea */

input:not(.switch):not([type=range]),
textarea {
    background: rgba(55, 55, 55, .5);
    color: #aaa;
}

input:not(.switch):not([type=range]):hover,
input:not(.switch):not([type=range]):focus {
    background: rgba(240, 240, 240, .1);
    border-color: rgba(0, 0, 0, .3);
    color: #eee;
}

/* Checkbox Switch */

input.switch {
    background: rgba(55, 55, 55, .5);
}

input.switch:hover {
    background: rgba(55, 55, 55, .7);
}

input.switch:after {
    background: #555;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
}

input.switch:checked {
    background: rgb(var(--primary))
}

input.switch:checked:after {
    background: white
}

.notify {
    color: white;
    background: rgba(0, 0, 0, .6);
}

/* Modal */

.modal {
    background: rgba(0, 0, 0, .4);
}

.modal .modal-content {
    background: rgba(22,22,22,1);
    box-shadow: 0 0 2em 0 rgba(0, 0, 0, .4);
}

.modal .modal-content span.close {
    color: white;
}

/* Select */
label.select:before {
    background: transparent
}
label.select:after {
    border-color: #ddd transparent transparent transparent;
}
label.select select {
    transition: .2s;
    border: none;
    box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, .1);
    color: #ddd;
}
label.select select optgroup {
    background: #222;
    color: white;
}
label.select select option {
    background: #222;
    color: #aaa;
}
 label.select select:hover {
    background: rgba(240, 240, 240, .1);
 }

 /* Slider */
input[type=range]::-webkit-slider-runnable-track {
  background: rgba(240,240,240, .1);
}
input[type=range]::-webkit-slider-thumb {
  background: #555
}
input[type=range]:hover::-webkit-slider-thumb {
      background: white
}
input[type=range]:focus::-webkit-slider-thumb,
input[type=range]:active::-webkit-slider-thumb {
    background: rgb(var(--primary))
}
input[type=range]:hover::-webkit-slider-runnable-track {
  background: rgba(240,240,240, .2);
}

/* Steps */
.steps .step:not(:last-child):after {
    background: white;
}
.steps .step .num {
    border: 2px solid white;
}
/* Sticky */
.sticky {
    background: rgba(40, 40, 40, .5); 
}

/* Custom Select */
.select .select-label {
    background: rgba(55, 55, 55, .5);
}
.select .select-label:hover,
.select:hover .select-label {
    background: rgb(40, 40, 40);
}
.select ul {
    background: rgb(50, 50, 50);
}
.select ul li {
    background: rgb(40, 40, 40);
}
.select ul li.selected,
.select ul li:not(.disabled):hover {
    background: rgba(60, 60, 60);
}