@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
:root {
/* primary color */
--Bushido-Red-400: #ED6565;
--Bushido-Red-500: #E15151;
--Bushido-Red-600: #C42D2D;
--sc-blue-200: #F5F8FF;
--sc-blue-300: #F0F4FF;
--sc-blue-400: #3159C0;
--sc-blue-500: #2C52B3;
--sc-blue-600: #20315D;
/* midnight Color Palette */
--Midnight-25: #FDFDFF;
--Midnight-50: #EEEEF0;
--Midnight-100: #B8B9C1;
--Midnight-200: #888594;
--Midnight-300: #7B788C;
--Midnight-400: #6D6A81;
--Midnight-500: #28283B;
--Midnight-600: #171724;
--Midnight-700: #141420;
}
body {
font-family: "Plus Jakarta Sans", sans-serif;
color: var(--Midnight-500);
width: 100%;
cursor: default;
background: url('https://digivospaces.b-cdn.net/UniPlay/Icons/footer-container.svg') center bottom / contain no-repeat,
linear-gradient(180deg, #FDFDFF 0%, #F0F1FF 100%),
#FFF;
}
.badge-self{
display: flex;
padding: 4px 12px;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 13px;
font-style: normal;
font-weight: 600;
line-height: 16px;
border-radius: 6px;
width: max-content;
}
.badge-self.as-canceled{
color: #F00;
background: #FFC7C7;
}
.badge-self.as-completed{
color: #03AC0E;
background: #D5FFDD;
}
.badge-self.as-pending{
color: #AB8103;
background: #FFF4D5;
}
/*--- Header --- */
.header-container-v3 {
border-bottom: 1px solid var(--Midnight-50, #EEEEF0);
background: #ffffffe8;
display: flex;
padding: 10px 16px 0px 16px;
flex-direction: column;
align-items: center;
gap: 16px;
top: 0;
z-index: 800;
position: sticky;
backdrop-filter: blur(12px);
}
.header-container-v3 .header-top {
display: flex;
max-width: 1320px;
align-items: center;
gap: 30px;
width: 100%;
}
form#search-form {
width: 100%;
}
.header-container-v3 .header-top img {
height: 36px;
}
.header-container-v3 .header-top .social-media-wrapper {
display: flex;
align-items: center;
gap: 28px;
}
.header-container-v3 .menu-nav{
display: flex;
max-width: 1320px;
align-items: center;
gap: 30px;
margin: 0;
width: 100%;
padding: 0;
}
.header-container-v3 .menu-nav ul{
display: flex;
max-width: 1320px;
align-items: center;
gap: 30px;
align-self: stretch;
margin: 0;
width: 100%;
padding: 0;
overflow-x: auto;
}
.header-container-v3 .menu-nav ul li {
display: flex;
padding: 6px 4px;
justify-content: center;
align-items: center;
gap: 10px;
list-style: none;
transition: all 0.1s;
}
.header-container-v3 .menu-nav ul li a {
color: var(--Midnight-400);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.14px;
text-decoration: none;
}
.header-container-v3 .menu-nav ul li a:hover {
color: var(--Bushido-Red-600);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.14px;
}
.header-container-v3 .menu-nav ul li .active{
color: var(--Bushido-Red-500, #E15151);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.14px;
border-bottom: 1px solid var(--Bushido-Red-500, #E15151);
}
/* Search */
.header-search-bar{
display: flex;
align-items: center;
border-radius: 42px;
border: 1px solid var(--Midnight-50, #EEEEF0);
background: var(--Midnight-25, #FDFDFF);
width: 100%;
}
.header-search-bar-field {
display: flex;
padding: 10px 12px;
align-items: center;
gap: 10px;
flex: 1 0 0;
align-self: stretch;
color: var(--Midnight-100, #B8B9C1);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.14px;
width: 100%;
}
.header-search-bar-field input.q.search-text {
width: 100%;
background: transparent;
outline: none;
border: none;
}
.header-search-bar:hover{
border: 1px solid var(--sc-blue-500);
background: #EEF3FF;
}
.header-search-bar-field input[type=text]:focus .header-search-bar {
border: 1px solid var(--sc-blue-500);
background: #EEF3FF;
}
.header-search-bar:focus-within {
border: 1px solid var(--sc-blue-500);
background: #EEF3FF;
}
.header-search-bar .result-quick-search{
top: 54px;
background: #fff;
position: absolute;
z-index: 1000;
border-radius: 6px;
box-shadow: 0 5px 4px 0px rgba(14, 3, 39, 0.15)
}
.header-search-bar .result-quick-search .notfound{
padding: 8px;
color: var(--Bushido-Red-500);
font-weight: 400;
display: flex;
justify-content: center;
}
.header-search-bar .result-quick-search .arrow-up{
width: 0;
height: 0;
position: absolute;
top: -13px;
left: 45%;
}
.header-search-bar .result-quick-search ul{
list-style: none;
padding: 0;
margin: 0;
}
.header-search-bar .result-quick-search ul li{
border-bottom: 1px solid var(--Midnight-50)
}
.header-search-bar .result-quick-search ul li:last-child{
border-bottom: none;
}
.header-search-bar .result-quick-search ul li a{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
text-decoration: none;
padding: 6px 16px;
width: 100%;
color: var(--Midnight-600);
}
.header-search-bar .result-quick-search ul li:hover{
background: var(--sc-blue-500, #2C52B3);
border-bottom: 1px solid var(--sc-blue-600);
}
.header-search-bar .result-quick-search ul li:hover:first-child{
border-radius: 6px 6px 0px 0px;
}
.header-search-bar .result-quick-search ul li:hover:last-child{
border-radius: 0px 0px 6px 6px;
}
.header-search-bar .result-quick-search ul li:hover .right b{
color: #fff;
}
.header-search-bar .result-quick-search ul li:hover .right small{
color: #fff;
}
.header-search-bar .result-quick-search ul li .left{
}
.header-search-bar .result-quick-search ul li .left img{
width: 35px;
height: 35px;
border-radius: 0.5em;
}
.header-search-bar .result-quick-search ul li .right {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: space-between;
align-items: flex-start;
margin-left: 10px;
width: 100%;
}
/* .header-search-bar .result-quick-search ul li .right{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: center;
align-items: flex-start;
margin-left: 10px;
} */
.header-search-bar .result-quick-search ul li .right b{
overflow: hidden;
color: var(--Midnight-700);
text-overflow: ellipsis;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.14px;
}
.header-search-bar .result-quick-search ul li .right small{
color: var(--Midnight-400);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.14px;
}
.header-navbar .header-content-v3-right .header-search-bar-field:hover{
border: 1px solid var(--sc-blue-500);
}
.header-navbar .header-content-v3-right .header-search-bar-field:focus-within{
border: 1px solid var(--sc-blue-500);
}
.header-navbar .header-content-v3-right .header-search-bar-field:active{
border: 1px solid var(--sc-blue-500);
}
.header-navbar .header-content-v3-right .header-search-bar-field input{
width: 100%;
-webkit-appearance: none;
background: none !important;
color: var(--Midnight-700);
outline: none !important;
border: none !important;
box-shadow: none !important;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.header-navbar .header-content-v3-right .header-search-bar-field input::placeholder{
color: var(--Midnight-100);
}
.header-navbar .header-content-v3-right .header-search-bar-field i{
position: absolute;
right: 15px;
color: var(--Midnight-700);
font-size: 18px;
line-height: 23px;
}
.tmv1-menu-trigger{
display: flex;
padding: 6px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
border: 1px solid var(--Bushido-Red-500);
text-decoration: none !important;
width: 36px;
-webkit-appearance: none !important;
}
.tmv1-menu-trigger i{
font-size: 24px;
color: var(--Bushido-Red-500);
}
/* START SLIDER HOME STYLE */
.slider-wrapper{
margin-top: 30px;
}
.slider-wrapper .image-slider {
position: relative;
min-height: 50px;
overflow: hidden
}
.slider-wrapper .image-slider--single .image-slider__dots,.slider-wrapper .image-slider--single .image-slider__nav {
display: none
}
.slider-wrapper .image-slider .next,.slider-wrapper .image-slider .prev {
position: absolute;
top: 45%;
cursor: pointer;
width: auto;
padding: 10px 20px;
color: #364152;
font-weight: 700;
font-size: 18px;
-webkit-transition: .7s ease;
transition: .7s ease;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #fff;
z-index: -2;
border-radius: 50%;
opacity: 0;
transition: all ease 0.3s;
}
.slider-wrapper .image-slider:hover .next{
opacity: 0.7;
}
.slider-wrapper .image-slider:hover .prev{
opacity: 0.7;
}
.slider-wrapper .image-slider .prev:hover{
opacity: 1;
}
.slider-wrapper .image-slider .next:hover{
opacity: 1;
}
.sidenav .collapsible-header:after{
top: 0 !important;
}
@media(max-width: 992px) {
.slider-wrapper .image-slider .next,.slider-wrapper .image-slider .prev {
top:42%;
font-size: 14px;
padding: 7px 14px
}
}
@media(max-width: 768px) {
.slider-wrapper .image-slider .next,.slider-wrapper .image-slider .prev {
font-size:10px;
padding: 5px 10px
}
}
.slider-wrapper .image-slider .next {
right: 10%
}
@media(max-width: 768px) {
.slider-wrapper .image-slider .next {
right:2%
}
}
.slider-wrapper .image-slider .prev {
left: 10%
}
@media(max-width: 768px) {
.slider-wrapper .image-slider .prev {
left:2%
}
}
.slider-wrapper .image-slider .next:hover,.slider-wrapper .image-slider .prev:hover {
background-color: #fff;
color: #000;
}
.slider-wrapper .image-slider .nav-active {
z-index: 1
}
.slider-wrapper .image-slider .nav-inactive {
z-index: 10;
}
.slider-wrapper .image-slider-items {
position: relative;
overflow: hidden;
border-radius: 8px;
/* margin: 0 20px 20px 20px */
}
.slider-wrapper .image-slider-items .before-replacement{
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 0px;
width: 100px;
background: black;
z-index: 50;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgb(242 244 248) 15%, rgba(255,255,255,0) 100%);
cursor: pointer;
transition: all ease 0.3s;
}
.slider-wrapper .image-slider-items .after-replacement{
/* content: " "; */
position: absolute;
right: 0;
bottom: 0;
top: 0px;
width: 100px;
background: black;
z-index: 50;
background: rgb(255,255,255);
background: linear-gradient(-90deg, rgb(242 243 246) 15%, rgba(255,255,255,0) 100%);
cursor: pointer;
transition: all ease 0.3s;
}
.slider-wrapper .image-slider-items .before-replacement:hover{
opacity: 0.7;
}
.slider-wrapper .image-slider-items .after-replacement:hover{
opacity: 0.7;
}
.slider-wrapper .img-slide {
display: block;
margin: auto;
/* width: 80%; */
width: 900px;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
opacity: 0
}
.slider-wrapper .img-slide.active {
opacity: 1;
position: relative
}
.slider-wrapper .img-slide img {
width: 100%;
min-height: 95px;
/* background: #ccc; */
background: linear-gradient(90deg, #aaaaaa, #ececec);
background-size: 400% 400%;
/* -webkit-animation: ImgPlaceholderLoad 2s ease infinite;
-moz-animation: ImgPlaceholderLoad 2s ease infinite;
animation: ImgPlaceholderLoad 2s ease infinite; */
}
.slider-wrapper .img-slide .loader {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
min-height: 4rem
}
@media(max-width: 768px) {
.slider-wrapper .img-slide {
width:100%
}
}
.slider-wrapper .img-current {
/* aspect-ratio: 4/1; */
border-radius: 8px;
/* height: 201px; */
height: 324.848px;
/* min-height: 201px !important; */
z-index: 45;
width: 900px;
}
.carousel.carousel-slider .carousel-item{
visibility: visible !important;
}
@-webkit-keyframes ImgPlaceholderLoad {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes ImgPlaceholderLoad {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes ImgPlaceholderLoad {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes loading {
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
.slider-wrapper .img-next,.slider-wrapper .img-prev {
position: absolute;
top: 0;
height: 95%;
margin-top: 1%;
border-radius: 8px;
object-fit: cover;
aspect-ratio: 1/1;
}
.slider-wrapper .img-next {
right: -103%
}
.slider-wrapper .img-prev {
left: -103%
}
.slider-wrapper .transition-fade .inactive {
height: 0;
opacity: 0
}
.slider-wrapper .transition-slide .img-slide {
position: absolute;
top: 0;
-webkit-transition: opacity .2s,z-index .5s,-webkit-transform .5s;
transition: opacity .2s,z-index .2s,-webkit-transform .5s;
transition: transform .2s,opacity .2s,z-index .5s;
transition: transform .2s,opacity .2s,z-index .5s,-webkit-transform .5s
}
.slider-wrapper .transition-slide .img-slide.active {
position: relative;
z-index: 10;
}
.slider-wrapper .transition-slide .next-item {
-webkit-transform: translateX(100%);
transform: translateX(100%)
}
.slider-wrapper .transition-slide .prev-item {
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
.slider-wrapper .transition-slide .inactive {
display: none
}
.slider-wrapper .transition-slide .inactive.next-item {
display: block;
right: 5%;
z-index: -1;
}
.slider-wrapper .transition-slide .inactive.prev-item {
display: block;
left: 5%;
z-index: -1;
}
.slider-wrapper .transition-slide .inactive .img-next,.slider-wrapper .transition-slide .inactive .img-prev {
display: none
}
.slider-wrapper .slide-enter-active,.slider-wrapper .slide-leave-active {
-webkit-transition: .5s;
transition: .5s
}
.slider-wrapper .slide-enter {
/* opacity: 1!important */
}
.slider-wrapper .slide-leave {
/* opacity: 0!important */
}
.slider-wrapper .img-slider {
overflow: hidden;
position: relative;
height: 200px;
width: 100%
}
.slider-wrapper .image-slider__dots {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: 1rem;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 10px 20px;
/* border-radius: 20px 20px 0 0; */
background-color: rgba(0,0,0,.5);
border-radius: 20px;
opacity: 0.7;
transition: 0.3s;
z-index: 20;
}
.slider-wrapper:hover .image-slider__dots{
opacity: 1;
}
@media(max-width: 768px) {
.slider-wrapper .image-slider__dots {
padding:5px 10px;
border-radius: 10px 10px 0 0
}
}
.slider-wrapper .image-slider__dot {
background: #cdd5df;
border-radius: 50%;
width: 12px;
height: 12px;
margin: 0 5px;
cursor: pointer
}
.slider-wrapper .image-slider__dot.active,.slider-wrapper .image-slider__dot:hover {
background: #567ee8;
}
.slider-wrapper .image-slider__dot.active {
width: 58px;
border-radius: 12px
}
@media(max-width: 992px) {
.slider-wrapper .image-slider__dot {
width:9px;
height: 9px;
margin: 0 3px
}
.slider-wrapper .image-slider__dot.active {
width: 44px
}
}
@media(max-width: 768px) {
.slider-wrapper .image-slider__dot {
width:6px;
height: 6px;
margin: 0 3px
}
.slider-wrapper .image-slider__dot.active {
width: 29px
}
}
.for_mobile_show{
display: none;
}
.for_desktop_show{
display: block;
}
/* END SLIDER HOME STYLE */
/* product listing */
.products-container {
position: relative;
display: flex;
width: 100%;
padding: 30px 16px 20px 16px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
max-width: 1340px;
margin: 0 auto;
}
.title-frame {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
width: 100%;
padding: 16px 10px 0px 10px;
}
.title-frame.bs-red h3 {
color: var(--Bushido-Red-500, #E15151)!important;
}
.title-frame.bs-red .icon-wrapper {
background: linear-gradient(180deg, #FF6565 0%, #F62D2D 100%);
}
.title-frame h3 {
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.28px;
margin: 0px;
}
.title-frame .icon-wrapper {
border-radius: 10px;
display: flex;
padding: 8px;
background: var(--Midnight-700);
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
}
.title-frame .icon-wrapper i {
color: #fff;
font-size: 20px;
}
.title-group-fs {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
/* top product */
.bs-slider-container {
display: flex;
gap: 24px;
flex-direction: row;
max-width: 1300px;
overflow-x: auto;
padding: 0px 10px;
scroll-behavior: smooth;
overflow-x: hidden; /* Hide horizontal scrollbar */
padding-top: 10px;
}
.slider-arrow {
position: absolute;
top: 62%;
transform: translateY(-40%);
z-index: 10;
background: rgba(0, 0, 0, 0.5);
color: white;
font-size: 22px;
padding: 10px;
cursor: pointer;
display: none;
border-radius: 50px;
user-select: none;
width: 52px;
text-align: center;
}
.left-arrow {
left: -25px;
}
.right-arrow {
right: -25px;
}
.products-container:hover .slider-arrow {
display: block;
}
.slider-arrow:hover {
background: var(--Bushido-Red-600)
}
.bs-slider-top-product-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}
.bs-top-product {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 2px;
text-decoration: none;
}
.bs-top-product img {
width: 150px;
height: 150px;
border-radius: 14px;
transition: transform .1s; /* Animation */
border-radius: 8px;
box-shadow: 0px 6px 6px 0px rgba(122, 122, 122, 0.25);
}
.bs-top-product .bs-product-card {
clip-path: polygon(0 45%, 100% 0, 100% 100%, 0% 100%);
color: #FFF;
text-align: center;
font-size: 16px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-self: stretch;
background: linear-gradient(180deg, #FF4F4F 0%, #F0F1FF 109.88%);
border-radius: 10px;
padding: 125px 20px 24px 20px;
margin-top: -115.4px;
z-index: -10;
width: 180px;
}
.bs-top-product .sc-product-card{
clip-path: polygon(0 45%, 100% 0, 100% 100%, 0% 100%);
color: #FFF;
text-align: center;
font-size: 16px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-self: stretch;
background: linear-gradient(180deg, #779DFF 0%, #F3F3FF 109.88%);
border-radius: 10px;
padding: 125px 20px 24px 20px;
margin-top: -115.4px;
z-index: -10;
width: 180px;
}
.bs-top-product h6{
border-radius: 7px;
background: var(--Midnight-700);
box-shadow: 0px 2px 4.9px 0px rgba(41, 41, 41, 0.25);
padding: 8px 12px;
white-space: nowrap;
color: #FFF;
text-align: center;
text-overflow: ellipsis;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.14px;
width: 150px;
margin-top: -30px;
overflow: hidden;
}
.bs-top-product:hover h6{
border-radius: 7px;
background: var(--Bushido-Red-600, #C42D2D);
box-shadow: 0px 2px 4.9px 0px rgba(41, 41, 41, 0.25);
padding: 8px 12px;
white-space: nowrap;
color: #FFF;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
color: #FFF;
text-align: center;
text-overflow: ellipsis;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.14px;
width: 150px;
margin-top: -30px;
}
.bs-top-product:hover img{
transform: translateY(-6px);
animation: 1s ease-in-out infinite;
}
/* voucher section */
.vouchers-container {
width: 100%;
background-image: url("https://digivospaces.b-cdn.net/UniPlay/Icons/cool.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.voucher-section-wrapper {
padding: 30px 16px 20px 16px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
max-width: 1340px;
margin: 0 auto;
display: flex;
}
.card-vector {
padding: 00px 60px 0px 0px;
}
.glass-effect {
width: 100%;
border-radius: 12px;
border: 1px solid #DEDEDE;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(251, 251, 255, 0.78) 100%);
backdrop-filter: blur(12px);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
.vouchers-wrapper-grid {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 5px 16px;
max-width: 90%;
padding: 20px;
}
.card-vector img {
width: 30%!important;
position: absolute;
bottom: 0;
right: 0;
z-index: -10;
opacity: 1;
}
.vouchers-wrapper-grid .child-product-voucher:hover {
display: flex;
min-width: 200px;
padding: 8px;
align-items: center;
gap: 15px;
flex: 1 0 0;
border-radius: 10px;
border: 1px solid #DEDEDE;
background: rgba(255, 255, 255, 0.45);
}
.vouchers-wrapper-grid .child-product-voucher:hover h6 {
color: var(--Bushido-Red-600);
}
.vouchers-wrapper-grid .child-product-voucher {
display: flex;
min-width: 200px;
padding: 8px;
align-items: center;
gap: 15px;
flex: 1 0 0;
border-radius: 10px;
border: 1px solid transparent;
text-decoration: none;
}
.vouchers-wrapper-grid .child-product-voucher img {
width: 75px;
height: 75px;
border-radius: 10px;
border: 1px solid var(--Midnight-50);
}
.vouchers-wrapper-grid .child-product-voucher h6 {
overflow: hidden;
color: var(--Midnight-600);
text-overflow: ellipsis;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.16px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin: 0px;
}
.vouchers-wrapper-grid .child-product-voucher a {
text-decoration: none;
}
/* product games */
.games-product-grid {
display: grid;
justify-items: center;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
width: 100%;
row-gap: 60px;
padding-top: 10px;
column-gap: 24px;
}
.bs-featured-store {
}
.frame-top-product-v2{
/* width: 1440px; */
width: 100%;
flex-shrink: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
gap: 1rem;
margin-top: 2rem;
padding: 0rem 1rem;
}
.frame-top-product-v2 .frame-header-top-product-v2{
max-width: 1340px;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
.frame-top-product-v2 .frame-header-top-product-v2 h3{
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
/* width: 1140px;
margin: 0 auto; */
}
.frame-top-product-v2 .frame-header-top-product-v2 .trigger-top-product-nav{
display: flex;
width: 83px;
justify-content: space-between;
align-items: center;
}
.frame-top-product-v2 .frame-header-top-product-v2 .trigger-top-product-nav a{
display: flex;
padding: 5px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 23.5px;
background: rgba(255, 255, 255, 0.40);
width: 34px;
height: 34px;
text-decoration: none;
font-size: 24px;
color: #FFFFFF;
transition: all .2s ease;
}
.frame-top-product-v2 .frame-header-top-product-v2 .trigger-top-product-nav a.disable{
pointer-events: none !important;
background: rgba(255, 255, 255, 0.20);
color: #bbbbbb;
}
.frame-top-product-v2 .frame-header-top-product-v2 .trigger-top-product-nav a:hover{
background: var(--orange-dark-500);
color: #1A255C;
}
.frame-top-product-v2 .frame-header-top-product-v2 .trigger-top-product-nav a i{
}
.frame-top-product-v2 .parent-top-product-v2{
display: flex;
/* width: 1140px; */
align-items: center;
gap: 35px;
flex-shrink: 0;
width: 100%;
/* overflow: auto; */
overflow-x: auto;
}
.frame-top-product-v2 .parent-top-product-v2::-webkit-scrollbar {
/* Webkit */
width: 0;
height: 0;
}
.frame-top-product-v2 .parent-top-product-v2 .child-top-product-v3{
display: flex;
width: 200px;
flex-direction: column;
align-items: center;
gap: 15px;
text-decoration: none;
padding: 5px 0px 0px 0px;
}
.frame-top-product-v2 .parent-top-product-v2 .child-top-product-v3 img{
width: 200px;
height: 200px;
border-radius: 14px;
/* transition: transform .2s; */
}
.frame-top-product-v2 .parent-top-product-v2 .child-top-product-v3 h6{
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.16px;
align-self: stretch;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.frame-top-product-v2 .parent-top-product-v2 .child-top-product-v3:hover h6 {
color: var(--orange-dark-500);
}
.frame-top-product-v2 .parent-top-product-v2 .child-top-product-v3:hover img {
transform: scale(1.04);
}
/* grid product */
.frame-grid-product-v2{
display: flex;
width: 100%;
max-width: 1340px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
margin: 0 auto;
margin-bottom: 40px;
position: relative;
padding-top: 24px;
}
.frame-grid-product-v2 i{
color: var(--orange-dark-500);
font-size: 24px;
}
/* .frame-grid-product-v2 h3{
color: var(--gray-800);
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
align-self: stretch;
margin: 0;
} */
.frame-grid-product-v2 .parent-grid-product-v2{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 30px;
width: 100%;
}
.products-container .games-product-grid.limited-height{
height: 985px;
overflow: hidden;
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3{
display: flex;
flex-direction: column;
gap: 10px;
text-decoration: none;
border: 1px solid var(--gray-300);
padding: 12px;
border-radius: 16px;
box-shadow: 0px 6px 0px 0px #CDD5DF;
align-items: center;
transition: all 0.2s;
background: #fff;
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3 img{
width: 175px;
height: 175px;
border-radius: 8px;
transition: transform .5s ease;
border: 1px solid var(--gray-100);
display: block;
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3 h6{
color: var(--gray-800);
text-align: center;
font-size: 16px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-self: stretch;
border-radius: 10px;
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3:hover h6{
color: var(--orange-dark-500);
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3:hover {
animation: 1s ease-in-out infinite;
background: var(--orange-dark-50);
border: 1px solid var(--orange-dark-500);
box-shadow: 0px 6px 0px 0px #FF4405;
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3:hover img {
transform: scale(1.1);
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3 .img-wrapper-v3 {
background-color: #fff;
overflow: hidden;
flex-shrink: 0;
border-radius: 16px;
position: relative;
width: 180px;
height: 180px;
}
/* svg */
.svg-top {
width: 100%;
}
.svg-center {
width: 100%;
background: var(--sc-blue-500);
height: 35px;
}
/* description */
.featured-desc {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
align-items: flex-start;
}
.frame-featured-product-v2{
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 0px;
max-width: 1340px;
margin: 0 auto;
background: var(--sc-blue-500);
clip-path: path('M1286 6.10352e-05L0 0V457.238L30 479.5L1190.95 479.5L1207.96 457.238H1307.5L1316.5 447.605V21.8008L1286 6.10352e-05Z');
-webkit-clip-path: path('M1286 6.10352e-05L0 0V457.238L30 479.5L1190.95 479.5L1207.96 457.238H1307.5L1316.5 447.605V21.8008L1286 6.10352e-05Z'); /* background: var(--sc-blue-500); */
opacity: 1;
background-image: linear-gradient(#365AB7 1px, transparent 1px), linear-gradient(to right, #365AB7 1px, #2C52B3 1px);
background-size: 80px 80px;
margin-top: 30px;
margin-bottom: 30px;
}
.frame-featured-product-v2 .content-featured{
display: flex;
gap: 10px;
width: 100%;
max-width: 1340px;
margin: 0 auto;
flex-direction: column;
align-items: center;
padding: 10px 60px;
margin-top: -1px;
height: 480px;
justify-content: center;
}
.frame-featured-product-v2 .content-featured h2{
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.frame-featured-product-v2 .content-featured p.sub{
color: #FFF;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 27px; /* 180% */
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2{
display: flex;
align-items: flex-start;
gap: 20px;
/* margin-top: 20px; */
/* margin-bottom: 20px; */
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
/* max-width: 730px; */
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2 .child-featured-product-v2{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 350px;
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2 .child-featured-product-v2 .header-child-featured-product-v2{
display: flex;
align-items: center;
gap: 8px;
flex-direction: row;
width: 100%;
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2 .child-featured-product-v2 .header-child-featured-product-v2 img{
display: flex;
width: 28px;
height: 28px;
padding: 0px 3px;
align-items: center;
gap: 10px;
justify-content: center;
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2 .child-featured-product-v2 .header-child-featured-product-v2 h4{
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin: 0px;
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2 .child-featured-product-v2 .header-child-featured-product-v2 i{
color: #FFF;
font-size: 18px;
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2 .child-featured-product-v2 p{
color: #C0C0CE;
font-size: 15px;
font-style: normal;
font-weight: 400;
align-self: stretch;
}
.overlay-more-games{
display: flex;
padding-top: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
flex-shrink: 0;
width: 100%;
}
.overlay-more-games span.overlay-desc{
color: #D4D6EA;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.overlay-more-games button.more-game-btn{
display: flex;
height: 56px;
padding: 12px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 77px;
background: var(--Bushido-Red-500, #E15151);
border: none;
}
@keyframes up-down {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
.overlay-more-games button.more-game-btn:hover{
background: var(--Bushido-Red-600);
animation: up-down 1s ease-in-out infinite;
}
.overlay-more-games button.more-game-btn span{
color: #ffffff;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.overlay-more-games button.more-game-btn i{
color: #ffffff;
font-size: 20px;
}
.footer-theme-v2{
}
.footer-theme-v2 .footer-payment-method-v2{
max-width: 1340px;
width: 100%;
display: flex;
padding: 20px 0px 30px 0px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
align-self: stretch;
margin: 0 auto;
}
.footer-theme-v2 .footer-payment-method-v2 b{
color: #ED6565;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
}
.footer-theme-v2 .footer-payment-method-v2 .superparent-list-payment-method-v2{
position: relative;
}
.footer-theme-v2 .footer-payment-method-v2 .superparent-list-payment-method-v2::before{
top: 0;
left: 0;
background: linear-gradient(270deg, rgba(243, 243, 255, 0.00) 0%, #e5e6febf 90%);
content: "";
position: absolute;
z-index: 2;
width: 100px;
height: 100%;
}
.footer-theme-v2 .footer-payment-method-v2 .superparent-list-payment-method-v2::after{
top: 0;
right: 0;
background: linear-gradient(90deg, rgba(243, 243, 255, 0.00) 0%, #e5e6febf 90%);
content: "";
position: absolute;
z-index: 2;
width: 100px;
height: 100%;
}
.footer-theme-v2 .footer-payment-method-v2 .parent-list-payment-method-v2{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
}
.footer-theme-v2 .footer-payment-method-v2 .list-payment-method-v2{
display: flex;
max-width: 99vw;
width: 100%;
padding: 15px 0px;
align-items: center;
gap: 15px;
overflow: auto;
}
.footer-theme-v2 .footer-payment-method-v2 .list-payment-method-v2 .item-payment-method-v2{
display: flex;
width: 125px;
padding: 15px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
border: 1px solid #CDCDCD;
background: #FFF;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
margin-left: 5px;
margin-right: 5px;
height:60px;
}
.footer-theme-v2 .footer-payment-method-v2 .list-payment-method-v2 .item-payment-method-v2 img{
width: 80px;
height: auto;
}
.footer-theme-v2 .footer-payment-method-v2 p{
color: var(--sc-blue-600);
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 100% */
}
.frame-social-media-v2{
display: flex;
align-items: center;
gap: 20px;
align-self: stretch;
justify-content: center;
}
.frame-social-media-v2 a{
text-decoration: none !important;
display: flex;
padding: 4px;
align-items: center;
gap: 10px;
/* align-self: stretch; */
border-radius: 10px;
width: 32px;
height: 32px;
border: 1px solid white;
}
.frame-social-media-v2 a:hover{
background: var(--sc-blue-200);
border: 1px solid var(--sc-blue-500);
}
.frame-social-media-v2 a img{
width: 100%;
height: 36px;
border-radius: 8px;
}
.frame-social-media-v2-mobile {
display: none;
}
/* burger menu */
.burger-menu-v3{
position: relative;
}
.burger-menu-v3 .menu-pop-theme-v3{
background: #FFF;
position: absolute;
z-index: 1000;
border-radius: 12px;
box-shadow: 0px 10px 5px 0px #0000001c;
margin-top: 18px;
right: -5px;
}
.burger-menu-v3 .menu-pop-theme-v3 .arrow-up{
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #fff;
position: absolute;
top: -12px;
right: 12px;
}
.burger-menu-v3 .menu-pop-theme-v3 ul{
list-style: none;
padding: 0;
margin: 0;
}
.burger-menu-v3 .menu-pop-theme-v3 ul li{
}
.burger-menu-v3 .menu-pop-theme-v3 ul li a{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
text-decoration: none;
padding: 15px 20px;
min-width: 200px;
transition: 0.2s;
border-radius: 12px;
}
.burger-menu-v3 .menu-pop-theme-v3 ul li:hover a{
background: var(--sc-blue-200);
}
.burger-menu-v3 .menu-pop-theme-v3 ul li:hover a .right b{
color:var(--sc-blue-500);
}
.burger-menu-v3 .menu-pop-theme-v3 ul li a .right{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: center;
align-items: flex-start;
/* margin-left: 10px; */
}
.burger-menu-v3 .menu-pop-theme-v3 ul li a .right b{
overflow: hidden;
color: var(--Midnight-700);
text-overflow: ellipsis;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.14px;
}
.frame-info-product-v3{
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
/* gap: 2rem; */
margin: 0 auto;
align-items: center;
}
.frame-info-product-v3 .bg-thumbnail-overlay{
display: flex;
height: 250px;
flex-direction: column;
align-items: center;
gap: 20px;
background-size: cover;
width: 100%;
justify-items: center;
justify-content: flex-end;
}
.game-name-wrapper {
display: flex;
padding: 10px 0px;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
border-top: 1px solid #F3F3F3;
background: rgba(206, 206, 206, 0.50);
backdrop-filter: blur(14px);
}
.game-info-wrapper {
display: flex;
width: 1320px;
align-items: center;
gap: 10px;
}
.game-info-wrapper img {
width: 29px;
height: 29px;
aspect-ratio: 1/1;
border-radius: 6px;
}
.game-info-wrapper h1 {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.18px;
margin: 0px;
}
.game-info-wrapper .glass-badge h2 {
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.14px;
margin: 0px;
text-align: center;
}
.game-info-wrapper .glass-badge {
display: flex;
padding: 5px 8px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 5px;
border: 1px solid #FFF;
background: rgba(118, 117, 126, 0.50);
}
.top-content-header-info-product-v2{
display: flex;
align-items: center;
gap: 16px;
justify-content: space-between;
width: 100%;
max-width: 1340px;
}
.left-info-product-v2{
display: flex;
align-items: center;
gap: 16px;
align-self: stretch;
}
.left-info-product-v2 img{
width: 80px;
height: 80px;
border-radius: 8px;
border: 1px solid var(--gray-300)
}
.properties-info-product-v2{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
align-self: stretch;
justify-content: center;
}
.properties-info-product-v2 h1{
margin: 0px;
color: var(--gray-800);
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
align-self: stretch;
}
.properties-info-product-v2 h2{
color: var(--orange-dark-400);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
align-self: stretch;
margin: 0px;
}
.right-info-product-v2{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.right-info-product-v2 b{
color: var(--gray-600);
font-size: 14px;
font-style: normal;
font-weight: 500;
}
.right-info-product-v2 .download-list-info-product-v2{
display: flex;
align-items: center;
gap: 16px;
align-self: stretch;
}
.right-info-product-v2 .download-list-info-product-v2 a{
border-radius: 58px;
background: var(--sc-blue-500);
display: flex;
padding: 10px 16px;
justify-content: center;
align-items: center;
gap: 10px;
color: #fff;
text-decoration: none;
transition: all .2s ease;
}
.right-info-product-v2 .download-list-info-product-v2 a:hover{
background: var(--sc-blue-600);
backdrop-filter: blur(8px);
}
.right-info-product-v2 .download-list-info-product-v2 a i{
font-size: 14px;
}
.right-info-product-v2 .download-list-info-product-v2 a span{
color: var(--gray-800);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.frame-info-product-v3 .header-info-product-v2 .bottom-content-header-info-product-v2{
max-width: 1340px;
width: 100%;
display: none;
}
.frame-info-product-v3 .header-info-product-v2 .bottom-content-header-info-product-v2 p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
align-self: stretch;
overflow: hidden;
color: rgba(226, 232, 255, 0.80);
text-overflow: ellipsis;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px; /* 128.571% */
margin-bottom: 0px;
}
.content-product {
padding: 0rem 1rem;
width: 100%;
display: flex;
justify-content: center;
background-image: linear-gradient(#f5f3ff 1px, transparent 1px), linear-gradient(to right, #f5f3ff 1px, transparent 1px);
background-size: 80px 80px;
}
.frame-info-product-v3 .content-info-product-v2{
display: flex;
max-width: 1340px;
width: 100%;
align-items: flex-start;
gap: 20px;
margin-bottom: 65px;
padding-top: 36px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-sidebar-info-product-v2{
display: flex;
width: 422px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20px;
flex-shrink: 0;
}
.frame-info-product-v3 .content-info-product-v2 .frame-sidebar-info-product-v2 .sidebar-info-product-v2{
display: flex;
padding: 1.75rem;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
align-self: stretch;
border-radius: 12px;
border: 1px solid var(--Midnight-50);
box-shadow: 0px -12px 19.1px 0px #FFF inset;
backdrop-filter: blur(2px);
background-color: #ffffff80;
clip-path: polygon(30px 0%, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0% 30px);
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-sidebar-info-product-v2 .sidebar-info-product-v2::after{
display: flex;
padding: 1rem;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
align-self: stretch;
border-radius: 12px;
border: 1px solid var(--Midnight-50);
box-shadow: 0px -12px 19.1px 0px #FFF inset;
backdrop-filter: blur(2px);
background-color: #ffffff;
clip-path: polygon(30px 0%, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0% 30px);
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-sidebar-info-product-v2 .sidebar-info-product-v2 .frame-title-sidebar{
}
.bottom-content-header-info-product-v2 h4 {
color: var(--Bushido-Red-500);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-bottom: 12px;
}
.bottom-content-header-info-product-v2 p{
overflow: hidden;
color: #6D6A81;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px; /* 142.857% */
}
.sidebar-info-product-v2 .frame-title-sidebar h4{
color: var(--Bushido-Red-500);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-bottom: 12px;
}
.sidebar-info-product-v2 .game-recomendation-v2{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-info-product-v2 .game-recomendation-v2 li{
width: 100%;
}
.sidebar-info-product-v2 .game-recomendation-v2 li a{
text-decoration: none;
display: flex;
padding: 12px;
align-items: center;
gap: 12px;
align-self: stretch;
border-radius: 12px;
border: 1px solid var(--Midnight-50);
background: #fff;
width: 100%;
transition: all .2s ease;
}
.sidebar-info-product-v2 .game-recomendation-v2 li a:hover{
text-decoration: none;
border: 1px solid var(--Bushido-Red-500);
background: rgba(225, 81, 81, 0.10);
}
.sidebar-info-product-v2 .game-recomendation-v2 li a:hover span{
color: var(--Bushido-Red-600)
}
.sidebar-info-product-v2 .game-recomendation-v2 li a img{
width: 45px;
height: 45px;
border-radius: 5px;
}
.sidebar-info-product-v2 .game-recomendation-v2 li a span{
color: var(--Midnight-500);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.sidebar-info-product-v2 .frame-content-sidebar{
}
.sidebar-info-product-v2 .frame-content-sidebar img{
max-width: 100%;
border-radius: 6px;
margin-bottom: 8px;
}
.sidebar-info-product-v2 .frame-content-sidebar p{
color: var(--Midnight-500) !important;
font-size: 16px;
font-style: normal;
line-height: normal;
margin: 0;
}
.sidebar-info-product-v2 .frame-content-sidebar a{
color: var(--sc-blue-500);
text-decoration: none;
}
.sidebar-info-product-v2 .frame-content-sidebar span{
color: var(--Midnight-400) !important;
}
.sidebar-info-product-v2 .frame-content-sidebar strong{
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
flex: 1 0 0;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2{
display: flex;
flex-direction: column;
align-items: center;
gap: 0px;
align-self: stretch;
border-radius: 12px;
border: 1px solid var(--Midnight-100);
/* padding: 10px; */
background: #fff;
}
.frame-info-product-v3 .content-info-product-v2 .frame-sidebar-info-product-v2 .frame-social-media-v2{
display: flex;
align-items: flex-start;
gap: 20px;
align-self: stretch;
}
.frame-info-product-v3 .content-info-product-v2 .frame-sidebar-info-product-v2 .frame-social-media-v2 a{
text-decoration: none !important;
display: flex;
padding: 4px;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 10px;
background: #373737;
border: 1px solid #4e4e4e;
}
.frame-info-product-v3 .content-info-product-v2 .frame-sidebar-info-product-v2 .frame-social-media-v2 a:hover{
background: radial-gradient(100% 100% at 50% 0%, #434247 0%, #2A2B2F 100%);
border: 1px solid var(--sc-blue-400);
}
.frame-info-product-v3 .content-info-product-v2 .frame-sidebar-info-product-v2 .frame-social-media-v2 a img{
width: 36px;
height: 36px;
border-radius: 8px;
}
.transaksi-game-help .help-content{
display: flex;
}
/* bantuan */
.transaksi-game-help{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
margin-top: 20px;
}
.transaksi-game-help .help-content{
display: flex;
align-items: center;
gap: 5px;
align-content: center;
flex-direction: row;
}
.transaksi-game-help .help-content img{
width: 20px;
height: 20px;
display: flex;
align-self: stretch;
/* filter: invert(90%) sepia(89%) saturate(52%) hue-rotate(347deg) brightness(111%) contrast(98%); */
}
.transaksi-game-help .help-content b{
color: var(--Midnight-700);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */
}
.transaksi-game-help p{
color: var(--Midnight-600);
font-size: 14px;
font-style: normal;
font-weight: 400;
margin: 0px;
align-self: stretch;
}
.transaksi-game-help p a{
color: var(--sc-blue-500);
font-style: normal;
font-weight: 600;
text-decoration: none;
}
/* bantuan end */
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-header-product-v2{
background: url('https://digivospaces.b-cdn.net/UniPlay/Icons/bushido-head.png'),
#AC3434;
background-repeat: no-repeat;
background-size: cover;
display: flex;
padding: 1rem;
border-radius: 11px 11px 0px 0px;
align-items: center;
gap: 16px;
align-self: stretch;
background-size: inherit;
background-position: top right;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-header-product-v2 span{
display: flex;
width: 28px;
height: 28px;
padding: 6px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
background: var(--sc-blue-500);
color: #ffffff;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 100% */
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-header-product-v2 h3{
color: #FFF;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin: 0px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2{
display: flex;
align-items: center;
gap: 16px;
align-self: stretch;
padding: 1rem;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2 .frame-input-inner{
flex: 1 0 0;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2 .frame-input-inner .error{
color: #E03F3F;
font-size: 16px;
display: block;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2 input{
display: flex;
padding: 16px 14px;
justify-content: center;
align-items: center;
gap: 10px;
flex: 1 0 0;
border-radius: 8px;
border: 1px solid var(--Midnight-100);
background: var(--Midnight-25);
outline: none !important;
box-shadow: none !important;
width: 100%;
text-align: center;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2 input:focus{
border: 1px solid var(--sc-blue-500);
background: var(--sc-blue-200);
color: var(--Midnight-600);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2 select{
display: flex;
padding: 16px 14px;
justify-content: center;
align-items: center;
gap: 10px;
flex: 1 0 0;
border-radius: 8px;
border: 1px solid var(--Midnight-100);
background: var(--Midnight-25);
color: var(--Midnight-600);
outline: none !important;
box-shadow: none !important;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 16px 12px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2 select:hover{
border: 1px solid var(--sc-blue-500);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2 select:focus{
border: 1px solid var(--sc-blue-500);
background: var(--sc-blue-200);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .how-to-product-v2{
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 0rem 1rem 1rem 1rem;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .how-to-product-v2 p{
color: var(--gray-700);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .how-to-product-v2 a{
font-size: 24px;
color: var(--sc-blue-500);
text-decoration: none;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .how-to-product-v2 a:hover {
color: var(--sc-blue-500);
}
.mlseparator{
position: relative;
}
.mlseparator input{
padding-left: 25px !important;
padding-right: 25px !important;
}
.mlseparator:before{
content: "(";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 700;
position: absolute;
margin-top: 12px;
font-size: 20px;
margin-left: 10px;
color: #ffffff;
z-index: 99;
}
.mlseparator:after{
content: ")";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 700;
position: absolute;
/* margin-top: 6px; */
font-size: 20px;
right: 10px;
top: 12px;
color: #ffffff;
z-index: 99;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom{
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
align-content: baseline;
gap: 15px;
width: 100%;
padding: 1rem 1rem;
border-radius: 12px;
transition: all 0.1s;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
border-radius: 10px;
border: 1px solid var(--Midnight-100);
background: #fff;
cursor: pointer;
padding: 6px;
transition: all 0.1s;
}
/* denom hover*/
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li:hover{
border: 1px solid var(--sc-blue-500);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li:hover .pricing-icon {
background-color: #F5F8FF;
opacity: 1;
background: repeating-linear-gradient( -45deg, #3159C0, #3159C0 20px, #2C52B3 20px, #2C52B3 40px );
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li:hover .pricing-icon span{
color: #fff!important;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li:hover .pricing-icon small{
color: #fff!important;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li:hover .pricing-icon i{
color: #fff!important;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li.active{
border-radius: 10px;
border: 1px solid var(--Midnight-100);
background: #20315D;
box-shadow: 0px 0px 0px 2px rgba(49, 89, 192, 0.25);
transition: all 0.1s;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li.active .pricing-icon {
background-color: #F5F8FF!important;
opacity: 1!important;
background: repeating-linear-gradient( -45deg, #3159C0, #3159C0 20px, #2C52B3 20px, #2C52B3 40px )!important;
transition: all 0.1s;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li.active b{
color: #fff;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li.active i{
color: #fff!important;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li.active .pricing-icon .pricing-detil small{
color: #fff!important;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li.active .pricing-icon .pricing-detil span{
color: #fff!important;
font-weight: 600;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li.active .product-name-v3{
transition: all .2s ease;
background: var(--orange-dark-50);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li.active .pricing-icon{
background: var(--orange-dark-400);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li b{
color: var(--gray-800);
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 22px; /* 146.667% */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li .product-name-v3 {
display: flex;
padding: 12px 12px 8px 12px;
background: #fff;
align-items: flex-start;
align-self: stretch;
justify-content: space-between;
min-height: 60px;
max-height: 80px;
border-radius: inherit;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li .pricing-icon{
display: flex;
padding: 6px 12px;
align-items: center;
align-self: stretch;
justify-content: space-between;
border-radius: 8px;
transition: all .2s ease;
background-color: #F5F8FF;
opacity: 1;
background: repeating-linear-gradient( -45deg, #F0F4FF, #F0F4FF 20px, #F5F8FF 20px, #F5F8FF 40px );
transition: all 0.1s;
height: 45px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li .pricing-icon i{
color: var(--sc-blue-500);
font-size: 14px;
display: flex;
align-content: center;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li .pricing-icon .pricing-detil{
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li .pricing-icon .pricing-detil small{
color: var(--Bushido-Red-600);
font-size: 10px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-decoration: line-through;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li .pricing-icon .pricing-detil span{
color: var(--sc-blue-500);
font-size: 16px;
font-style: normal;
letter-spacing: 0.2px;
font-weight: 600;
line-height: normal;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method{
width: 100%;
padding: 1rem;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box{
background: #fff;
margin-bottom: 18px;
border-radius: 8px !important;
border: 1px solid var(--Midnight-100);
transition: all .2s ease;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box:hover{
border: 1px solid var(--sc-blue-500);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box.active{
border: 1px solid var(--sc-blue-500);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .header{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
/* padding: 11px 15px; */
padding: 18px 24px;
background: #fff;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
cursor: pointer;
position: relative;
background: var(--sc-blue-200);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .header .left{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
gap: 8px;
/* width: 100%; */
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .header .left img{
height: 23px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .header .left b{
color: var(--Midnight-700);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .header .left b.badge-promotion-on-head{
display: flex;
padding: 5px 10px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 33px;
background: var(--sc-blue-500);
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 13px; /* 92.857% */
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .header .right{
display:flex;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .header .right b{
color: var(--Midnight-700);
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-align: right;
}
.tidak-tersedia {
color: var(--Midnight-700);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-align: right;
font-style: italic;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment{
display: none;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul{
list-style: none;
display: flex;
padding: 1rem;
justify-content: space-between;
align-content: space-between;
gap: 10px;
align-self: stretch;
background: #fff;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row;
margin-bottom: 0px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li{
display: flex;
padding: 10px;
flex-direction: row;
align-items: flex-start;
gap: 8px;
border-radius: 8px;
background: #fff;
width: calc(51% - 15px);
box-sizing: border-box;
cursor: pointer;
justify-content: space-between;
border: 1px solid var(--Midnight-100);
position: relative;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li .ribbon__content{
position: absolute;
right: 0;
display: flex;
padding: 2px 6px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 4px;
border: 1px solid var(--sc-blue-500);
background: linear-gradient(180deg, #4B79EE 0%, #3159C0 109.88%);
color: var(--BaseWhite, #FFF);
text-align: center;
font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: 14px;
top: -12px;
right: 10px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li:hover{
border: 1px solid var(--sc-blue-500);
box-shadow: 0px 0px 0px 2px rgba(49, 89, 192, 0.25);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li.active{
border: 1px solid var(--sc-blue-500);
box-shadow: 0px 0px 0px 2px rgba(49, 89, 192, 0.25);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li.disabled{
border: 1px solid #E5E5E5;
background: var(--Midnight-50);
pointer-events: none !important;
opacity: 0.8;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li .info-top{
padding: 16px 0px;
width: 160px;
border-radius: 4px;
display: flex;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li .info-top img{
height: 24px;
flex-shrink: 0;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li .info-top b{
color: #514A6D;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li .info-bottom{
display: flex;
align-self: stretch;
flex-direction: column;
justify-content: center;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li .info-bottom b{
color: var(--Midnight-600);
font-size: 14px;
font-weight: 400;
text-align: right;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li .info-bottom .channel-name {
color: var(--Midnight-500);
text-align: right;
font-size: 12px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li .info-bottom .value-channel{
color: var(--sc-blue-400);
font-weight: 700;
font-size: 16px;
text-align: right;
}
.info-bottom .channel-fee {
font-size: 12px;
color: var(--Midnight-300);
text-align: right;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .short-payment-support-info{
display: flex;
padding: 1rem;
align-items: center;
gap: 10px;
align-self: stretch;
justify-content: space-between;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .short-payment-support-info img{
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .short-payment-support-info .banks-payment-support-lists{
display: flex;
align-items: center;
gap: 15px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .short-payment-support-info .banks-payment-support-lists img{
height: 15px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .short-payment-support-info a.open-button-action-payment{
color: var(--gray-700);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .short-payment-support-info a.open-button-action-payment i{
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .short-payment-support-info .channel-not-available{
}
/* AREA KONFIRMASI PEMBAYARAN */
.konfirmasi-pembelian-area-theme-v2{
display: flex;
justify-content: center;
align-items: flex-start;
gap: 26px;
align-self: stretch;
padding: 1rem 1rem 0 1rem ;
background: #fff;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2{
width: 100%;
/* padding-top: 20px; */
/* gap: 20px; */
/* flex: 1; */
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .header-konfirmasi-pembelian-input-theme-v2{
display: flex;
width: 100%;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .header-konfirmasi-pembelian-input-theme-v2 i{
color: var(--sc-blue-500);
font-size: 14px;
transform: rotate(-37deg);
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .header-konfirmasi-pembelian-input-theme-v2 b{
color: var(--Midnight-700);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 21px; /* 131.25% */
flex: 1 0 0;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .form-frame-v2{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
align-self: stretch;
width: 100%;
padding-bottom: 20px;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .form-frame-v2 label{
display: flex;
height: 24px;
flex-direction: column;
justify-content: center;
align-self: stretch;
color: var(--Midnight-700);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .form-frame-v2 input{
display: flex;
padding: 10px 12px;
align-items: flex-end;
gap: 10px;
align-self: stretch;
width: 100%;
border-radius: 8px;
border: 1px solid var(--Midnight-100);
color: var(--Midnight-800);
background: var(--Midnight-25);
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
outline:none !important;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .form-frame-v2 input::placeholder{
color: var(--Midnight-200);
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .form-frame-v2 input:hover{
border: 1px solid var(--sc-blue-500);
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .form-frame-v2 input:focus{
background: var(--sc-blue-200);
border: 1px solid var(--sc-blue-500);
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .form-frame-v2 input::-webkit-outer-spin-button,
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .form-frame-v2 input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .form-frame-v2 small{
color: var(--Midnight-200);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
align-self: stretch;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .form-frame-v2 input:hover {
border: 0px;
border: 1px solid var(--sc-blue-500);
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .form-frame-v2 .wrong-email-badge{
margin: 0px;
color: var(--Bushido-Red-500);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
align-self: stretch;
display: none;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .seaparator-frame-v2{
position: relative;
width: 100%;
margin-top: 12px;
margin-bottom: 12px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .seaparator-frame-v2::before{
content: " ";
width: 145px;
height: 1px;
position: absolute;
background: #fff;
z-index: 99;
top: 10px;
left: 0;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .seaparator-frame-v2 span{
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 128.571% */
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .seaparator-frame-v2::after{
content: " ";
width: 145px;
height: 1px;
position: absolute;
background: #fff;
z-index: 99;
top: 10px;
right: 0;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2{
width: 100%;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2 table{
width: 100%;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2 table tr{
border-bottom: 1px solid var(--Midnight-100);
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2 table tr td{
color: var(--Midnight-600);
font-size: 16px;
font-style: normal;
font-weight: 400;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2 table tr td b{
color: var(--Midnight-700);
text-align: right;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 22.5px; /* 150% */
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2 table tr td:first-child{
text-align: left;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2 table tr td:last-child{
text-align: right;
/* width: 50%; */
display: flex;
justify-content: flex-end;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2 table tr td img {
max-height: 20px;
padding-right: 8px;
}
.payment-total-wrapper .area-payment-final-preview{
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%;
align-items: center;
padding: 0px 16px;
}
.payment-total-wrapper .discount-row-v3{
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%;
align-items: center;
padding: 0px 16px;
}
.payment-total-wrapper .discount-row-v3 span{
font-size: 16px;
font-weight: 400;
color: var(--Midnight-600);
}
.payment-total-wrapper .discount-row-v3 b{
font-size: 16px;
font-weight: 400;
color: var(--Midnight-600);
}
.frame-denom-info-product-v2 .denom-info-product-v2 .payment-total-wrapper .area-payment-final-preview .logo-payment-final-preview{
display: flex;
padding: 15px;
flex-direction: column;
align-items: center;
gap: 8px;
border-radius: 6px;
background: #FFF;
width: 104px;
}
.frame-denom-info-product-v2 .denom-info-product-v2 .payment-total-wrapper .area-payment-final-preview .logo-payment-final-preview img{
height: 30px;
max-width: 100%;
object-fit: contain;
}
.frame-denom-info-product-v2 .denom-info-product-v2 .payment-total-wrapper .area-payment-final-preview b{
color: var(--Midnight-700);
font-size: 18px;
font-style: normal;
font-weight: 600;
display: flex;
}
.frame-denom-info-product-v2 .denom-info-product-v2 .payment-total-wrapper .area-payment-final-preview span {
color: var(--Midnight-700);
font-weight: 600;
font-size: 18px;
}
.frame-denom-info-product-v2 .konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2 span{
color: var(--Midnight-700);
font-size: 12px;
font-style: normal;
font-weight: 600;
display: flex;
}
.frame-denom-info-product-v2 .denom-info-product-v2 .payment-total-wrapper {
border-top: dashed 2px var(--sc-blue-400);
border-bottom: dashed 2px var(--sc-blue-400);
background: var(--sc-blue-200);
display: flex;
padding: 14px 0px;
justify-content: space-between;
align-items: center;
align-self: stretch;
flex-direction: column;
gap: 6px;
}
.submit-pembelian-area-theme-v2{
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 1.25rem 1rem;
width: 100%;
}
.submit-pembelian-area-theme-v2 button{
display: flex;
padding: 1rem 3rem;
justify-content: center;
align-items: center;
gap: 16px;
border-radius: 80px;
border: 1px solid var(--Bushido-Red-500);
background: var(--Bushido-Red-500);
text-align: center;
font-size: 16px;
font-weight: 700;
align-content: center;
transition: all .2s ease;
cursor: pointer;
color: #fff;
}
.submit-pembelian-area-theme-v2 button.disabled{
border: 1px solid var(--Midnight-100);
pointer-events: none !important;
color: #fff;
background: var(--Midnight-100);
}
.submit-pembelian-area-theme-v2 button:hover{
border: 1px solid var(--Bushido-Red-600);
background: var(--Bushido-Red-600);
}
.submit-pembelian-area-theme-v2 .transaksi-aman-logo{
display: flex;
align-items: center;
gap: 20px;
}
.submit-pembelian-area-theme-v2 .transaksi-aman-logo img{
width: 87px;
height: 28.67px;
object-fit: cover;
}
.area-insert-coupons-before-checkout{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
align-self: stretch;
margin-top: 20px;
margin-bottom: 20px;
}
.area-insert-coupons-before-checkout b{
height: 24px;
color: var(--gray-800);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
.area-insert-coupons-before-checkout b a.coupon-field-trigger{
color: var(--sc-blue-500);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
text-decoration: none !important;
}
.area-insert-coupons-before-checkout b a.coupon-field-trigger:hover{
}
.area-insert-coupons-before-checkout .frame-area-insert-coupon{
display: flex;
padding: 10px 14px;
align-items: center;
align-self: stretch;
border: 1px solid var(--Midnight-100);
background: var(--Midnight-25);
position: relative;
border-radius: 8px;
}
.area-insert-coupons-before-checkout .frame-area-insert-coupon input{
width: 100%;
background-color: #2F2F3300 !important;
border: 0;
padding: 0;
color: var(--Midnight-700);
outline: none !important;
box-shadow: none !important;
border: none !important;
}
.area-insert-coupons-before-checkout .frame-area-insert-coupon:focus-within{
background: var(--sc-blue-200)!important;
}
.area-insert-coupons-before-checkout .frame-area-insert-coupon input:focus{
background: var(--sc-blue-200) !important;
}
.area-insert-coupons-before-checkout .frame-area-insert-coupon input::placeholder{
color: var(--Midnight-200);
}
.area-insert-coupons-before-checkout .frame-area-insert-coupon:hover{
border: 1px solid var(--sc-blue-500);
}
.area-insert-coupons-before-checkout .frame-area-insert-coupon:focus-within{
border: 1px solid var(--sc-blue-500);
}
.area-insert-coupons-before-checkout .frame-area-insert-coupon a.frame-coupon-discount-applied{
display: flex;
padding: 4px 8px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 6px;
background: var(--sc-blue-400);
color: #fff;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px;
text-decoration: none;
outline: none !important;
box-shadow: none !important;
}
.area-insert-coupons-before-checkout .frame-area-insert-coupon a.frame-coupon-discount-applied:hover{
background: var(--sc-blue-600);
}
.area-insert-coupons-before-checkout .frame-area-insert-coupon a.frame-coupon-discount-applied.removed_disc{
background: #ff0000;
color: #fff;
}
.area-insert-coupons-before-checkout .parent-frame-area-insert-coupon{
width: 100%;
display: none;
}
.area-insert-coupons-before-checkout .frame-coupon-discount-errormsg{
color: var(--Midnight-400);
font-size: 12px;
font-style: italic;
font-weight: 400;
line-height: 16.5px; /* 150% */
}
b.frame-coupon-discount-errormsg .discount-amount {
color: var(--Midnight-400);
font-size: 16px;
}
.area-insert-coupons-before-checkout .frame-coupon-discount-errormsg.success{
color: var(--sc-blue-500);
font-weight: 600;
}
.area-insert-coupons-before-checkout .frame-coupon-discount-errormsg.failed{
color: #FF1A1A !important;
}
input.user_id.first-input.inputuserandserver::placeholder {
color: var(--Midnight-100);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2 input:hover{
border: 1px solid var(--sc-blue-500);
}
.transaction-progress-success{
display: flex;
max-width: fit-content;
justify-content: center;
gap: 24px;
padding: 20px;
/* border-radius: 8px; */
/* border: 1px solid rgba(255, 255, 255, 0.20); */
/* background: rgba(11, 13, 25, 0.20); */
margin: 0 auto;
margin-top: 31px;
margin-bottom: 60px;
flex-direction: column;
border-radius: 12px;
border: 1px solid #E5E5E5;
background: #FFF;
}
.transaction-progress-success h1{
color: var(--Midnight-700);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-align: center;
}
.transaction-progress-v2{
display: flex;
max-width: 1340px;
/* padding: 20px; */
justify-content: center;
gap: 24px;
padding: 1rem;
/* border-radius: 8px; */
/* border: 1px solid rgba(255, 255, 255, 0.20); */
/* background: rgba(11, 13, 25, 0.20); */
margin: 0 auto;
margin-top: 31px;
margin-bottom: 60px;
flex-direction: row;
/* align-content: center; */
align-items: flex-start;
}
.transaction-progress-v2 h1{
color: var(--Midnight-700);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-align: center;
}
/* side mobile */
.wrapper-info-product {
width: 100%;
}
.stepper-wrapper {
display: flex;
width: 100%;
max-width: 600px;
margin: 0 auto;
flex-direction: row;
flex-wrap: nowrap;
}
.stepper-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
@media (max-width: 768px) {
.stepper-item {
font-size: 12px;
}
}
.stepper-item::before {
position: absolute;
content: "";
border-bottom: 2px solid var(--sc-blue-500);
width: 100%;
top: 16px;
left: -50%;
z-index: 2;
}
.stepper-item::after {
position: absolute;
content: "";
border-bottom: 2px solid #C5CACE;
width: 100%;
top: 16px;
left: 50%;
z-index: 3;
}
.stepper-item .step-counter {
position: relative;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--Midnight-400);
margin-bottom: 6px;
font-size: 13px;
color: #fff;
}
.stepper-item .step-name {
color: var(--Midnight-400);
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.stepper-item.completed .step-name{
color: var(--sc-blue-500);
}
.stepper-item.active {
font-weight: bold;
}
.stepper-item.completed .step-counter {
background-color: var(--sc-blue-400);
color: #fff;
}
.stepper-item.completed::after {
position: absolute;
content: "";
border-bottom: 2px solid var(--sc-blue-400);
width: 100%;
top: 16px;
left: 50%;
z-index: 3;
}
.stepper-item:first-child::before {
content: none;
}
.stepper-item:last-child::after {
content: none;
}
.frame-transaction-progress-details{
width: 60%;
display: flex;
align-items: center;
gap: 25px;
align-self: stretch;
flex-direction: column;
background: #fff;
padding: 20px;
border: solid 1px var(--Midnight-100);
border-radius: 8px;
}
.payment-transaction-progress-details{
display: flex;
width: 40%;
flex-direction: column;
align-items: flex-start;
border-radius: 10px;
border: 1px solid var(--Midnight-100);
}
.payment-transaction-progress-details .header-payment-transaction-detail{
display: flex;
height: 54px;
padding: 15px 20px;
align-items: center;
gap: 27px;
align-self: stretch;
background: var(--sc-blue-400);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom: 1px solid var(--Midnight-100);
}
.payment-transaction-progress-details .header-payment-transaction-detail img{
height: 28px;
padding: 4px 10px;
background: #fff;
border-radius: 4px;
}
.payment-transaction-progress-details .body-payment-transaction-detail{
display: flex;
padding: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
align-self: stretch;
background: var(--Midnight-25);
}
.payment-transaction-progress-details .body-payment-transaction-detail .amount-must-pay{
color: var(--Midnight-700);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
letter-spacing: 1px;
margin: 0;
}
.payment-transaction-progress-details .body-payment-transaction-detail .amount-must-pay span{
color: var(--Bushido-Red-500);
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1px;
}
.payment-transaction-progress-details .body-payment-transaction-detail .virtual-account-info{
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.payment-transaction-progress-details .body-payment-transaction-detail .virtual-account-info small{
/* color: #FFF; */
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 22.5px; /* 150% */
}
.payment-transaction-progress-details .body-payment-transaction-detail .virtual-account-info .virtual-account-info-number{
display: flex;
align-items: center;
gap: 10px;
}
.payment-transaction-progress-details .body-payment-transaction-detail .virtual-account-info .virtual-account-info-number b{
/* color: #FFF; */
text-align: right;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1.5px;
}
.payment-transaction-progress-details .body-payment-transaction-detail .virtual-account-info .virtual-account-info-number a{
border-radius: 5px;
border: 1px solid var(--Midnight-400);
background: #000;
display: flex;
padding: 5px;
align-items: center;
gap: 10px;
color: var(--sc-blue-400);
font-size: 12px;
text-decoration: none;
transition: all .2s ease;
}
.payment-transaction-progress-details .body-payment-transaction-detail .virtual-account-info .virtual-account-info-number a:hover{
background: var(--sc-blue-400);
color: #fff;
}
.payment-transaction-progress-details .body-payment-transaction-detail .tempo-time-info{
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.payment-transaction-progress-details .body-payment-transaction-detail .tempo-time-info small{
color: var(--Midnight-600);
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 22.5px; /* 150% */
}
.payment-transaction-progress-details .body-payment-transaction-detail .tempo-time-info b{
color: var(--Midnight-500);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-align: center;
}
.payment-transaction-progress-details .body-payment-transaction-detail .tempo-time-info b span{
color: var(--sc-blue-500);
text-align: right;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.frame-transaction-progress-details .info-transaction-progress-details{
}
.frame-transaksi-game-preview{
margin: 0 auto;
}
.frame-transaksi-game-preview .transaksi-game-preview{
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
flex-direction: row;
}
.frame-transaksi-game-preview .transaksi-game-preview img{
width: 75px;
height: 75px;
border-radius: 8px;
border: 1px solid var(--Midnight-100);
}
.frame-transaction-progress-details .info-transaction-progress-details .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail{
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.frame-transaksi-game-preview .transaksi-game-preview .tgp-detail{
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.frame-transaksi-game-preview .transaksi-game-preview .tgp-detail small{
color: var(--gray-600);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 22.5px; /* 150% */
}
.frame-transaksi-game-preview .transaksi-game-preview .tgp-detail b{
overflow: hidden;
color: var(--gray-800);
text-overflow: ellipsis;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 22.5px; /* 125% */
}
.frame-transaksi-game-preview .transaksi-game-preview .tgp-detail span{
color: var(--Bushido-Red-500);
font-size: 14px;
font-style: normal;
font-weight: 400;
}
/* CRK2 */
.frame-transaksi-game-preview .transaksi-game-detail{
margin-top: 20px;
}
.frame-transaksi-game-preview .transaksi-game-detail table{
width: 100%;
}
.frame-transaksi-game-preview .transaksi-game-detail table tr{
border: 0px;
/* border-bottom: 1px solid #ebf1f5; */
border-bottom: 1px solid var(--Midnight-50);
padding: 10px;
}
.frame-transaksi-game-preview .transaksi-game-detail table tr td{
/* background: white; */
color: var(--Midnight-600);
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 22.5px; /* 150% */
}
.frame-transaksi-game-preview .transaksi-game-detail table tr td b{
color: var(--gray-800);
text-align: right;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 22.5px; /* 150% */
/* padding: 10px; */
}
.frame-transaksi-game-preview .transaksi-game-detail table tr td:first-child{
text-align: left;
padding: 12px;
padding-left: 0px;
font-size: 16px;
line-height: normal;
}
.frame-transaksi-game-preview .transaksi-game-detail table tr td:last-child{
text-align: right;
padding-right: 0px;
padding: 12px 0px;
}
.frame-transaksi-game-preview .transaksi-game-detail table tr td .trx-number-info{
display: flex;
justify-content: flex-end;
align-items: center;
align-content: center;
gap: 6px;
flex-wrap: wrap;
}
.frame-transaksi-game-preview .transaksi-game-detail table tr td .frame-flex-end{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-end;
}
.frame-transaksi-game-preview .transaksi-game-detail table tr td .badge-self{
justify-content: flex-end;
}
.frame-transaksi-game-preview .transaksi-game-detail table tr td .trx-number-info b{
}
.frame-transaksi-game-preview .transaksi-game-detail table tr td .trx-number-info a{
border-radius: 5px;
border: 1px solid var(--Midnight-100);
background: #fff;
display: flex;
padding: 5px;
align-items: center;
gap: 10px;
color: var(--sc-blue-500);
font-size: 12px;
text-decoration: none;
transition: all .2s ease;
}
.frame-transaction-progress-details .info-transaction-progress-details .frame-transaksi-game-preview .transaksi-game-detail table tr td .trx-number-info a:hover{
background: var(--sc-blue-500);
border: 1px solid var(--sc-blue-500);
color: #fff;
}
.frame-transaksi-game-preview .transaksi-game-suggestion{
display: flex;
padding: 10px;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 8px;
border: 1px solid var(--sc-blue-400);
background: var(--sc-blue-200);
margin-top: 20px;
}
.frame-transaksi-game-preview .transaksi-game-suggestion p{
color: var(--gray-700);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
flex: 1 0 0;
margin: 0;
}
.frame-transaction-progress-details .info-transaction-progress-details .frame-transaksi-game-preview .transaksi-game-help{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
margin-top: 30px;
}
.frame-transaction-progress-details .info-transaction-progress-details .frame-transaksi-game-preview .transaksi-game-help .help-content{
display: flex;
align-items: center;
gap: 5px;
align-content: center;
flex-direction: row;
}
.frame-transaction-progress-details .info-transaction-progress-details .frame-transaksi-game-preview .transaksi-game-help .help-content img{
width: 20px;
height: 20px;
display: flex;
align-self: stretch;
}
.frame-transaction-progress-details .info-transaction-progress-details .frame-transaksi-game-preview .transaksi-game-help .help-content b{
color: var(--Bushido-Red-500);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 21px; /* 150% */
}
.frame-transaction-progress-details .info-transaction-progress-details .frame-transaksi-game-preview .transaksi-game-help p{
color: var(--gray-800);
font-size: 14px;
font-style: normal;
font-weight: 400;
margin: 0px;
align-self: stretch;
}
.frame-transaction-progress-details .info-transaction-progress-details .frame-transaksi-game-preview .transaksi-game-help p a{
color: var(--sc-blue-500);
font-size: 14px;
font-style: normal;
font-weight: 600;
text-decoration: none;
}
.panduan-simple-list{
width: 100%;
}
.panduan-simple-list .heading{
margin: 20px 0px;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.panduan-simple-list .heading i{
font-size: 18px;
color: var(--Midnight-700);
}
.panduan-simple-list .heading b{
color: var(--Midnight-700);
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.panduan-simple-list ol{
padding: 0;
margin: 0;
padding-left: 14px;
}
.panduan-simple-list ol li{
color: var(--Midnight-700);
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 146.667% */
}
.panduan-simple-list ol li:last-child{
margin-bottom: 0px;
}
.panduan-simple-list .panduan-lengkap{
margin-top: 20px;
}
.panduan-simple-list .panduan-lengkap .btn-panduan-lengkap{
display: flex;
padding: 8px 14px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 8px;
border: solid 1px var(--sc-blue-400);
background: var(--sc-blue-200);
color: var(--sc-blue-400);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-decoration: none;
width: 10rem;
text-align: center;
margin: 0 auto;
transition: all .2s ease;
}
.panduan-simple-list .panduan-lengkap .btn-panduan-lengkap:hover{
background: linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%), rgba(255, 255, 255, 0.05);
}
.panduan-simple-list .panduan-lengkap .btn-panduan-lengkap:active{
background: linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%), rgba(255, 255, 255, 0.05);
}
.panduan-simple-list .panduan-lengkap .btn-panduan-lengkap:focus{
background: linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%), rgba(255, 255, 255, 0.05);
}
.accrodion-how-to{
margin-bottom: 20px;
}
.accrodion-how-to .child-accordion{
/* background: white; */
/* border: 1px solid #e6e6e6; */
border: solid 1px var(--Midnight-300);
border-radius: 6px;
margin-bottom: 7px;
background: var(--Midnight-50);
}
.accrodion-how-to .child-accordion .header-accordion{
color: var(--Midnight-700);
font-size: 12px;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
cursor: pointer;
border-radius: 6px;
transition: all .2s ease;
}
.accrodion-how-to .child-accordion .header-accordion:hover{
}
.accrodion-how-to .child-accordion .header-accordion:hover i{
color: var(--sc-blue-500);
}
.accrodion-how-to .child-accordion .content-accordion{
/* margin-top: 13px; */
/* padding-top: 15px; */
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}
.accrodion-how-to .child-accordion .content-accordion hr{
border: 0;
border-top: 1px solid #a1a1a1;
margin-top: 0px;
border-top: 2px solid rgba(255, 255, 255, 0.20);
margin-bottom: 10px;
}
.accrodion-how-to .child-accordion .content-accordion ul{
padding: 0;
margin: 0;
padding-left: 14px;
}
.accrodion-how-to .child-accordion .content-accordion ol{
padding: 0;
margin: 0;
padding-left: 14px;
}
.accrodion-how-to .child-accordion .content-accordion li{
margin: 0 !important;
padding: 0;
/* margin-bottom: 10px !important; */
color: var(--Midnight-700);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 171.429% */
}
.accrodion-how-to .child-accordion .content-accordion li a{
}
.accrodion-how-to .child-accordion .content-accordion li a:hover{
}
.transaksi-aman{
display: flex;
padding: 1rem;
justify-content: center;
align-items: center;
gap: 26px;
align-self: stretch;
background: #fff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: 1px solid var(--Midnight-100);
}
.transaksi-aman img{
height: 38px;
}
.area-qrris{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
/* margin-bottom: 30px; */
}
.area-qrris img{
width: 171px;
height: 171px;
margin-bottom: 20px;
}
.area-qrris .download-qrcode{
display: flex;
padding: 6px 14px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 8px;
border: 1px solid var(--sc-blue-400);
background: var(--sc-blue-400);
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-decoration: none !important;
transition: 0.2s;
}
.area-qrris .download-qrcode:hover{
border: 1px solid var(--sc-blue-400);
background: var(--sc-blue-500);
}
.area-qrris .download-qrcode i{
font-size: 16px;
}
.frame-dompet{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
align-items: center;
}
.frame-dompet img{
width: 150px;
height: 150px;
margin-bottom: 20px;
}
.frame-dompet .btn-selesaikan-pembayaran{
display: flex;
padding: 6px 14px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 8px;
border: 1px solid var(--sc-blue-400);
background: var(--sc-blue-400);
box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.56) inset;
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-decoration: none !important;
}
.frame-dompet .btn-selesaikan-pembayaran:hover{
border: 1px solid var(--sc-blue-400);
background: var(--sc-blue-500);
box-shadow: 0px 0px 8px 0px rgb(255 255 255) inset;
}
.frame-dompet .btn-selesaikan-pembayaran i{
font-size: 16px;
}
/* SINGLE INFO PAYMENT CENTER */
.single-payment-finish-wrapper .frame-transaksi-game-preview{
/* margin: 0 auto; */
width: 600px;
margin: 0 auto;
margin-bottom: 20px;
}
/*
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-preview{
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-preview img{
width: 75px;
height: 75px;
border-radius: 8px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail{
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail small{
color: #FFF;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 22.5px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail b{
overflow: hidden;
color: #FFF;
text-overflow: ellipsis;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 22.5px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail span{
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 22.5px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail{
margin-top: 20px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail table{
width: 100%;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail table tr{
border: 0px;
border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail table tr td{
background: transparent;
color: var(--gray-600);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22.5px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail table tr td b{
color: #FFF;
text-align: right;
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 22.5px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail table tr td:first-child{
text-align: left;
padding-left: 0px;
padding: 12px;
padding-left: 0px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail table tr td:last-child{
text-align: right;
padding-right: 0px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail table tr td .trx-number-info{
display: flex;
justify-content: flex-end;
align-items: center;
align-content: center;
gap: 6px;
flex-wrap: wrap;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail table tr td .frame-flex-end{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-end;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail table tr td .badge-self{
justify-content: flex-end;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail table tr td .trx-number-info b{
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail table tr td .trx-number-info a{
border-radius: 5px;
border: 1px solid #fff;
background: #000;
display: flex;
padding: 5px;
align-items: center;
gap: 10px;
color: #fff;
font-size: 12px;
text-decoration: none;
transition: all ease .2s;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-detail table tr td .trx-number-info a:hover{
background: var(--orange-dark-500);
color: #13164E;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-suggestion{
display: flex;
padding: 10px;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(17, 8, 57, 0.80);
margin-top: 20px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-suggestion p{
color: var(--gray-600);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
flex: 1 0 0;
margin: 0;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-help{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
margin-top: 20px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-help .help-content{
display: flex;
gap: 5px;
flex-direction: row;
align-items: center;
align-content: center;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-help .help-content img{
width: 20px;
height: 20px;
display: flex;
align-self: stretch;
filter: invert(90%) sepia(89%) saturate(52%) hue-rotate(347deg) brightness(111%) contrast(98%);
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-help .help-content b{
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 27px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-help p{
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
margin: 0px;
align-self: stretch;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-help p a{
color: var(--orange-dark-500);
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 21px;
text-decoration: none;
}
*/
/* CEK TRANSAKSI SPECIAL CSS */
.cek-transaksi-frame{
margin-bottom: 40px;
display: flex;
width: 100%;
padding: 1rem;
/* max-width: 1140px; */
flex-direction: column;
align-items: center;
gap: 20px;
align-self: stretch;
/* justify-content: center; */
/* justify-items: center; */
/* align-items: center; */
align-content: center;
}
.cek-transaksi-header{
display: flex;
width: 100%;
max-width: 1340px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
/*background-overlay: url('../../img/cektransaksi-powerplay-bg.webp');*/
border-radius: 12px;
background: var(--sc-blue-500);
background-image: url("https://digivospaces.b-cdn.net/UniPlay/Icons/katana.png"), linear-gradient(#365AB7 1px, transparent 1px), linear-gradient(to right, #365AB7 1px, #2C52B3 1px);
background-position: right center, top left, top left;
background-repeat: no-repeat, repeat, repeat;
background-size: contain, 80px 80px, 80px 80px;
opacity: 1;
padding: 20px;
}
.cek-transaksi-header h1{
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.cek-transaksi-header .frame-frame-search-trx{
display: flex;
align-items: flex-start;
gap: 10px;
}
.cek-transaksi-header .frame-frame-search-trx .ffst-search{
position: relative;
}
.cek-transaksi-header .frame-frame-search-trx .on-error-text{
color: red;
font-size: 14px;
font-style: italic;
display: none;
}
.cek-transaksi-header .frame-frame-search-trx .ffst-search span{
position: absolute;
color: var(--Midnight-500);
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 26px;
top: 10px;
left: 16px;
z-index: 99;
}
.cek-transaksi-header .frame-frame-search-trx .ffst-search input{
display: flex;
width: 414px;
height: 47px;
padding: 12px 12px;
align-items: center;
gap: 10px;
text-indent: 115px;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
color: var(--Midnight-600);
border-radius: 40px;
background: #FFF;
outline: none!important;
border: none;
}
.cek-transaksi-header .frame-frame-search-trx .ffst-search input:hover{
border: none;
}
.cek-transaksi-header .frame-frame-search-trx .ffst-search input:focus{
background: var(--sc-blue-200);
color: var(--Midnight-700);
}
.cek-transaksi-header .frame-frame-search-trx .ffst-search input::placeholder{
color: var(--Midnight-100)!important;
}
.cek-transaksi-header .frame-frame-search-trx .hit-q-trx{
display: flex;
padding: 14px 24px;
justify-content: center;
align-items: center;
gap: 10px;
border: none;
border-radius: 49px;
background: #E15151;
box-shadow: 0px 4px 4px 0px #2A4CA4;
transition: all .2s ease;
}
.cek-transaksi-header .frame-frame-search-trx .hit-q-trx:hover{
background: var(--Bushido-Red-600);
}
.cek-transaksi-header .frame-frame-search-trx .hit-q-trx i{
font-size: 16px;
color: #fff !important;
}
.cek-transaksi-header .frame-frame-search-trx .hit-q-trx span{
color: #fff !important;
text-align: center !important;
font-size: 16px !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: normal !important;
}
.cek-transaksi-header .frame-footer-search-trx{
}
.cek-transaksi-header .frame-footer-search-trx p{
margin: 0;
color: #fff!important;
font-size: 14px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 22px !important;
}
.cek-transaksi-header .frame-footer-search-trx p a{
color: #fff !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: 22px !important;
text-decoration-line: underline !important;
}
.cek-transaksi-header .frame-footer-search-trx p a:hover{
color: var(--Bushido-Red-500) !important;
}
.cek-transaksi-content{
display: flex;
width: 100%;
max-width: 1340px;
padding: 2rem 1rem 3rem 1rem;
gap: 1rem;
border-radius: 12px;
border: 1px solid var(--Midnight-100);
background: #fff;
/* align-items: center; */
flex-direction: column;
}
.cek-transaksi-content .simulate-info-header{
display: flex;
width: 100%;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.cek-transaksi-content .simulate-info-header h5{
color: var(--gray-800);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.cek-transaksi-content .stepper-wrapper{
/* margin-left: auto !important; */
margin: 0 auto;
width: 600px;
}
.cek-transaksi-content .stepper-wrapper .stepper-item .step-name{
font-size: 12px;
}
.cek-transaksi-content .frame-transaksi-game-preview{
width: 600px;
margin: 0 auto;
}
.cek-transaksi-content h6{
color: var(--gray-700);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0px;
}
.cek-transaksi-content-table-wrapper{
border: 1px solid #E5E5E5;
border-radius: 8px;
width: 100%;
}
.cek-transaksi-content table{
width: 100%;
/* border: 1px solid #D9DFE2; */
}
.cek-transaksi-content table thead{
background: var(--sc-blue-500);
}
.cek-transaksi-content table thead tr{
}
.cek-transaksi-content table thead tr th:first-child{
border-top-left-radius: 4px;
/* border-left: 1px solid #D9DFE2; */
}
.cek-transaksi-content table thead tr th:last-child{
border-top-right-radius: 4px;
/* border-right: 1px solid #D9DFE2; */
}
.cek-transaksi-content table thead tr th{
padding: 12px 8px;
color: #fff;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
/* border-top: 1px solid #D9DFE2; */
}
.cek-transaksi-content table tbody{
}
.cek-transaksi-content table tbody tr{
}
.cek-transaksi-content table tbody tr td{
padding: 10px 8px;
color: var(--Midnight-600);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.cek-transaksi-content .cek-transaksi-content-table-wrapper table tbody tr:nth-child(odd) td {
background: var(--sc-blue-200);
}
.cek-transaksi-content table tbody tr:nth-child(even) td {
}
.cek-transaksi-content table tbody tr td .badge-self{
display: flex;
padding: 2px 12px;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 13px;
font-style: normal;
font-weight: 600;
line-height: 16px;
border-radius: 6px;
width: max-content;
}
.cek-transaksi-content table tbody tr td .badge-self.as-canceled{
color: #F00;
background: #FFC7C7;
}
.cek-transaksi-content table tbody tr td .badge-self.as-completed{
color: #03AC0E;
background: #D5FFDD;
}
.cek-transaksi-content table tbody tr td .badge-self.as-pending{
color: #AB8103;
background: #FFF4D5;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail{
margin-top: 20px;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail table{
}
.cek-transaksi-content .frame-action-button-transaksi-game{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
align-self: stretch;
margin-top: 20px;
}
.cek-transaksi-content .frame-action-button-transaksi-game a{
display: flex;
padding: 9px 20px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
color: #fff;
border: 1px solid var(--orange-dark-400);
background: var(--orange-dark-400);
box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.56) inset;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 23px;
transition: all .2s ease;
text-decoration: none !important;
}
.cek-transaksi-content .frame-action-button-transaksi-game a:hover{
border: 1px solid #fbba24;
background: var(--orange-dark-500);
box-shadow: 0px 0px 8px 0px rgb(255 255 255) inset;
}
.cek-transaksi-content .transaksi-game-help .help-content{
margin-top: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
}
.cek-transaksi-content .transaksi-game-help .help-content img{
width: 20px;
height: 22px;
margin-right: 15px;
}
.cek-transaksi-content .transaksi-game-help .help-content b{
color: var(--gray-800);
font-size: 18px;
}
.cek-transaksi-content .transaksi-game-help .help-content p{
color: var(--gray-800);
font-size: 14px;
}
.cek-transaksi-content .transaksi-game-help .help-content a{
color: var(--orange-dark-400);
text-decoration: none;
font-weight: 600;
}
.cek-transaksi-content-resp {
width: 100%;
max-width: 1340px;
}
.cek-transaksi-content-resp .single-payment-finish-wrapper{
margin: 0 auto;
width: 100%;
max-width: 1340px;
margin-top: 20px;
}
.content-with-sidebar-static{
display: flex;
padding: 1rem;
flex-direction: column;
align-items: center;
gap: 20px;
flex-shrink: 0;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
}
.content-with-sidebar-static .simple-content-static{
width: 100%;
max-width: 1340px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
flex-shrink: 0;
border-radius: 8px;
border: 1px solid var(--Midnight-100);
background: #ffff;
padding: 20px;
min-height: 1000px;
}
.content-with-sidebar-static .simple-content-static .page-header{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.content-with-sidebar-static .simple-content-static .page-header h1{
color: var(--grey-800);
text-align: center;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal;
align-self: stretch;
margin: 0;
}
.content-with-sidebar-static .simple-content-static .content{
width: 100%;
}
.content-with-sidebar-static .simple-content-static .content img{
max-width: 100%;
}
.content-with-sidebar-static .simple-content-static .content p{
font-size: 16px;
font-weight: 400;
line-height: normal;
margin-bottom: 0px;
}
.content-with-sidebar-static .simple-content-static .content a{
color: var(--orange-dark-500)!important;
}
.content-with-sidebar-static .simple-content-static .content h1{
font-size: 24px;
font-weight: 600;
line-height: 38px; /* 158.333% */
}
.content-with-sidebar-static .simple-content-static .content h2 {
font-size: 22px;
font-weight: 600;
line-height: 36px; /* 163.636% */
}
.content-with-sidebar-static .simple-content-static .content h3 {
font-size: 20px;
font-weight: 600;
line-height: 38px; /* 190% */
}
.content-with-sidebar-static .simple-content-static .content h4 {
font-size: 18px;
font-weight: 600;
line-height: 38px;
}
.area-help{
position: relative;
}
.popover-custom{
position: absolute;
background: #ffffff;
z-index: 1000;
padding: 10px;
border-radius: 0.5em;
border: 1px solid var(--Midnight-500);
top: 40px;
left: -95px;
/* box-shadow: 0px 0px 13px 3px #484848; */
display: none;
width: 235px;
}
.popover-custom p{
margin-top: 10px !important;
}
.popover-custom:after,
.popover-custom:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.popover-custom:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #fff;
border-width: 11px;
margin-left: -18px;
}
.popover-custom:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #20293a;
border-width: 13px;
margin-left: -20px;
}
.popover-image{
/* width: 240px !important; */
cursor: pointer;
width: 100% !important;
}
.modal-content{
background-color: #202939;
}
.modal-header{
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
padding: 1rem 1rem;
border-bottom: 1px solid #3b424f;
border-top-left-radius: calc(.3rem - 1px);
border-top-right-radius: calc(.3rem - 1px);
}
.modal-header button{
background: none !important;
-webkit-appearance: none !important;
appearance: none !important;
border: none !important;
color: white !important;
padding: 0 !important;
font-size: 34px !important;
/* height: 23px; */
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-content: center !important;
justify-content: center !important;
line-height: 1 !important;
}
.frame-trigger-search-mobile{
display: none;
}
.header-search-bar form .close-search-mobile{
display: none;
}
.mobile-menu-wrapper {
display: none;
}
.frame-grid-product-v2.bg-frame-v2 {
margin-bottom: 0px!important;
margin-top: 20px;
}
.flash-sale-wrapper {
display: flex;
width: 100%;
max-width: 1300px;
align-items: flex-start;
gap: 20px;
margin: 0 auto;
position: relative;
padding: 0px;
overflow-x: hidden;
padding: 6px 8px 8px 8px;
}
.card-flash-sale {
display: flex;
width: 270px;
padding: 12px;
align-items: center;
gap: 10px;
border-radius: 12px;
border: 2px solid #838383;
/* background: linear-gradient(0deg, rgba(43, 23, 89, 0.76) 0%, rgba(43, 23, 89, 0.76) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat; */
text-decoration: none;
transition: all .1s;
position: relative;
cursor: pointer;
}
.card-flash-sale:hover {
/* background: linear-gradient(0deg, rgba(43, 23, 89, 0.76) 0%, rgba(43, 23, 89, 0.76) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat; */
box-shadow: 0px 0px 0px 6px rgba(49, 89, 192, 0.25);
border: 2px solid var(--sc-blue-500);
outline: none;
}
.card-flash-sale img {
width: 70px;
height: 70px;
border-radius: 8px;
border: 1px solid #575757;
}
.card-flash-sale:hover img {
border: 1px solid #cfcfcf;
}
.card-flash-sale .label-group-fs {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
flex: 1 0 0;
overflow: hidden;
}
.card-flash-sale .label-group-fs h6 {
color: #FFD23D;
text-align: left;
font-size: 12px;
font-weight: 400;
line-height: normal;
margin: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-self: stretch;
}
.card-flash-sale .label-group-fs b {
color: #FFF;
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 22px; /* 157.143% */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-right: 10px;
min-width: 120px;
}
.badge-off-sale {
background: #C5E5FF;
position: relative;
right: 0;
top: 0;
transform: rotate(35.993deg);
}
.badge-off-sale b {
margin: 0px;
color: #000;
font-size: 10px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.bestseller:after {
content: var(--diskon-label, "Diskon");
z-index: 1;
overflow: hidden;
font-size: 11px;
font-weight: 500;
color: #ffffff;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
width: 120px;
display: block;
background: #C5E5FF;
background: linear-gradient(#d90000 0%, #ff5f33 100%);
box-shadow: 0 0px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px;
right: -30px;
clip-path: polygon(120px 26px, 90px -4px, 40px -12px, 8px 20px, 10px 30px, 120px 30px);
z-index: 3;
}
.countdown-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 8px;
text-align: center;
}
.countdown-box {
background-color: #FF3838;
color: white;
border-radius: 8px;
padding: 6px;
display: flex;
flex-direction: column;
align-items: center;
min-width: 45px;
}
.countdown-value {
font-size: 15px;
line-height: 16px;
}
.countdown-container span {
font-size: 8px;
}
.group-title-fs {
display: flex;
flex-direction: row;
gap: 24px;
align-items: center;
width: 100%;
}
button.btn.btn-orange-outline {
background: var(--sc-blue-500);
color: white;
width: 100%;
padding: 10px;
border: none;
margin-top: 15px;
border-radius: 8px;
}
button.btn.btn-orange-outline:hover {
background: var(--sc-blue-600);
}
.flash-sale-wrapper a {
text-decoration: none;
}
/* .show_after::after {
top: 105px;
right: 23px;
background: linear-gradient(90deg, #fdfdff00 0%, #FBFBFF 100%);
content: "";
position: absolute;
z-index: 9;
width: 30px;
height: 100px;
}
.show_before::before {
top: 105px;
left: 13px;
background: linear-gradient(90deg, #FBFBFF 0%, #fdfdff00 100%);
content: "";
position: absolute;
z-index: 9;
width: 30px;
height: 100px;
} */
/* end desktop */
@media (min-width: 481px) and (max-width: 767px) {
.frame-grid-product-v2 {
padding: 40px 10px 0px 10px;
}
.frame-grid-product-v2 .parent-grid-product-v2{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
width: 100%;
}
.frame-top-product-v2 .parent-top-product-v2 .child-top-product-v3 h6{
width: 120px;
}
.footer-theme-v2 .footer-payment-method-v2{
width: 100%;
}
.footer-theme-v2 .footer-payment-method-v2 .parent-list-payment-method-v2{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
}
.footer-theme-v2 .footer-payment-method-v2 .superparent-list-payment-method-v2{
width: 100%;
overflow: hidden;
}
.frame-top-product-v2{
overflow: hidden;
gap: 16px;
height: auto;
margin-top: 20px;
}
}
/*tablet view */
@media (min-width: 768px) and (max-width: 990px) {
.frame-grid-product-v2 {
padding: 40px 10px 0px 10px;
}
.frame-grid-product-v2 .parent-grid-product-v2{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 20px;
width: 100%;
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3 img{
width: 160px;
height: 160px;
}
.frame-top-product-v2 .parent-top-product-v2 .child-top-product-v3 img{
width: 180px;
height: 180px;
}
.footer-theme-v2 .footer-payment-method-v2{
width: 100%;
}
.footer-theme-v2 .footer-payment-method-v2 .parent-list-payment-method-v2{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
}
.footer-theme-v2 .footer-payment-method-v2 .superparent-list-payment-method-v2{
width: 100%;
overflow: hidden;
}
.frame-top-product-v2{
overflow: hidden;
gap: 16px;
height: auto;
margin-top: 20px;
}
.frame-info-product-v3 .content-info-product-v2{
display: flex;
max-width: 1340px;
width: 100%;
align-items: flex-start;
gap: 20px;
margin-bottom: 65px;
flex-direction: column;
}
.frame-info-product-v3 .content-info-product-v2 .frame-sidebar-info-product-v2 {
width: 100%;
order: 1;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
width: 100%;
order: 0;
}
}
@media (min-width: 991px) and (max-width: 1080px) {
.frame-grid-product-v2 {
padding: 40px 10px 0px 10px;
}
.frame-grid-product-v2 .parent-grid-product-v2{
padding-top: 10px;
display: grid;
/* grid-template-columns: repeat(4, 1fr); */
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 4rem 2.4rem;
width: 100%;
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3 img{
width: 190px;
height: 190px;
}
.frame-top-product-v2 .parent-top-product-v2 .child-top-product-v3 img{
width: 190px;
height: 190px;
}
.footer-theme-v2 .footer-payment-method-v2{
width: 100%;
}
.footer-theme-v2 .footer-payment-method-v2 .parent-list-payment-method-v2{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
}
.footer-theme-v2 .footer-payment-method-v2 .superparent-list-payment-method-v2{
width: 100%;
overflow: hidden;
}
.frame-top-product-v2{
overflow: hidden;
gap: 16px;
height: auto;
margin-top: 20px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li {
width: 100%;
}
}
@media (min-width: 481px) and (max-width: 767px) {
.tmv1-header .tmv1-header-left img{
height: 38px;
}
.tmv1-header .tmv1-header-left ul li a{
display: none;
}
.header-container-v3 .menu-nav ul {
display: none;
}
.frame-grid-product-v2 {
padding: 40px 10px 0px 10px;
}
.frame-grid-product-v2 .parent-grid-product-v2{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 10px;
width: 100%;
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3 img{
width: 140px;
height: 140px;
}
.frame-top-product-v2 .parent-top-product-v2 .child-top-product-v3 img{
width: 140px;
height: 140px;
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3 h6{
gap: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.footer-theme-v2 .footer-payment-method-v2{
width: 100%;
}
.footer-theme-v2 .footer-payment-method-v2 .parent-list-payment-method-v2{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
}
.footer-theme-v2 .footer-payment-method-v2 .superparent-list-payment-method-v2{
width: 100%;
overflow: hidden;
}
.frame-top-product-v2{
overflow: hidden;
gap: 16px;
height: auto;
margin-top: 20px;
}
.frame-info-product-v3 .content-info-product-v2{
display: flex;
max-width: 1340px;
width: 100%;
align-items: flex-start;
gap: 0px;
margin-bottom: 65px;
flex-direction: column;
}
.frame-info-product-v3 .content-info-product-v2 .frame-sidebar-info-product-v2 {
width: 100%;
order: 1;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
width: 100%;
order: 0;
}
/* AREA KONFIRMASI PEMBAYARAN */
.konfirmasi-pembelian-area-theme-v2{
display: flex;
padding-bottom: 50px;
justify-content: center;
align-items: flex-start;
gap: 26px;
align-self: stretch;
padding: 1rem;
flex-direction: column;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2{
width: 100%;
/* flex: 1; */
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2{
width: 100%;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li {
width: 100%;
}
}
/*mobile view */
/*@media (max-width: 450px){ */
@media (min-width: 320px) and (max-width: 480px) {
.header-container-v3 .header-top {
justify-content: space-between;
}
.mobile-menu-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
}
.burger-menu-v3 .menu-pop-theme-v3 ul li a .right b {
font-size: 16px;
}
.burger-menu-v3 .menu-pop-theme-v3 {
position: absolute;
width: 100vw;
right: -15px;
margin-top: 10px;
border-radius: 0px;
background: #00000000;
height: 100%;
box-sizing: border-box;
}
.burger-menu-v3 .menu-pop-theme-v3 ul {
width: 100%;
background: #fffffff5;
border-radius: 0px 0px 6px 6px;
backdrop-filter: blur(2px);
padding-bottom: 10px;
}
.burger-menu-v3 .menu-pop-theme-v3 ul li a {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
text-decoration: none;
padding: 18px 16px;
min-width: 200px;
transition: 0.2s;
border-radius: 12px;
}
.burger-menu-v3 .menu-pop-theme-v3 .arrow-up {
display: none;
}
.header-container-v3 {
gap: 10px;
width: 100%;
z-index: 999;
}
.header-container-v3 .menu-nav ul {
display: none;
}
.products-container {
padding: 10px;
gap: 8px;
}
.voucher-section-wrapper {
padding: 0px;
}
.title-frame {
flex-wrap: wrap;
gap: 6px;
}
.title-group-fs {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
.title-frame .icon-wrapper {
height: 30px;
width: 30px;
}
.title-frame .icon-wrapper i {
font-size: 16px;
}
.title-frame h3 {
font-size: 16px;
}
.title-frame.mobile-flex{
display: flex;
gap: 10px;
width: 100%;
padding: 16px 10px 0px 10px;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
/* title product */
.bs-top-product {
}
.bs-top-product img {
height: 90px;
width: 90px;
}
.bs-top-product .bs-product-card{
width: 115px;
}
.bs-top-product .sc-product-card{
width: 110px;
opacity: 0.6;
}
.bs-top-product h6{
width: 100px;
font-size: 12px;
padding: 6px;
}
.bs-top-product:hover h6{
width: 110px;
font-size: 12px;
padding: 6px;
}
.bs-top-product:hover img{
}
.games-product-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
row-gap: 40px;
padding: 10px;
}
.header-search-bar .result-quick-search ul li .right{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: center;
align-items: flex-start;
margin-left: 10px;
}
/* voucher section */
.vouchers-container {
}
.card-vector {
padding: 00px 60px 0px 0px;
}
.glass-effect {
border: none;
width: 100%;
height: 100%;
position: relative;
}
.vouchers-wrapper-grid {
/* width: 100%; */
max-width: 100%;
padding: 0px 10px;
gap: 20px 45px;
overflow: auto;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.vouchers-wrapper-grid .child-product-voucher:hover {
padding: 0px;
min-width: 240px;
border: none;
}
.vouchers-wrapper-grid .child-product-voucher:hover h6 {
}
.vouchers-wrapper-grid .child-product-voucher {
padding: 0px;
min-width: 240px;
}
.vouchers-wrapper-grid .child-product-voucher img {
}
.vouchers-wrapper-grid .child-product-voucher h6 {
}
.vouchers-wrapper-grid .child-product-voucher a {
}
.frame-social-media-v2 {
display: none;
}
.frame-social-media-v2-mobile{
display: flex;
align-items: center;
gap: 20px;
align-self: stretch;
justify-content: center;
}
.frame-social-media-v2-mobile a{
text-decoration: none !important;
display: flex;
padding: 4px;
align-items: center;
gap: 10px;
/* align-self: stretch; */
border-radius: 10px;
width: 32px;
height: 32px;
}
.frame-social-media-v2-mobile a:hover{
background: var(--sc-blue-200);
}
.frame-social-media-v2-mobile a img{
width: 36px;
height: 36px;
border-radius: 8px;
}
.popover-custom{
top: 40px;
left: auto;
right: -15px;
}
/* top product */
.bs-slider-container {
display: flex;
gap: 24px;
flex-direction: row;
max-width: 100%;
overflow-x: auto;
padding: 20px 10px 10px 10px;
}
.flashsale-slider-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.bs-slider-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.show_before::before {
top: 0;
left: 0;
background: linear-gradient(90deg, #FDFDFF 0%, #fdfdff00 100%);
content: "";
position: absolute;
z-index: 2;
width: 30px;
height: 100%;
}
.show_after::after {
top: 0;
right: 0;
background: linear-gradient(90deg, #fdfdff00 0%, #FDFDFF 100%);
content: "";
position: absolute;
z-index: 2;
width: 30px;
height: 100%;
}
.products-container {
gap: 16px;
padding: 10px 0px;
}
.card-vector {
display: none;
}
.popover-custom:after, .popover-custom:before{
left: auto;
right: 11px;
}
.popover-custom:after{
right: 13px !important;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li .ribbon__content{
top: -11px;
right: 10px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li .info-bottom .channel-name {
font-size: 11px;
}
.header-search-bar form{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.header-search-bar form .close-search-mobile{
display: flex;
font-size: 24px;
color: var(--Bushido-Red-600);
text-decoration: none !important;
padding: 8px 11px;
}
.header-search-bar form .close-search-mobile i{
}
.header-search-bar .result-quick-search{
right: 10px;
left: 10px;
}
.frame-trigger-search-mobile{
display: flex;
}
.frame-trigger-search-mobile a{
font-size: 24px;
color: var(--Bushido-Red-500);
text-decoration: none !important;
}
.frame-trigger-search-mobile a i{
}
.frame-top-product-v2 .frame-header-top-product-v2 .trigger-top-product-nav{
display: none !important;
}
.header-navbar .header-content-v3-left img{
height: 34px;
}
.header-navbar .header-content-v3-left ul{
display: none;
}
.header-search-bar{
position: absolute;
left: 0;
right: 0;
background: rgb(255 255 255);
top: 0;
padding: 5px 10px;
z-index: 99;
border-bottom: none;
display: none;
border-radius: 0px;
}
.header-navbar .header-content-v3-right .header-search-bar-field{
width: 100%;
}
.header-navbar .header-content-v3{
width: 100%;
}
.frame-grid-product-v2{
width: 100%;
margin-bottom: 20px;
padding: 10px;
}
.frame-grid-product-z-v2 .parent-grid-product-z-v2 .child-top-product-z-v2{
min-width: 220px;
}
/* mobile slider product */
.frame-grid-product-z-v2 .parent-grid-product-z-v2{
display: flex;
/* grid-template-columns: repeat(4, 1fr); */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px 24px;
width: 100%;
flex-direction: row;
overflow-x: scroll;
}
.frame-grid-product-z-v2 .two-column-grid {
width: 100%;
display: flex;
flex-direction: column;
gap: 40px;
padding-top: 20px;
}
.frame-grid-product-z-v2 .two-column-grid .column-grid {
display: flex;
width: 100%;
gap: 20px;
flex-direction: column;
}
/* mobile grid */
.frame-grid-product-v2 .parent-grid-product-v2{
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
width: 100%;
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3{
gap: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.frame-featured-product-v2{
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 0px;
margin: 0 auto;
background: var(--sc-blue-500);
clip-path: none;
-webkit-clip-path: none;
opacity: 1;
background-image: linear-gradient(#365AB7 1px, transparent 1px), linear-gradient(to right, #365AB7 1px, #2C52B3 1px);
background-size: 80px 80px;
margin-top: 30px;
margin-bottom: 30px;
}
.frame-featured-product-v2 .content-featured{
display: flex;
flex-direction: column;
height: fit-content;
padding: 50px 10px;
}
.frame-featured-product-v2 .content-featured h2{
text-align: center;
font-size: 22px;
}
.frame-featured-product-v2 .content-featured p.sub{
text-align: center;
font-size: 15px;
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2 .child-featured-product-v2 .header-child-featured-product-v2 h4{
font-size: 16px;
text-align: center;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li .pricing-icon{
display: flex;
justify-content: flex-end;
gap: 4px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li .pricing-icon i{
display: none;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-header-product-v2{
padding: 14px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li .pricing-icon .pricing-detil span {
font-size: 15px;
}
.footer-theme-v2 .footer-payment-method-v2{
width: 100%;
}
.footer-theme-v2 .footer-payment-method-v2 .parent-list-payment-method-v2{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
}
.content-product {
padding: 0px 10px;
width: 100%;
display: flex;
justify-content: center;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .how-to-product-v2 {
padding: 0px 14px 14px 14px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .how-to-product-v2 p{
font-size: 12px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2 .frame-input-inner {
width: 100%;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2 .frame-input-inner label.error{
font-size: 12px;
color: #E03F3F;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2{
padding: 14px;
display: flex;
gap: 16px;
align-self: stretch;
padding: 1rem;
flex-direction: column;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .how-to-product-v2 a {
font-size: 20px;
}
.footer-theme-v2 .footer-payment-method-v2 .superparent-list-payment-method-v2{
width: 100%;
overflow: hidden;
}
.frame-top-product-v2{
overflow: hidden;
gap: 16px;
height: auto;
margin-top: 20px;
}
.footer-theme-v2 .footer-payment-method-v2 .superparent-list-payment-method-v2::after{
display: none;
}
.footer-theme-v2 .footer-payment-method-v2 .superparent-list-payment-method-v2::before{
display: none;
}
.frame-top-product-v2 .parent-top-product-v2{
display: flex;
height: 239px;
align-items: center;
gap: 20px;
flex-shrink: 0;
width: 100%;
overflow-x: auto;
margin: 0 auto;
margin-left: 10px;
}
.frame-top-product-v2 h3{
width: 95%;
margin: 0 auto;
font-size: 18px;
}
.frame-grid-product-z-v2 h3{
font-size: 18px;
}
.frame-grid-product-v2 h3{
font-size: 18px;
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3 img{
width: 125px;
height: 125px;
}
.frame-top-product-v2 .parent-top-product-v2 .child-top-product-v3 img{
width: 160px;
height: 160px;
}
.products-container .games-product-grid.limited-height{
padding-top: 20px;
height: 850px;
overflow: hidden;
}
.game-name-wrapper {
padding: 10px;
}
.game-info-wrapper h1 {
font-size: 16px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li .product-name-v3 {
padding: 4px;
}
.game-info-wrapper .glass-badge h2 {
font-size: 12px;
}
/* SEMENTARA */
.slider-wrapper{
/* display: none !important; */
margin: 16px 0px;
}
.slider-wrapper .img-current{
height: 130px;
width: 95% !important;
margin: 0 auto;
}
.frame-top-product-v2 .parent-top-product-v2{
height: auto;
}
.overlay-more-games{
padding-bottom: 30px;
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2 .child-featured-product-v2{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
align-self: stretch;
width: 100%;
align-content: center;
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2 .child-featured-product-v2 h4{
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin: 0px;
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2 .child-featured-product-v2 .header-child-featured-product-v2{
display: flex;
align-items: center;
gap: 8px;
flex-direction: column;
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2{
display: grid;
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
grid-template-columns: repeat(2, 1fr);
}
.frame-featured-product-v2 .content-featured .parent-featured-product-v2 .child-featured-product-v2 p{
text-align: center;
margin: 0px;
font-size: 14px;
}
.frame-grid-product-v2 .parent-grid-product-v2 .child-top-product-v3 h6{
}
.frame-top-product-v2 .parent-top-product-v2 .child-top-product-v3 h6{
width: 110px;
}
.frame-info-product-v3{
width: 100%;
gap: 14px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2{
gap: 26px;
width: 100%;
}
.frame-info-product-v3 .content-info-product-v2 .frame-sidebar-info-product-v2{
/* display: none; */
display: flex;
flex-direction: column;
width: 100%;
}
.frame-info-product-v3 .content-info-product-v2{
display: flex;
/* max-width: 1140px; */
width: 100%;
align-items: flex-start;
gap: 0px;
margin-bottom: 65px;
padding-top: 0px;
flex-direction: column;
}
.wrapper-info-product {
display: none;
}
.wrapper-info-product-mobile {
width: 100%;
}
.sidebar-info-product-v2 .game-recomendation-v2{
gap: 10px;
}
.sidebar-info-product-v2 .game-recomendation-v2 li a {
background: transparent;
border: 1px solid var(--Midnight-100);
}
.frame-info-product-v3 .content-info-product-v2 .frame-sidebar-info-product-v2 .sidebar-info-product-v2 {
gap: 0;
padding: 14px;
display: none;
}
.bottom-content-header-info-product-v2 p {
display: none;
}
a.showmore-btn {
color: #6D6A81!important;
}
a.showmore-btn:hover {
color: var(--sc-blue-500);
}
.sidebar-info-product-v2 .right-info-product-v2{
display: none;
}
.frame-info-product-v3 .header-info-product-v2 .right-info-product-v2{
display: none;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom{
padding: 14px;
grid-template-columns: repeat(2, 1fr);
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .short-payment-support-info .banks-payment-support-lists img:nth-child(4), .frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .short-payment-support-info .banks-payment-support-lists img:nth-child(3){
display: none !important;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .header .left {
justify-content: space-between;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .header .left img{
height: 18px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .header .left b{
font-size: 14px;
font-weight: 500;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li b{
/* color: #FFF; */
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .list-denom li{
display: flex;
max-height: 120px;
/* padding: 10px; */
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2{
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method {
padding: 14px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-input-area-product-v2 input{
text-align: center;
}
.frame-info-product-v3 .header-info-product-v2{
padding: 15px 15px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .header{
padding: 12px 12px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul{
list-style: none;
display: flex;
padding: 10px;
flex-direction: column;
justify-content: space-between;
align-content: space-between;
gap: 10px;
align-self: stretch;
flex-wrap: wrap;
align-items: stretch;
margin-bottom: 0px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .button-action-payment ul li{
width: 100%;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .area-list-payment-method .child-box .header .right{
display:none;
}
.frame-info-product-v3 .bg-thumbnail-overlay{
height: 130px;
}
.konfirmasi-pembelian-area-theme-v2{
flex-direction: column;
}
.konfirmasi-pembelian-area-theme-v2{
margin-bottom: 0px;
padding-bottom: 0px;
padding: 14px;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2 {
width: 100%;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 {
width: 100%;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-input-theme-v2 .header-konfirmasi-pembelian-input-theme-v2 b{
/* color: #FFF; */
font-size: 13px;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2 table tr td img {
display: none;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2 table tr td b{
font-size: 14px;
}
.konfirmasi-pembelian-area-theme-v2 .area-konfirmasi-pembelian-summary-theme-v2 table tr td{
font-size: 14px;
}
.frame-transaction-progress-details .info-transaction-progress-details{
width: 100%;
/* flex: 1; */
}
.transaction-progress-v2 h1{
font-size: 24px;
font-weight: 600;
}
.submit-pembelian-area-theme-v2{
width: 100%;
}
.submit-pembelian-area-theme-v2 button{
width: 100%;
}
.transaction-progress-v2{
width: 100%;
margin-top: 20px;
margin-bottom: 30px;
padding: 20px 10px;
display: flex;
flex-direction: column;
}
.stepper-wrapper{
width: 100%;
}
.payment-transaction-progress-details{
width: 100%;
}
.frame-transaction-progress-details{
display: flex;
align-items: center;
gap: 14px;
align-self: stretch;
flex-direction: column;
width: 100%;
align-content: center;
}
.frame-transaction-progress-details .info-transaction-progress-details .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail b{
overflow: hidden;
color: var(--Midnight-700);
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
align-self: stretch;
}
.frame-transaksi-game-preview .transaksi-game-detail table tr td b {
font-size: 14px;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview{
width: 100%;
}
.single-payment-finish-wrapper .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail b{
}
form.cek-transaksi{
width: 100%;
}
.cek-transaksi-frame{
overflow: hidden;
padding: 10px;
margin: 0px;
margin-bottom: 20px;
}
.cek-transaksi-header h1{
font-size: 24px;
}
.cek-transaksi-header{
width: 100%;
}
.cek-transaksi-content{
width: 100%;
}
.cek-transaksi-content-table-wrapper{
overflow: auto;
}
.cek-transaksi-content table{
width: 1000px;
}
.cek-transaksi-header .frame-frame-search-trx{
display: flex;
align-items: center;
gap: 10px;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
}
.cek-transaksi-header .frame-frame-search-trx .ffst-search input{
width: 100%;
}
.cek-transaksi-content .simulate-info-header h5{
color: var(--gray-800);
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.frame-ffst-search{
width: 100%;
}
.cek-transaksi-header .frame-frame-search-trx .hit-q-trx{
width: 100%;
}
.cek-transaksi-content .stepper-wrapper{
width: 100%;
}
.content-with-sidebar-static{
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
min-height: 65vh;
padding: 10px;
}
.frame-info-product-v3 .content-info-product-v2 .frame-denom-info-product-v2 .denom-info-product-v2 .denom-header-product-v2 h3{
font-size: 16px;
}
.tmv1-header-right .open-search-mobile i{
font-size: 20px;
display: block;
}
.frame-grid-product-v2 i{
font-size: 20px;
}
.frame-grid-product-z-v2 i{
font-size: 20px;
}
.content-with-sidebar-static .simple-content-static {
padding: 15px;
}
.flash-sale-wrapper {
display: flex;
gap: 20px;
flex-direction: row;
max-width: 100%;
overflow-x: auto;
}
}
.floating-client-socialproof{
position: fixed;
bottom: 0;
left: 25px;
width: 373px;
height: 148px;
cursor: pointer;
z-index: 500;
}
.frame-social-proof-preview{
}
.frame-social-proof-preview .social-proof-preview.style-1{
display: flex;
padding: 12px;
align-items: flex-end;
gap: 14px;
border-radius: 7px;
border: 1px solid #CED4DA;
background: #FFF;
}
.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof{
display: flex;
width: auto;
flex-direction: column;
align-items: flex-start;
gap: 9px;
flex: 1;
}
.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof small{
color: #98A6AD;
font-family: "Source Sans Pro";
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 12px; /* 120% */
}
.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof p{
color: #212529;
font-family: "Source Sans Pro";
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 22px;
margin: 0px;
align-self: stretch;
}
.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof p b{
color: #212529;
font-family: "Source Sans Pro";
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 22px; /* 146.667% */
align-self: stretch;
}
.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof .verification-area{
display: flex;
align-items: center;
gap: 6px;
}
.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof .verification-area i{
font-size: 12px;
color: #0069FF;
}
.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof .verification-area span{
color: #98A6AD;
font-family: "Source Sans Pro";
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 12px; /* 120% */
}
.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof .verification-area span strong{
color: #98A6AD;
font-family: "Source Sans Pro";
font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: 12px;
}
.frame-social-proof-preview .social-proof-preview.style-1 .thumb-proof{
display: flex;
width: 73.014px;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.frame-social-proof-preview .social-proof-preview.style-1 .thumb-proof small{
color: #212529;
font-family: "Source Sans Pro";
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 12px; /* 120% */
align-self: stretch;
}
.frame-social-proof-preview .social-proof-preview.style-1 .thumb-proof img{
width: 70px;
height: 70px;
border-radius: 4px;
}
/* STYLE 2 SCP */
.frame-social-proof-preview .social-proof-preview.style-2{
display: flex;
gap: 10px;
border: 1px solid #CED4DA;
background: #FFF;
border-radius: 60px;
flex-direction: row-reverse;
padding: 8px 12px;
align-items: center;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof{
display: flex;
width: auto;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof small{
color: #98A6AD;
font-family: "Source Sans Pro";
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 12px; /* 120% */
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof p{
color: #212529;
font-family: "Source Sans Pro";
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 20px;
margin: 0px;
align-self: stretch;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof p b{
color: #212529;
font-family: "Source Sans Pro";
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 22px; /* 146.667% */
align-self: stretch;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof .verification-area{
display: flex;
align-items: center;
gap: 6px;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof .verification-area i{
font-size: 12px;
color: #0069FF;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof .verification-area span{
color: #98A6AD;
font-family: "Source Sans Pro";
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 12px; /* 120% */
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof .verification-area span strong{
color: #98A6AD;
font-family: "Source Sans Pro";
font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: 12px;
}
.frame-social-proof-preview .social-proof-preview.style-2 .thumb-proof{
display: flex;
width: 71px;
flex-direction: column;
align-items: center;
gap: 4px;
justify-content: center;
}
.frame-social-proof-preview .social-proof-preview.style-2 .thumb-proof small{
color: #212529;
font-family: "Source Sans Pro";
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 12px; /* 120% */
align-self: stretch;
}
.frame-social-proof-preview .social-proof-preview.style-2 .thumb-proof img{
width: 70px;
height: 70px;
border-radius: 61px;
}
/* END STYLE 2 SCP */
.frame-social-proof-preview .notice{
color: #595959;
font-family: "Source Sans Pro";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
align-self: stretch;
display: block;
}
.box-image-header {
width: 100%;
padding: 20px 16px;
max-width: 1340px;
display: block;
margin: 0 auto;
}
@media (max-width: 440px){
.floating-client-socialproof{
width: 100%;
bottom: -9999999999999999999px !important;
}
.box-image-header {
padding: 4%;
}
}
.loading-submit-data{
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background-color: rgba(0, 0, 0, 0.7);
/* display: flex; */
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
z-index: 4000;
display: none;
}
.loading-submit-data .content{
width: 200px;
height: 200px;
background: white;
border-radius: 50%;
/* margin: 0 auto; */
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.loading-submit-data .content .sk-chase{
}
.loading-submit-data .content img{
position: absolute;
top: 66px;
width: 82px;
animation: bounce 0.3s infinite alternate;
-webkit-animation: bounce 0.3s infinite alternate;
}
@keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}
@-webkit-keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}
.lds-dual-ring {
display: inline-block;
width: 180px;
height: 180px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 164px;
height: 164px;
margin: 8px;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fe8000 transparent #3a3a3a transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* LOADING SPINNER */
.sk-chase {
width: 120px;
height: 120px;
position: relative;
animation: sk-chase 2.5s infinite linear both;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}
.sk-chase-dot:before {
content: '';
display: block;
width: 20%;
height: 20%;
background-color: #ff7600;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
@keyframes sk-chase {
100% { transform: rotate(360deg); }
}
@keyframes sk-chase-dot {
80%, 100% { transform: rotate(360deg); }
}
@keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
} 100%, 0% {
transform: scale(1.0);
}
}