/*App*/
textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active {
    outline: 0px !important;
    -webkit-appearance: none;
    box-shadow: none !important;
}

html body {
    background-color: var(--warna_2);
    margin: 0;
    padding: 0;
    direction: ltr;
    background: var(--warna_1);
    font-family: "DM Sans", sans-serif;
}

body {
    background: var(--warna_2);
    font-family: "DM Sans", sans-serif;
    color: var(--warna_5);
}

.bg-primary {
    background: var(--warna_1) !important;
}

.bg-secondary {
    background: var(--warna_2) !important;
}

.bg-custom {
    background: var(--warna_3) !important;
}

.navbar {
    width: 100%;
    height: 106px;
    padding: 0;
    color: #fff;
    position: fixed;
    z-index: 99;
    background: var(--warna_3);
    box-shadow: inset 0 -1px 0px 0px rgba(255, 255, 255, 0.05);
    transition: backdrop-filter 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
}

.navbar.blur-backdrop {
    background-color: var(--warna_3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* For Safari */
}

.logo-brand {
    height: 2.25rem;
    /* Equivalent to h-9 */
    width: auto;
    padding-left: 0.5rem;
    /* Equivalent to pl-2 */
}

.navbar-bottom {
    width: 100%;
    padding: 0;
    color: #fff;
    background: var(--warna_3);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    /* box-shadow: inset -10px -1px 2px 1px rgba(255, 255, 255, 0.05); */
    transition: backdrop-filter 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
}

.navbar-bottom .container {
    display: flex;
    height: 38px;
}

@media (min-width: 1024px) {

    /* Tailwind's 'lg' breakpoint */
    .logo-brand {
        height: 2.5rem;
        /* Equivalent to lg:h-10 */
    }
}

/*.navbar-background {*/
/*    background: var(--warna_1);*/
/*}*/

/*.navbar-background.blur-backdrop {*/
/*    backdrop-filter: blur(10px);*/
/*}*/

.navbar-toggler {
    font-size: 32px;
}

.offcanvas.offcanvas-end {
    background: var(--warna_2);
}

.navbar-nav .nav-link {
    color: #fff;
    text-transform: uppercase;
}

.btn-login {
    color: #fff;
    background: var(--warna_1) !important;
}

.content-body {
    color: var(--warna_5);
    padding: 0;

}

.btn-primary {
    background: var(--warna_1);
    border-color: var(--warna_1);
    color: var(--warna_5);
    border-radius: 2rem;
}
.btn-primary:hover{
    background-color: var(--warna_2);
    border-color: var(--warna_2);
}

.text-primary {
    color: var(--warna_1) !important;
}

a.text-primary:hover{
    color: var(--warna_2) !important;
}

.text-danger {
    color: red !important;
}

@media (max-width: 576px) {
    .content-body {
        padding: 100px 0px 60px;
    }
    .overlay-swiper .right,
    .overlay-swiper .left {
        width: 4rem;
    }
    .banner-section {
        padding-top: 11rem;
        padding-bottom: 1.5rem;
    }
}

@media (min-width: 578px) and (max-width: 900px) {
    .content-body {
        padding-top: 12rem;
    }
}

@media (min-width: 901px) {
    .content-body {
        padding-top: 12rem;
        padding-bottom: 4rem;
        /* padding: 100px; */
        /* padding-top: 1.5rem; */
    }
}

.img-search {
    padding-left: 15px;
}

.owl-carousel .owl-item img {
    border-radius: 10px;
}

.owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
}

.owl-dots button span {
    background: var(--warna_3);
    color: #fff;
    margin: 0 2px;
    border-radius: 4px;
    width: 30px;
    height: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.owl-dots button.active span {
    background: var(--warna_2);
}

.product .box {
    margin-bottom: 40px;
}

@media (min-width: 576px) {
    .product .box {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border-radius: 0.75rem;
        text-align: center;
        background: #646464;
        display: block;
        text-decoration: none;
        color: #fff;
        height: 20rem;
        width: 15px;
    }
}

.card-product {
    margin-bottom: -30px;
    gap: 0.5rem;
}

@media (max-width: 576px) {
    .product p {
        font-size: 12px !important;
    }
}

.product .box img {
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
    object-fit: cover;
    border-radius: 0.75rem;
}

.kbrstore-pgimg {
    background-color: white;
    border-radius: 3px;
    border: 1px solid white;
    height: auto;
    width: 46px;
}

.footer {
    background: var(--warna_3);
}

.footer .logo {
    max-height: 80px;
}

.footer h4{
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--warna_1);
}

.footer a{
    color: var(--warna_5);
}

.footer a:hover{
    color: var(--warna_1);
}

.footer ul li{
    padding-bottom: .5rem;
}
/* .footer img {
    padding-top: 2.5rem;
} */

.text-copyright {
    color: var(--warna_5);
    font-size: 1rem;
}

.sosmed {
    margin-bottom: 20px;
}

.sosmed a {
    margin: 0 10px;
    text-decoration: none;
    color: #fff;
}

.sosmed i {
    font-size: 24px;
}

.item .metode {
    margin: 5px 0;
    background: #fff;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.my-form label {
    font-size: .825rem;
    margin: .4rem 0;
}

.my-form .form-control {
    background: #fefefe;
    border-radius: 2rem;
    /* margin-top: 6px; */
    border: 2px solid #fefefe !important;
}

.my-form .form-control:active,
.my-form .form-control:focus {
    border-color: #fefefe !important;
    box-shadow: none !important;
    outline: none !important;
}

.search-item {
    width: 40%;
}

@media (max-width: 768px) {
    .navbar-brand {
        width: 200px;
    }

    .navbar {
        height: 130px;
    }
    .navbar-bottom {
        display: none;
    }
}

@media (min-width: 768px) {
    .navbar-brand {
        width: 200px;
    }

    .search-item {
        width: 40%;
        margin-left: 0px;
    }

    .banner-section {
        padding-top: 8rem;
        padding-bottom: 1.5rem;
    }
}

@media (min-width: 993px) {
    .search-item {
        width: 40%;
        margin-left: 5px;
    }
}

@media (min-width: 1024px) {
    .search-item {
        width: 40%;
        margin-left: 0px;
    }
}

@media (min-width: 1106px) {
    .search-item {
        width: 40%;
        margin-left: 0;
    }

    .navbar-brand {
        width: 130px;
    }
}

@media (min-width: 1266px) {
    .search-item {
        width: 40%;
        margin-left: 0;
    }
}

@media (min-width: 1336px) {
    .search-item {
        width: 40%;
        margin-left: 0;
    }
}

@media (min-width: 1440px) {
    .search-item {
        width: 40%;
        margin-left: 0;
    }
}

.footer-right {
    text-align: right;
}

@media (max-width: 480px) {

    .footer-left,
    .footer-right {
        text-align: center;
    }
}

.swal2-popup {
    display: none;
    background: var(--warna_4) !important;
    color: var(--warna_5) !important;
    position: relative;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 100%);
    width: 30em;
    max-width: 100%;
    padding: 1.25em 0;
    border: none;
    border-radius: 1rem;
    font-family: inherit;
    font-size: 1rem;
}

.swal2-html-container {
    z-index: 1;
    justify-content: center;
    text-align: left;
    margin: 1em 1.6em 0.3em;
    padding: 0;
    overflow: auto;
    color: inherit;
    font-size: 1em;
    font-weight: normal;
    line-height: normal;
    /* text-align: left !important; */
    word-wrap: break-word;
    word-break: break-word;
}

.flex-1 {
    flex: 1 1 0%;
}

.clip-overlay {
    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: #7367F0;
    width: 100%;
    height: 25px;
    margin-top: -21px !important;
}

.clip-fo {
    margin-top: 10px !important;
    background-color: var(--warna_3) !important;
    display: flex;
    padding: 0;
    margin-top: -35px;
    width: 100%;
    height: 40px;
    clip-path: polygon(0 23%, 6% 72%, 12% 47%, 18% 70%, 24% 51%, 32% 80%, 38% 47%, 44% 80%, 50% 49%, 56% 70%, 60% 86%, 66% 42%, 72% 65%, 78% 38%, 84% 64%, 90% 17%, 96% 20%, 100% 1%, 100% calc(100% + 1px), 0 calc(100% + 1px));
    -webkit-clip-path: polygon(0 23%, 6% 72%, 12% 47%, 18% 70%, 24% 51%, 32% 80%, 38% 47%, 44% 80%, 50% 49%, 56% 70%, 60% 86%, 66% 42%, 72% 65%, 78% 38%, 84% 64%, 90% 17%, 96% 20%, 100% 1%, 100% calc(100% + 1px), 0 calc(100% + 1px));
}

.clip-path {
    display: flex;
    padding: 0;
    margin-top: -32px;
    width: 100%;
    height: 35px;
    background-color: #ebe9f1;
    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));;
}

.foo-img {
    width: 65px;
    height: 65px;
    background: #fff;
    text-align: center;
    border-radius: 50%;
    line-height: 65px;
    float: left;
    margin-right: 15px;
}

.fo-end a {
    margin: 0 3px;
}

@media only screen and (max-width: 600px) {
    .fo-end {
        text-align: center;
    }

    .fo-end span {
        margin-bottom: 8px;
        display: block;
    }

    .fo-end div {
        margin-top: 5px;
        display: block !important;
        float: none !important;
    }

    .fo-end div img {
        max-width: 150px !important;
    }

    .fo-xs2 {
        padding-bottom: 20px;
        border-bottom: 1px dotted #7367F0;
    }
}

.pb-3,
.py-3 {
    padding-bottom: 1rem !important;
}

.pt-3,
.py-3 {
    padding-top: 1rem !important;
}

.border-top {
    border-top: 1px solid #dee2e6 !important;
}

.justify-content-center {
    justify-content: center !important;
}

.d-flex {
    display: flex !important;
}

.footer-payment-logo {
    border-radius: 4px;
    /*padding: 7px 10px;*/
    min-width: 55px;
    text-align: center;
    margin: 5px 0;
}

