:root {
    --rgb-crm-typo-primary: 238, 238, 238;
    --rgb-crm-typo-secondary: 141, 141, 141;
    --rgb-crm-typo-paragraph-primary: 10,10,10;
    --rgb-crm-typo-paragraph-secondary: 108,108,108;
    --rgb-crm-buy: 92, 208, 158;
    --rgb-crm-sell: 246, 78, 52;
    --rgb-crm-badge-dark-text: 18, 18, 18;
    --rgb-crm-badge-green: 4, 197, 113;
    --rgb-crm-background: 11, 19, 46;
    --rgb-crm-dropdown-bg: 240,240,240;
    --rgb-crm-light-card: 247, 247, 247;
    --rgb-crm-card: 244, 244, 244;
    --rgb-crm-card-fill-bg: 31, 31, 31;
    --rgb-crm-card-fill-bg-hover: 242, 242, 242;
    --rgb-crm-icon-dark: 34, 36, 43;
    --rgb-crm-icon-light: 197, 197, 197;
    --rgb-crm-primary: 5, 73, 227;
    --rgb-crm-primary-hover: 0, 64, 209;
    --rgb-crm-primary-20: 5, 73, 227, 0.10;
    --rgb-crm-panel: 229, 229, 229;
    --rgb-crm-stroke: 224, 224, 224;
    --rgb-crm-badge-text-dark: 255,255,255;
    --rgb-crm-link: 0, 69, 226;
    --logo-img: url(/dynamic/logoLight);
}

html[data-theme='light'] {
    color-scheme: light !important;
    --logo-img: url(/dynamic/logo);
}

html[data-alt='blue'] {
    /*--rgb-crm-badge-dark-text: 255, 255, 255;
    --rgb-crm-primary: 5, 73, 227;*/
}

html[data-theme='dark'] {
    --rgb-crm-typo-primary: 205,215,237;
    --rgb-crm-white: 255,255,255;
    /*--rgb-crm-typo-secondary: 197, 197, 197;*/
    --rgb-crm-typo-secondary: 147,158,183;
    --rgb-crm-typo-paragraph-primary: 197, 197, 197;
    --rgb-crm-typo-paragraph-secondary: 108,108,108;
    --rgb-crm-buy: 4, 197, 113;
    --rgb-crm-sell: 246, 78, 52;
    --rgb-crm-badge-dark-text: 18, 18, 18;
    --rgb-crm-background: 11,19,46;
    --rgb-crm-dropdown-bg: 76, 80, 93;
    --rgb-crm-light-card: 76, 80, 93;
    --rgb-crm-card: 34,42,69;
    --rgb-crm-card-fill-bg: 34,42,69;
    --rgb-crm-card-fill-bg-hover: 34,42,69;
    --rgb-crm-icon-light: 197, 197, 197;
    --rgb-crm-icon-dark: 34, 36, 43;
    --rgb-crm-primary: 53,215,255;
    --rgb-crm-primary-hover: 53,215,255;
    --rgb-crm-panel: 50,58,86;
    --rgb-crm-stroke: 69, 72, 82;
    --rgb-crm-stroke-light: 255,255,255,0.1;
    --rgb-crm-dashboard-bar-bg-blue: 58, 100, 163;
    --rgb-crm-dashboard-bar-bg-purple: 124, 99, 171;
    --rgb-crm-dashboard-bar-accent-blue: 19, 46, 86;
    --rgb-crm-dashboard-bar-accent-purple: 54, 43, 85;
    --rgb-crm-badge-yellow: 255, 184, 0;
    --rgb-crm-dropdown-bg: 76, 80, 93;
    --rgb-ui-dot-green: 136, 214, 44;
    --rgb-crm-link: 8, 196, 160;
    --rgb-crm-primary-20: 8, 196, 160, 0.10;
    --gradient-crm-button-background: 90deg, #5700C0 0%, #3194E6 100%;
    --gradient-crm-card-background: 90deg, #21345D 0%, #1C2046 100%;
}

.crm-card-gradient {
    background: var(--color-crm-card-gradient) !important;
    background-size: cover !important;
    background-position: center !important;
    background-blend-mode: multiply, normal;
    color: var(--color-crm-typo-secondary) !important;
    position: relative;
}

    .crm-card-gradient::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: url('/img/background_bw.jpg');
        background-size: cover !important;
        background-position: center !important;
        background-blend-mode: multiply, normal;
        opacity: 0.03;
        pointer-events: none;
    }

