/* Minification failed. Returning unminified contents.
(1043,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-black'
(1048,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white2'
(1052,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white2'
(1056,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-black'
(1057,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1058,24): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1062,35): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-black'
(1063,32): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-black'
(1068,32): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1069,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1074,26): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1075,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1079,32): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple-d'
(1080,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1087,32): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-hr-gray1'
(1088,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white1'
(1092,28): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1093,26): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-black'
(1097,32): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1101,30): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1102,25): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1106,30): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-input-pure-black'
(1107,25): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1112,26): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1113,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1117,33): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1121,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1125,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1129,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1133,25): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1138,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-black'
(1139,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white2'
(1144,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white2'
(1148,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1152,31): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1156,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1160,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1161,31): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1165,24): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1166,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-table'
(1170,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1174,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white3'
(1175,31): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1179,35): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1184,31): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1190,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1194,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white1'
(1195,31): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1199,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1203,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1207,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1211,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1215,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1219,28): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1223,31): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1227,26): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-table'
(1231,24): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1235,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-table'
(1236,24): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1240,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1244,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1245,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-sub-category-promo'
(1249,26): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1250,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1254,31): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1255,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-black'
(1259,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1263,25): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1267,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1271,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-input-pure-black'
(1275,26): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-black'
(1279,25): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1283,25): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1284,39): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1288,29): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1293,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1294,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1298,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1303,24): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1307,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-black'
(1311,28): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1315,26): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1316,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1320,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1325,36): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1329,28): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1330,26): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-black'
(1331,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1335,26): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1336,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1340,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-sub-category-promo'
(1344,30): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1348,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-sub-category-promo'
(1352,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-sub-category-promo'
(1356,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1360,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-sub-category-promo'
(1364,24): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1365,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white2'
(1369,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-background-header'
(1374,21): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white6'
(1378,31): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-border'
(1383,22): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
(1384,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-text-white'
(1388,17): run-time error CSS1039: Token not allowed after unary operator: '-darkpurple-main-purple'
 */
@-moz-document url-prefix() {
    .sga-underline.nav-pills > li.container-right select {
        padding: 0 4px;
    }
}

.sga-underline {
    min-height: 44px;
    border-bottom: 1px solid #888;
}

    .sga-underline.nav-pills > li > a {
        font-size: 16px;
        color: #111;
        border-radius: 0px;
    }

        .sga-underline.nav-pills > li > a:hover {
            font-weight: 500;
        }

    .sga-underline.nav-pills > li.active {
        border-radius: 0px;
        border-bottom: 2px solid #f33;
        margin-bottom: -1px;
    }

        .sga-underline.nav-pills > li.active > a,
        .sga-underline.nav-pills > li.active > a:hover {
            text-decoration: none;
            font-weight: 500;
            color: #000;
            background-color: transparent !important;
        }

    .sga-underline.nav-pills > li.container-right {
        font-size: 14px;
        flex-grow: 100;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        align-items: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
    }

        .sga-underline.nav-pills > li.container-right > div,
        .sga-underline.nav-pills > li.container-right > button,
        .sga-underline.nav-pills > li.container-right > input,
        .sga-underline.nav-pills > li.container-right > select,
        .sga-underline.nav-pills > li.container-right > select option {
            height: 30px;
            margin-left: 16px;
            font-size: 0.965em;
        }

        .sga-underline.nav-pills > li.container-right > button {
            padding: 0px 12px;
            line-height: 0px;
        }

        .sga-underline.nav-pills > li.container-right > input,
        .sga-underline.nav-pills > li.container-right > select {
            border: 1px solid #aaa;
            border-radius: 4px;
            outline-color: #aaa;
            outline-width: 1px;
        }

        .sga-underline.nav-pills > li.container-right > select {
            padding-top: 0;
        }

            .sga-underline.nav-pills > li.container-right > select optgroup {
                font-size: 14px;
                font-weight: 600;
                color: #000;
            }
