:root {
    --filterbar-color: #0D161A;
    --bg-primary-color: #000000;
    --bg-secondary-color: #080E10;
    --fg-primary-color: #18242B;
    --font-primary-color: #FFFFFFE5;
    --font-secondary-color: #6FBDCCCC;
    --font-terciary-color: #ccc36f;
    --font-muted: #ffffff85

}

body {
    background-color: var(--bg-primary-color);
    color: var(--font-primary-color);
    font-family: scifi;
}

.text-icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--font-primary-color);
}

.dropdown-menu {
    background-color: var(--bg-secondary-color);
}

.dropdown-item {
    color: var(--font-primary-color)
}

.form-check-input {
    background-color: transparent;
    border: 1px solid var(--font-primary-color);
}

.form-check-input:checked {
    background-color: transparent;
    border-color: var(--font-primary-color);
}

.btn-primary {
    background-color: var(--bg-secondary-color) !important;
    border-color: var(--font-muted) !important;
    color: var(--font-primary-color) !important;
}

.btn-primary:hover {
    background-color: var(--bg-secondary-color) !important;
    border-color: var(--font-primary-color) !important;
    color: var(--font-primary-color) !important;
    outline: none !important;
}

.btn-primary:focus {
    background-color: var(--bg-secondary-color) !important;
    border-color: var(--font-primary-color) !important;
    color: var(--font-primary-color) !important;
    outline: none !important;
}

input {
    background-color: transparent;
    color: var(--font-primary-color);
    border-top: none;
    border-left: none;
    border-right: none;
    display: block;

}

input:-webkit-autofill::first-line {
    font-family: scifi !important;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}



/* Thanks to https://stackoverflow.com/questions/61083813/how-to-avoid-internal-autofill-selected-style-to-be-applied*/
/* Make the input not an ugly white when auto filled*/
input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
  font-family: scifi;
}


.form-group {
    margin-top: 20px;
    margin-bottom: 15px;
}

.form-input {
    width: 100%;
    padding: 0.375rem 0.75rem;
}

input.invalid {
    outline: 2px solid red !important;
    border-radius: 5px;
}

textarea:focus, input:focus{
    outline: none;
    border-color: var(--font-primary-color);
}

.slitan-modal-body {
    background-color: var(--fg-primary-color);
}

.slitan-modal-header {
    background-color: #333;
    color: white;
}

@font-face {
    font-family: scifi;
    src: url("Jura-VariableFont_wght.ttf");
}

@font-face {
    font-family: scifi2;
    src: url("conthrax-sb.otf");
}

@font-face {
    font-family: Exo2;
    src: url("Exo2-VariableFont_wght.ttf");
}


::-webkit-scrollbar {
    height: 25px;
}
  
::-webkit-scrollbar-thumb {
    border: 8px solid #00000000;
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: #8F9293;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background-color: #a6aaac;
}

  /* Track */
::-webkit-scrollbar-track {
    background-color: #202627;
    border-radius: 9999px;
    margin-block: 25px;
    border: 8px solid #00000000;
    background-clip: padding-box;
}