.product-item {
    border-radius: 16px;
    /*background: url('/img/background.png') lightgray 50% / cover no-repeat, linear-gradient(90deg, #21345D 0%, #1C2046 100%) !important;*/
    /*background: linear-gradient(90deg, #21345D 0%, #1C2046 100%) !important;*/
    /*background: var(--color-crm-card-gradient) !important;*/
    /*background: url('/img/background_bw.jpg') no-repeat center, var(--color-crm-card-gradient) !important;*/
    font-size: 12px;
    width: 275px;
}

    .product-item h3 {
        color: var(--color-crm-white) !important;
    }

    .product-item .account-balance .value {
        color: var(--color-crm-typo-primary) !important;
    }

    .product-item .steps-container .product-item-step .header {
        color: var(--color-crm-white) !important;
    }

    .product-item .steps-container .product-item-step {
        border-radius: 8px;
    }

    .product-item .header {
        min-height: auto !important;
    }

    .product-item .account-balance {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 12px !important;
    }

        .product-item .account-balance .value {
            font-size: 12px !important;
        }

    .product-item .divider {
        background: var(--color-crm-stroke-light, rgba(255, 255, 255, 0.10)) !important;
        align-self: center;
    }

#platform-selector {
    gap: 64px !important;
}

#platform-list .platform-item .license {
    background: var(--color-crm-card, #222A45);
    color: var(--color-crm-white) !important;
}

#platform-list .platform-item .name {
    color: var(--color-crm-white) !important;
}

#checkout-billing, #checkout-cart-summary {
    border-radius: 16px;
    padding: 24px 24px;
}

.data-market-item .name {
    color: var(--color-crm-white) !important;
}

.data-market-item .price .value {
    color: var(--color-crm-white) !important;
}

.data-market-duration-item .title {
    color: var(--color-crm-white) !important;
    font-weight: bold;
}

.reset-item {
    border-radius: 16px;
}

    .reset-item .price {
        color: var(--color-crm-white) !important;
    }

.checkout-subtitle-page {
    color: var(--color-crm-typo-secondary) !important;
}

.checkout-modal .checkout-item {
    border-bottom: 1px solid var(--color-crm-stroke-light, #E0E0E0)
}

.complete-title {
    color: var(--color-crm-typo-primary) !important;
}

.checkout-modal .checkout-title {
    color: var(--color-crm-typo-primary) !important;
}

.checkout-modal .coupon button {
    border-radius: 40px;
    background: var(--color-crm-primary) !important;
    color: var(--color-ui-background, #0B132E) !important;
    border: none !important;
    padding: 4px 16px;
    width: 120px;
}

    .checkout-modal .coupon button:hover {
        background: var(--color-crm-primary) !important;
        opacity: 0.9;
    }

.checkout-modal .checkout-total .price {
    color: var(--color-crm-white) !important;
}

a {
    color: var(--color-crm-primary) !important;
}

.form-control, .form-select, .checkout-modal .coupon input[type=text] {
    border-radius: 2px;
    background: var(--color-ui-background, #0B132E) !important;
    border: 1px solid var(--color-ui-background, #0B132E);
}

.crm-card {
    background: var(--color-crm-card-panel, #323A56);
}

    .crm-card.crm-card-interactive:not(.disabled):hover {
        outline-width: 3px !important;
    }

    .crm-card.crm-card-interactive.active {
        outline-width: 3px !important;
    }

.checkout-title-page {
    gap: 16px;
}

    .checkout-title-page .checkout-title-divider {
        background: var(--color-crm-stroke-light, rgba(255, 255, 255, 0.10));
    }

    .checkout-title-page h2 {
        color: var(--color-crm-typo-primary) !important;
    }

.step-footer {
    border-top: 1px solid var(--color-crm-stroke-light, rgba(255, 255, 255, 0.10)) !important;
    background-color: var(--color-ui-background) !important;
}

.navbar {
    border-bottom: 1px solid var(--color-crm-stroke-light, rgba(255, 255, 255, 0.10)) !important;
}

.btn {
    border-radius: 40px;
}

    .btn.btn-primary {
        background: var(--color-crm-button-gradient) !important;
        border: none !important;
        color: var(--color-crm-white) !important;
    }

        .btn.btn-primary:hover {
            opacity: 0.9;
            background: var(--color-crm-button-gradient) !important;
        }

/*.btn.btn-outline-secondary {
        border: 1px solid var(--color-crm-button-gradient) !important;
        color: var(--color-crm-button-gradient) !important;
    }*/

.step-footer {
    padding: 12px 12px 20px 12px !important;
}