.footer-payment-logo > img {
    height: 100%;
    max-height: 40px !important;
    width: auto;
}

.d-flex {
    display: flex !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-center {
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

/*.bg-theme {*/
/*    background: var(--warna_2);*/
/*}*/

.bg-gradient-theme {
    /* background: var(--warna_4); */
    /* background: linear-gradient(90deg,var(--warna_4) 0%, var(--warna_3) 50%, var(--warna_4) 100%); */
    background: linear-gradient(-55deg, var(--warna_4) 0%, var(--warna_3) 100%);
}

.navbar-item {
    display: flex;
    align-items: center;
    height: 68px;
}

.logo-brand {
    margin-right: 0.5rem;
    /* This is equivalent to 2 in the Tailwind CSS scale */
    display: flex;
    align-items: center;
}

.hidden-class {
    display: none;
}

@media (min-width: 1024px) {
    .hidden-class {
        display: block;
        margin: 0 0rem;
        /* Equivalent to ml-4 */
        align-self: stretch;
        /* Equivalent to self-stretch */
    }
}

.item-nav {
    display: flex;
    height: 100%;
    /* Full height */
    gap: 2rem;
    /* Equivalent to space-x-6 in Tailwind CSS */
    margin: 2px;
}

.link-nav {
    position: relative;
    text-decoration: none;
    z-index: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Equivalent to space-x-2 in Tailwind CSS */
    border-bottom: 1px solid transparent;
    /* Initially transparent */
    padding-top: 1px;
    /* Equivalent to pt-px */
    font-size: 1rem;
    /* Equivalent to text-sm */
    font-weight: 300;
    /* Equivalent to font-medium */
    transition: border-color 0.3s ease-in-out;
    /* Smooth transition for border color */
    outline: none;
    color: var(--warna_5);
}

.link-nav.active {
    border-color: var(--warna_1);
    color: var(--warna_1);
}
.link-nav.active:hover {
    stroke: var(--warna_1) !important;
}
.link-nav.active svg #SVGRepo_iconCarrier path {
    stroke: var(--warna_5) !important;
    fill: var(--warna_5) !important;
    /* Change stroke color when .link-nav is active */
}

.link-nav.active svg {
    stroke: var(--warna_1) !important;
}

.link-nav.active #Icon-Set path {
    fill: var(--warna_5) !important;
    /* Change stroke color when .link-nav is active */
    stroke: var(--warna_5) !important;
    /* Change stroke color when .link-nav is active */
}

.link-nav:hover {
    border-color: var(--warna_5);
    /* Change border color on hover and when active */
}

.container {
    justify-content: start !important;
}

.flex-container {
    display: flex;
    margin-left: auto;
    height: 100%;
    align-items: center;
    gap: 0.5rem;
    /* Equivalent to gap-x-2 */
}

@media (min-width: 1024px) {

    /* Tailwind's 'lg' breakpoint */
    .flex-container {
        gap: 1.5rem;
        /* Equivalent to lg:gap-x-6 */
    }
    .menu-ser {
        min-width: 600px;
        position: relative;
    }
}
@media (min-width: 1367px) {

    .menu-ser {
        min-width: 900px;
        position: relative;
    }
}

@media (min-width: 678px) and (max-width: 1024px) {

    .menu-ser {
        min-width: 480px;
    }
}
.menu-ser {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.5rem;
    /* Equivalent to gap-x-2 */
}

.btn-serchh {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* 2px gap */
    border-radius: 0.5rem;
    /* 8px rounded corners */
    border: 1px solid var(--warna_4);
    /* Border color with 50% opacity */
    background-color: transparent;
    padding: 0.5rem 0.5rem;
    /* 8px vertical and horizontal padding */
    font-size: 1rem;
    /* 14px font size */
    font-weight: 300;
    /* Semi-bold font */
    color: var(--warna_5);
    /* Foreground color */
    transition: background-color 0.3s ease-in-out;
    /* Smooth background color transition */
}

.btn-serchh:hover {
    background-color: var(--warna_4);
    /* Muted background color with 50% opacity on hover */
}

@media (min-width: 640px) {
    .btn-serchh {
        padding-left: 0.75rem;
        /* 12px left padding on small screens and up */
        padding-right: 1rem;
        /* 16px right padding on small screens and up */
    }
}

@media (min-width: 1024px) {
    .btn-auth {
        display: flex;
        /* Display flex on large screens */
        flex: 1;
        /* Flex grow to take available space */
        align-items: center;
        /* Center items vertically */
        justify-content: flex-end;
        /* Align items to the end of the container */
        gap: 0.5rem;
        /* Equivalent to space-x-2 */
    }
}

.profile-dropdown {
    display: none;
}

@media (min-width: 1024px) {
    .profile-dropdown {
        display: flex;
    }
}

.btn-login {
    background-color: var(--warna_1);
    display: inline-flex;
    border-radius: 2rem;
    align-items: center;
    justify-content: center;
    /* 8px rounded corners */
    /* border: 1px solid var(--warna_1); */
    /* Border color with 50% opacity */
    padding: 0.6rem 1.2rem;
    /* 8px vertical padding and 16px horizontal padding */
    font-size: 1rem;
    /* 14px font size */
    font-weight: 300;
    /* Medium font */
    color: var(--warna_5);
    /* Foreground color */
    text-decoration: none;
    transition: background-color 0.3s ease-in-out;
    /* Smooth background color transition */
}

.btn-login:hover {
    background-color: var(--warna_2);
    opacity: 0.9;
    color: var(--warna_5);
    /* Muted background color with 75% opacity on hover */
}

.btn-register {
    padding: 0.6rem 2rem;
    border-radius: 2rem;
    color: var(--warna_5) !important;
    background: var(--warna_3) !important;
    border: 1px solid var(--warna_2) !important;
}
.btn-register:hover {
    background: var(--warna_2) !important;
}

.btn-navi {
    border-radius: 0.375rem;
    /* Equivalent to rounded-md */
    background-color: var(--warna_1);
    /* Equivalent to bg-secondary */
    padding: 0.3rem;
    /* Equivalent to p-2 */
    border: none;
    margin-right: 0.4rem;
    color: var(--warna_2);
    /* Equivalent to text-foreground */
}

@media (min-width: 1024px) {

    /* Equivalent to lg:hidden */
    .btn-navi {
        display: none;
    }
}

.sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    left: -250px;
    background-color: #000000;
    overflow-x: hidden;
    transition: 0.5s;
    z-index: 1000;
}

.sidebar a {
    text-decoration: none;
    font-size: 1rem;
    color: var(--warna_5);
    display: block;
    transition: 0.3s;
}

.button-side {
    display: flex;
    /* Equivalent to flex */
    align-items: center;
    /* Equivalent to items-center */
    justify-content: space-between;
    /* Equivalent to justify-between */
    border-radius: 0.375rem;
    /* Equivalent to rounded-md */
    padding: 0.5rem 1rem;
    font-weight: 500;
    /* Equivalent to font-medium */
    color: var(--warna_1);
    /* Equivalent to text-foreground */
}

.button-side:hover {
    background-color: var(--warna_3);
    /* Equivalent to hover:bg-muted */
}

.sidebar .closebtn {
    position: absolute;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    cursor: pointer;
    color: var(--warna_2);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
    z-index: 1000;
}

.overlay.visible {
    visibility: visible;
    opacity: 1;
}

.no-scroll {
    overflow: hidden;
}

.sidebar-section {
    margin-bottom: 1rem;
    margin-top: 3rem;
}

.sidebar-section-title {
    color: #f1f1f1;
    padding: 10px 15px;
    font-weight: bold;
}

.sidebar-header {
    display: flex;
    /* Equivalent to flex */
    justify-content: space-between;
    /* Equivalent to justify-between */
    justify-items: center;
    border-bottom: 1px dashed;
    /* Equivalent to border-b border-dashed */
    padding: 1rem;
    /* Equivalent to p-4 */
}

.sidebar-section {
    margin-top: 0.5rem;
    /* Equivalent to space-y-2 */
    margin-bottom: 0.5rem;
    /* Equivalent to space-y-2 */
    border: none;
    padding: 1rem;
    /* Equivalent to p-4 */
}

.sidebar-wrapper {
    position: relative;
    /* Equivalent to relative */
    display: flex;
    /* Equivalent to flex */
    width: 100%;
    /* Equivalent to w-full */
    max-width: 20rem;
    /* Equivalent to max-w-xs */
    flex-direction: column;
    /* Equivalent to flex-col */
    overflow-y: auto;
    /* Equivalent to overflow-y-auto */
    background-color: #000000;
    /* Equivalent to bg-background */
    padding-bottom: 3rem;
    /* Equivalent to pb-12 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* Equivalent to shadow-xl */
    transform: translateX(0);
    /* Equivalent to translate-x-0 */
}

.logos {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: -85px;
    margin-top: var(--bs-dropdown-spacer);
}

@media (min-width: 768px) {
    .dropdown-menu[data-bs-popper] {
        left: -35px;
    }
}

.description-text-footer {
    color: var(--warna_5);
    word-wrap: break-word; /* Memastikan teks panjang akan pindah ke baris berikutnya */
    overflow-wrap: break-word; /* Properti CSS modern yang setara dengan word-wrap */
    margin: 0; /* Menghilangkan margin default pada paragraf */
}

/*App end*/

/*index*/
.market-btn {
    display: inline-block;
    padding: 0.3125rem 0.875rem;
    padding-left: 2.8125rem;
    -webkit-transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    border: 1px solid #e7e7e7;
    background-position: center left 0.75rem;
    background-color: #fff;
    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    text-decoration: none;
}

.market-btn .market-button-title {
    display: block;
    color: #222;
    font-size: 1.125rem;
}

.market-btn .market-button-subtitle {
    display: block;
    margin-bottom: -0.25rem;
    color: #888;
    font-size: 0.75rem;
}