div.sga-daterangepicker {
    border-radius: 5px;
    border: unset;
    display: flex;
    align-items: center;
    height: 33px !important;
    flex-shrink: 0;
}

    div.sga-daterangepicker > span {
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

select[data-name="filtertransaction"] {
    background-position-x: right !important;
    background-position-y: center !important;
    border-radius: 0.25rem;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23AAA' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") !important;
    background-repeat: no-repeat !important;
}

.daterangepicker {
    top: 128px !important;
}

    .daterangepicker td.active,
    .daterangepicker td.active:hover {
        border-color: transparent;
    }

    .daterangepicker td.available:hover,
    .daterangepicker th.available:hover {
        border-color: transparent;
    }

    .daterangepicker td.in-range {
        border-color: transparent;
        border-radius: 0;
    }

    .daterangepicker td.off,
    .daterangepicker td.off.in-range,
    .daterangepicker td.off.start-date,
    .daterangepicker td.off.end-date {
        border-color: transparent;
    }

    .daterangepicker .calendar-table {
        border: 1px solid;
        border-radius: 4px;
    }

    .daterangepicker .drp-buttons .applyBtn {
        border: unset;
    }

.sga-underline {
    border: unset;
}

    .sga-underline.nav-pills {
        display: flex;
        align-items: center;
    }

        .sga-underline.nav-pills > li > a {
            font-size: 16px;
            font-weight: 600;
            line-height: normal;
        }

        .sga-underline.nav-pills > li.active {
            display: inline-flex;
            padding: 7px 20px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            border-radius: 5px;
            border: unset;
        }

            .sga-underline.nav-pills > li.active > a {
                padding: 0px;
                font-size: 16px;
                font-weight: 600;
                line-height: normal;
            }

        .sga-underline.nav-pills > li.container-right > input,
        .sga-underline.nav-pills > li.container-right > select {
            border-radius: 5px;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            border: unset;
            height: 33px !important;
            outline: unset;
        }

.container-page {
    padding: 20px;
    border-radius: 20px;
}

    .container-page > .page-content-group > .menu-group > .container {
        display: flex;
        justify-content: space-around;
        border-bottom: none;
    }

        .container-page > .page-content-group > .menu-group > .container > ul {
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: 20px;
            border-radius: 10px;
            border: none;
            width: 100%;
        }

            .container-page > .page-content-group > .menu-group > .container > ul > li > a {
                display: flex;
                padding: 26px 30px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                flex: 1 0 0;
                font-size: 24px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
            }

            .container-page > .page-content-group > .menu-group > .container > ul > li.active {
                border-bottom: 3px solid;
            }

            .container-page > .page-content-group > .menu-group > .container > ul > .container-right {
                display: none;
            }

.menu-group {
    padding-top: 0.3rem;
    padding-bottom: 1rem;
}

    .menu-group > .container {
        padding: 0;
    }

.promo-norec > div {
    padding: 48px;
    margin: 16px;
    border: 1px solid;
    text-align: center;
}

    .promo-norec > div > div:first-child > i {
        font-size: 2.2rem;
    }

    .promo-norec > div > div:last-child {
        padding-top: 20px;
        font-size: 1.6rem;
    }

.sga-underline.nav-pills > li.active {
    background: unset !important;
    border-radius: unset;
}

table.details {
    display: flex;
    flex-direction: column;
}

    table.details > thead > tr {
        display: flex;
        justify-content: space-around;
    }

        table.details > thead > tr > th > span {
            font-size: 20px;
        }

#dlgPromo .modal-content > .modal-body {
    padding: 0px 20px;
}

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .purchase {
        display: flex;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
        border-bottom: 1px solid;
        gap: 20px;
        justify-content: center;
        align-items: center;
        padding: 0 10px 10px 10px;
    }

        #dlgPromo .modal-content > .modal-body > .popup-promo-details > .purchase > .main-purchase {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

            #dlgPromo .modal-content > .modal-body > .popup-promo-details > .purchase > .main-purchase > div {
                display: flex;
                gap: 10px;
            }

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-bonus > div {
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        line-height: normal;
        padding: 10px;
    }

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }

        #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content > table > tbody {
            display: grid;
            align-items: center;
            justify-content: center;
        }

        #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content > .details > tbody > tr {
            display: inline-flex;
            padding: 12px 44px;
            align-items: flex-start;
            gap: 137px;
            border-radius: 10px;
            border: 1px solid;
            max-width: 700px;
            white-space: nowrap;
            margin-bottom: 9px;
        }

            #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content > .details > tbody > tr:last-child > td {
                text-align: start;
                display: unset;
                width: unset;
            }

            #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content > .details > tbody > tr > td {
                width: 350px;
                text-align: center;
                display: flex;
            }

        #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content > .details-top {
            width: 751px;
            text-align: center;
            font-size: 20px;
            font-weight: 500;
            line-height: normal;
            border-bottom: 1px solid;
            padding: 0px 10px 10px 10px;
        }

            #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content > .details-top > div:first-child {
                display: flex;
                justify-content: space-around;
            }

            #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content > .details-top > div:last-child {
                display: flex;
                justify-content: space-between;
                padding: 0px 10px 10px 10px;
                border-bottom: 1px solid;
            }

        #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content.promo-cashback,
        #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content.promo-start {
            border-bottom: 1px solid;
        }

            #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content.promo-cashback > div,
            #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content.promo-start > div {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

                #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content.promo-cashback > div > div:first-child,
                #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content.promo-start > div > div:first-child {
                    font-size: 18px;
                    font-weight: 600;
                    line-height: normal;
                    text-align: center;
                    margin-bottom: 10px;
                }

        #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content.promo-repeat {
            font-size: 20px;
            font-weight: 600;
            line-height: normal;
        }

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-date > div:first-child {
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
        border-bottom: 1px solid;
        padding: 0px 10px 10px 10px;
    }

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-date > div:last-child {
        font-size: 20px;
        font-weight: 700;
        line-height: normal;
        display: flex;
        gap: 10px;
        justify-content: center;
        padding: 10px 10px 0px 10px;
        align-items: center;
        margin-bottom: 5px;
    }

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-footer {
        font-size: 20px;
        font-weight: 700;
        line-height: normal;
        text-align: center;
        margin-top: 10px;
    }

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .status-text {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        margin: 0px 15px 15px 15px;
    }

        #dlgPromo .modal-content > .modal-body > .popup-promo-details > .status-text > div {
            padding: 15px;
            border: 1px solid;
            border-radius: 10px;
            width: 100%;
            font-size: 1rem;
        }

        #dlgPromo .modal-content > .modal-body > .popup-promo-details > .status-text span {
            overflow-wrap: anywhere;
        }

