@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css');

/*!
 * Custom Style's
 * Copyright © 2022 Shenn Digital <www.shenn.id>
 * Copyright © 2022 ShennX Network <www.shennx.net>
 * Copyright © 2022 Safalian Novandika <safalian.in.me@gmail.com>
 */

:root {
    --steam-color: #66c0f4;
    --google-color: #ff3e30;
    --discord-color: #7289da;
    --twitter-color: #00acee;
    --facebook-color: #3b5998;
}

.cursor-pointer {
    cursor: pointer;
}

.shnx-clipboard::before {
    margin: 0 .5rem 0 .5rem;
    content: "\f0ea";
    font-style: normal;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 400;
    font-variant: normal;
    vertical-align: middle;
}

.shnx-clipboard:hover {
    color: rgba(var(--ShennX_DCRGB), .75);
    cursor: pointer;
}

/* ========================================================================================================================== */
/*                                                  Creating New Theme Style                                                  */
/* ========================================================================================================================== */

.bg-tdc {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ShennX_DCRGB),var(--ct-bg-opacity))!important;
}

.text-tdc {
    color: var(--ShennX_DC);
}

.text-tdc85 {
    color: var(--ShennX_DC85);
}

.alert-tdc {
    --ct-alert-color: var(--ShennX_DC);
    --ct-alert-bg: rgba(var(--ShennX_DCRGB), 0.18);
    --ct-alert-border-color: rgba(var(--ShennX_DCRGB), 0.18)
}

.alert-tdc .alert-link {
    --ct-alert-color: var(--ShennX_DC)
}

.badge-soft-tdc {
    color: var(--ShennX_DC85);
    background-color: rgba(var(--ShennX_DCRGB), .18);
    -webkit-box-shadow: none;
    box-shadow: none
}

.badge-outline-tdc {
    color: var(--ShennX_DC);
    border: 1px solid var(--ShennX_DC);
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn-tdc {
    --ct-btn-color: #fff;
    --ct-btn-bg: var(--ShennX_DC);
    --ct-btn-border-color: var(--ShennX_DC);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--ShennX_DC85);
    --ct-btn-hover-border-color: var(--ShennX_DC85);
    --ct-btn-focus-shadow-rgb: var(--ShennX_DCRGB);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--ShennX_DC85);
    --ct-btn-active-border-color: var(--ShennX_DC85);
    --ct-btn-active-shadow: var(--ct-btn-active-box-shadow);
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: var(--ShennX_DC);
    --ct-btn-disabled-border-color: var(--ShennX_DC);
    -webkit-box-shadow: var(--ct-btn-box-shadow) rgba(var(--ShennX_DCRGB), .5);
    box-shadow: var(--ct-btn-box-shadow) rgba(var(--ShennX_DCRGB), .5)
}

.btn-outline-tdc {
    --ct-btn-color: var(--ShennX_DC);
    --ct-btn-border-color: var(--ShennX_DC);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--ShennX_DC);
    --ct-btn-hover-border-color: var(--ShennX_DC);
    --ct-btn-focus-shadow-rgb: var(--ShennX_DCRGB);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--ShennX_DC);
    --ct-btn-active-border-color: var(--ShennX_DC);
    --ct-btn-active-shadow: var(--ct-btn-active-box-shadow);
    --ct-btn-disabled-color: var(--ShennX_DC);
    --ct-btn-disabled-bg: transparent;
    --ct-gradient: none;
}

.btn-soft-tdc {
    --ct-btn-color: var(--ShennX_DC);
    --ct-btn-bg: rgba(var(--ShennX_DCRGB), 0.18);
    --ct-btn-border-color: rgba(var(--ShennX_DCRGB), 0.12);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--ShennX_DC);
    --ct-btn-hover-border-color: var(--ShennX_DC);
    --ct-btn-focus-shadow-rgb: var(--ShennX_DCRGB);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--ShennX_DC);
    --ct-btn-active-border-color: var(--ShennX_DC);
    --ct-btn-active-shadow: var(--ct-btn-active-box-shadow);
    --ct-btn-disabled-color: var(--ShennX_DC)
}

.bg-soft-tdc {
    --ct-bg-opacity: 0.25;
    background-color: rgba(var(--ShennX_DCRGB), var(--ct-bg-opacity)) !important
}

.icon-dual-tdc {
    color: var(--ShennX_DC);
    fill: rgba(var(--ShennX_DCRGB), .16)
}

