@charset "utf-8";

.option-background-default { background-color: var(--theme-background-color); color: var(--theme-heading-color); border-style: solid; border-color: rgb(230, 230, 230); }

.option-background-default .option-icon-right, .option-background-default .option-icon-score, .option-background-default .option-icon-value { transition: 0.2s; background-color: rgba(64, 64, 64, 0.1); }

.option-background-default .option-icon-select { transition: 0.2s; color: var(--theme-heading-color); background-color: var(--theme-background-color); border: 1px solid rgb(191, 191, 191); }

.active .option-icon-select { border-color: rgb(99, 102, 241); }

@media (hover: hover) and (pointer: fine) {
  .option-background-default:hover, .option-background-default:hover .option-icon-select { border-color: rgb(99, 102, 241); }
}

.option-background-default.active { color: rgb(255, 255, 255); border-color: var(--theme-accent-color); background-color: var(--theme-accent-color); }

.option-background-bubble { font-weight: 500; color: rgb(255, 255, 255); border-color: rgb(89, 92, 217); background-color: var(--theme-accent-color); border-bottom-width: 8px !important; }

.option-background-bubble .option-icon-score, .option-background-bubble .option-icon-value { background-color: rgba(130, 133, 244, 0.5); }

.option-background-bubble .option-icon-select { border: 1px solid rgba(255, 255, 255, 0.5); }

.option-background-bubble.active { transform: scale(1.025); background-color: rgb(115, 117, 242); }

@media (hover: hover) and (pointer: fine) {
  .option-background-bubble:hover { transform: scale(1.025); background-color: rgb(115, 117, 242); }
}

.option-background-fetured { font-weight: 500; color: rgb(255, 255, 255); border-color: var(--theme-accent-color); background-color: var(--theme-accent-color); }

.option-background-fetured .option-icon-right, .option-background-fetured .option-icon-score, .option-background-fetured .option-icon-value { background-color: rgba(130, 133, 244, 0.5); }

.option-background-fetured .option-icon-select { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.5); }

.active.option-background-fetured { border-color: rgb(115, 117, 242); background-color: rgb(115, 117, 242); transform: scale(1.025); }

@media (hover: hover) and (pointer: fine) {
  .option-background-fetured:hover { border-color: rgb(115, 117, 242); background-color: rgb(115, 117, 242); transform: scale(1.025); }
}

.option-background-contrast::before { content: " "; display: block; width: 100%; height: 100%; background-color: var(--theme-background-color); position: absolute; z-index: 0; }

.option-background-contrast::after { content: " "; top: 0px; left: 0px; display: block; width: 100%; height: 100%; background-color: rgba(99, 102, 241, 0.1); position: absolute; z-index: 0; }

.option-background-contrast .option-wrap { position: relative; z-index: 1; }

.option-background-contrast { font-weight: 500; color: var(--theme-heading-color); border-color: rgba(99, 102, 241, 0.5) !important; }

.option-background-contrast .option-icon-right { color: rgb(99, 102, 241) !important; background-color: var(--theme-background-color); }

.active.option-background-contrast .option-icon-right { color: var(--theme-background-color) !important; background-color: var(--theme-accent-color); }

.option-background-contrast .option-icon-score, .option-background-contrast .option-icon-value { transition: 0.2s; border: 1px solid var(--theme-accent-color); background-color: var(--theme-background-color); color: rgb(99, 102, 241) !important; }

.active.option-background-contrast .option-icon-score, .active.option-background-contrast .option-icon-value { border: 1px solid var(--theme-accent-color); background-color: var(--theme-accent-color); color: var(--theme-background-color) !important; }

.option-background-contrast .option-icon-select { background-color: var(--theme-background-color); color: rgb(99, 102, 241) !important; border: 1px solid rgb(99, 102, 241) !important; }

.active.option-background-contrast { background-color: rgba(99, 102, 241, 0.2); transform: scale(1.01); border-color: rgb(99, 102, 241) !important; }

@media (hover: hover) and (pointer: fine) {
  .option-background-contrast:hover { background-color: rgba(99, 102, 241, 0.2); transform: scale(1.01); border-color: rgb(99, 102, 241) !important; }
}

.active.option-background-contrast { transform: scale(1.025); }