/* Drag-and-drop stylesheet generated from 5 hex colors.
 * primary=#4d118a secondary=#cd5ce0 tertiary=#3af0e1
 * login=#fcce00 register=#19cf08
 * gradient-direction=180deg
 * Load this stylesheet AFTER bootstrap.css.
 */

/* === Bootstrap v5 theme classes === */

:root {
    --bs-primary: #4d118a;
    --bs-primary-rgb: 77, 17, 138;
    --bs-secondary: #cd5ce0;
    --bs-secondary-rgb: 205, 92, 224;
    --bs-tertiary: #3af0e1;
    --bs-tertiary-rgb: 58, 240, 225;
}

/* --- primary (#4d118a) --- */

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #4d118a;
    --bs-btn-border-color: #4d118a;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #410e75;
    --bs-btn-hover-border-color: #3e0e6e;
    --bs-btn-focus-shadow-rgb: 104, 53, 156;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #3e0e6e;
    --bs-btn-active-border-color: #3a0d67;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #4d118a;
    --bs-btn-disabled-border-color: #4d118a;
}

.btn-outline-primary {
    --bs-btn-color: #4d118a;
    --bs-btn-border-color: #4d118a;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #4d118a;
    --bs-btn-hover-border-color: #4d118a;
    --bs-btn-focus-shadow-rgb: 77, 17, 138;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #4d118a;
    --bs-btn-active-border-color: #4d118a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #4d118a;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #4d118a;
    --bs-gradient: none;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

.border-primary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}

.link-primary {
    color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-primary:hover, .link-primary:focus {
    color: RGBA(62, 14, 110, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(62, 14, 110, var(--bs-link-underline-opacity, 1)) !important;
}

.alert-primary {
    --bs-alert-color: #2e0a53;
    --bs-alert-bg: #dbc0f7;
    --bs-alert-border-color: #c9a0f3;
    --bs-alert-link-color: #250842;
}
.alert-primary .alert-link {
    color: var(--bs-alert-link-color);
}

.list-group-item-primary {
    color: #2e0a53;
    background-color: #dbc0f7;
}
.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
    color: #2e0a53;
    background-color: #c599f2;
}
.list-group-item-primary.list-group-item-action.active {
    color: #fff;
    background-color: #4d118a;
    border-color: #4d118a;
}

.table-primary {
    --bs-table-color: #000000;
    --bs-table-bg: #dbc0f7;
    --bs-table-border-color: #c5adde;
    --bs-table-striped-bg: #d0b6eb;
    --bs-table-striped-color: #000000;
    --bs-table-active-bg: #c5adde;
    --bs-table-active-color: #000000;
    --bs-table-hover-bg: #cbb2e4;
    --bs-table-hover-color: #000000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* --- secondary (#cd5ce0) --- */

.btn-secondary {
    --bs-btn-color: #000000;
    --bs-btn-bg: #cd5ce0;
    --bs-btn-border-color: #cd5ce0;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #d574e5;
    --bs-btn-hover-border-color: #d26ce3;
    --bs-btn-focus-shadow-rgb: 174, 78, 190;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: #d77de6;
    --bs-btn-active-border-color: #d26ce3;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000000;
    --bs-btn-disabled-bg: #cd5ce0;
    --bs-btn-disabled-border-color: #cd5ce0;
}

.btn-outline-secondary {
    --bs-btn-color: #cd5ce0;
    --bs-btn-border-color: #cd5ce0;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #cd5ce0;
    --bs-btn-hover-border-color: #cd5ce0;
    --bs-btn-focus-shadow-rgb: 205, 92, 224;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: #cd5ce0;
    --bs-btn-active-border-color: #cd5ce0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #cd5ce0;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #cd5ce0;
    --bs-gradient: none;
}

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.text-secondary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

.border-secondary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
}

.link-secondary {
    color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-secondary:hover, .link-secondary:focus {
    color: RGBA(215, 125, 230, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(215, 125, 230, var(--bs-link-underline-opacity, 1)) !important;
}

.alert-secondary {
    --bs-alert-color: #8d1e9f;
    --bs-alert-bg: #f5def9;
    --bs-alert-border-color: #f0cef6;
    --bs-alert-link-color: #71187f;
}
.alert-secondary .alert-link {
    color: var(--bs-alert-link-color);
}

.list-group-item-secondary {
    color: #8d1e9f;
    background-color: #f5def9;
}
.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
    color: #8d1e9f;
    background-color: #e9b6f2;
}
.list-group-item-secondary.list-group-item-action.active {
    color: #fff;
    background-color: #cd5ce0;
    border-color: #cd5ce0;
}

.table-secondary {
    --bs-table-color: #000000;
    --bs-table-bg: #f5def9;
    --bs-table-border-color: #ddc8e0;
    --bs-table-striped-bg: #e9d3ed;
    --bs-table-striped-color: #000000;
    --bs-table-active-bg: #ddc8e0;
    --bs-table-active-color: #000000;
    --bs-table-hover-bg: #e3cde6;
    --bs-table-hover-color: #000000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* --- tertiary (#3af0e1) --- */

.btn-tertiary {
    --bs-btn-color: #000000;
    --bs-btn-bg: #3af0e1;
    --bs-btn-border-color: #3af0e1;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #58f2e6;
    --bs-btn-hover-border-color: #4ef2e4;
    --bs-btn-focus-shadow-rgb: 49, 204, 191;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: #61f3e7;
    --bs-btn-active-border-color: #4ef2e4;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000000;
    --bs-btn-disabled-bg: #3af0e1;
    --bs-btn-disabled-border-color: #3af0e1;
}

.btn-outline-tertiary {
    --bs-btn-color: #3af0e1;
    --bs-btn-border-color: #3af0e1;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #3af0e1;
    --bs-btn-hover-border-color: #3af0e1;
    --bs-btn-focus-shadow-rgb: 58, 240, 225;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: #3af0e1;
    --bs-btn-active-border-color: #3af0e1;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #3af0e1;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #3af0e1;
    --bs-gradient: none;
}

.bg-tertiary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-tertiary-rgb), var(--bs-bg-opacity)) !important;
}