#dlgPromo .modal-content > .modal-header > button {
    padding: 0px;
}

#dlgPromo .modal-content > .modal-header > .modal-title {
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
}

#dlgPromo .timer {
    border-bottom: 1px solid;
    padding: 10px;
}

    #dlgPromo .timer > div {
        display: grid;
        gap: 5px;
    }

        #dlgPromo .timer > div > div > span {
            font-size: 16px;
            font-weight: 400;
            line-height: normal;
        }

        #dlgPromo .timer > div > .promo-timer > div {
            display: flex;
            align-items: flex-start;
            gap: 3px;
        }

            #dlgPromo .timer > div > .promo-timer > div:last-child {
                display: flex;
            }

            #dlgPromo .timer > div > .promo-timer > div > div {
                display: grid;
                text-align: center;
            }

                #dlgPromo .timer > div > .promo-timer > div > div > span:first-child {
                    display: inline-flex;
                    padding: 11px 14px;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    border-radius: 5px;
                    text-align: center;
                    font-size: 32px;
                    font-weight: 700;
                    line-height: normal;
                    min-width: 64px;
                    height: 60px;
                }

        #dlgPromo .timer > div > .promo-timer .timer-dot {
            font-size: 34px;
            font-weight: 400;
            line-height: normal;
            border-radius: 50%;
            margin-top: 7px;
        }

.cashback-amount {
    width: 100%;
}

    .cashback-amount > tbody {
        display: contents !important;
    }

        .cashback-amount > tbody > tr > td,
        .cashback-amount > thead > tr > th {
            width: 50%;
            padding: 0.4rem 0.4rem;
            text-align: center;
            font-size: 16px;
            border: 1px solid;
        }

.container > .promo-category > .categories {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-gap: 20px;
    width: 100%;
}

    .container > .promo-category > .categories > .main-category {
        display: flex;
        gap: 10px;
        align-items: center;
        overflow: auto;
    }

        .container > .promo-category > .categories > .main-category > i {
            padding: 15px;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            text-align: center;
            font-size: 15px;
            cursor: pointer;
        }

        .container > .promo-category > .categories > .main-category .section {
            display: flex;
            gap: 16px;
            width: 100%;
            overflow: auto;
            scroll-behavior: smooth;
        }

            .container > .promo-category > .categories > .main-category .section::-webkit-scrollbar {
                display: none;
            }

        .container > .promo-category > .categories > .main-category > .section > a {
            display: flex;
            height: 61px;
            min-width: 230px;
            padding: 13px 18px;
            align-items: center;
            gap: 13px;
            border-radius: 5px;
            white-space: nowrap;
            text-align: center;
            font-size: 20px;
            font-weight: 900;
            line-height: normal;
            text-decoration: none;
            justify-content: center;
        }

    .container > .promo-category > .categories > .section {
        display: flex;
        padding: 0px 26px;
        align-items: center;
        gap: 22px;
        border-radius: 10px 10px 0px 0px;
        border-bottom: 2px solid;
    }

        .container > .promo-category > .categories > .section > div > a {
            text-align: center;
            font-size: 20px;
            font-weight: 900;
            line-height: normal;
            display: flex;
            padding: 20px 25px;
            align-items: flex-start;
            gap: 10px;
            text-decoration: none;
        }