.market-btn:hover {
    background-color: #f7f7f7;
    text-decoration: none;
}

.apple-btn {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDUgMzA1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDUgMzA1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCI+CjxnIGlkPSJYTUxJRF8yMjhfIj4KCTxwYXRoIGlkPSJYTUxJRF8yMjlfIiBkPSJNNDAuNzM4LDExMi4xMTljLTI1Ljc4NSw0NC43NDUtOS4zOTMsMTEyLjY0OCwxOS4xMjEsMTUzLjgyQzc0LjA5MiwyODYuNTIzLDg4LjUwMiwzMDUsMTA4LjIzOSwzMDUgICBjMC4zNzIsMCwwLjc0NS0wLjAwNywxLjEyNy0wLjAyMmM5LjI3My0wLjM3LDE1Ljk3NC0zLjIyNSwyMi40NTMtNS45ODRjNy4yNzQtMy4xLDE0Ljc5Ny02LjMwNSwyNi41OTctNi4zMDUgICBjMTEuMjI2LDAsMTguMzksMy4xMDEsMjUuMzE4LDYuMDk5YzYuODI4LDIuOTU0LDEzLjg2MSw2LjAxLDI0LjI1Myw1LjgxNWMyMi4yMzItMC40MTQsMzUuODgyLTIwLjM1Miw0Ny45MjUtMzcuOTQxICAgYzEyLjU2Ny0xOC4zNjUsMTguODcxLTM2LjE5NiwyMC45OTgtNDMuMDFsMC4wODYtMC4yNzFjMC40MDUtMS4yMTEtMC4xNjctMi41MzMtMS4zMjgtMy4wNjZjLTAuMDMyLTAuMDE1LTAuMTUtMC4wNjQtMC4xODMtMC4wNzggICBjLTMuOTE1LTEuNjAxLTM4LjI1Ny0xNi44MzYtMzguNjE4LTU4LjM2Yy0wLjMzNS0zMy43MzYsMjUuNzYzLTUxLjYwMSwzMC45OTctNTQuODM5bDAuMjQ0LTAuMTUyICAgYzAuNTY3LTAuMzY1LDAuOTYyLTAuOTQ0LDEuMDk2LTEuNjA2YzAuMTM0LTAuNjYxLTAuMDA2LTEuMzQ5LTAuMzg2LTEuOTA1Yy0xOC4wMTQtMjYuMzYyLTQ1LjYyNC0zMC4zMzUtNTYuNzQtMzAuODEzICAgYy0xLjYxMy0wLjE2MS0zLjI3OC0wLjI0Mi00Ljk1LTAuMjQyYy0xMy4wNTYsMC0yNS41NjMsNC45MzEtMzUuNjExLDguODkzYy02LjkzNiwyLjczNS0xMi45MjcsNS4wOTctMTcuMDU5LDUuMDk3ICAgYy00LjY0MywwLTEwLjY2OC0yLjM5MS0xNy42NDUtNS4xNTljLTkuMzMtMy43MDMtMTkuOTA1LTcuODk5LTMxLjEtNy44OTljLTAuMjY3LDAtMC41MywwLjAwMy0wLjc4OSwwLjAwOCAgIEM3OC44OTQsNzMuNjQzLDU0LjI5OCw4OC41MzUsNDAuNzM4LDExMi4xMTl6IiBmaWxsPSIjMmUyZTJlIi8+Cgk8cGF0aCBpZD0iWE1MSURfMjMwXyIgZD0iTTIxMi4xMDEsMC4wMDJjLTE1Ljc2MywwLjY0Mi0zNC42NzIsMTAuMzQ1LTQ1Ljk3NCwyMy41ODNjLTkuNjA1LDExLjEyNy0xOC45ODgsMjkuNjc5LTE2LjUxNiw0OC4zNzkgICBjMC4xNTUsMS4xNywxLjEwNywyLjA3MywyLjI4NCwyLjE2NGMxLjA2NCwwLjA4MywyLjE1LDAuMTI1LDMuMjMyLDAuMTI2YzE1LjQxMywwLDMyLjA0LTguNTI3LDQzLjM5NS0yMi4yNTcgICBjMTEuOTUxLTE0LjQ5OCwxNy45OTQtMzMuMTA0LDE2LjE2Ni00OS43N0MyMTQuNTQ0LDAuOTIxLDIxMy4zOTUtMC4wNDksMjEyLjEwMSwwLjAwMnoiIGZpbGw9IiMyZTJlMmUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}

.google-btn {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPHBvbHlnb24gc3R5bGU9ImZpbGw6IzVDREFERDsiIHBvaW50cz0iMjkuNTMsMCAyOS41MywyNTEuNTA5IDI5LjUzLDUxMiAyOTkuMDA0LDI1MS41MDkgIi8+Cjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNCREVDQzQ7IiBwb2ludHM9IjM2OS4wNjcsMTgwLjU0NyAyNjIuMTc1LDExOS40NjcgMjkuNTMsMCAyOTkuMDA0LDI1MS41MDkgIi8+Cjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNEQzY4QTE7IiBwb2ludHM9IjI5LjUzLDUxMiAyOS41Myw1MTIgMjYyLjE3NSwzODMuNTUxIDM2OS4wNjcsMzIyLjQ3IDI5OS4wMDQsMjUxLjUwOSAiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0ZGQ0E5NjsiIGQ9Ik0zNjkuMDY3LDE4MC41NDdsLTcwLjA2Myw3MC45NjFsNzAuMDYzLDcwLjk2MWwxMDguNjg4LTYyLjg3N2M2LjI4OC0zLjU5Myw2LjI4OC0xMS42NzcsMC0xNS4yNyAgTDM2OS4wNjcsMTgwLjU0N3oiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

.windows-btn {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDQ4MCA0ODAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4MCA0ODA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMC4xNzYsMjI0TDAuMDAxLDY3Ljk2M2wxOTItMjYuMDcyVjIyNEgwLjE3NnogTTIyNC4wMDEsMzcuMjQxTDQ3OS45MzcsMHYyMjRIMjI0LjAwMVYzNy4yNDF6IE00NzkuOTk5LDI1NmwtMC4wNjIsMjI0ICAgbC0yNTUuOTM2LTM2LjAwOFYyNTZINDc5Ljk5OXogTTE5Mi4wMDEsNDM5LjkxOEwwLjE1Nyw0MTMuNjIxTDAuMTQ3LDI1NmgxOTEuODU0VjQzOS45MTh6IiBmaWxsPSIjMDBiY2YyIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

.amazon-btn {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0idXVpZDo1RDIwODkyNDkzQkZEQjExOTE0QTg1OTBEMzE1MDhDOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGQUJGNjhGNDRGNkMxMUU3OUY5REJEQzBGNkVBQUI5QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGQUJGNjhGMzRGNkMxMUU3OUY5REJEQzBGNkVBQUI5QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2QUM1ODJFMkIxNEExMUUzQkY1NEUzQkNCRjlEODA1RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2QUM1ODJFM0IxNEExMUUzQkY1NEUzQkNCRjlEODA1RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4g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);
}

.market-btn-light {
    border-color: rgba(255, 255, 255, 0.14);
    background-color: rgba(0, 0, 0, 0);
}

.market-btn-light .market-button-title {
    color: #fff;
}

.market-btn-light .market-button-subtitle {
    color: rgba(255, 255, 255, 0.6);
}

.market-btn-light:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.market-btn-light.apple-btn {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDUgMzA1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDUgMzA1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCI+CjxnIGlkPSJYTUxJRF8yMjhfIj4KCTxwYXRoIGlkPSJYTUxJRF8yMjlfIiBkPSJNNDAuNzM4LDExMi4xMTljLTI1Ljc4NSw0NC43NDUtOS4zOTMsMTEyLjY0OCwxOS4xMjEsMTUzLjgyQzc0LjA5MiwyODYuNTIzLDg4LjUwMiwzMDUsMTA4LjIzOSwzMDUgICBjMC4zNzIsMCwwLjc0NS0wLjAwNywxLjEyNy0wLjAyMmM5LjI3My0wLjM3LDE1Ljk3NC0zLjIyNSwyMi40NTMtNS45ODRjNy4yNzQtMy4xLDE0Ljc5Ny02LjMwNSwyNi41OTctNi4zMDUgICBjMTEuMjI2LDAsMTguMzksMy4xMDEsMjUuMzE4LDYuMDk5YzYuODI4LDIuOTU0LDEzLjg2MSw2LjAxLDI0LjI1Myw1LjgxNWMyMi4yMzItMC40MTQsMzUuODgyLTIwLjM1Miw0Ny45MjUtMzcuOTQxICAgYzEyLjU2Ny0xOC4zNjUsMTguODcxLTM2LjE5NiwyMC45OTgtNDMuMDFsMC4wODYtMC4yNzFjMC40MDUtMS4yMTEtMC4xNjctMi41MzMtMS4zMjgtMy4wNjZjLTAuMDMyLTAuMDE1LTAuMTUtMC4wNjQtMC4xODMtMC4wNzggICBjLTMuOTE1LTEuNjAxLTM4LjI1Ny0xNi44MzYtMzguNjE4LTU4LjM2Yy0wLjMzNS0zMy43MzYsMjUuNzYzLTUxLjYwMSwzMC45OTctNTQuODM5bDAuMjQ0LTAuMTUyICAgYzAuNTY3LTAuMzY1LDAuOTYyLTAuOTQ0LDEuMDk2LTEuNjA2YzAuMTM0LTAuNjYxLTAuMDA2LTEuMzQ5LTAuMzg2LTEuOTA1Yy0xOC4wMTQtMjYuMzYyLTQ1LjYyNC0zMC4zMzUtNTYuNzQtMzAuODEzICAgYy0xLjYxMy0wLjE2MS0zLjI3OC0wLjI0Mi00Ljk1LTAuMjQyYy0xMy4wNTYsMC0yNS41NjMsNC45MzEtMzUuNjExLDguODkzYy02LjkzNiwyLjczNS0xMi45MjcsNS4wOTctMTcuMDU5LDUuMDk3ICAgYy00LjY0MywwLTEwLjY2OC0yLjM5MS0xNy42NDUtNS4xNTljLTkuMzMtMy43MDMtMTkuOTA1LTcuODk5LTMxLjEtNy44OTljLTAuMjY3LDAtMC41MywwLjAwMy0wLjc4OSwwLjAwOCAgIEM3OC44OTQsNzMuNjQzLDU0LjI5OCw4OC41MzUsNDAuNzM4LDExMi4xMTl6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBpZD0iWE1MSURfMjMwXyIgZD0iTTIxMi4xMDEsMC4wMDJjLTE1Ljc2MywwLjY0Mi0zNC42NzIsMTAuMzQ1LTQ1Ljk3NCwyMy41ODNjLTkuNjA1LDExLjEyNy0xOC45ODgsMjkuNjc5LTE2LjUxNiw0OC4zNzkgICBjMC4xNTUsMS4xNywxLjEwNywyLjA3MywyLjI4NCwyLjE2NGMxLjA2NCwwLjA4MywyLjE1LDAuMTI1LDMuMjMyLDAuMTI2YzE1LjQxMywwLDMyLjA0LTguNTI3LDQzLjM5NS0yMi4yNTcgICBjMTEuOTUxLTE0LjQ5OCwxNy45OTQtMzMuMTA0LDE2LjE2Ni00OS43N0MyMTQuNTQ0LDAuOTIxLDIxMy4zOTUtMC4wNDksMjEyLjEwMSwwLjAwMnoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}

.market-btn-light.amazon-btn {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0idXVpZDo1RDIwODkyNDkzQkZEQjExOTE0QTg1OTBEMzE1MDhDOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1QjFCQzQ2QjRGNkQxMUU3OUY5REJEQzBGNkVBQUI5QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1QjFCQzQ2QTRGNkQxMUU3OUY5REJEQzBGNkVBQUI5QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2QUM1ODJFMkIxNEExMUUzQkY1NEUzQkNCRjlEODA1RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2QUM1ODJFM0IxNEExMUUzQkY1NEUzQkNCRjlEODA1RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4g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);
}