.form-check.form-check-tdc .form-check-input:checked {
    background-color: var(--ShennX_DC) !important;
    border-color: var(--ShennX_DC) !important
}

.ribbon-box .ribbon-tdc {
    background: var(--ShennX_DC)
}

.ribbon-box .ribbon-tdc:before {
    border-color: var(--ShennX_DC) transparent transparent
}

.ribbon-box .ribbon-two-tdc span {
    background: var(--ShennX_DC)
}

.ribbon-box .ribbon-two-tdc span:before {
    border-left: 3px solid var(--ShennX_DC);
    border-top: 3px solid var(--ShennX_DC)
}

.ribbon-box .ribbon-two-tdc span:after {
    border-right: 3px solid var(--ShennX_DC);
    border-top: 3px solid var(--ShennX_DC)
}

.jq-icon-tdc {
    background-color: var(--ShennX_DC);
    color: #fff;
    border-color: var(--ShennX_DC)
}

.responsive-table-plugin .btn-default.btn-tdc {
    background-color: var(--ShennX_DC) !important;
    border-color: var(--ShennX_DC) !important;
    color: #fff !important;
    -webkit-box-shadow: 0 0 0 2px rgba(var(--ShennX_DCRGB), .5);
    box-shadow: 0 0 0 2px rgba(var(--ShennX_DCRGB), .5)
}

/* ========================================================================================================================== */
/*                                                    Change Default Style                                                    */
/* ========================================================================================================================== */

.logo-lg-text-light {
    color: var(--ShennX_DC85) !important;
}

body[data-layout-mode=horizontal] .navbar-toggle .lines > span {
    background-color: var(--ShennX_DC85) !important;
}

a {
    color: rgba(var(--ShennX_DCRGB), .70);
}

a:hover, a:active, a:-webkit-any-link:hover, a:-webkit-any-link:hover, a:-webkit-any-link:active {
    color: var(--ShennX_DC);
}

/* ========================================================================================================================== */
/*                                                     Create Game Styles                                                     */
/* ========================================================================================================================== */

.shnx-category__group h3 {
    padding: 0 .6em;
    border-left: .2em solid var(--ShennX_DC);
    margin-left: .2em;
    margin-bottom: 1em;
}

.shnx-category__group .row [class*="col-"] {
    margin-bottom: 1em;
}

.shnx-category__card {
    cursor: pointer;
    padding: .5rem;
    transform: scale(.98);
    transition: 0.3s ease-in-out;
}

.shnx-category__card:hover {
    color: rgba(var(--ShennX_DCRGB), 0.8);
    border: 1px solid var(--ShennX_DC);
    transform: scale(1.02);
}

.shnx-category__card img {
    border-radius: .25em;
}

.shnx-category__card span {
    display: table;
    padding: .8em;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    margin-bottom: -2em;
}

.shnx-category__card .shnx-category__card-clip {
    display: none;
}

.shnx-category__card.style2 img, .shnx-category__card.style3 img {
    margin: -.48rem;
}