.container-page > .page-content-group > .menu-group > .container > ul > li.active {
    border-bottom: 3px solid;
}

.day,
.hour {
    display: inline-flex;
    gap: 3px;
    will-change: transform;
}

    .day > div,
    .hour > div {
        display: inline-grid !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 5px;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
    }

        .day > div > span:first-child,
        .hour > div > span:first-child {
            padding: 11px 14px;
            border-radius: 5px;
            text-align: center;
            font-size: 32px;
            font-weight: 700;
            line-height: normal;
            will-change: transform;
            min-width: 64px;
        }

    .day > .timer-dot,
    .hour > .timer-dot {
        font-size: 34px;
        font-weight: 400;
        line-height: normal;
        border-radius: 50%;
        margin-bottom: 25px;
    }

.details > tbody > tr > td i {
    padding-right: 10px;
    display: flex;
    align-items: center;
}

.fa-ul > li span {
    font-size: 15px;
}

.fa-ul > li > span > ul,
.spend-list .fa-ul .fa-ul .fa-ul .fa-ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: 0;
}

    .fa-ul > li > span > ul > li,
    .spend-list .fa-ul .fa-ul .fa-ul .fa-ul > li {
        padding: 5px 10px;
        border: 1px solid;
        border-radius: 5px;
    }

.modal-content button.close {
    width: 30px;
    height: 30px;
}