/*.card {*/
/*    border: 100vh solid #000 !important;*/
/*    background-color: transparent !important;*/
/*}*/

.bottom-6 {
    bottom: 3rem !important;
}

.absolute {
    position: absolute !important;
}

.category ul li img, .search button {
    margin-right: 4px;
}

.category ul li img .row-games img {
    margin-top: -5px;
    filter: grayscale(100%);
}

.category ul, .list-style-none {
    list-style: none;
}

.category ul {
    padding: 0;
    margin: 0;
}

.category ul li {
    float: left;
    padding-right: 24px;
    margin-bottom: 12px;
}

.category ul li div {
    color: #fff;
    cursor: pointer;
}

.category ul li div:hover, .category ul li div:hover img, .category ul li.active div, .category ul li.active div img {
    color: #FEC832;
    filter: grayscale(0);
}

.text-kbrstore {
    color: var(--warna_2);
}

.clip-overlay {
    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: #7367F0;
    width: 100%;
    height: 25px;
    margin-top: -21px !important;
}

.clip-path {
    display: flex;
    padding: 0;
    margin-top: -32px;
    width: 100%;
    height: 35px;
    background-color: #ebe9f1;
    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));;
}

.clip-game {
    margin-top: -50px !important;
    background-color: var(--warna_1) !important;
    display: flex;
    padding: 0;
    margin-top: -39px;
    width: 100%;
    height: 40px;
    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));
}

.foo-img {
    width: 65px;
    height: 65px;
    background: #fff;
    text-align: center;
    border-radius: 50%;
    line-height: 65px;
    float: left;
    margin-right: 15px;
}

.fo-end a {
    margin: 0 3px;
}

@media only screen and (max-width: 600px) {
    .fo-end {
        text-align: center;
    }

    .fo-end span {
        margin-bottom: 8px;
        display: block;
    }

    .fo-end div {
        margin-top: 5px;
        display: block !important;
        float: none !important;
    }

    .fo-end div img {
        max-width: 150px !important;
    }

    .fo-xs2 {
        padding-bottom: 20px;
        border-bottom: 1px dotted #7367F0;
    }
}

.mobile {
    backdrop-filter: blur(1px);
    border-radius: 10px 10px 10px 10px;
    height: 60px;
    font-weigth: bold;
    padding: 20px;
    --tw-gradient-from: #1f2937;
    --tw-gradient-to: rgba(31, 41, 55, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}


.bg-primary {
    background-color: var(--warna_2) !important;
}

.nav-pills {
    background: #0a6aa1;
    border-radius: .25rem;
    padding: 6px 2px;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--warna_2);
    color: #fff;
}

@media (max-width: 576px) {
    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        background-color: black;
    }
}

.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: #283046;
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.modal {
    background: rgba(0, 0, 0, 0.5);
}

.modal-header {
    padding: 1rem 1rem 0;
}
.modal-enternity {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
    background-color: var(--bs-modal-footer-bg);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}

.btn-group-sm > .btn, .btn-sm {
    --bs-btn-padding-y: 0.35rem;
    --bs-btn-padding-x: 1.50rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: 0.25rem;
}

.btn-closex {
    --bs-btn-close-color: #dc3545;
    --bs-btn-close-bg: url(
    "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #ffffff;
    background: white var(--bs-btn-close-bg) center/1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: var(--bs-btn-close-opacity);
}

.modal-header .btn-closex {
    padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
    margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto;
}
.btn-close {
    color: var(--warna_5);
    filter: brightness(0) invert(1);
}
.c-padding {
    padding-left: 20px;
}

.ca-title {
    margin-left: 50px;
    font-weight: bold;
}

.h4,
h4 {
    font-size: 1.286rem;
}

.ca-title:before {
    content: ' ';
    background: #0d6efd;
    width: 34px;
    height: 9px;
    display: block;
    position: absolute;
    border-radius: 40px;
    margin-top: 5px;
    margin-left: -45px;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .nav-link {
        transition: none
    }
}

.nav-link:hover, .nav-link:focus {
    /* color: #0a58ca */
}

.nav-link.disabled {
    color: #6c757d;
    pointer-events: none;
    cursor: default
}

.nav-pills .nav-link {
    background: 0 0;
    border: 0;
    border-radius: .25rem
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #0d6efd
}

.nav-fill > .nav-link, .nav-fill .nav-item {
    flex: 1 1 auto;
    text-align: center
}

.nav-justified > .nav-link, .nav-justified .nav-item {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center
}

.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link {
    width: 100%
}

.horitab-scroll {
    display: flex;
    flex-wrap: nowrap;
    /* padding-bottom: 1.5rem; */
    padding-left: 0;
    margin-block: 0;
    /* overflow-x: auto; */
    list-style: none;
    text-align: center;
    white-space: nowrap;
    overflow: auto;
}

.me-1 {
    margin-right: .25rem !important
}

.btn-category {
    color: var(--warna_2) !important;
    background-color: var(--warna_1) !important;
}

.btn-category:hover {
    color: var(--warna_2) !important;
    background-color: var(--warna_5) !important;
    border-color: var(--warna_2);
}

.btn-category.active {
    color: var(--warna_2) !important;
    background-color: var(--warna_5) !important;
}

.horitab-scroll {
    display: flex;
    flex-wrap: nowrap;
    /* padding-bottom: 1.5rem; */
    padding-left: 0;
    margin-block: 0;
    /* overflow-x: auto; */
    list-style: none;
    text-align: center;
    white-space: nowrap;
    overflow: auto;
}

.btn-lg, .btn-group-lg > .btn {
    padding: .5rem 1rem;
    font-size: 1.125rem;
    border-radius: .3rem
}

.animate-shimmer {
    animation: shimmer 1.75s linear infinite
}

@keyframes flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, to {
        opacity: .99;
        filter: drop-shadow(0 0 1px rgba(252, 211, 77)) drop-shadow(0 0 15px rgba(245, 158, 11)) drop-shadow(0 0 1px rgba(252, 211, 77))
    }

    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: .4;
        filter: none
    }
}

.animate-flicker {
    animation: flicker 3s linear infinite
}


@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

.animate-spin {
    animation: spin 1s linear infinite
}

.btn-category {
    background-color: #cccccc; /* Gray color for inactive state */
    border-color: #cccccc;
    color: white;
}

/*.btn-category.active {*/
/*    background-color: #ff8800; !* Orange color for active state *!*/
/*    */
/*    color: white;*/
/*}*/

.btn-group {
    flex-wrap: wrap;
}

.btn-category {
    margin-bottom: 0.5rem; /* Adjust margin for better spacing on small screens */
}

.swiper {
    width: 100%;
    height: 400px; /* Adjust height as needed */
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    object-fit: cover;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    max-width: 100%;
    height: auto;
    overflow: hidden;
    display: block;
    object-fit: cover;
}


@media (min-height: 1080px) {
    .swiper-slide img {
        max-height: 100%;
        object-fit: cover;
    }
}

.swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}

.swiper-pagination-bullet-active {
    background-color: white;
}

.swiper-button-prev,
.swiper-button-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    color: white !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 16px !important; /* Adjust icon size */
}

.modal-content {
    background: var(--warna_4);
}

.banner-section {
    max-width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--warna_4);
}

@media (min-width: 1024px) {
    .banner-section {
        padding-bottom: 2rem;
        padding-top: 12rem;
    }
}

.img-fluid {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}


.custom-btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    box-shadow: rgb(204, 219, 232, .2) 1px -1px 1px 0px inset, rgba(55, 55, 25, 0.1) -1px 1px 1px -1px inset;
    justify-content: start;
    gap: 10px;
    margin: 0 0 2rem 0;
    padding: 6px;
    border-radius: 16px;
    background: var(--warna_4);
    --tw-shadow: 0px 1px 0px 0px #262a31;
    --tw-shadow-colored: 0px 1px 0px 0px var(--tw-shadow-color);
    box-shadow: var(0 0 #0000, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), #0000;
}

