/* Custom Colors */

:root {
    --onyx: #0a0a0aff;
    --onyx-light: #0a0a0a80;
    --graphite: #363537ff;
    --graphite-light: #36353780;
    --onyx-graphite: #0a0a0a33;
    --watermelon: #ee1b49ff;
    --tomato: #ff5349ff;
    --tangerine: #fe8833ff;
    --amber: #fdbc1dff;
    --white: #ffffffff;
    --white-half: #ffffff80;
    --white-quarter: #ffffff40;
    --white-dark: #ffffff0d;
    --white-darker: #ffffff1a;
}

.bg-onyx {
    background-color: var(--onyx);
}

.bg-onyx-light {
    background-color: var(--onyx-light);
}

.bg-graphite {
    background-color: var(--graphite);
}

.bg-graphite-light {
    background-color: var(--graphite-light);
}

.bg-onyx-graphite {
    background-color: var(--onyx-graphite);
}

.bg-watermelon {
    background-color: var(--watermelon);
}

.bg-tomato {
    background-color: var(--tomato);
}

.bg-amber {
    background-color: var(--amber);
}

.bg-tangerine {
    background-color: var(--tangerine);
}

.bg-white {
    background-color: var(--white);
}

.bg-white-dark {
    background-color: var(--white-dark);
}

.text-onyx {
    color: var(--onyx) !important;
}

.text-onyx-light {
    color: var(--onyx-light) !important;
}

.text-graphite {
    color: var(--graphite) !important;
}

.text-graphite-light {
    color: var(--graphite-light) !important;
}

.text-onyx-graphite {
    color: var(--onyx-graphite) !important;
}

.text-watermelon {
    color: var(--watermelon) !important;
}

.text-tomato {
    color: var(--tomato) !important;
}

.text-amber {
    color: var(--amber);
}

.text-tangerine {
    color: var(--tangerine);
}

.text-white {
    color: var(--white);
}

.btn.btn-white {
    background-color: var(--white) !important;
    color: var(--onyx) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn.btn-white:hover {
    background-color: var(--white-half) !important;
    color: var(--white) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn.btn-tangerine {
    background-color: var(--tangerine) !important;
    color: var(--white) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn.btn-tangerine:hover {
    color: var(--onyx) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.text-underline-white {
    text-decoration: underline solid var(--white-half) 1px;
    text-underline-offset: 3px;
}

/* Override Styles */

a {
    color: var(--white);
}

a:hover {
    color: var(--white-half);
}

input, textarea, select {
    color: var(--white) !important;
    border-color: var(--graphite) !important;
    background-color: var(--onyx-light) !important;
}

input::placeholder, textarea::placeholder {
    color: var(--white-half) !important;
}

select + span .select2-selection {
    border-color: var(--graphite) !important;
    border-left: var(--white) solid 3px !important;
    border-radius: 0 !important;
    background-color: var(--onyx-light) !important;
    color: var(--white) !important;
}

.select2-search__field {
    color: var(--white) !important;
}

.select2-selection__choice {
    background-color: var(--graphite) !important;;
    border: 1px solid var(--white-half) !important;
}

.select2-selection__choice .select2-selection__choice__remove, .select2-selection__choice .select2-selection__choice__display {
    background-color: var(--graphite) !important;
}

.select2-container--default .select2-results > .select2-results__options {
    background-color: var(--onyx);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--onyx);
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--onyx);
}

.select2-results__option {
    color: var(--white);
}

.select2-selection__rendered {
    color: var(--white) !important;
}

.form-theme-style {
    border: 0;
    border-left: var(--white) solid 3px !important;
    border-radius: 0 !important;
}

.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0 !important;
}

.btn {
    background-color: var(--amber) !important;
    color: var(--onyx) !important;
    border-color: var(--amber) !important;
    border-radius: 0.2rem;
    transition: color 0.3s ease;
}

.btn:hover {
    color: var(--white) !important;
    transition: color 0.3s ease;
}

.alert-invalid {
    background-color: var(--watermelon) !important;
    border-color: var(--watermelon) !important;
    color: var(--white) !important;
}

.alert-info {
    background-color: var(--white) !important;
    border-color: var(--white) !important;
    color: var(--onyx) !important;
}

table th, table td {
    background-color: var(--onyx-light) !important;
    color: var(--white) !important;
    border: 1px solid var(--graphite) !important;
    font-weight: 400;
    text-align: center;
}

.tooltip-theme {
    --bs-tooltip-bg: var(--tomato);
}

.toast-header {
    border-radius: 0.2rem;
    background-color: var(--white) !important;
    border-color: var(--white) !important;
    color: var(--onyx) !important;
}

.toast-invalid {
    border-radius: 0.2rem;
    background-color: var(--watermelon) !important;
    border-color: var(--watermelon) !important;
    color: var(--white) !important;
}

.form-check-input {
    border-color: var(--white) !important;
}

/* Custom Style */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--onyx-light);
}

::-webkit-scrollbar-thumb {
  background: var(--white);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--white-half);
}

@media (min-width: 992px) {
    .img-control {
        max-width: 50%;
    }
}

.required-star::after {
	content: "*";
	color: var(--watermelon);
}

.required-star::placeholder::after {
	content: "*";
	color: var(--watermelon);
}