.promo-category > .details {
    display: flex;
    flex-direction: column;
    gap: 36px;
    justify-content: center;
    padding: 0px;
    margin-top: 15px;
}

    .promo-category > .details > .promo {
        justify-content: center;
    }

        .promo-category > .details > .promo > .promo-main {
            display: flex;
            gap: 17px;
            height: 236px;
            padding: 20px;
            align-items: center;
            flex-shrink: 0;
            border-radius: 10px;
            justify-content: space-between;
        }

            .promo-category > .details > .promo > .promo-main > img {
                width: 365px;
                height: 194px;
                flex-shrink: 0;
                border-radius: 7px;
                border: 1px solid;
            }

            .promo-category > .details > .promo > .promo-main > .promo-main-button {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                width: 330px;
                height: 100%;
                justify-content: space-between;
                gap: 30px;
            }

                .promo-category > .details > .promo > .promo-main > .promo-main-button > .main-repeat {
                    display: grid;
                    gap: 10px;
                    width: 100%;
                }

                    .promo-category > .details > .promo > .promo-main > .promo-main-button > .main-repeat > div {
                        display: flex;
                        gap: 5px;
                        align-items: center;
                    }

                        .promo-category > .details > .promo > .promo-main > .promo-main-button > .main-repeat > div:last-child {
                            font-size: 20px;
                            font-weight: 600;
                            line-height: normal;
                            padding: 11px 14px;
                            border-radius: 5px;
                            text-align: center;
                            will-change: transform;
                            min-width: 64px;
                            justify-content: center;
                        }

                        .promo-category > .details > .promo > .promo-main > .promo-main-button > .main-repeat > div > .promo-repeat {
                            font-size: 20px;
                            font-weight: 600;
                            line-height: normal;
                            display: flex;
                            flex-wrap: nowrap;
                            gap: 10px;
                            align-items: flex-start;
                        }

                            .promo-category > .details > .promo > .promo-main > .promo-main-button > .main-repeat > div > .promo-repeat .icon-repeat {
                                padding: 10px;
                                background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 20 20" fill="none"%3E%3Cg clip-path="url(%23clip0_3857_6857)"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4.88281 0H15.1172C17.8066 0 20 2.19344 20 4.88281V15.1172C20 17.8066 17.8066 20 15.1172 20H4.88281C2.19344 20 0 17.8066 0 15.1172V4.88281C0 2.19344 2.19344 0 4.88281 0ZM14.7442 10.25L13.9227 11.0713V9.22801C13.9218 8.39266 13.5896 7.59179 12.9989 7.0011C12.4082 6.41041 11.6074 6.07814 10.772 6.07719H9.78516V7.93078H10.7722C11.1161 7.93113 11.4459 8.06792 11.6891 8.31112C11.9323 8.55432 12.0691 8.88407 12.0695 9.22801V11.0713L11.2478 10.25L9.9375 11.5605L12.9961 14.6193L16.0547 11.5605L14.7442 10.25ZM6.07727 10.772C6.07819 11.6073 6.41043 12.4082 7.0011 12.9989C7.59177 13.5895 8.39263 13.9218 9.22797 13.9227H10.215V12.0692H9.22797C8.88403 12.0689 8.55428 11.9321 8.31108 11.6889C8.06788 11.4457 7.93109 11.1159 7.93074 10.772V8.92855L8.75219 9.75L10.0627 8.43949L7.00414 5.3809L3.94531 8.43949L5.25578 9.75L6.07727 8.92855V10.772Z" fill="%23FFDC00" /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_3857_6857"%3E%3Crect width="20" height="20" fill="white" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
                                background-repeat: no-repeat;
                                width: 45px !important;
                                height: 45px !important;
                                padding: 14px;
                                background-position: center;
                                border-radius: 5px;
                            }

                .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-button {
                    display: flex;
                    align-items: flex-end;
                    justify-content: flex-end;
                    gap: 25px;
                    width: 100%;
                }

                    .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-button > button:first-child {
                        width: 137px;
                        height: 47px;
                        flex-shrink: 0;
                        border-radius: 5px;
                        border: 1px solid;
                        text-align: center;
                        font-size: 20px;
                        font-weight: 700;
                        line-height: normal;
                        flex: 1;
                    }

                    .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-button > button:last-child {
                        height: 47px;
                        flex-shrink: 0;
                        border-radius: 5px;
                        text-align: center;
                        font-size: 20px;
                        font-weight: 700;
                        line-height: normal;
                        flex: 1;
                        white-space: nowrap;
                    }

                .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div {
                    font-size: 18px;
                    font-weight: 400;
                    line-height: normal;
                    display: flex;
                    justify-content: end;
                }

                    .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div > span > img {
                        display: inline-flex;
                        padding: 14px;
                        align-items: flex-start;
                        gap: 10px;
                        border-radius: 5px;
                    }

                    .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div > span > .day,
                    .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div > span > .hour {
                        display: inline-flex;
                        gap: 3px;
                        will-change: transform;
                    }

                        .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div > span > .day > div,
                        .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div > span > .hour > div {
                            display: inline-grid !important;
                            justify-content: flex-end !important;
                            align-items: center !important;
                            gap: 5px;
                            text-align: center;
                            font-size: 14px;
                            font-weight: 400;
                            line-height: normal;
                        }

                            .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div > span > .day > div > span:first-child,
                            .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div > span > .hour > div > span:first-child {
                                padding: 11px 14px;
                                border-radius: 5px;
                                text-align: center;
                                font-size: 32px;
                                font-weight: 700;
                                line-height: normal;
                                will-change: transform;
                                min-width: 64px;
                            }

                        .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div > span > .day > .timer-dot,
                        .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div > span > .hour > .timer-dot {
                            font-size: 34px;
                            font-weight: 400;
                            line-height: normal;
                            border-radius: 50%;
                            margin-bottom: 25px;
                        }

            .promo-category > .details > .promo > .promo-main > .promo-title {
                height: 182px;
                width: 325px;
                max-width: 325px;
            }

                .promo-category > .details > .promo > .promo-main > .promo-title > div {
                    text-align: start;
                    font-size: 20px;
                    font-weight: 700;
                    line-height: normal;
                }

                .promo-category > .details > .promo > .promo-main > .promo-title > span {
                    text-align: start;
                    font-size: 18px;
                    font-weight: 400;
                    line-height: normal;
                }

                .promo-category > .details > .promo > .promo-main > .promo-title > .promo-purchase {
                    display: flex;
                    margin-top: 15px;
                }

                    .promo-category > .details > .promo > .promo-main > .promo-title > .promo-purchase > div {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 8px;
                    }

                        .promo-category > .details > .promo > .promo-main > .promo-title > .promo-purchase > div > div {
                            font-size: 20px;
                            font-weight: 700;
                            line-height: normal;
                        }

                        .promo-category > .details > .promo > .promo-main > .promo-title > .promo-purchase > div > span {
                            text-align: start;
                            font-size: 14px;
                            font-weight: 400;
                            line-height: normal;
                            white-space: nowrap;
                        }