.custom-btn-group .custom-btn {
    padding: 0.5rem 1rem;
    font-size: .8rem;
    letter-spacing: .1rem;
    border-radius: 10px;
    text-transform: uppercase;
    border: none;
    background-color: transparent;
    color: var(--warna_5);
    cursor: pointer;

    transition:ease 0.4s all;}

.custom-btn-group .custom-btn.active {
    background-color: var(--warna_2);
    color: var(--warna_5);
    /* box-shadow: inset 0px -12px 10px -1px rgba(255, 255, 255, 0.1); */
}

.custom-btn-group > .custom-btn:hover {
    background-color: var(--warna_3);
    color: var(--warna_5);
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    max-width: 100%;
    margin: 0 auto;
}

.grid-item {
    background-color: #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    border: 2px solid transparent;
    transition: border-color 0.3s ease, transform 0.3s ease;
    margin-bottom: 2rem;
}


@media (max-width: 480px) {
    .grid-item {
        width: 100%;
    }
    .products {
        max-height: 150px;
    }
    .resultsearch{
        top: 60px;
    }
}

.grid-item:hover {
    border-color: var(--warna_1);
    transform: scale(1.005);
    padding: 2px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Shadow effect on hover */
}

.grid-item img {
    width: 100%;
    display: block;
    border-radius: 10px;
    height: 260px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.grid-item:hover img {
    transform: scale(1.05);
}

.game-info {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--warna_3);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    color: var(--warna_5);
    display: flex;
    flex-direction: column;
    align-items: start;
    transition: bottom 0.3s ease;
}

.grid-item:hover .game-info {
    bottom: 0;
    background-color: var(--warna_2);
    color: var(--warna_5);
    z-index: 999;
    padding: 1rem;
}

.game-title {
    font-size: 1rem;
    font-weight: bold;
}

.game-brand {
    font-size: 0.8rem;
    color: var(--warna_5);
    margin-top: 1px;
}

.bg-trans-prod {
    position: absolute;
    inset: 0;
    transition: all 300ms ease;
}

.grid-item:hover .bg-trans-prod {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
}

/* Responsive Design */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .grid-item img {
        height: 200px; /* Adjust height for smaller screens */
    }
}

@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .grid-item img {
        height: 150px; /* Further adjust height for very small screens */
    }

    .game-title {
        padding: 5px; /* Adjust padding for smaller screens */
    }
}

.swiper-container {
    height: auto !important;
    max-width: 100% !important;
}

.swiper-wrapper {
    height: auto !important;
    max-width: 100% !important;
    position: relative;
    transition: transform 0.3s ease-out;
    display: flex;
    height: 100%;
    object-fit: cover;
}

.overlay-swiper {
    width: 100%;
    height: 100%;
    position: absolute;

}

.overlay-swiper .right {
    width: 10rem;
    z-index: 9;
    position: absolute;
    height: 100%;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    right: 0;
    background: linear-gradient(90.1deg, var(--warna_4) .08%, rgba(27, 30, 36, 0) 99.91%);
}

.overlay-swiper .left {
    width: 10rem;
    z-index: 9;
    position: absolute;
    height: 100%;
    background: linear-gradient(90.1deg, var(--warna_4) .08%, rgba(27, 30, 36, 0) 99.91%);
}

.products {
    position: relative;
    height: 260px;
}
.products img {
    display: block;
    transition: filter 0.3s ease-in-out;
}

.products:hover img {
    filter: grayscale(100%);
}

/*index end*/

/*Order*/
.toast, .tooltip {
    font-size: .857rem
}

.modal-title, .popover, .tooltip {
    line-height: 1.45
}

.popover, .text-hide, .tooltip {
    text-shadow: none
}

.order-field-cstm {
    /* padding-top: 6rem; */
}

@media (max-width: 1080px) {
    .order-field-cstm {
        /* padding-top: 3rem; */
    }
}

.close:hover {
    color: #5E5873;
    text-decoration: none
}

.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
    opacity: .75
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0
}

a.close.disabled {
    pointer-events: none
}

.toast {
    -webkit-flex-basis: 380px;
    -ms-flex-preferred-size: 380px;
    flex-basis: 380px;
    max-width: 380px;
    color: #6E6B7B;
    background-color: rgba(255, 255, 255, .85);
    background-clip: padding-box;
    border: 0 solid rgba(0, 0, 0, .1);
    box-shadow: 0 2px 20px 0 rgba(34, 41, 47, .08);
    opacity: 0;
    border-radius: .286rem
}

.modal-content, .toast-header {
    background-color: #FFF;
    background-clip: padding-box
}

.toast:not(:last-child) {
    margin-bottom: 1.14rem
}

.toast.showing {
    opacity: 1
}

.toast.show {
    display: block;
    opacity: 1
}

.toast.hide {
    display: none
}

.modal-dialog-scrollable, .toast-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox
}

.toast-header {
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .15rem 1.14rem;
    color: #6E6B7B;
    border-bottom: 0 solid rgba(0, 0, 0, .05);
    border-top-left-radius: .286rem;
    border-top-right-radius: .286rem
}

.toast-body {
    padding: 1.14rem
}

.fo-menu {
    background: #fff;
    position: fixed;
    width: 100%;
    padding: 10px 10px 0 10px;
    bottom: 0;
    text-align: center;
    border-top: 1px solid #edebeb;
    display: none;
    left: 0;
}

.fo-item {
    padding-top: 3px;
    padding-bottom: 6px;
    border-bottom: 3px solid #fff;
    width: 19%;
    display: inline-block;
    text-align: center;
}

.fo-item i {
    display: block;
    margin-bottom: 5px;
    color: #6E6B7B;
}

.fo-item span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #6E6B7B;
}

.fo-icon-center {
    background: #8f86f3;
    height: 46px;
    width: 46px;
    position: relative;
    margin: -40px auto 10px;
    text-align: center;
    border-radius: 50%;
    font-size: 19px;
}

.fo-icon-center i {
    color: #fff;
    padding-top: 12px;
}

.fo-item.active {
    border-color: #8f86f3;
}

@media only screen and (max-width: 600px) {
    .fo-menu {
        display: block;
    }

    html .content.app-content {
        padding-bottom: 80px !important;
    }
}

.accordion-button {
    box-shadow: none !important;
}

.accordion-button svg {
    position: absolute;
    right: 10px;
}

.accordion-button:not(.collapsed) svg {
    transform: rotate(-180deg);
}

.accordion-button::after {
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: 0px;
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
}

.accordion-tipe {
    font-weight: 600;
}

.btn.disabled, .btn:disabled, fieldset:disabled {
    background: #8ba4b1;
    border-color: #8ba4b1;
}

.product .box {
    margin-bottom: 40px;
}

.games-banner {
    /*height: 170px;*/
    /* background:url(/assets/banner_game/mlbb_miliyan.id.jpg); */
    background-size: cover;
    overflow: hidden;
    background: black;
    /*background-size: 100%;*/
}

.num-page {
    align-items: center;
    display: flex;
    margin-bottom: 10px;
    background-image: linear-gradient(180deg, var(--warna_3), var(--warna_4));

    border-radius: 1rem 1rem 0 0;
}

/* .num-page div {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    font-size: 2.875rem;
    background: var(--warna_3);
    color: #fff;
    line-height: 40px;
    float: left;
} */

.num-page p {
    margin-left: 5px;
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 500;
    padding-top: 6px;
}

.num-page i {
    font-size: 16px;
    margin-top: 13px;
    margin-left: 5px;
}

