:root {
    --color-primary-dark: rgb(244, 244, 244);
    --color-primary-light: rgb(244, 244, 244);
    --color-text-main: rgb(255, 255, 255);
    --color-heading:  rgb(65, 62, 69);
    --color-highlight: rgb(65, 62, 69);
    --color-secondary-text: rgb(65, 62, 69);
    --color-button-text: rgb(255, 255, 255);
    --color-button-hover-bg: linear-gradient(90deg, rgb(248, 177, 143), rgb(209, 10, 18), rgb(128, 1, 56));
    --color-button-hover-text: rgb(255, 255, 255);
    --color-bet-container-bg: rgb(255, 255, 255);
    --color-bet-title:  rgb(65, 62, 69);
    --color-reset-button-text: rgb(65, 62, 69);
    --color-form-border: rgb(175, 192, 201);
    --color-latest-spins-title:  rgb(65, 62, 69);
    --color-overall-result-total-bg: linear-gradient(90deg, rgb(73, 47, 177), rgb(31, 20, 75));
    --color-overall-result-bg: rgb(255, 255, 255);
    --color-overall-result-title:  rgb(65, 62, 69);
    --color-overall-result-secondary: rgb(255, 255, 255);
    --color-list-item-count-text: #FFF;
    --color-list-item-bg: linear-gradient(90deg, rgb(116, 216, 168), rgb(83, 192, 90));
    --color-border-active-chip: rgb(73, 47, 177);
    --color-border-white: rgb(255, 255, 255);
    --color-border-result-item: rgb(72, 43, 108);
    --color-text-dropdown: rgb(65, 62, 69);
    --color-border-dropdown: rgb(206, 197, 219, 0.2);
    --color-bg-option-dropdown: rgb(255, 255, 255);
    --color-border-dropdown-options: rgb(206, 197, 219, 0.2);
    --color-bg-active-dropdown: rgb(206, 197, 219, 0.2);
    --color-text-active-dropdown: rgb(65, 62, 69);
    --color-text-dropdown-selected: rgb(65, 62, 69);
    --color-border-dropdown-select: rgb(206, 197, 219);
}

h1 {
    color: var(--color-heading);
}

.container-title-wrapper h2 {
    color: var(--color-highlight);
}
.container-title-wrapper span {
    color: var(--color-secondary-text);
}

.bttn {
    background: rgb(255, 255, 255);
    border: 1px solid rgba(65, 62, 69, 0.2);
    color: rgb(65, 62, 69);
    border-radius: 5px !important;
    font-weight: 500 !important;
    position: relative;
}

.bttn.active::after {
    content: "";
    position: absolute;
    width: 99%;
    margin: 0 auto;
    bottom: -2.5px;
    left: 0;
    right: 0;
    height: 10px;
    border-radius: 7px;
    background: rgba(128, 1, 56, 0.8);
    z-index: -1;
}

.bttn:hover::after {
    content: "";
    position: absolute;
    width: 99%;
    margin: 0 auto;
    bottom: -2.5px;
    left: 0;
    right: 0;
    height: 10px;
    border-radius: 7px;
    background: rgba(128, 1, 56, 0.8);
    z-index: -1;
}

.bttn:hover {
    border: 1px solid rgb(128, 1, 56);
    background: var(--color-button-hover-bg);
    color: var(--color-button-hover-text);
}

.bttn.active {
    border: 1px solid rgb(128, 1, 56);
    position: relative;
    background: var(--color-button-hover-bg);
    color: var(--color-button-hover-text);
}

.bttn.inactive {
    background: rgb(255, 255, 255) !important;
    color: rgb(65, 62, 69) !important;
}

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

.bet-title {
    color: var(--color-bet-title);
}

.bttn-reset {
    color: var(--color-reset-button-text);
    border-radius: 5px !important;
}

.form-select {
    color: var(--color-reset-button-text);
    border-color: var(--color-form-border);
}

.latest-spins-title {
    color: var(--color-latest-spins-title);
}

.latest-spins-container {
    background: var(--color-bet-container-bg);
}

.overall-result-total {
    background: var(--color-overall-result-total-bg);
}

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

.overall-result-title h2 {
    color: var(--color-overall-result-title);
}

.overall-result-total-title .bet-title {
    color: rgb(255, 255, 255);
}

.overall-result-total-title span {
    color: var(--color-overall-result-secondary);
}

.overall-result-title span {
    color: rgb(65, 62, 69);
}

.overall-result-list-item span {
    color: rgb(65, 62, 69);
}

.bet-strategy-list-item-count {
    color: var(--color-list-item-count-text);
    background: var(--color-list-item-bg);
    box-shadow: 0 0 18.8px 2px rgba(252, 81, 163, 0.2);
}

.active_chip {
    border-color: var(--color-border-active-chip) !important;
}

.bttn-reset {
    border-color: var(--color-reset-button-text);
}

.overall-result-list-item span:nth-child(5) {
    border-color: var(--color-border-white);
}

.overall-result-total-list-item {
    border-color: var(--color-border-result-item);
}

.dropdown-option:hover {
    color: var(--color-border-active-chip);
    border-color: var(--color-border-dropdown) !important;
}

.active-dropdown-option {
    color: var(--color-border-active-chip) !important;
}

.dropdown-option {
    color: var(--color-text-dropdown);
    border-bottom-color: var(--color-border-dropdown) !important;
}

.dropdown-options {
    background-color: var(--color-bg-option-dropdown);
    border-color: var(--color-border-dropdown-options) !important;
}

.active_dropdown {
    background: #fff !important;
    color: var(--color-text-active-dropdown) !important;
    border-color: var(--color-bg-active-dropdown) !important;
}

.dropdown-selected {
    color: var(--color-text-dropdown-selected);
    border-color: var(--color-border-dropdown-select) !important;
}

.up-money {
    color: rgb(43, 211, 71) !important;
}

.low-money {
    color: rgb(242, 8, 8) !important;
}