.promo-details {
    position: relative;
    min-height: 200px;
    margin: 6px 0;
    padding: 0;
    border: 1px solid;
    display: none;
}

    .promo-details .fa-ol {
        padding-inline-start: 0;
        list-style: none;
        counter-reset: list-counter;
    }

        .promo-details .fa-ol > li {
            margin-top: 1.5rem;
            counter-increment: list-counter;
            position: relative;
            padding-left: 1.25rem;
        }

            .promo-details .fa-ol > li:first-of-type {
                margin-top: 0.5rem;
            }

            .promo-details .fa-ol > li::before {
                content: counter(list-counter) ".";
                position: absolute;
                left: 0;
                background: linear-gradient(to bottom,#987648,#fcf6ba);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                line-height: 30px;
                font-weight: bold;
            }

        .promo-details .fa-ol > .fa-ul {
            padding-inline-start: 40px;
        }

.provider-name {
    display: flex;
    white-space: nowrap;
    gap: 10px;
    max-width: 325px;
    overflow: auto;
    padding-bottom: 5px;
    padding: 10px 0px;
}

    .provider-name::-webkit-scrollbar {
        height: 5px;
        background-color: transparent;
    }

    .provider-name > div {
        display: flex;
        padding: 10px 15px;
        align-items: center;
        gap: 10px;
        border-radius: 5px;
        flex-wrap: nowrap;
        min-width: 150px;
        justify-content: center;
        cursor: pointer;
    }

        .provider-name > div > div {
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            line-height: normal;
        }

        .provider-name > div > i {
            font-size: 14px;
        }

.section-bonus {
    border-bottom: 1px solid;
}

.section-purchase > button {
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    padding: 13px 30px;
}

.sga-underline.nav-pills > li.active {
    background: unset !important;
    border-radius: unset;
}

.spend-list > .fa-ul {
    margin-left: 0;
}

    .spend-list > .fa-ul > li {
        margin-top: 10px;
    }

.text-center > i {
    padding-right: 10px;
}

@media (max-width: 991px) {
    .promo-category > .details > .promo > .promo-main {
        align-items: flex-start;
    }

        .promo-category > .details > .promo > .promo-main > .promo-main-button {
            width: 291px;
        }

            .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-button {
                gap: 10px;
            }

            .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div > span > .day > div > span:first-child,
            .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div > span > .hour > div > span:first-child {
                font-size: 27px;
                padding: 10px 10px;
            }

        .promo-category > .details > .promo > .promo-main > .promo-title {
            width: unset;
        }
}

@media (max-width: 1200px) {
    .promo-category > .details > .promo > .promo-main {
        flex-wrap: wrap;
        height: auto;
    }

        .promo-category > .details > .promo > .promo-main > img {
            width: 100%;
            height: unset;
        }
}

div.sga-daterangepicker {
    background: var(--darkpurple-background-black);
}

    div.sga-daterangepicker::after,
    div.sga-daterangepicker::before {
        color: var(--darkpurple-text-white2);
    }

    div.sga-daterangepicker > span {
        color: var(--darkpurple-text-white2);
    }

.daterangepicker {
    background: var(--darkpurple-background-black);
    color: var(--darkpurple-text-white) !important;
    border-color: var(--darkpurple-border) !important;
}

    .daterangepicker:after {
        border-bottom-color: var(--darkpurple-background-black);
        border-top-color: var(--darkpurple-background-black);
    }

    .daterangepicker td.active,
    .daterangepicker td.active:hover {
        background-color: var(--darkpurple-main-purple) !important;
        color: var(--darkpurple-text-white) !important;
    }

    .daterangepicker td.available:hover,
    .daterangepicker th.available:hover {
        background: var(--darkpurple-main-purple);
        color: var(--darkpurple-text-white);
    }

    .daterangepicker td.in-range {
        background-color: var(--darkpurple-main-purple-d);
        color: var(--darkpurple-text-white);
    }

    .daterangepicker td.off,
    .daterangepicker td.off.in-range,
    .daterangepicker td.off.start-date,
    .daterangepicker td.off.end-date {
        background-color: var(--darkpurple-hr-gray1);
        color: var(--darkpurple-text-white1);
    }

    .daterangepicker .calendar-table {
        border-color: var(--darkpurple-border);
        background: var(--darkpurple-background-black);
    }

    .daterangepicker .drp-buttons {
        border-top-color: var(--darkpurple-border);
    }

        .daterangepicker .drp-buttons .applyBtn {
            background: var(--darkpurple-main-purple) !important;
            color: var(--darkpurple-text-white) !important;
        }

        .daterangepicker .drp-buttons .btn {
            background: var(--darkpurple-input-pure-black);
            color: var(--darkpurple-text-white);
        }

    .daterangepicker .ranges li.active,
    .daterangepicker .ranges li:hover {
        background: var(--darkpurple-main-purple);
        color: var(--darkpurple-text-white);
    }

    .daterangepicker.show-ranges.ltr .drp-calendar.left {
        border-left-color: var(--darkpurple-border) !important;
    }

.sga-underline.nav-pills > li > a {
    color: var(--darkpurple-text-white) !important;
}

.sga-underline.nav-pills > li.active {
    background: var(--darkpurple-main-purple);
}

    .sga-underline.nav-pills > li.active > a {
        color: var(--darkpurple-text-white) !important;
    }

        .sga-underline.nav-pills > li.active > a:hover {
            color: var(--darkpurple-text-white);
        }

.sga-underline.nav-pills > li.container-right > input,
.sga-underline.nav-pills > li.container-right > select {
    background: var(--darkpurple-background-black);
    color: var(--darkpurple-text-white2);
}

    .sga-underline.nav-pills > li.container-right > input:before,
    .sga-underline.nav-pills > li.container-right > select:before {
        color: var(--darkpurple-text-white2) !important;
    }

    .sga-underline.nav-pills > li.container-right > select optgroup {
        color: var(--darkpurple-text-white);
    }

#dlgPromo .modal-content > .modal-body > .popup-promo-details > .purchase {
    border-bottom-color: var(--darkpurple-border);
}

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .purchase > .main-purchase > div > i {
        color: var(--darkpurple-main-purple);
    }

#dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-bonus > div {
    color: var(--darkpurple-text-white);
    border-bottom-color: var(--darkpurple-border);
}

#dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content > .details > tbody > tr {
    border-color: var(--darkpurple-border);
    background: var(--darkpurple-table);
}

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content > .details > tbody > tr > td i {
        color: var(--darkpurple-main-purple);
    }

#dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content > .details-top {
    color: var(--darkpurple-text-white3);
    border-bottom-color: var(--darkpurple-border);
}

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content > .details-top > div:last-child {
        border-bottom-color: var(--darkpurple-border);
    }

#dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content.promo-cashback,
#dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content.promo-start {
    border-bottom-color: var(--darkpurple-border);
}

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content.promo-cashback > div > div:first-child,
    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content.promo-repeat,
    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-content.promo-start > div > div:first-child {
        color: var(--darkpurple-main-purple);
    }

#dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-date > div:first-child {
    color: var(--darkpurple-text-white1);
    border-bottom-color: var(--darkpurple-border);
}

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-date > div:first-child i {
        color: var(--darkpurple-main-purple);
    }

#dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-date > div:last-child {
    color: var(--darkpurple-text-white);
}

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-date > div:last-child i {
        color: var(--darkpurple-main-purple);
    }

#dlgPromo .modal-content > .modal-body > .popup-promo-details > .section-footer {
    color: var(--darkpurple-main-purple);
}

#dlgPromo .modal-content > .modal-body > .popup-promo-details > .status-text {
    color: var(--darkpurple-text-white);
}

    #dlgPromo .modal-content > .modal-body > .popup-promo-details > .status-text > div {
        border-color: var(--darkpurple-border);
    }

#dlgPromo .timer {
    border-bottom-color: var(--darkpurple-border);
}

    #dlgPromo .timer > div > .promo-timer > div > div > span:first-child {
        background: var(--darkpurple-table);
    }

.cashback-amount > tbody > tr > td {
    border-color: var(--darkpurple-border);
}

.cashback-amount > thead > tr > th {
    background: var(--darkpurple-table);
    border-color: var(--darkpurple-border);
}

.container > .promo-category > .categories > .main-category > i {
    background: var(--darkpurple-border);
}

.container > .promo-category > .categories > .main-category > .section a {
    background: var(--darkpurple-border);
    color: var(--darkpurple-background-sub-category-promo);
}

    .container > .promo-category > .categories > .main-category > .section a.promo-category-active {
        background: var(--darkpurple-main-purple);
        color: var(--darkpurple-text-white);
    }

.container > .promo-category > .categories > .section {
    border-bottom-color: var(--darkpurple-main-purple);
    background: var(--darkpurple-background-black);
}

    .container > .promo-category > .categories > .section > div > a {
        color: var(--darkpurple-text-white);
    }

        .container > .promo-category > .categories > .section > div > a:hover {
            color: var(--darkpurple-main-purple);
        }

    .container > .promo-category > .categories > .section > .promo-category-active > a {
        color: var(--darkpurple-main-purple);
    }

.container-page {
    background: var(--darkpurple-input-pure-black);
}

    .container-page > .page-content-group > .menu-group > .container > ul {
        background: var(--darkpurple-background-black);
    }

        .container-page > .page-content-group > .menu-group > .container > ul > li > a {
            color: var(--darkpurple-text-white);
        }

        .container-page > .page-content-group > .menu-group > .container > ul > li.active {
            color: var(--darkpurple-main-purple) !important;
            border-bottom-color: var(--darkpurple-main-purple) !important;
        }

            .container-page > .page-content-group > .menu-group > .container > ul > li.active > a {
                color: var(--darkpurple-main-purple) !important;
            }