button.accordion-button {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.box-back i {
    font-size: 22px;
    margin-top: 2px;
    color: #fff;
}

.row {
    /* display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y)); */
    margin-right: 0;
    margin-left: 0;
}

.panduan {
    color: var(--warna_5);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.swal2-styled.swal2-confirm {
    background-color: var(--warna_2) !important;
    color: #fff;
    border-radius: 0.5rem;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: none !important;
}

.product-list img {
    display: flex;
    float: right;
    margin-top: -12px;
}

.productlogo {
    width: 32px;
    right: 5%;
}

.accordion-button:hover {
    z-index: 0;
}

.content-description {
    padding-right: 0;
}

@media (min-width: 1080px) {
    .content-description {
        padding-right: 1rem;
    }
}

.content-description .content-description-card {
    position: sticky;
    top: 6rem;
}

.bg-payment {
    background: var(--warna_3);
    border-radius: 0 0 10px 10px;
}

.btn-order {
    display: inline-block;
    border: 0;
    outline: 0;
    line-height: 1.4;
    cursor: pointer;
    /* Important part */
    position: relative;
    transition: padding-right .3s ease-out;

}

.btn-order.loading {
    padding-right: 40px;
}

.btn-order.loading:after {
    content: "";
    position: absolute;
    border-radius: 100%;
    right: 10px;
    top: 35%;
    width: 0px;
    height: 0px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-left-color: #FFF;
    border-top-color: #FFF;
    animation: spin .6s infinite linear, grow .3s forwards ease-out;
}

.btn-default {
    border: 1px solid var(--warna_1);
    padding: .4rem 2rem;
    color: var(--warna_5) !important;
}

.btn-default:hover {
    border: 1px solid var(--warna_2);
}

.btn-danger {
    padding: .4rem 2rem;
    background: var(--warna_1);
    color: var(--warna_5);
    border: 1px solid var(--warna_1);
}

.btn-danger:hover {
    padding: .4rem 2rem;
    background: var(--warna_2);
    color: var(--warna_5);
    border: 1px solid var(--warna_2);
}

@keyframes spin {
    to {
        transform: rotate(359deg);
    }
}

@keyframes grow {
    to {
        width: 16px;
        height: 16px;
    }
}

.shadow-form {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.btn-group-lg > .btn, .btn-lg {
    padding: .8rem 2rem;
    font-size: 1.25rem;
    line-height: 1.25;
    border-radius: .358rem;
}

.btn-block {
    display: block;
}

.w-20 {
    width: 20% !important;
}

@media (max-width: 576px) {
    .w-20 {
        width: 50px !important;
    }
}

.custom-btn-order {
    background-color: var(--warna_1); /* Custom background color */
    color: var(--warna_5); /* Text color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Padding */
    width: 100%;
    font-size: 16px; /* Font size */
    border-radius: 2rem; /* Rounded corners */
    transition: background-color 0.3s ease; /* Transition effect */
}

.custom-btn-order:hover {
    background-color: var(--warna_2); /* Darker background on hover */
}

.num-page .num-section {
    height: 30px;
    width: 30px;
    border-radius: 3rem;
    margin: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 0px 0px 2px rgba(255, 255, 255, 0.25);
    color: var(--warna_3);
    background: var(--warna_1);
}

@keyframes hightlight {
    0% {
        left: -200%;
    }
    100% {
        left: 200%;
    }
}

.product-list.active {
    background-color: var(--warna_3); /* Existing background color */
    color: var(--warna_2); /* Existing text color */
    border: 3px solid var(--warna_1); /* Add a solid border with your preferred color */
    box-shadow: 0 0 14px 4px hsla(0, 0%, 82%, .3); /* Add a glow effect with the same color as the border */
}

.product-list.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 30%;
    background: rgba(196, 189, 189, 0.47);
    background-size: 200% 100%;
    transform: rotate(45deg);
    background-position: left bottom;
    animation: hightlight 3s ease-in infinite forwards;
    z-index: 0;
}


.product-list {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-radius: 1rem;
    border: 3px solid var(--warna_4);
    overflow: hidden;
    position: relative;
    color: var(--warna_5);
}

.product-list .harga {
    color: var(--warna_1);
}

.product-list:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 5px 8px rgba(0, 0, 0, 0.06);
}

.bg-product {
    background-image: linear-gradient(180deg, var(--warna_4), var(--warna_3));
}

.cursor-pointer {
    cursor: pointer;
}

.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.p-2 {
    padding: 0.5rem;
}

.px-3 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.text-xs {
    font-size: 0.75rem; /* Smaller font size for text */
}

.fw-semibold {
    font-weight: 900; /* Semi-bold font weight */
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.mt-1 {
    margin-top: 0.25rem;
}

.method-list {
    display: flex;
    border: 3px solid var(--warna_3); /* Change as per your color scheme */
    align-items: center;
    justify-content: space-between;
    padding: .825rem;
    background-image: linear-gradient(180deg, var(--warna_4), var(--warna_3));
    border-radius: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.method-list.active {
    border: 3px solid; /* Change as per your color scheme */
    color: var(--warna_5); /* Change text color if needed */
    /* box-shadow: 0px 10px 10px rgba(134, 134, 134, 0.29); */
    border-color: var(--warna_1);
}

.method-list.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 30%;
    background: rgba(196, 189, 189, 0.47);
    background-size: 200% 100%;
    transform: rotate(45deg);
    background-position: left bottom;
    animation: hightlight 3s ease-in infinite forwards;
    z-index: 0;
}

.method-list:hover {
    transform: translateY(-2px);
}

.payment-image img {
    width: 100px; /* Adjust based on your needs */
    height: auto;
}

.payment-details {
    /* flex-grow: 1; */
    /* width: 100%; */
}

.method-content {
    width: 100%;
}

.payment-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--warna_1);
    margin-top: 15px;
}

.name-price {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.price {
    color: var(--warna_5);
}

.line {
    width: 100%;
    border-bottom: 1px solid var(--warna_1);
}

.payment-description {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--warna_1);
}

@media (max-width: 768px) {
    .method-list {
        flex-direction: column;
        align-items: center;
    }

    .payment-image img {
        margin-bottom: 10px;
    }
}

.bg-payment-list {
    background-color: #8D8D8F;
}
/* .swal2-popup {
    background: var(--warna_4) !important;
    color: var(--warna_5) !important;
} */
.swal2-container.swal2-center {
    background: rgba(0, 0, 0, 0.5);
}
.swal2-title{
    color: var(--warna_5) !important;
}
.swal-wide {
    width: 600px; /* Adjust width as needed */
}

.swal-title-custom {
    color: #333; /* Custom color for title */
}

.swal-text-custom {
    color: #555; /* Custom color for text */
}

.swal-confirm-button-custom {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none;
    border-radius: .5rem;
    padding: 10px 20px;
    font-size: 16px;
    margin-right: 50px;
}

.swal2-actions {
    display: flex;
}

.swal-cancel-button-custom {
    background-color: #f44336; /* Red background */
    color: white; /* White text */
    border: none;
    border-radius: .5rem;
    padding: 10px 20px;
    font-size: 16px;
}

.swal2-loading {
    justify-content: center;
}

.swal2-styled.swal2-confirm {
    color: var(--warna_5);
    background: var(--warna_1) !important;
}

.swal2-styled.swal2-cancel {
    /* background-color: red) !important; */
    background: var(--warna_3);
    border-radius: 0.5rem;
    color: var(--warna_5);
}

.accordion-item {
    border-radius: 1rem !important;
}

.accordion-item:first-of-type .accordion-button,
.accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: .9rem;
    color: var(--warna_5);
}

.accordion-item,
#collapse-qris {
    background-color: var(--warna_3);
    border-radius: 1rem;
}

.float-start-custom {
    margin-top: -30px;
}

/*end order*/

/*find transaction*/
.btn:disabled {
    background: #8ba4b1;
    border-color: #8ba4b1
}

.search-trans {
    color: var(--warna_2);
    border-radius: 1rem; /* Rounded corners */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.10); /* Subtle shadow */
    padding: 30px; /* Spacing around content */
}

.form-ser {
    position: relative;
    z-index: 20;
    padding-bottom: 12px; /* py-12 equivalent */
    text-align: left; /* text-left equivalent */
}

.form-heads {
    max-width: 32rem; /* max-w-2xl equivalent in pixels */
    font-size: 1.875rem; /* text-3xl equivalent in pixels */
    font-weight: 600; /* font-bold equivalent */
    color: var(--warna_5); /* Define a CSS variable for the color */
}

@media (min-width: 640px) {
    .form-heads {
        font-size: 2.25rem; /* sm:text-4xl equivalent in pixels */
    }
}

.form-desks {
    margin-top: 1rem; /* mt-3 equivalent */
    max-width: 48rem; /* max-w-3xl equivalent */
    color: var(--warna_5); /* This needs to be defined as it's not a standard color token */
}

.form-body {
    margin-top: 1.5rem; /* mt-6 equivalent */
    max-width: 36rem; /* max-w-xl equivalent */
}

.form-bod-text {
    display: block; /* block equivalent */
    font-size: .9rem; /* text-xs equivalent */
    font-weight: 500; /* font-medium equivalent */
    margin-bottom: 0rem; /* mb-2 equivalent */
    text-align: left; /* text-left equivalent */
}

.form-inputs {
    width: 100%;
    height: 36px;
    margin-top: 1rem;
    border-radius: 0.5rem; /* rounded-lg equivalent */
    margin-bottom: 1rem;
    padding: 10px;
    /* background: #515151; */
    /* color: var(--warna_5); */
    font-size: 1.1rem;
}

.btn-inv {
    display: flex; /* flex equivalent */
    align-items: center; /* items-center equivalent */
    justify-content: flex-start; /* justify-start equivalent */
    gap: 1.5rem; /* gap-x-6 equivalent */
}

.btn-searching {
    border: none;
    display: inline-flex; /* inline-flex equivalent */
    align-items: center; /* items-center equivalent */
    justify-content: center; /* justify-center equivalent */
    border-radius: 0.5rem; /* rounded-lg equivalent */
    background-color: var(--warna_1); /* bg-primary equivalent, assuming a CSS variable for primary color */
    padding: 0.5rem 1rem; /* px-4 py-2 equivalent */
    font-size: 1rem; /* text-sm equivalent */
    font-weight: 500; /* font-medium equivalent */
    color: var(--warna_4); /* text-primary-foreground equivalent, assuming a CSS variable for primary foreground color */
    transition-duration: 0.3s; /* duration-300 equivalent */
}

.btn-searching:hover {
    background-color: var(--warna_2); /* hover:bg-primary/75 equivalent, assuming a CSS variable for primary color in RGB */
}
.btn-searching svg{
    margin-right: .3rem;
    color: var(--warna_4); /* text-primary-foreground equivalent, assuming a CSS variable for primary foreground color */
}
.btn-searching:disabled {
    cursor: not-allowed;
    opacity: 0.75; /* disabled:opacity-75 equivalent */
}

.btn-searching > * + * {
    margin-left: 0.5rem; /* space-x-2 equivalent */
}
table.dataTable {
    margin-top: 0 !important;
    color: var(--warna_5);
    /* background: var(--warna_3); */
}
.price-list {
    padding-top: 2rem !important;
}

/* .card {
    background: var(--warna_3) !important;
    border: none;
} */

.price-head {
    width: 170px;
    height: 40px;
    display: flex;
    justify-items: center;
    align-items: center;
    background: var(--warna_3);
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 10px;
    margin-bottom: -4px;
    font-size: 1rem;
    font-weight: 500;
    margin-left: 10px;
    box-shadow: 0 0 2px slategray !important;
}

/*.swal2-html-container {*/
/*    display: flex !important;*/
/*    justify-content: center !important;*/
/*}*/
/*end find transaction*/


/*invoice*/
.btn:disabled {
    background: #8ba4b1;
    border-color: #8ba4b1
}

.text-base {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--warna_5) !important; /* Sesuaikan ukuran font dasar sesuai kebutuhan */
}

.font-medium {
    font-weight: 500;
}

.time {
    margin-top: 2rem; /* 8*4 = 32px */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2rem; /* 8*4 = 32px */
}

@media (min-width: 768px) {
    .time {
        flex-direction: row;
    }
}

