/* COLOR GUIDELINE */

/* BACKGROUND */
.bg-brand-primary {
    background-color: #d89216 !important;
}
.bg-brand-primary-hover:hover {
    background-color: #feb470 !important;
}
.bg-brand-primary-inactive {
    background-color: #572200 !important;
}

.bg-brand-secondary {
    background-color: #dcd7c9 !important;
}
.bg-brand-secondary-hover:hover {
    background-color: #c8c0aa !important;
}
.bg-brand-secondary-inactive {
    background-color: #6a675e !important;
}

.bg-brand-accent {
    background-color: #93cedc !important;
}
.bg-brand-accent-hover:hover {
    background-color: #6cbdd0 !important;
}
.bg-brand-accent-inactive {
    background-color: #364c52 !important;
}

.bg-dark-1,
.bg-hover-dark-1:hover {
    background-color: #20232a !important;
}
.bg-dark-2,
.bg-hover-dark-2:hover {
    background-color: #2a3139 !important;
}
.bg-dark-3,
.bg-hover-dark-3:hover {
    background-color: #1a1c23 !important;
}
.bg-dark-4,
.bg-hover-dark-4:hover {
    background-color: #0e0f13 !important;
}
.bg-dark-5,
.bg-hover-dark-5:hover {
    background-color: #ffffff !important;
}
.bg-white,
.bg-hover-white:hover {
    background-color: #ffffff !important;
}

.bg-linear-dark-1 {
    background: rgb(21, 35, 49);
    background: linear-gradient(
        90deg,
        rgba(21, 35, 49, 1) 0%,
        rgba(0, 0, 0, 1) 100%
    );
}

/* TEXT COLOR */
.text-brand-primary {
    color: #d89216 !important;
}
.text-brand-primary-hover:hover {
    color: #feb470 !important;
}
.text-brand-primary-inactive {
    color: #572200 !important;
}

.text-brand-secondary {
    color: #dcd7c9 !important;
}
.text-brand-secondary-hover:hover {
    color: #c8c0aa !important;
}
.text-brand-secondary-inactive {
    color: #6a675e !important;
}

.text-brand-accent {
    color: #93cedc !important;
}
.text-brand-accent-hover:hover {
    color: #6cbdd0 !important;
}
.text-brand-accent-inactive {
    color: #364c52 !important;
}

.text-dark-1,
.text-hover-dark-1:hover {
    color: #20232a !important;
}
.text-dark-2,
.text-hover-dark-2:hover {
    color: #2a3139 !important;
}
.text-dark-3,
.text-hover-dark-3:hover {
    color: #1a1c23 !important;
}
.text-dark-4,
.text-hover-dark-4:hover {
    color: #0e0f13 !important;
}

.text-white,
.text-hover-white:hover {
    color: #fff !important;
}
.text-white::placeholder {
    opacity: 0.5;
}

/* BORDER COLOR */
.border-dark-1,
.border-hover-dark-1:hover {
    border-color: #20232a !important;
}
.border-dark-2,
.border-hover-dark-2:hover {
    border-color: #2a3139 !important;
}
.border-dark-3,
.border-hover-dark-3:hover {
    border-color: #1a1c23 !important;
}
.border-dark-4,
.border-hover-dark-4:hover {
    border-color: #0e0f13 !important;
}

.border-white,
.border-hover-white:hover {
    border-color: #fff !important;
}

.border-brand-primary {
    border-color: #d89216 !important;
}
.border-brand-primary-hover:hover {
    border-color: #feb470 !important;
}
.border-brand-primary-inactive {
    border-color: #572200 !important;
}

.border-brand-secondary {
    border-color: #dcd7c9 !important;
}
.border-brand-secondary-hover:hover {
    border-color: #c8c0aa !important;
}
.border-brand-secondary-inactive {
    border-color: #6a675e !important;
}

.border-brand-accent {
    border-color: #93cedc !important;
}
.border-brand-accent-hover:hover {
    border-color: #6cbdd0 !important;
}
.border-brand-accent-inactive {
    border-color: #364c52 !important;
}

/* STATE COLOR */

/* INFO */
.bg-state-info {
    background-color: #2947c3 !important;
}
.bg-state-hover-info:hover {
    background-color: #769eee !important;
}
.bg-state-info-dark {
    background-color: #001f52 !important;
}

.text-state-info {
    color: #2947c3 !important;
}
.text-state-hover-info:hover {
    color: #769eee !important;
}
.text-state-info-dark {
    color: #001f52 !important;
}

.border-state-info {
    border-color: #2947c3 !important;
}
.border-state-hover-info:hover {
    border-color: #769eee !important;
}
.border-state-info-dark {
    border-color: #001f52 !important;
}

/* SUCCESS */
.bg-state-success {
    background-color: #14a16e !important;
}
.bg-state-hover-success:hover {
    background-color: #70daa3 !important;
}
.bg-state-success-dark {
    background-color: #00451a !important;
}

.text-state-success {
    color: #14a16e !important;
}
.text-state-hover-success:hover {
    color: #70daa3 !important;
}
.text-state-success-dark {
    color: #00451a !important;
}

.border-state-success {
    border-color: #14a16e !important;
}
.border-state-hover-success:hover {
    border-color: #70daa3 !important;
}
.border-state-success-dark {
    border-color: #00451a !important;
}