.day > div > span:first-child,
.hour > div > span:first-child {
    background: var(--darkpurple-border);
    color: var(--darkpurple-text-white);
}

.fa-ul > li > span > b {
    color: var(--darkpurple-main-purple);
}

.fa-ul > li > span > ul > li,
.spend-list .fa-ul .fa-ul .fa-ul .fa-ul > li {
    border-color: var(--darkpurple-main-purple);
}

.promo-category > .details > .promo > .promo-main {
    background: var(--darkpurple-background-black);
}

    .promo-category > .details > .promo > .promo-main > img {
        border-color: var(--darkpurple-border);
    }

    .promo-category > .details > .promo > .promo-main > .promo-main-button > .main-repeat > div:last-child {
        background: var(--darkpurple-border);
        color: var(--darkpurple-text-white);
    }

    .promo-category > .details > .promo > .promo-main > .promo-main-button > .main-repeat > div > .promo-repeat {
        color: var(--darkpurple-main-purple);
    }

        .promo-category > .details > .promo > .promo-main > .promo-main-button > .main-repeat > div > .promo-repeat .icon-repeat {
            background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 20 20" fill="none"%3E%3Cg clip-path="url(%23clip0_3857_6857)"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4.88281 0H15.1172C17.8066 0 20 2.19344 20 4.88281V15.1172C20 17.8066 17.8066 20 15.1172 20H4.88281C2.19344 20 0 17.8066 0 15.1172V4.88281C0 2.19344 2.19344 0 4.88281 0ZM14.7442 10.25L13.9227 11.0713V9.22801C13.9218 8.39266 13.5896 7.59179 12.9989 7.0011C12.4082 6.41041 11.6074 6.07814 10.772 6.07719H9.78516V7.93078H10.7722C11.1161 7.93113 11.4459 8.06792 11.6891 8.31112C11.9323 8.55432 12.0691 8.88407 12.0695 9.22801V11.0713L11.2478 10.25L9.9375 11.5605L12.9961 14.6193L16.0547 11.5605L14.7442 10.25ZM6.07727 10.772C6.07819 11.6073 6.41043 12.4082 7.0011 12.9989C7.59177 13.5895 8.39263 13.9218 9.22797 13.9227H10.215V12.0692H9.22797C8.88403 12.0689 8.55428 11.9321 8.31108 11.6889C8.06788 11.4457 7.93109 11.1159 7.93074 10.772V8.92855L8.75219 9.75L10.0627 8.43949L7.00414 5.3809L3.94531 8.43949L5.25578 9.75L6.07727 8.92855V10.772Z" fill="%238F61EC" /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_3857_6857"%3E%3Crect width="20" height="20" fill="white" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
            background-color: var(--darkpurple-border);
        }

    .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-button > button:first-child {
        border-color: var(--darkpurple-main-purple);
        background: var(--darkpurple-background-black);
        color: var(--darkpurple-text-white);
    }

    .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-button > button:last-child {
        background: var(--darkpurple-main-purple);
        color: var(--darkpurple-text-white);
    }

    .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div {
        color: var(--darkpurple-background-sub-category-promo);
    }

        .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > div > span > img {
            background: var(--darkpurple-border);
        }

    .promo-category > .details > .promo > .promo-main > .promo-main-button > .promo-end-at > span > div {
        color: var(--darkpurple-background-sub-category-promo);
    }

    .promo-category > .details > .promo > .promo-main > .promo-title > span {
        color: var(--darkpurple-background-sub-category-promo);
    }

    .promo-category > .details > .promo > .promo-main > .promo-title > .promo-purchase > div > div {
        color: var(--darkpurple-main-purple);
    }

    .promo-category > .details > .promo > .promo-main > .promo-title > .promo-purchase > div > span {
        color: var(--darkpurple-background-sub-category-promo);
    }

.promo-norec > div {
    border-color: var(--darkpurple-border);
    color: var(--darkpurple-text-white2);
}

.provider-name > div {
    background: var(--darkpurple-background-header);
}

    .provider-name > div > div,
    .provider-name > div > i {
        color: var(--darkpurple-text-white6);
    }

.section-bonus {
    border-bottom-color: var(--darkpurple-border);
}

.section-purchase > button,
.section-purchase > button:hover {
    background: var(--darkpurple-main-purple);
    color: var(--darkpurple-text-white);
}

.text-center > i {
    color: var(--darkpurple-main-purple);
}