@media print {
    .time {
        flex-direction: row;
    }
}

.time2 {
    width: 100%;
    text-align: left;
    font-size: 0.975rem;
    font-weight: 500;
}

@media (min-width: 768px) {
    .time2 {
        width: auto;
    }
}

.time3 {
    color: var(--warna_5); /* Ganti dengan nilai warna foreground yang sesuai */
}

@media print {
    .time3 {
        color: #1e293b; /* Ganti dengan nilai warna slate-800 yang sesuai */
    }
}

.time4 {
    border-radius: 0.375rem; /* 4 * 0.375rem */
    background-color: red; /* Ganti dengan warna latar belakang yang sesuai */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    text-align: center;
    color: var(--warna_5); /* Ganti dengan warna teks yang sesuai */
}

@media print {
    .time4 {
        padding: 0; /* print:p-0 */
        text-align: left; /* print:text-left */
        color: #1e293b; /* print:text-slate-800 */
    }
}

.card-body-invoice {
    margin-top: 20px;
    border-top: 1px solid var(--warna_4); /* Make the border transparent to show the gradient */
    border-bottom: 1px solid transparent;
}

.grid-container-invoice {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    gap: 8px; /* Gap between columns and rows */
}

.col-span-2 {
    grid-column: span 2 / span 2;
    display: flex;
    gap: 3rem
}

@media (min-width: 1024px) {
    /* Assuming 'lg' breakpoint is at 1024px */
    .col-span-2 {
        grid-column: span 1 / span 1;
    }
}

.media {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    gap: 8px; /* Gap between columns and rows */
    align-items: center; /* Center items vertically */
}

.prod-thumb {
    position: relative;
    margin-top: 0px; /* mt-2 */
    aspect-ratio: 2 / 2; /* aspect-[4/6] */
    height: 4rem; /* h-32 */
    flex: none; /* flex-none */
    overflow: hidden; /* overflow-hidden */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: #6c757d; /* bg-secondary, assuming #6c757d as secondary color */
    object-fit: cover; /* object-cover */
    object-position: center; /* object-center */
}

.grid-container-invoice .title {
    color: var(--warna_1);
}
@media (min-width: 640px) {
    /* sm breakpoint */
    .prod-thumb {
        height: 18rem; /* sm:h-56 */
        margin-top: 0;
    }
}

@media (min-width: 768px) {
    /* md breakpoint */
    .prod-thumb {
        margin-top: 0; /* md:mt-0 */
        display: block; /* md:block */
    }
}

@media print {
    .prod-thumb {
        display: none; /* print:hidden */
    }
}

.prod-img {
    width: 100%;
    position: relative;
    height: 100%;
    inset: 0px;
    color: transparent;
    object-fit: cover;
}

.col-span-2-row-span-3 {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    display: flex;
    gap: 8px;
}

@media (min-width: 1024px) {
    /* Assuming 'lg' breakpoint is at 1024px */
    .col-span-2-row-span-3 {
        grid-column: span 1 / span 1;
    }
}

.desk-pay {
    width: 100%;
    flex: 1;
}

@media (min-width: 768px) {
    /* md breakpoint */
    .desk-pay {
        flex: auto;
        padding-top: 0; /* md:pt-0 */
    }
}

@media print {
    .desk-pay {
        padding-top: 0; /* print:pt-0 */
    }
}

.gap-x-8-text-sm {
    column-gap: 2rem; /* 8px * 8 = 64px assuming 1rem = 8px */
    font-size: 0.875rem; /* text-sm */
}

.deskript {
    width: 100%;
    /* font-size: 1.0rem; */
    font-weight: bold;
}

.badge {
    font-size: .8rem !important;
    color: var(--warna_4) !important;
}
.bg-success {
    padding: 5px;;
    font-size: 1rem;
    background-color: rgb(45 195 126) !important;
}

.bg-warning {
    padding: 5px;
    font-size: .8rem;
}

.bg-danger {
    /* background-color: #ff97a4 !important; */
    padding: 5px;
    font-size: .8rem;
}


.desk-pm {
    font-size: 1rem; /* text-lg */
    font-weight: 500; /* font-medium */
    color: var(--warna_1); /* Assuming --foreground is a defined CSS variable for text color */
}

@media print {
    .desk-pm {
        font-size: 0.875rem; /* text-sm */
        color: #1e293b; /* text-slate-800 */
    }
}

.main1 {
    border-top: 1px solid var(--warna_4); /* Make the border transparent to show the gradient */
    /* border-image: linear-gradient(to right, var(--warna_3), var(--warna_4)) 1 stretch; */
    color: var(--warna_5); /* text-murky-200 */
    margin-top: 1rem; /* mt-8 */
    display: grid;
    width: 100%;
    grid-template-columns: repeat(8, 1fr); /* grid-cols-8 */
    gap: 1rem; /* gap-4 */
    padding-top: 1rem; /* pt-8 */
    text-align: left; /* text-left */
}

@media (min-width: 768px) {
    /* md breakpoint */
    .main1 {
        gap: 0.5rem; /* md:gap-x-2 */
    }
}

@media print {
    .main1 {
        border-top-color: #cbd5e0; /* print:border-slate-200 */
        color: #1e293b; /* print:text-slate-800 */
    }
}

.order-id {
    grid-column: span 3 / span 3;
    display: flex;
    height: 30px;
    align-items: center;
    color: var(--warna_5); /* Assuming --foreground is a defined CSS variable for text color */
}

@media (min-width: 768px) {
    /* md breakpoint */
    .order-id {
        grid-column: span 4 / span 4;
    }
}

@media print {
    .order-id {
        color: #1e293b; /* text-slate-800 */
    }
}

.order-id1 {
    grid-column: span 5 / span 5;
    color: var(--warna_1); /* Assuming --foreground is a defined CSS variable for text color */
}

@media (min-width: 768px) {
    /* md breakpoint */
    .order-id1 {
        grid-column: span 4 / span 4;
    }
}

@media print {
    .order-id1 {
        color: #1e293b; /* text-slate-800 */
    }
}

.qris-img {
    position: relative;
    margin-top: 2rem; /* mt-8 */
    display: flex;
    height: 16rem; /* h-64 */
    width: 16rem; /* w-64 */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.375rem; /* rounded-lg */
    background-color: #ffffff; /* bg-white */
}

@media (min-width: 640px) {
    /* sm breakpoint */
    .qris-img {
        height: 14rem; /* sm:h-56 */
        width: 14rem; /* sm:w-56 */
    }
}

.qr-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.375rem; /* rounded-lg */
    background-color: var(--warna_1); /* bg-primary */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    font-weight: 900; /* font-medium */
    color: var(--warna_5); /* Assuming --primary-foreground is a defined CSS variable */
    transition-duration: 300ms; /* duration-300 */
    margin-top: 0.9rem; /* mt-2 */
    width: 16rem; /* w-64 */
    height: 2rem; /* py-2 */
    font-size: 0.85rem !important;
}

.qr-download:hover {
    background-color: var(--warna_2); /* hover:bg-primary/75 */
}

.qr-download:disabled {
    cursor: not-allowed;
    opacity: 0.75; /* disabled:opacity-75 */
}

@media (min-width: 640px) {
    /* sm breakpoint */
    .qr-download {
        width: 14rem; /* sm:w-56 */
    }
}

@media print {
    .qr-download {
        display: none; /* print:hidden */
    }
}

.detail-payment {
    grid-column: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 2;
    width: 95%;
    margin-top: 1.8rem;
}

@media (min-width: 1024px) {
    .detail-payment {
        grid-column: span 1 / span 1;
    }
}

.acording {
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-radius: .6rem; /* Equivalent to rounded-lg */
    background-color: var(--warna_1); /* Assuming --bg-secondary is defined in your root or specific parent element */
    padding: 1rem 1rem; /* Equivalent to px-4 py-2 */
    text-align: left;
    font-size: 0.9rem; /* Equivalent to text-sm */
    font-weight: 500; /* Equivalent to font-medium */
    color: var(--warna_5); /* Assuming --text-secondary-foreground is defined in your root or specific parent element */
    outline: none;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
    border: none;
    height: 40px;
    align-items: center;
}

.acording:hover {
    background-color: var(--warna_2); /* Assuming --bg-secondary-hover is a lighter shade of --bg-secondary or use rgba method for opacity */
}

.invoice-number{
    color: var(--warna_1);
}

.details-panel {
    color: #b2bec3; /* Assuming text-murky-200 */
    font-size: 0.875rem; /* text-sm */
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.details-panel[data-state="open"] {
    max-height: 500px; /* Adjust as needed */
    opacity: 1;
    padding-top: 1rem;
    display: block;
}

.details-panel[data-state="closed"] {
    max-height: 0;
    opacity: 0;
}

.details-container {
    border-radius: 0.5rem; /* rounded-lg */
    background-color: var(--warna_4); /* bg-secondary */
    padding: 1rem; /* p-4 */
}

.details-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem; /* space-y-4 */
}

.detail-item {
    display: flex;
    justify-content: space-between;
}

.detail-title {
    font-weight: 500; /* font-medium */
    color: var(--warna_5); /* text-foreground */
}

.detail-value {
    color: var(--warna_5); /* text-foreground */
}

.hidden {
    display: none;
}

.separator {
    height: 1px;
    width: 100%;
    background-color: var(--warna_2); /* bg-background */
}

@media print {
    .detail-value {
        color: var(--warna_1); /* print:text-slate-800 */
    }
}

.rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
}

.rotate-0 {
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
}

.pay-total {
    margin-bottom: 1rem; /* Adjust based on your spacing scale for .mb-8 */
    margin-top: 1rem; /* Adjust based on your spacing scale for .mt-4 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--warna_1); /* Example primary color for .text-primary */
}

.total-text {
    font-size: 1rem; /* text-xl */
    font-weight: 500; /* font-bold */
    color: var(--warna_1); /* Assuming --text-foreground is a defined CSS variable */
}