.shnx-category__card.style2 .shnx-category__card-clip {
    display: block;
    clip-path: url(#wave-clip-path);
    -webkit-clip-path: url(#wave-clip-path);
    background-color: var(--ct-card-bg);
    height: 2.8rem;
    margin: -2.2rem -.4985rem -.8rem -.4985rem;
}

.shnx-category__card.style3 .shnx-category__card-clip {
    display: block;
    clip-path: polygon(0 48%,9% 48%,18% 65%,27% 49%,36% 72%,45% 58%,55% 70%,64% 58%,73% 86%,82% 48%,91% 63%,100% 70%,100% calc(100% + 1px),0 calc(100% + 1px));
    -webkit-clip-path: polygon(0 48%,9% 48%,18% 65%,27% 49%,36% 72%,45% 58%,55% 70%,64% 58%,73% 86%,82% 48%,91% 63%,100% 70%,100% calc(100% + 1px),0 calc(100% + 1px));
    background-color: var(--ct-card-bg);
    height: 2.8rem;
    margin: -2.2rem -.4985rem -.8rem -.4985rem;
}

.shnx-order_rightside .box-number {
    color: var(--ShennX_DC);
    width: 2.5em;
    margin: -1.5rem 0 0 -1.5rem;
    border: .2em solid var(--ShennX_DC);
    height: 2.5em;
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    align-items: center;
    border-radius: .25rem 0 .25rem 0;
    justify-content: center;
}

.shnx-order_rightside .box-title {
    margin: -.75em 0 1.2rem 1.8rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.shnx-order_denom__item {
    display: none;
}

.shnx-order_denom__item + label {
    display: table;
    margin-bottom: 1rem;
}

.shnx-order_denom__item + label span {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 1px solid rgb(var(--ct-gray-300-rgb));
    display: table-cell;
    padding: .65rem;
    transition: 0.3s ease-in;
    text-align: center;
    border-radius: .85rem;
    vertical-align: middle;
}

.shnx-order_denom__item:hover + label span {
    border: 1px solid var(--ShennX_DC);
}

.shnx-order_denom__item:checked + label span {
    color: var(--ShennX_DC);
    border: .12em solid var(--ShennX_DC);
    font-weight: bold;
    background-color: rgba(var(--ShennX_DCRGB), .05);
}

/* ========================================================================================================================== */
/*                                                      Create Index Menu                                                     */
/* ========================================================================================================================== */

._1ekcz {
    margin-top: -1.1rem;
}

._1ekcz ._24EoF {
    cursor: pointer;
    text-align: center;
}

._1ekcz ._24EoF img {
    width: 15vh;
    height: 15vh;
    padding: 1.25rem;
}

._1ekcz ._24EoF span {
    display: block;
    padding: 1.5rem;
    overflow: hidden;
    margin-top: -2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

._1ekcz ._3xM0V {
    font-size: 10vh;
    text-align: center;
    letter-spacing: -.85rem;
}

._1ekcz ._3xM0V span {
    display: block;
    margin-top: -7.25vh;
}

/* ========================================================================================================================== */
/*                                                   Create Transaction Menu                                                  */
/* ========================================================================================================================== */

.shnx-order_product__item {
    display: none;
}

.shnx-order_product__item + label {
    display: table;
    margin-bottom: 1rem;
}

.shnx-order_product__item + label span {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 1px solid rgb(var(--ct-gray-300-rgb));
    display: table-cell;
    padding: .65rem;
    transition: 0.3s ease-in;
    text-align: center;
    border-radius: .85rem;
    vertical-align: middle;
}

.shnx-order_product__item + label span hr {
    border: 1px solid rgb(var(--ct-gray-300-rgb));
    margin: .45em 0 .15em 0;
}

.shnx-order_product__item:hover + label span {
    border: 1px solid var(--ShennX_DC);
}

.shnx-order_product__item:checked + label span {
    color: var(--ShennX_DC);
    border: .12em solid var(--ShennX_DC);
    font-weight: bold;
    background-color: rgba(var(--ShennX_DCRGB), .05);
}

.input-group.input-group-simcard input {
    border-right: none;
} .input-group.input-group-simcard span {
    border-left: none;
    background-color: var(--ct-input-bg);
} .input-group.input-group-simcard span img {
    max-width: 50px;
    height: 20px;
}

/* ========================================================================================================================== */
/*                                                    Create Voucher Style                                                    */
/* ========================================================================================================================== */

.shnx-voucher-cat_minicard {
    cursor: pointer;
    border: var(--ct-border-width) var(--ct-border-style) var(--ct-border-color) !important;
    transition: transform .2s;
    border-radius: 50px 20px 20px 50px;
}

.shnx-voucher-cat_minicard:hover {
    border: var(--ct-border-width) var(--ct-border-style) var(--ShennX_DC) !important;
    transform: scale(1.1); 
    ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.shnx-voucher-cat_bigcard {
    cursor: pointer;
    border: var(--ct-border-width) var(--ct-border-style) var(--ct-border-color) !important;
    transition: transform .2s;
}

.shnx-voucher-cat_bigcard:hover {
    border: var(--ct-border-width) var(--ct-border-style) var(--ShennX_DC) !important;
    transform: scale(1.05); 
    ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
}

/* ========================================================================================================================== */
/*                                                    Create Payment Style                                                    */
/* ========================================================================================================================== */

.shnx-pay_denom {
    display: none;
}

.shnx-pay_denom+label>div {
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.shnx-pay_denom:hover+label>div {
    border-color: rgba(var(--ShennX_DCRGB), 0.1) !important;
    background-color: rgba(var(--ShennX_DCRGB), 0.05) !important;
}

.shnx-pay_denom:checked+label>div {
    border-width: 10px;
    border-color: rgba(var(--ShennX_DCRGB), 0.85) !important;
    background-color: rgba(var(--ShennX_DCRGB), 0.1) !important;
}