.text-tertiary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-tertiary-rgb), var(--bs-text-opacity)) !important;
}

.border-tertiary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-tertiary-rgb), var(--bs-border-opacity)) !important;
}

.link-tertiary {
    color: RGBA(var(--bs-tertiary-rgb), var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-tertiary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-tertiary:hover, .link-tertiary:focus {
    color: RGBA(97, 243, 231, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(97, 243, 231, var(--bs-link-underline-opacity, 1)) !important;
}

.alert-tertiary {
    --bs-alert-color: #0da699;
    --bs-alert-bg: #d8fcf9;
    --bs-alert-border-color: #c4fbf6;
    --bs-alert-link-color: #0a857a;
}
.alert-tertiary .alert-link {
    color: var(--bs-alert-link-color);
}

.list-group-item-tertiary {
    color: #17605a;
    background-color: #d8fcf9;
}
.list-group-item-tertiary.list-group-item-action:hover,
.list-group-item-tertiary.list-group-item-action:focus {
    color: #17605a;
    background-color: #adf9f2;
}
.list-group-item-tertiary.list-group-item-action.active {
    color: #fff;
    background-color: #3af0e1;
    border-color: #3af0e1;
}

.table-tertiary {
    --bs-table-color: #000000;
    --bs-table-bg: #d8fcf9;
    --bs-table-border-color: #c2e3e0;
    --bs-table-striped-bg: #cdefed;
    --bs-table-striped-color: #000000;
    --bs-table-active-bg: #c2e3e0;
    --bs-table-active-color: #000000;
    --bs-table-hover-bg: #c8e9e6;
    --bs-table-hover-color: #000000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* --- direct-property overrides (component override fallback) --- */

.btn-primary {
    color: #ffffff !important;
    background-color: #4d118a !important;
    background-image: var(--bs-gradient) !important;
    border-color: #4d118a !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #ffffff !important;
    background-color: #410e75 !important;
    border-color: #3e0e6e !important;
}

.btn-secondary {
    color: #000000 !important;
    background-color: #cd5ce0 !important;
    background-image: var(--bs-gradient) !important;
    border-color: #cd5ce0 !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: #000000 !important;
    background-color: #d574e5 !important;
    border-color: #d26ce3 !important;
}

.btn-tertiary {
    color: #000000 !important;
    background-color: #3af0e1 !important;
    background-image: var(--bs-gradient) !important;
    border-color: #3af0e1 !important;
}
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary:active {
    color: #000000 !important;
    background-color: #58f2e6 !important;
    border-color: #4ef2e4 !important;
}


/* === App theme — custom properties === */

:root {

    --theme-tab-games-selector-item: linear-gradient(180deg, #450f7c 0%, #300b57 100%);
    --theme-tab-games-selector-item-active: linear-gradient(180deg, #cd5ce0 0%, #a423ba 100%);
    --theme-tab-games-selector-bg: #260845e6;
    --theme-menu-border: 1px solid #8222e4;

    --theme-text-frame-color: #ffffff;
    --theme-text-frame-games-selected-bg: linear-gradient(180deg, #2e0a53, rgba(0, 0, 0, 0));
    --theme-text-tertiary: #000000;

    --theme-gradient-primary: linear-gradient(180deg, #4d118a 0%, #360c61 100%);
    --theme-gradient-secondary: linear-gradient(180deg, #cd5ce0 0%, #a423ba 100%);
    --theme-gradient-tertiary: linear-gradient(180deg, #3af0e1, #0fc2b3);
    --theme-gradient-quinary: linear-gradient(180deg, #3af0e1, #0fc2b3);
    --theme-gradient-dark: linear-gradient(180deg, #360c61 0%, #260844 100%);

    --theme-top-header-bg-color: #450f7c;
    --theme-top-header-bg-moz: -moz-linear-gradient(180deg, #450f7c 0%, #370c63 100%);
    --theme-top-header-bg-webkit: -webkit-linear-gradient(180deg, #450f7c 0%, #370c63 100%);
    --theme-top-header-bg: linear-gradient(180deg, #450f7c 0%, #370c63 100%);
    --theme-top-header-border: 1px solid #5f15aa;
    --theme-hamburger-bg: linear-gradient(to bottom, #fff, #fff);

    --theme-register-bg-color: #19cf08;
    --theme-register-bg-moz: -moz-linear-gradient(180deg, #19cf08 0%, #0c6804 100%);
    --theme-register-bg-webkit: -webkit-linear-gradient(180deg, #19cf08 0%, #0c6804 100%);
    --theme-register-bg: linear-gradient(180deg, #19cf08 0%, #0c6804 100%);
    --theme-register-btn-text-color: #000000;
    --theme-register-btn-radius: 1rem;

    --theme-login-bg-color: #fcce00;
    --theme-login-bg-moz: -moz-linear-gradient(180deg, #fcce00, #7e6700);
    --theme-login-bg-webkit: -webkit-linear-gradient(180deg, #fcce00, #7e6700);
    --theme-login-bg: linear-gradient(180deg, #fcce00, #7e6700);

    --theme-footer-bg: linear-gradient(180deg, #3e0d70 0%, #320a5a 100%) !important;
    --theme-footer-border: 1px solid #eddffb;
    --theme-footer-stop-color-1: #360c61;
    --theme-footer-stop-color-2: #170529;

    --theme-active-menu-text-color: #0f031c;
    --theme-btn-play-bg-color: linear-gradient(180deg, #450f7c 0%, #260845 100%);
    --theme-btn-play-text-color: #ffffff;

    --theme-primary-dark: #360c61 !important;

    --theme-fpm-bg: #360c61;
    --theme-body-bg-color: #360c61;
    --theme-bg-filter: #0000001a;

    /* bootstrap overrides */
    --bs-primary: #4d118a !important;
    --bs-primary-rgb: 77, 17, 138 !important;
    --bs-secondary: #cd5ce0 !important;
    --bs-secondary-rgb: 205, 92, 224 !important;
    --bs-tertiary: #3af0e1 !important;
    --bs-tertiary-rgb: 58, 240, 225 !important;
    --bs-dark-rgb: 54, 12, 97 !important;
    --bs-font-black: #000000 !important;
    --bs-font-white: #ffffff !important;

}

.mini-wallet-container {
    color: #1a1a1a;
}

.mini-wallet-container .text-tertiary {
    color: #000000 !important;
}

.mini-wallet-container .btn.btn-transparent,
.mini-wallet-container .btn.btn-secondary {
    background: transparent !important;
    border-color: transparent !important;
}

.mini-wallet-container .btn.btn-transparent svg,
.mini-wallet-container .btn.btn-secondary svg {
    color: #1a1a1a !important;
    fill: currentColor !important;
}

.mini-wallet-container .btn.btn-outline-light {
    background-color: #7019c9 !important;
    color: #ffffff !important;
    border-color: #a661ec !important;
}

.mini-wallet-container .btn.btn-outline-light:hover,
.mini-wallet-container .btn.btn-outline-light:focus,
.mini-wallet-container .btn.btn-outline-light:active {
    background-color: #4d118a !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.mini-wallet-container .btn.btn-outline-light .bg-white {
    background-color: transparent !important;
    color: #ffffff !important;
}

.mini-wallet-container .btn.btn-outline-light .text-tertiary {
    color: #ffffff !important;
}

.mini-wallet-container .btn.btn-outline-light .text-white {
    color: #cccccc !important;
}

.mini-wallet-container .btn.btn-play {
    background: linear-gradient(180deg, #4d118a 0%, #5f15aa 100%) !important;
    color: #ffffff !important;
    border: 1px solid #9441e8 !important;
    text-shadow: 0 0 6px #a661ec, 0 0 12px #4d118a !important;
    box-shadow: inset 0 0 6px #a661ec, 0 0 4px #7019c9, 0 0 12px #4d118a, 0 0 24px #4d118a, 0 0 48px #7019c9 !important;
    transition: box-shadow 200ms ease, transform 200ms ease, background 200ms ease !important;
}

.mini-wallet-container .btn.btn-play:hover,
.mini-wallet-container .btn.btn-play:focus,
.mini-wallet-container .btn.btn-play:active {
    background: linear-gradient(180deg, #791bd9 0%, #9441e8 100%) !important;
    color: #ffffff !important;
    border-color: #b881ef !important;
    text-shadow: 0 0 8px #c9a0f3, 0 0 16px #4d118a !important;
    box-shadow: inset 0 0 10px #c9a0f3, 0 0 8px #a661ec, 0 0 18px #4d118a, 0 0 36px #4d118a, 0 0 64px #7019c9 !important;
    transform: translateY(-1px);
}

.frame {
    text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000, 0 0 6px #000000 !important;
}

.tab-games-selector-item.active,
.tab-games-selector-item.active h5,
.tab-games-selector-item.active h6,
.tab-games-selector-item:hover {
    text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff !important;
}

.mini-wallet-container svg.bg-info {
    background-color: #4d118a !important;
    color: #ffffff !important;
    fill: currentColor !important;
    height: 24px;
    width: 24px;
    vertical-align: text-top;
}

.mini-wallet-container svg.bg-info + .bg-primary {
    color: #ffffff !important;
}

.mini-wallet-container svg.bg-info + .bg-primary .text-tertiary {
    color: #ffffff !important;
}

.mini-wallet-container .total-credit-mini + .row svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    border-radius: 16px !important;
    background-color: #4d118a !important;
    color: #ffffff !important;
    fill: currentColor !important;
}

.rfm-marquee {
    color: #ffffff !important;
}