@media (min-width: 768px) {
    .total-text {
        font-size: 1rem; /* md:text-2xl */
    }
}

@media print {
    .total-text {
        font-size: 0.875rem; /* print:text-sm */
    }
}

.pay-amount {
    font-weight: 500; /* font-semibold */
    font-size: 1rem;
    color: var(--warna_5); /* Assuming --text-foreground is a defined CSS variable */
}

@media print {
    .pay-amount {
        color: #1e293b; /* print:text-slate-800 */
    }
}

.warning-message {
    background-color: var(--warna_4); /* Light yellow background */
    padding: 10px;
    border-radius: .6rem;
    display: flex;
    height: 3rem;
    align-items: center;
}

.warning-content p {
    color: var(--warna_1); /* Yellow text color to match the border */
    margin: 0; /* Remove default paragraph margin */
}

.warning-content strong {
    color: #d97706; /* A darker shade of yellow for emphasis */
}

.progress {
    display: flex;
    height: auto;
    background: transparent;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 16px; /* 4rem, assuming 1rem = 4px */
    margin-bottom: 2rem;
}

.prog-head {
    font-size: 0.875rem; /* This sets the font size to small (sm) */
    font-weight: 600; /* This makes the font semi-bold (font-semibold) */
}

.prg-one {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    margin-top: 1rem;
}

.prog-one-tran {
    display: flex;
    height: 2.25rem; /* 9 * 0.25rem = 2.25rem */
    align-items: center;
}

.progress ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.prog-one-round {
    position: relative;
    z-index: 10;
    display: flex;
    height: 2rem; /* 8 * 0.25rem = 2rem */
    width: 2rem; /* 8 * 0.25rem = 2rem */
    align-items: center;
    justify-content: center;
    border: 1px solid #747474;
    border-radius: 9999px; /* rounded-full */
    background: #151515;
}

.prog-one-round-success {
    position: relative;
    z-index: 10;
    display: flex;
    height: 2rem; /* 8 * 0.25rem = 2rem */
    width: 2rem; /* 8 * 0.25rem = 2rem */
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
    background-color: rgb(45 195 126); /* bg-green-500 */
}

.prog-one-round-pending {
    position: relative;
    z-index: 10;
    display: flex;
    height: 2rem; /* 8 * 0.25rem = 2rem */
    width: 2rem; /* 8 * 0.25rem = 2rem */
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
    border: #ffa900 1px solid;
    background: #ffa900;
}

.prog-one-round-failed {
    position: relative;
    z-index: 10;
    display: flex;
    height: 2rem; /* 8 * 0.25rem = 2rem */
    width: 2rem; /* 8 * 0.25rem = 2rem */
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
    background-color: #ff002e; /* bg-green-500 */
}

.group:hover .prog-one-round {
    background-color: #2b2a2a; /* bg-green-600 */
}

.group:hover .prog-one-round-success {
    background-color: #41ff8b; /* bg-green-600 */
}

.group:hover .prog-one-round-failed {
    background-color: #ff3d60; /* bg-green-600 */
}

.sector-prog {
    position: absolute;
    left: 1rem; /* left-4 */
    top: 2rem; /* top-4 */
    margin-left: -1px; /* -ml-px */
    margin-top: 0.125rem; /* mt-0.5 */
    height: 100%; /* h-full */
    width: 0.125rem; /* w-0.5 */
    background-color: transparent; /* bg-green-500 */

}

.sector-prog-success {
    position: absolute;
    left: 1rem; /* left-4 */
    top: 2rem; /* top-4 */
    margin-left: -1px; /* -ml-px */
    margin-top: 0.125rem; /* mt-0.5 */
    height: 100%; /* h-full */
    width: 0.125rem; /* w-0.5 */
    background-color: rgb(45 195 126); /* bg-green-500 */
}

.sector-prog-failed {
    position: absolute;
    left: 1rem; /* left-4 */
    top: 2rem; /* top-4 */
    margin-left: -1px; /* -ml-px */
    margin-top: 0.125rem; /* mt-0.5 */
    height: 100%; /* h-full */
    width: 0.125rem; /* w-0.5 */
    background-color: #ff002e; /* bg-green-500 */
}

.prog-desk {
    margin-left: 1.5rem; /* ml-4 */
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.prog-desk {
    margin-left: 1.5rem; /* ml-4 */
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.prog-desk-1 {
    font-size: 1.2rem; /* text-base */
    font-weight: 500; /* font-medium */
    color: var(--warna_1); /* text-green-500 */
}

.prog-desk-1-pending {
    font-size: 1.2rem; /* text-base */
    font-weight: 500; /* font-medium */
    color: #ffa900; /* text-green-500 */
}

.prog-desk-1-failed {
    font-size: 1.2rem; /* text-base */
    font-weight: 500; /* font-medium */
    color: #ff002e; /* text-green-500 */
}

.prog-desk-1-success {
    font-size: 1.2rem; /* text-base */
    font-weight: 500; /* font-medium */
    color: var(--warna_1); /* text-green-500 */
}

.prog-desk-2 {
    font-size: 0.8rem; /* text-base */
    font-weight: 500; /* font-medium */
    color: var(--warna_5); /* text-green-500 */
}

.prog-desk-fail {
    font-size: 1.2rem; /* text-base */
    font-weight: 500; /* font-medium */
    color: red !important; /* text-green-500 */
}

.display-none {
    display: none;
}

/*end invoice*/

/*pricelist*/
.btn:disabled {
    background: #8ba4b1;
    border-color: #8ba4b1
}

.row-price {
    /* --bs-gutter-x: 0rem !important; */
}

.price-list {
    padding-top: 3rem !important;
}

.card {
    /* border: 1px solid var(--warna_4); */
}

.price-head {
    width: 150px;
    height: 40px;
    display: flex;
    justify-items: center;
    align-items: center;
    background: var(--warna_3);
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 10px;
    margin-bottom: -4px;
    font-size: 1.5rem;
    font-weight: 500;
    margin-left: 10px;
    box-shadow: 0 0 2px slategray !important;
}

/*end pricelist*/

/*profile*/
.accordion-button {
    box-shadow: none !important
}

.btn.disabled, .btn:disabled, fieldset:disabled {
    background: #8ba4b1;
    border-color: #8ba4b1
}

.product .box {
    margin-bottom: 40px
}

.box-profile {
    margin-top: -190px
}

.bg-card {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
    /* background: var(--warna_4) !important; */
    background-image: linear-gradient(180deg, var(--warna_3), var(--warna_4));
    color: var(--warna_5);
    border-radius: 1rem;
    padding: 0 0 .5rem;
}

/*end profile*/

/*dashboard*/
.account .table-responsive{
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

thead, tbody{
    border-color: rgba(255, 255, 255, 0.1);
}

.account-info {
    background-image: linear-gradient(180deg, var(--warna_4), var(--warna_3));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.pagination .page-item .page-link {
    background-color: var(--warna_3);
    color: var(--warna_5);
    border-color: transparent;
}
.pagination .page-item.active .page-link{
    background-color: var(--warna_1);
    color: var(--warna_5);
    border-color: transparent;
}
.btn:disabled {
    background: #8ba4b1;
    border-color: #8ba4b1
}

.box-profile {
    margin-top: -270px
}

.refferal-code {
    border: none;
    border-radius: 10px;
    font-size: 1.5rem;
    margin-top: 10px;
    color: #0ab5d4;
    font-weight: 800;
}

.btn-copy {
    background: none;
    color: var(--warna_2);
    border: none;
    border-radius: 5px;
    margin-left: 5px;
    cursor: pointer;
}

.box-profile .body {
    border-radius: 24px;
    height: 500px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)
}

.box-profile .body .img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    border: 2px solid #fff;
    margin: -50px auto;
    font-size: 22px
}

/*end dashboard*/

/*riwayat transaksi*/
.accordion-button {
    box-shadow: none !important
}

.btn:disabled {
    background: #8ba4b1;
    border-color: #8ba4b1
}

.box-profile {
    margin-top: -270px
}

.my-form div small {
    color: #718096
}

/* .card {
    background: var(--warna_3) !important;
    border: none;
    box-shadow: 0 0 2px slategray !important;
} */

.price-head {
    width: 170px;
    height: 40px;
    display: flex;
    justify-items: center;
    align-items: center;
    background: var(--warna_3);
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 10px;
    margin-bottom: -4px;
    font-size: 1rem;
    font-weight: 500;
    margin-left: 10px;
    box-shadow: 0 0 2px slategray !important;
}

/*end riwayat transaksi*/


/*search modal*/

.resultsearch {
    list-style: none;
    position: absolute;
    width: 100%;
    background: var(--warna_4);
    border-radius: 10px;
    overflow: hidden;
    z-index: 1;
    left: 0;
}

.modal-header-search {
    border-bottom: none !important;
    padding: .5rem .5rem 0;
}

.modal-dialog-scrollable, .modal-content {
    max-height: 80%;
}

.modal-content-search {
    list-style: none;
    height: max-content !important;
    max-height: 20rem;
    background: black !important;
}

.search-form {
    width: 100%;
    position: relative;
    padding: 0;
    margin: auto;
}

.search-product {
    width: 100%;
    padding: 10px 10px 10px 40px;
    border-radius: 2rem;
    color: var(--warna_5);
    border: none;
    border: 1px solid #888;
    background-color: var(--warna_3);
}

.search-product:focus {
    width: 100%;
    border: 1px solid #888;
    background-color: transparent;
    color: var(--warna_5);
}
.search-product::placeholder {
    color: #888;
}
@media (min-width: 1080px) {
    .search-product {
        width: 100%;
    }

    .resultsearch{
        top: 30px;
    }
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #888;
}

.no-results {
    padding: 20px;
    text-align: center;
    color: #777;
}

.item-search {
    background-color: #0e0e0e;
    cursor: pointer;
    border: none;
    border-radius: 10px;
}

.item-search:hover {
    background-color: #0e0e0e;
}

/*end search modal*/