/* WARNING */
.bg-state-warning {
    background-color: #ff9933 !important;
}
.bg-state-hover-warning:hover {
    background-color: #ffb177 !important;
}
.bg-state-warning-dark {
    background-color: #571e00 !important;
}

.text-state-warning {
    color: #ff9933 !important;
}
.text-state-hover-warning:hover {
    color: #ffb177 !important;
}
.text-state-warning-dark {
    color: #571e00 !important;
}

.border-state-warning {
    border-color: #ff9933 !important;
}
.border-state-hover-warning:hover {
    border-color: #ffb177 !important;
}
.border-state-warning-dark {
    border-color: #571e00 !important;
}

/* ERROR */
.bg-state-error {
    background-color: #c31e5a !important;
}
.bg-state-hover-error:hover {
    background-color: #ef70af !important;
}
.bg-state-error-dark,
.bg-state-danger-dark {
    background-color: #53002c !important;
}

.text-state-error {
    color: #c31e5a !important;
}
.text-state-hover-error:hover {
    color: #ef70af !important;
}
.text-state-error-dark {
    color: #53002c !important;
}

.border-state-error,
.border-state-danger {
    border-color: #c31e5a !important;
}
.border-state-hover-error:hover {
    border-color: #ef70af !important;
}
.border-state-error-dark {
    border-color: #53002c !important;
}

/* DISABLED */
.bg-state-disabled {
    background-color: #1d2125 !important;
}
.bg-state-hover-disabled:hover {
    background-color: #1d2125 !important;
}

.text-state-disabled {
    color: #1d2125 !important;
}
.text-state-hover-disabled:hover {
    color: #1d2125 !important;
}

.border-state-disabled {
    border-color: #1d2125 !important;
}
.border-state-hover-disabled:hover {
    border-color: #1d2125 !important;
}

/* GREY */
/* GREY COLOR */
.bg-grey-1 {
    background-color: #333333 !important;
}
.bg-grey-2 {
    background-color: #4f4f4f !important;
}
.bg-grey-3 {
    background-color: #919191 !important;
}
.bg-grey-4 {
    background-color: #bdbdbd !important;
}
.bg-grey-5 {
    background-color: #e0e0e0 !important;
}

.text-grey-1 {
    color: #333333 !important;
}
.text-grey-2 {
    color: #4f4f4f !important;
}
.text-grey-3 {
    color: #919191 !important;
}
.text-grey-4 {
    color: #bdbdbd !important;
}
.text-grey-5 {
    color: #e0e0e0 !important;
}

.border-grey-1 {
    border-color: #333333 !important;
}
.border-grey-2 {
    border-color: #4f4f4f !important;
}
.border-grey-3 {
    border-color: #919191 !important;
}
.border-grey-4 {
    border-color: #bdbdbd !important;
}
.border-grey-5 {
    border-color: #e0e0e0 !important;
}
/* END GREY COLOR */

/* END STATE COLOR */

/* CUSTOM ELEMENT */
.bg-slider-range-primary::-webkit-slider-thumb {
    background-color: #d89216 !important;
}
.bg-slider-range-primary::-moz-range-thumb {
    background-color: #d89216 !important;
}

.bg-brand-goodspector,
.bg-hover-brand-goodspector:hover {
    background-color: #1c274c !important;
}
.text-brand-goodspector,
.text-hover-brand-goodspector:hover {
    color: #1c274c !important;
}
.border-brand-goodspector,
.border-hover-brand-goodspector:hover {
    border-color: #1c274c !important;
}

.select2-container--default
    .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #d89216 !important;
    color: #20232a !important;
}

.select2-container--default .select2-results__option,
.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #fff !important;
}

.select2-container--default .select2-selection--single {
    background-color: #20232a !important;
    color: #fff !important;
}

/* DISABLED */
.select2-container--default.select2-container--disabled
    .select2-selection--single
    .select2-selection__rendered {
    color: #4f4f4f !important;
}

.select2-container--default.select2-container--disabled
    .select2-selection--single {
    background-color: #1d2125 !important;
    color: #4f4f4f !important;
}

.tippy-box[data-theme~="primary"] {
    background-color: #0e0f13;
    color: #fff;
}

.tippy-box[data-theme~="primary"][data-placement^="top"]
    > .tippy-arrow::before {
    border-top-color: #0e0f13;
}

/* DATEPICKER */
.ui-datepicker {
    background-color: #20232a !important; /* bg-dark-1 */
    border-color: #2a3139 !important; /* border-dark-2 */
}

.ui-datepicker .ui-datepicker-header {
    background-color: #fff !important; /* bg-white */
    color: #20232a !important; /* text-dark-1 */
}

.ui-datepicker .ui-datepicker-calendar thead th {
    color: #fff !important; /* text-white */
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default:hover {
    background-color: #2a3139 !important; /* bg-dark-2*/
    color: #ff9933 !important; /* text-brand-primary */
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default {
    color: #fff !important; /* text-white */
}

.ui-datepicker .ui-datepicker-calendar .ui-state-disabled .ui-state-default {
    color: #4f4f4f !important; /* text-grey-2 */
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-highlight {
    border: 1px solid #ff9933 !important; /* border-brand-primary */
    color: #ff9933 !important; /* text-brand-primary */
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-active {
    background-color: #ff9933 !important; /* bg-brand-primary */
    color: #20232a !important; /* text-dark-1 */
}