.bg-light {
    --bs-bg-opacity: 1;
}
#searchProds {
    width: 60px;
    transition: width 0.5s ease;
}
#searchProds:focus {
    width: 240px;
}
.logo-atas {
    height: 40px;
}
.logo-order {
    width: 100%;
    float: left; /* margin-right: 8px;  margin-bottom: auto; */
}
.logo-order2 {
    width: 100%;
    float: left; /* margin-right: 8px;  margin-bottom: auto; */
}
.logo-order3 {
    width: 100%;
    float: left; /* margin-right: 8px;  margin-bottom: auto; */
}
.logo-bawah {
    height: 60px;
    float: left;
    margin-right: 8px;
    margin-bottom: auto;
}
.btn-orange {
    color: #b19973;
    background-color: #b19973 !important;
    border-color: #b19973 !important;
}
.btn-primary {
    color: #fff;
    background-color: #b19973 !important;
    border-color: #b19973 !important;
}
.child-box:hover {
    border: 1px solid #c9c9c993;
} /* #child-box:hover {  border: 1px solid #fd7300;  color: #fd7300;  } */
.button-action-payment li.active {
    border: 1px solid #b19973;
    background: #f9f9f9;
    filter: grayscale(0%);
}
.xxs {
    font-size: 0.4rem;
}
.button-action-payment li {
    border: 1px solid rgba(202, 202, 202, 0.398);
    padding: 10px;
    border-radius: 0.3em;
    margin-bottom: 10px;
    position: relative;
    display: list-item;
    text-align: -webkit-match-parent;
    background: rgb(208, 208, 208);
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.button-action-payment input[type="radio"]:checked + .payment-item {
    color: #b19973;
}
.fa-angle-right:before {
    color: #b19973;
}
.strip-primary {
    background-color: #b19973;
    position: absolute;
    width: 60px;
    height: 5px;
    border-radius: 10px;
}
.wave {
    min-height: 100%;
    background-attachment: scroll; /* background-image: url("https://hayutopup.com//assetss/img/wave.svg"); */
    background-repeat: no-repeat;
    background-position: bottom left, bottom right;
}
.wave2 {
    min-height: 100%;
    background-attachment: fixed; /* background-image: url("https://hayutopup.com//assetss/img/wave2.svg"); */
    background-repeat: no-repeat;
    background-position: top left, top right;
}
.fab-container {
    position: fixed;
    bottom: 70px;
    right: 10px;
    z-index: 999;
    cursor: pointer;
}
.fab-icon-holder {
    width: 45px;
    height: 45px;
    bottom: 140px;
    left: 10px;
    color: #fff;
    background: #fff; /* padding: 1px; */
    border-radius: 10px;
    text-align: center;
    font-size: 30px;
    z-index: 99999;
}
.fab-icon-holder:hover {
    opacity: 0.8;
}
.fab-icon-holder i {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 25px;
    color: #ffffff;
}
.fab-options {
    list-style-type: none;
    margin: 0;
    position: absolute;
    bottom: 48px;
    left: -37px;
    opacity: 0;
    transition: all 0.3s ease;
    transform: scale(0);
    transform-origin: 85% bottom;
}
.fab:hover + .fab-options,
.fab-options:hover {
    opacity: 1;
    transform: scale(1);
}
.fab-options li {
    display: flex;
    justify-content: flex-start;
    padding: 5px;
}
.fab-label {
    padding: 2px 5px;
    align-self: center;
    user-select: none;
    white-space: nowrap;
    border-radius: 3px;
    font-size: 16px;
    background: #666666;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    margin-left: 10px;
}
.act-btn {
    display: block;
    position: fixed;
    width: 45px;
    height: 45px;
    bottom: 140px;
    left: 10px;
    color: #fff;
    background: #5c8a8a;
    border-radius: 10px;
    text-align: center;
    font-size: 30px;
    z-index: 99999;
}
.act-btn:hover {
    background: #212529;
}
.act-btn-top {
    display: none;
    position: fixed;
    width: 45px;
    height: 45px;
    bottom: 140px;
    right: 10px;
    color: #fff;
    background: #b19973;
    border-radius: 10px;
    text-align: center;
    font-size: 30px;
    z-index: 99999;
}
.act-btn-top:hover {
    background: #b1997385;
    color: #b19973;
}
.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}
.d-flex2 {
    background-color: #212529;
}
.img-chat {
    max-width: 100%;
    height: auto; /* background-color: #f89728; */
    border-radius: 10px;
}
.btn-topup {
    color: #fff3e2 !important;
    background-color: #b19973 !important;
    width: 90%;
    max-width: 100px;
}
.btn-topup:hover {
    color: #fff3e2 !important;
    background-color: #b1997385 !important;
    border-color: #b1997385;
    width: 90%;
}
.rounded-img-buy {
    border-radius: 25% !important;
}
.size-img-buy {
    width: 100%; /* border-radius: 12px; */
    height: auto;
}
.size-img-buy-v {
    width: 100px;
    height: auto;
}
@font-face {
    font-family: "hayutopup-comic";
    src: url(fonts/comic.ttf);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #b19973;
    color: #fff;
}
.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s;
}
.nav-link:focus,
.nav-link:hover {
    color: #c44d09;
}
.d-flex2-custom {
    background-color: white;
}
.card .btn {
    z-index: 1;
}
.col-hp {
    flex: 0 0 auto;
    width: 100%;
    font-size: 12px;
}
.col-hp2 {
    flex: 0 0 auto;
    width: 100%;
    font-size: 11px;
}
.cut-text {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 103px;
    white-space: nowrap;
}
.card-title-publisher-wrap {
    -webkit-box-flex: 1;
    flex-grow: 1;
    font-size: 11px;
}
.card-game-title {
    margin-top: 2px;
    font-weight: 500;
    -webkit-line-clamp: 2;
    height: 3em;
}
.card-game-publisher {
    font-weight: 400;
    color: #666;
    font-size: 12px;
    -webkit-line-clamp: 1;
}
.nav-tab {
    background-color: #b1997385;
    border-radius: 0.25rem;
    color: white !important;
}
.nav-tab .nav-link {
    color: white !important;
}
.nav-tab:hover {
    background-color: #b1997385;
    border-radius: 0.25rem;
}
.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;
}
.size-img-buy {
    width: 60%;
}
.shadows {
    cursor: pointer;
    border: 1px solid #b19973 !important;
}
.list-group-item {
    user-select: none;
}
.list-group input[type="radio"] {
    display: none;
}
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary:hover {
    background-color: #b1997385;
    border-color: transparent;
    color: #fff;
}
.list-group input[type="radio"] + .list-group-item {
    cursor: pointer;
    background-color: rgb(208, 208, 208);
    color: #000;
    border-color: transparent;
    font-size: 12px;
    border-radius: 10px;
}
.list-group input[type="radio"] + .list-group-item:before {
    /* content: "\2713"; */
    color: transparent;
    font-weight: bold;
    margin-right: 1em;
}
.list-group input[type="radio"]:checked + .list-group-item {
    background-color: #b1997385;
    color: #e1e1e4;
    font-size: 12px;
}
.list-group input[type="radio"]:checked + .list-group-item:before {
    color: inherit;
}
.card-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    background-color: #5858583d;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.card-headers {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.img-njas {
    height: 60px;
    border-radius: 10px;
}
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #212529c7;
}
.preloader .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font: 14px arial;
}