@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New&display=swap');


@font-face {
    src: url(../../assets/fonts/MPLUS1p-Black.ttf);
    font-family: 'MPLUS1p-Black';
}

@font-face {
    src: url(../../assets/fonts/M_PLUS_1/MPLUS1-SemiBold.ttf);
    font-family: 'MPLUS1-SemiBold';
}

@font-face {
    src: url(../../assets/fonts/Kaisei_Opti/KaiseiOpti-Bold.ttf);
    font-family: 'KaiseiOpti-Bold';
  }
  @font-face {
    src: url(../../assets/fonts/Kaisei_Opti/KaiseiOpti-Medium.ttf);
    font-family: 'Rokkitt-Medium';
  }
  @font-face {
    src: url(../../assets/fonts/Kaisei_Opti/KaiseiOpti-Regular.ttf);
    font-family: 'Rokkitt-Regular';
  }

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    line-height: 20px;
    background: #17212E;
}
img{max-width:100%;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-family: 'GilroyLight', sans-serif;}
h2{font-size:40px; font-weight:600; color:#fff; margin-bottom:30px;}
a:hover{text-decoration:none;}
ul{margin:0; padding:0;}
ul li{margin:0; padding: 0; list-style:none;}
label{color:#fff; font-weight:400; display:block; font-size:13px;}
lable span{color:#333;}

.btn-primary{font-size: 16px; font-weight: 600; color: #fff; padding: 16px 24px; box-shadow: none; background: #1857E2; position:relative; border: 0;}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover{border-color:transparent; background:transparent; color:#333;}
.btn-primary:hover, .btn-primary:active,.btn-primary:focus{border-color:transparent; background:#1857E2; color:#fff;}
.btn.active, .btn:active{box-shadow:none; border-color:transparent;background:transparent; color:#333;}
.btn.disabled, .btn.disabled:hover{background:#edf0f1; color:#a6a8a9; font-weight:300; border-color:transparent;}
.btn-default{background:transparent; border:2px solid #fff; font-size: 16px; font-weight: 600; font-weight:600; color:#fff; padding: 16px 24px;}
.btn-small{padding: 10px 40px;}
.form-control{height:44px; box-shadow: none; border: 1px solid #2A313C; padding: 11px 30px 11px 20px; height: auto; color: #A0AEC0; font-size: 14px; background:transparent;    border-radius: 8px;}
.form-control:focus{box-shadow:none;}
.form-control::-webkit-input-placeholder {color:#fff;}
.form-control::-moz-placeholder {color:#fff;}
.form-control:-ms-input-placeholder {color:#fff;}
.form-control:-moz-placeholder {color:#fff;}
.form-control.error{border-color:#c41c56;}
.form-control.error::-webkit-input-placeholder {color:#022736;}
.form-control.error::-moz-placeholder {color:#022736;}
.form-control.error:-ms-input-placeholder {color:#022736;}
.form-control.error:-moz-placeholder {color:#022736;}
.form-control.error + span{font-size:12px;color: #c41c56; font-weight:300;}
@media(min-width:1200px){.container{max-width:1054px; width:100%; z-index:1; position:relative;}}

header {
    position: sticky;
    top: 0px;
    z-index: 1100;
    padding: 10px 0;
    background-color: #000 !important;
}
header .logo{width:200px;}
header .logo img{width: 100%; max-width: 115px;}
header .container{display:flex; align-items:center;justify-content: space-between;}
header .headerright{
    width: calc(100% - 200px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}
header .btn-account img {
    width: 35px;
    height: 35px;
    border-radius: 50px;
}
header .headercart {
    display: flex;
    align-items: center;
    background: #1d2939;
    border-radius: 30px;
    padding: 5px 5px 5px 5px;
}
header .headercart .star {
    width: 20px;
    height: 20px;
    position: relative;
    right: 0;
}
header .headercart .text {
    background: #1d2939;
    border-radius: 30px;
    color: #fff;
    font-size: 14px;
    padding: 0px 10px 0px 10px;
    text-align: right;
}
header .headercart .plus {
    background: #D6001C;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    text-align: center;
    line-height: 17px;
    color: #fff;
    position: relative;
}
header .btn-back a{display: inline-block; background:url(../img/btn-back-arrow.svg) 6px 13px no-repeat rgba(0, 0, 0, 0.2); padding:10px 10px 11px 25px; color:#fff; font-weight:600; background-size:14px 14px; text-decoration:none; border-radius:8px;}
.main-container{min-height:calc(100vh - 141px);}

body.opensidebar{overflow:hidden;}
.sidebar-portal{opacity:0; visibility:hidden; transition:0.5s all ease;}
body.opensidebar .sidebar-portal{opacity:1; visibility:visible;}
.sidebar-portal-content{position: fixed; z-index: 1; background: #fff; top: 0; right: -320px; width: 320px; height: 100vh; overflow: hidden;transition:0.5s all ease;}
body.opensidebar .sidebar-portal-content{right:0;}
.sidebar-shadow{position: fixed; left: 0px; top: 0px; width: 100vw; height: 100vh; background:rgba(0,0,0,0.46); z-index: 1;}
.sidebar-head{padding:20px; border-bottom:1px solid #ddd; font-size:20px; font-weight:700; position:relative;}
.btn-close-sidebar{position:absolute; right:15px; top:15px; width:32px; height:32px; background:#f5f5f5; border-radius:6px; display:flex; align-items:center; justify-content:center;}
.btn-close-sidebar img{width:12x; height:12px;}
.sidebar-content{padding:15px; height: calc(100vh - 60px); overflow: hidden; overflow-y: auto;}
.buypointsdiv{}
.buypointsdiv .possession-point{background:url(../img/icon-possession.svg) no-repeat; background-size: 16px 16px; padding: 0 0 0 25px; font-size: 12px; margin-bottom: 20px; background-position: 0 1px;}
.buypointsdiv .possession-text{font-weight:700; font-size: 20px; margin-bottom:20px;}
.point-expiry-div .btn, .buypointsdiv .btn{width:100%; margin-bottom:20px; padding: 10px;}
.redeem-coupon-div .btn{width:100%; margin-bottom:20px; padding: 10px;}
.css-1nlrkd1{margin-bottom:40px;}
.css-1nlrkd1 .chakra-link{border: 1px solid rgb(189, 189, 189); border-radius: 12px; display: block; padding: 20px 40px 20px 20px; color: #757575; text-decoration: none; background: url(../img/icon-arrow-right-gray.svg) no-repeat; background-size:20px 20px; background-position:calc(100% - 15px) 53%;}
.acquisition-history{}
.acquisition-history .css-ncfona{margin-bottom:50px;}
.acquisition-history .css-ncfona span{display:inline-block; border-bottom: 1px solid rgb(117, 117, 117);}
.acquisition-history p, .acquisition-history p a{color: #757575; font-size: 14px;}
.acquisition-history p small{font-family:13px;}
.page-title{color:#fff; font-weight:700; font-size:18px; border-bottom: 1px solid #bdbdbd; padding:15px 0; margin-bottom:30px;}
.grid{
    max-width: 750px;
    margin: 0 auto 40px;
}
.grid .items{position:relative; padding:16px; border-radius: 12px; box-shadow: rgb(189, 189, 189) 2px 0px 5px 3px; height:290px;overflow:hidden; margin-bottom:30px;}
.grid .items:hover{opacity: 0.4;}
.grid .items .item-secondimg{/*position:absolute; top:40%; left: 0; right: 0; padding: 30px; transform:translateY(-50%);*/ margin-bottom:0px; line-height: 24px; font-size: 24px; color:#fff; font-weight:700; text-shadow: rgb(0, 0, 0) 0px 0px 8px; text-align:center;}
.grid .items .bgimg{height:258px; overflow:hidden;}
.grid .items .bgimg img{position: relative;}
.grid .item-content{background-color: transparent; position:absolute; bottom:10px; left:6px; right:6px; z-index: 1;}
.bg-over {
    background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 72%);
}
.grid .item-content .text2 {
    position: relative;
    text-align: center;
    z-index: 1;
    padding: 2px 8px 4px;
    width: 100%;
    font-size: 18px;
    color: #555555;
}
.grid .item-content .text2 .f9{font-size:9px;}
.grid .item-content .bar{height: 20px; left: 0px;margin-inline: auto; padding: 2px; width: 100%; background: rgb(216, 216, 216); margin-bottom:3px;}
.grid .item-content .bar .subbar {
    height: 100%;
    width: 87.45%;
    background: url(../../assets/images/blue-bar.png) no-repeat;
    background-size: 100% 100%;
    /* background: linear-gradient(0deg, rgba(68,154,144,1) 0%, rgba(193,223,220,1) 100%); */
    border-radius: 5px;
}
.grid .item-content .pricetag{text-align: center;}
.grid .item-content .pricetag .price {
    position: relative;
    bottom: -15px;
    background: url(../../backend/img/icon-tag.svg) no-repeat center;
    display: inline-block;
    padding: 5px 20px 5px 15px;
    font-weight: 600;
    color: #F1A81D;
}
.grid .item-content .pricetag .price img, .grid .item-content .pricetag .price span{display: inline-block; vertical-align: middle;}
.grid.details {
    margin-top: 30px;
    max-width: 800px;
}
.grid.details .items{padding:0; border-radius:0; box-shadow:none; height:auto; overflow:hidden;}
.grid.details .items:hover{opacity:1;}
.grid.details .items .bgimg {
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    max-width: 800px;
    transform: translateX(-50%);
    left: 50%;
}
.grid.details .items.blurimg .bgimg{filter: blur(4px);}
.grid.details .item-content {
    position: fixed;
    z-index: 111;
    bottom: 0;
    right: 0;
    text-align: center;
    width: 100%;
    max-width: 800px;
    transform: translateX(-50%);
    left: 50%;
    padding: 0 10px;
}
.grid.details .item-secondimg{position:relative; top:0; left:0; right:0; transform:none; padding:0;}
.grid.details .item-secondimg img{max-height:200px;}
.grid.details .blurimg .bgimg{filter: blur(4px);}
.grid.details .detailimg {
    position: relative;
    z-index: 11;
    top: 100vh;
    box-shadow: 0 20px 50px 0px rgba(0,0,0,0.1);
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 130vh;
}

.grid.details .detailimg img {
    width: 100%;
}

.grid.details .items .bgimg img {
    max-width: 100%;
    width: 100%;
}
.btn-container{margin-bottom:20px;}
.btn-default{background:rgb(0 0 0 / 90%); color:#fff; font-weight:700; border-radius:8px; border:0;}
.btn-default:hover{background:rgb(0 0 0 / 90%);color:#fff;}
/*.btn-primary{background:#1857E2; color:#fff; font-weight:700; border-radius:8px; border:0;}
.btn-primary:hover{background:#000;}*/
.points .page-title{margin-bottom:0;}
.point-grid{background:#f5f5f5;}
.point-grid .topbar{background: #FAFAFA; padding:8px 10px; font-size:14px; display:flex; align-items:center; justify-content:space-between;}
.point-grid .topbar .text{font-weight:700;color: #000;}
.point-grid .topbar .totalpoints{font-weight:700; font-size:16px; color:#000;}
.point-grid .subtext {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 13px;
    color: #000;
}
.point-grid .item-container{padding:15px; background:#f5f5f5;}
.point-grid .items{display:flex; align-items:center; background:#fff; padding:20px; border-radius:15px; margin-bottom:10px;}
.point-grid .items .img{width:50px; height:50px; margin-right:20px;}
.point-grid .items .text{width:calc(100% - 140px);}
.point-grid .items .text .item-name{font-weight:700; color:#000; margin-bottom:5px;}
.point-grid .items .text .item-name span{font-size:24px; display:inline-block; vertical-align:middle;}
.point-grid .items .text p{color:#757575; margin-bottom:0;}
.point-grid .items .action{width:70px;}
.point-grid .items .action .btn{padding: 8px 20px;}
.history-items .items input{border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;}
.history-items .items input:checked ~ .items-content{background:rgba(0, 0, 0, 0.4);}
.history-items .items input:checked ~ .items-content .img{opacity:0.5;}
.nav-tabs{border:0; margin-bottom:40px;}
.nav-tabs .nav-item{width:33.3333%;}
.nav-tabs .nav-item .nav-link{border: 0; width:100%; border-bottom: 3px solid #e2e8f0; color:#bdbdbd; font-weight:700;}
.nav-tabs .nav-item .nav-link.active {
    border-bottom: 3px solid #1857E2;
    color: #fff;
    background-color: #1D2939;
}
.historypage .title{font-size: 18px; margin-bottom:15px; font-weight:700;}
.historypage .graytext{color:#bdbdbd; font-weight:700; font-size: 16px; margin-bottom:25px;}
.history-items .items{max-width:512px; position:relative; padding:15px 15px 15px 0; margin-bottom:10px;}
.history-items .items:after{content:""; display:block; width:20px; height:20px; position:absolute; right:8px; top:8px; background:url(../img/icon-check-circle.svg) no-repeat;background-size: 30px;}
.history-items .items .items-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
    border-radius: 8px;
    box-shadow: 0 3px 5px 2px #3e5a7e;
}
.history-items .items .items-content .left{width:90px; padding-right:10px;}
.history-items .items .items-content .img{position:relative;height: 95px; width: 70px; position: relative; box-shadow: var(--chakra-shadows-2xl); transform: rotate(-10deg); box-shadow:0 10px 20px rgb(0 0 0 / 30%);}
.history-items .items .items-content .img:after{content:""; display:block; width:30px; height:30px; position:absolute; bottom:5px; right:-15px;background:url(../img/iconP3.png) no-repeat; background-size:cover; background-position:bottom right;}
.historypage .tab-content{min-height: calc(100vh - 388px);}
.history-items .items .items-content .right{padding:10px 15px 5px; width: 80%;}
.history-items .items .items-content .right p{margin-bottom:1px; }
.history-items .items .items-content .right .text1{font-weight:700; color:#fff;}
.history-items .items .items-content .right .text2{font-weight:700; color:#999999;}
.history-items .items .items-content .right .text3{font-weight:400; color:#999999;}
.history-items .items .items-content .right .text4{font-weight:700; color:#fff;}
.history-items .items .items-content .right .text5{font-weight:600; color:#999999;}
.history-items a{text-decoration:none;}
.history-tier2 {
    display: flex;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
    background: #1D2939;
    flex-direction: column;
    position: sticky;
    box-shadow: rgba(0, 0, 0, 0.4) 0px -4px 5px -5px;
    padding: 20px 20px 0 20px;
    border: 1px solid;
}
.history-tier2 .btn-container{margin-bottom:10px;}
.history-tier2 .btn-container .btn{width:100%; display:block; margin-bottom:10px; padding: 10px;}
.history-tier2 .btn-container .btn[disabled]{opacity:0.4;cursor: not-allowed;}
.red-point{margin-bottom:20px;}
.red-point .title{font-size:20px; font-weight:700; }
.mail-address .link{border: 1px solid rgb(189, 189, 189); border-radius: 12px; display: block; padding: 15px 30px 15px 15px; color: #757575; text-decoration: none; background: url(../img/icon-arrow-right-gray.svg) no-repeat; background-size: 20px 20px; background-position: calc(100% - 15px) 53%;}
.customlink {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    text-decoration: none;
    /* background: url(../img/icon-arrow-right.svg) no-repeat; */
    /* background-size: 16px 16px; */
    /* background-position: calc(100% - 10px) 53%; */
    display: flex;
    color: #fff;
    font-size: 16px;
    gap: 12px;
    align-items: center;
}
.customlink:hover{
    background-color: #fff;
    color: #000;
}
.headertitle{font-size:18px; font-weight:700;}
.lotry-title{color:#bdbdbd; font-size:18px; font-weight:700; margin-bottom:10px;}
.lottery-items .items:after{display:none;}
.lottery-items .items .items-content .right p{font-size:14px;}
.video-container{width:100%; height:100vh; position:relative;}
.video-container video{width:100%; height:100vh; object-fit:cover; object-position:center;position: relative; z-index: 1;}
.video-container .btn-container{position:absolute; z-index: 9; bottom:20px; right:20px; margin-bottom:0;}
.video-container .btn-container a{background:#fff; border-radius:6px; display:inline-block; padding:8px 15px; text-decoration:none; color:#000;}
.video-container .btn-container a svg{width:20px; height:20px; display:inline-block; margin-right:5px; vertical-align:middle;}
.video-container #video_overlay_text{position:absolute; z-index: 9; bottom:280px; right:120px; margin-bottom:0;}
.video-container #video_overlay_text p{background:#fff; border-radius:6px; display:inline-block; padding:8px 15px; text-decoration:none; color:#000;}
.videopage{width:100%; height:100vh; overflow:hidden;}
.cus-header .container{display:block;}
.cus-header .borderdiv{padding-bottom:10px;display:flex; align-items:center;}
/*.cus-header .logo{width:100px;}*/
.cus-header .pagetitle{width:calc(100% - 200px); text-align:center; font-weight:700; font-size:18px;}
/*.cus-header .headerright{width:100px;}*/
.login-link {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    margin-right: 10px;
    display: inline-block;
    background: #1d2939;
    border-radius: 30px;
    padding: 5px 10px;
}
.bottombar{border-top: 1px solid #f1f1f1; background: #000; position: sticky; left: 0; bottom: 0; height: 80px; padding: 10px 0; z-index: 100;}
.bottomnav{display:flex; align-items:center; justify-content:space-between; max-width:540px; margin:0 auto;}
.bottomnav .items{display: flex; align-items: center; justify-content: center; height: 60px;}
.bottomnav .items a{color:#fff; font-size:11px; text-decoration:none;}
.bottomnav .items .img{
    width: 24px;
    height: 24px;
    margin: 0 auto 5px;
    filter: invert(1);
}
.bottomnav .items span{display:block; text-align:center;}

.loginform{max-width: 640px; margin: 0 auto; padding: 32px 16px; min-height: 100vh;}
.loginform .title{display:flex; justify-content:space-between; margin-bottom:30px;}
.loginform .boldtext{font-size: 22px; font-weight: 700;}
.loginform .link a{color:#1857E2; font-weight:700; font-size: 15px;}
.form label{font-size: 15px; line-height: 1; margin-bottom: 8px;}
.form .form-group{margin-bottom:30px;}
.form-control{height: 44px; width: 100%; background: #3F4C58; border: 1px solid rgb(0 0 0 / 12%); border-radius: 8px; font-size: 16px; padding: 0 16px; color:#fff;}
.form-control.error{background: rgba(242,38,89,.08); border: 1px solid rgba(242,38,89,.4);}
.form-control::-webkit-input-placeholder{color: #000;}
.form-control::-moz-placeholder{color: #000;}
.form-control:-ms-input-placeholder{color: #000;}
.form-control:-moz-placeholder{color: #000;}
.form .btn{width: 100%; max-width: 420px; height: 44px; border-radius: 8px; font-size: 15px; font-weight: 700; transition: .2s; cursor: pointer;  line-height: 14px;}
.form .buttons{text-align:center; margin-bottom:20px;}
.showpwd{margin-bottom:30px;}
.forgotpwd{text-align:center; color: #fff;font-size: 13px; line-height: 18px; max-width:360px; margin:0 auto;}
.forgotpwd a{color: #fff !important; text-decoration:underline; font-size: 13px; line-height: 18px;}
.cus_checkbox{position:relative;}
.cus_checkbox input{position:absolute; cursor:pointer; top:0; left:0; width:100%; height:100%; opacity:0; z-index:1;}
.cus_checkbox span:before{content:""; display:inline-block; margin-right:10px; width:18px; height:18px; border:2px solid #e4e4e4; vertical-align: middle;border-radius: 3px;}
.cus_checkbox input:checked ~ span:before{background:#d6001c; border-color:#d6001c;}
.cus_checkbox input:checked ~ span:after{
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}
.cus_checkbox span:after{content: ""; display: block; position: absolute; top: 50%; left: 7px; width: 5px; height: 10px; transform: translateY(-50%) rotate(40deg);}
.cus-header{background:#fff;padding-bottom: 0;}
.loginform{padding:30px 16px;}
.fgtpwdtext{font-size: 16px; font-weight: 600; margin-bottom: 24px; max-width: 500px;}
.btn.disabled, .btn:disabled, fieldset:disabled .btn{color:rgb(0 0 0 / 26%); background:#f1f1f1;}
.darkgreyfooter {
    width: 100%;
    padding: 50px 24px;
    color: #fff;
    display: flex;
    justify-content: center;
    background-color: #000;
}
.darkgreyfooter .title{font-weight:700; margin-bottom:15px;}
.darkgreyfooter ul{margin:0; padding:0;}
.darkgreyfooter ul li{list-style:none; margin-bottom:10px;}
.darkgreyfooter ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    line-height: 1px;
    letter-spacing: 0px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
}
.copyright {
    display: flex;
    align-items: end;
    justify-content: end;
    height: 100%;
    flex-direction: column;
}
.copyright span {
    font-size: 20px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
}
.addressbuttons .btn-primary{margin-top:30px;}
select.form-control{background:url(../img/select-arrow-down.png) #2a3042 no-repeat; background-position:calc(100% - 15px) 12px; color: white;}
select.form-control:focus{background:url(../img/select-arrow-down.png) #2a3042 no-repeat; background-position:calc(100% - 15px) 12px; color: white;}

.icon-arrow-back{position:relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;}
.icon-arrow-back:after, .icon-arrow-back:before{content: ""; position: absolute; width: 10px; height: 2px; background: #fff; left: 50%;}
.icon-arrow-back:before{top: calc(50% + 2px);transform: translate(-50%,-50%) rotate(45deg);}
.icon-arrow-back:after{bottom: calc(50% + 2px);transform: translate(-50%,-50%) rotate(-45deg);}
.registerform{max-width: 100%; margin: 0 auto; padding: 32px 0; min-height: 100vh;}
.registerform .btn{max-width:100%;}
.modal.show{align-items:center; justify-content:center;}
.alertpopup .title{text-align:center; margin-bottom:20px; font-weight:700; font-size:20px;}
.alertpopup p.desc{text-align:center; margin-bottom:20px; font-size:16px;}
.alertpopup .modal-body{padding:30px 30px 0 30px;}
.alertpopup .modal-footer{border-top:0;padding:0 30px 30px 30px}
.alertpopup .modal-footer button{width:100%;padding: 10px 15px; font-weight:700;}
.alertpopup .modal-footer .btn-secondary{margin-top:10px;}
.btn-secondary{background:#e2e8f0; color:#333;    border: 0;}
/*@media(min-width: 576px){.modal-dialog{max-width:384px;}}*/




@media(max-width:767px){
header .logo{width:100px;}
header .headerright{width: calc(100% - 100px);}
header .btn-back a{font-size:14px;}
.nav-tabs .nav-item .nav-link{font-size:14px;}
.mail-address{margin-bottom:20px;}
.mail-address .link{font-size:14px;}
}

header .headercart .plus{
	text-decoration: none !important;
}

.pricetag .bar .subbar.orange{
	background: #fd9800 !important;
}
.pricetag .bar .subbar.red{
	background: red !important;
}

/*bg color set form spin buttons*/
.pink-btn{
	background: #ffbbf5;
    font-weight: 700;
    border-radius: 8px;
    padding: 16px 24px;
    border: 0;
}
.blue-btn{
	background: #13b1d3;
    font-weight: 700;
    border-radius: 8px;
    padding: 16px 24px;
    border: 0;
}
.pink-btn:hover{
	background-color: #f4a2e8;
}
.blue-btn:hover{
	background-color: #00a5c8;
}

/*new changes on 22/06*/
.landing .items{
    background: url(../../assets/images/new-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding:0; height: 408px;
    color: #626262 !important;
}
.landing .items:hover{opacity:1;}
.landing .items .bgimg{height: 237px; overflow:hidden; padding: 6px;}
.landing .items .bgimg img{border-radius:6px 6px 0 0;}
.landing .items .bgimg span{overflow: hidden; border-radius: 6px; display: inline-block;}
.landing .item-content .pricetag{background:transparent;}
/*.landing .item-content .text2{background:#fff77e;}*/
.landing .item-content .pricetag .price {
    padding-right: 0;
    background: transparent;
    color: #F1A81D;
    bottom: 0;
}
.landing .item-content .bar {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    margin-bottom: 0;
    box-shadow: rgb(189, 189, 189) 2px 5px 20px;
    padding: 2px 4px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.price_row1{display:flex; align-items:center; justify-content:space-between; padding: 6px 0;}
.landing .item-content{bottom:16px;}
.landing .btnSpin-100card .item-content {
    bottom: 11px;
}
.landing .item-content .pricetag .price sub {
    bottom: -1px;
    margin-left: 5px;
    color: #555555;
    font-size: 16px;
}
.landing .item-content .pricetag .price2 {
    color: #555555 !important;
    font-family: 'KaiseiOpti-Bold' !important;
  }
  .landing .item-content .pricetag .price2 .valuetext {
    font-size: 22px;
    font-family: 'KaiseiOpti-Bold';
  }
  .landing .item-content .pricetag .price2 sub {
    bottom: -1px;
    font-family: 'KaiseiOpti-Bold';
    color: #555555;
    font-size: 16px;
  }
  .landing .item-content .pricetag .price span {
    font-size: 22px;
    font-family: 'KaiseiOpti-Bold';
    color: #555555;
}

.grid .items .hoverdiv{position: absolute; top: 0; left: 0; width: 100%; background: rgba(0,0,0,0.7); z-index: 9; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; line-height: 24px; opacity: 0; visibility: hidden; transition:0.5s all ease;}
.grid .items.soldout .hoverdiv{opacity:1; visibility:visible;}

@media(max-width:767px){
header .logo{width:100px;}
header .headerright{width: calc(100% - 100px);}
header .btn-back a{font-size:14px;}
.nav-tabs .nav-item .nav-link{font-size:14px;}
.history-tier2{
    /* position:relative; */
    /* padding: 20px 0 0; */
}
/* .historypage .nav-tabs .nav-item{width:100%;} */
.mail-address{margin-bottom:15px;}
.mail-address .link{font-size:14px;}
.videopage .container{padding:0;}
.videopage{position:relative;}
.video-container .btn-container{bottom:100px;}
.sidebar-content{padding-bottom: 120px;}
.point-expiry-div .btn, .buypointsdiv .btn, .redeem-coupon-div .btn{margin-bottom: 10px;}
.css-1nlrkd1{margin-bottom: 20px;}
.acquisition-history .css-ncfona{margin-bottom: 30px;}
.grid.details .items .bgimg img{max-width: 100%;}
table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:after{opacity:1 !important;}
.landing .items{height: 388px};
}
@media only screen and (max-width: 768px) {
  	/* For mobile phones: */
	.keep-btn-div{margin-top: 1rem;}
	.cancel-btn-div{margin-top: 1rem;}
	.cus-header .headerright{width: calc(100% - 100px);}
	.menu-form .form-main-div{
		width: 100% !important;
	}
}
div.dataTables_wrapper div.dataTables_length select {
    min-width: 80px !important;
}
textarea#address {
    padding-top: 8px;
}
textarea#address::placeholder {
    line-height: normal;
    padding-top: 4px;
    margin-top: -4px;
}
table.dataTable thead > tr > th.sorting:before{content:"" !important; display:block; width:12px; height:9px; background:url(../img/sorting-arrow-up.png) no-repeat; background-position:center;}
table.dataTable thead > tr > th.sorting:after{content:"" !important; display:block; width:12px; height:9px; background:url(../img/sorting-arrow-down.png) no-repeat; background-position:center;}

#start_date_time {
    color: #555555;
    background-color: transparent;
    font-weight: bold;
    text-align: center;
}

.hoverdiv {
  position: relative;
  text-align: center;
  font-family: Arial, sans-serif;
}

.sold-out-text {
    display: inline-block;
	position: relative;
  	font-size: 58px;
  	color: white;
  	/* transform: rotate(326deg); */
}
.coming-soon-text-div {
    position: absolute;
    z-index: 999;
    bottom: 33%;
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding: 19px;
    border-radius: 15px;
    font-size: 30px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    height: 250px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    top: 0;
}

@media (min-width: 575px) and (max-width: 768px) {
	.coming-soon-text-div{
		font-size: 26px;
	}
}
@media (min-width: 364px) and (max-width: 574px) {
	.coming-soon-text-div{
		bottom: 30%;
    	/* height: 275px; */
	}
}
@media only screen and (max-width: 363px) {
	.coming-soon-text-div{
		bottom: 33%;
    	/* height: 275px; */
	}
}
input::placeholder, textarea::placeholder{
	color: gray !important;
}
/*
@media(max-width:1199px){
body.set-bg-image{background:none !important;} */
/*body.set-bg-image:before{content:""; display:block; width:100%; height:100%; position:fixed; top:0; left:0; right:0; background:url(../../assets/images/背景画像.jpg) no-repeat; background-size:cover; }*/
/* body.set-bg-image header, body.set-bg-image .container-fluid, body.set-bg-image .main-container{position: relative;} */
/* } */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d4d3d378;
    z-index: 999999;
}

#status {
    width: 90px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -45px;
    text-align: center;
}

.spinner-chase {
    margin: 0 auto 10px;
    width: 40px;
    height: 40px;
    position: relative;
    animation: spinner-chase 3.5s infinite linear both;
}

.chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: chase-dot 3.0s infinite ease-in-out both;
    &:before {
        content: '';
        display: block;
        width: 25%;
        height: 25%;
        background-color: #556ee6;
        border-radius: 100%;
        animation: chase-dot-before 3.0s infinite ease-in-out both;
    }

    &:nth-child(1) {
        animation-delay: -1.1s;
        &:before{
            animation-delay: -1.1s;
        }
    }
    &:nth-child(2) {
        animation-delay: -1.0s;
        &:before{
            animation-delay: -1.0s;
        }
    }
    &:nth-child(3) {
        animation-delay: -0.9s;
        &:before{
            animation-delay: -0.9s;
        }
    }
    &:nth-child(4) {
        animation-delay: -0.8s;
        &:before{
            animation-delay: -0.8s;
        }
    }
    &:nth-child(5) {
        animation-delay: -0.7s;
        &:before{
            animation-delay: -0.7s;
        }
    }
    &:nth-child(6) {
        animation-delay: -0.6s;
        &:before{
            animation-delay: -0.6s;
        }
    }
}

@keyframes spinner-chase {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes chase-dot {
    80%, 100% {
        transform: rotate(360deg);
    }
}

@keyframes chase-dot-before {
    50% {
        transform: scale(0.4);
    }
    100%, 0% {
        transform: scale(1.0);
    }
}


.mCSB_horizontal.mCSB_inside > .mCSB_container {
    margin-bottom: 0 !important;
    /*padding-bottom: 10px;*/
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
    bottom: -7px;
}

.mCSB_scrollTools .mCSB_draggerRail {
    background: #fff !important;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background-color: #fff;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
    margin: 7px auto !important;
    height: 2px !important;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal{
	    bottom: -16px !important;
}

.show-membership img{
	border-radius: 10px;
}

.refer-btn {
    width: 48%;
    margin-bottom: 10px;
    padding: 10px 5px;
}

.refer-list-btn {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
    border: 1px solid;
}

.ref-btn-dis {
    pointer-events: none !important;
}

.table-btn {
    padding: 7px 25px !important;
    width: 160px !important;
    height: 38px !important;
}

.amex {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAA3NCSVQICAjb4U/gAAACi1BMVEUAAAAAAAAAdKIAdqcGdqoDeqkDeKoDe6sFeqoFeqwCeqoGe6wGeasGeqwGe6wFeqwFeqwFeqsGe6oFeawEeqwEeqwFe6wHeaoFe6oFeasFe6wFeawHe6wIfKwJfKwKfa0Lfa0Mfq0Of64Pf64QgK8RgK8Sga8TgbAUgrAVgrAWg7EXg7EYhLEZhLIahbIbhbIdhrMfh7QgiLQhiLQjirUkirUli7YnjLYojLcqjbcsj7gtj7kukLkvkLkwkbkxkboykrozkro0k7s1k7s2lLs3lLw4lbw5lbw6lr07lr08l709l75Amb9Bmr9Dm8BFnMBHncFIncFJnsJKnsJLn8JMn8NNoMNOocRPocRQosRRosVUpMZVpMZWpcZXpcdYpsdZp8dap8dbqMheqclgqslhq8pjrMpkrMtnrsxpr8xqr81tsc5vss5wss9xs89ztNB0tdB1ttF6uNJ8udN9utN+utR/u9SAu9SBvNWCvNWDvdWEvdWGvtaHv9aIv9eKwNeMwdiPw9mQw9mRxNqTxdqUxtuVx9uWx9yXyNyYyNyZyd2ayd2byt2cyt6dy96fzN+gzN+hzd+izeCjzuCkzuCn0OGp0eKq0eKr0uOs0+Ot0+Ov1OSw1eSy1uWz1uW01+W32Oa62ui72+i82+i+3Om/3enC3urE3+vF4OvH4ezI4uzJ4u3K4+3L4+3N5O7O5e7P5e/R5u/S5/DT5/DV6PHW6fHX6fHY6vHa6/Lb7PPc7PPd7fPe7fTf7vTg7vTi7/Xj8PXk8fbm8vbn8vfo8/fp8/fq9Pjr9Pjs9fjt9fnu9vnv9vnw9/rx9/ry+Prz+Pv0+fv1+fv2+vz4+/z5+/37/P38/f7+/v7///+B6xdgAAAAHHRSTlMAARYaJ0FIT1pcYG6YmZyssrPDys3T2tvt9PX+1nJQbwAAAnFJREFUOMtjYOAWESMWiAqwMzBwyZAEOBn4SdMgzCBImgYJUjVI0UeDkoGBrq6BgZ6MhgECqAA56nJ6ICZIWN3AQAeuoevIrvOHDuy6ZLl1366ru3ft2nVl167dJ08cOXHo/P6Dl3Yd33Nm15mdJw+thGnQO2ei2nzDRaZp405Zmd2KxhYWW2TMTeUmJOWv0NOPKVJ1uNEi4329LByuoXKaabvZNZcQw8u5IUANrYuX7pA5eNSxJCk/OPfGBe2ZKotbnAw6kTSs8Axslpnh0mtRr74YqME7LGaHjI6G4uakfOfGG21q3c5hLf7TNDMQGhqUMjN9vFz6O2TCjgA11M+Zs13m4oXIvKT8bOs+i7DMNJks/xuhcggNKQ3b+vfGpS65kLTqVNyRpLi4uP1xl6d09jRPPF+blHC29WB+SsX5PXF1cA0lE/1lWiZOnFg2saZrIgxkgojiyr6JZTLxQFZ5ycSJpRTHdOAmMMiM2Agk103esGnTxiWzwELTVwOJyes29aFqiFtrCQR+x05FuVpaWqcfA3I8FlQDyandjpaWh5KtLI3RNCxTA8ZypHewb7vNrvWKk2QW7wiIzU3YteusXtXWrQvllm+diK5BRl6+4JyW2omJ2qkRiqtknN2VF+UCxWbmKCi5b3GU1fRE16B+4cK5RCe3pH6z6bP3nZOZsyYoMzftwsWrp4+skZt/4kA1mqfjVqgAgcORw/Z23kejg86r7JxXm1AIFOqzVdFLAEoahaNqiDgMBplZQGKNjC6QbD0MA3vmAomN5XTLcaQASQZe0jSIM3CQpoGPgZFHmgT1QkwMDAzMrOxEAjYWBgYAvI9h1MHdhQIAAAAASUVORK5CYII=") #fff;
  }

  .visa {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAA3NCSVQICAjb4U/gAAABvFBMVEUAAADQ0NDa2tra2trZ2dnY2Nja2trt7e3t7e0mM3onNHspNXkqN30rN30sOH4tN3ovO4AwPIAyPoE1QYM3Q4Q4Q4U4RIU5RYY8R4g9SIhCTYtDToxGUY5HUo5JU49JVJBOWJJQW5RSXJVTXZZVX5dXYZhYYplaY5pfaJ1kbaBlbqFoaZFocaNpcqNqc6RtdqZvd6dzcpV0fKp2f6x5ga18g698hK99hK99hbB+hrCAh7GDi7OHjrWIj7aJkLeNk7mNlLqOlbqRl7yUmr6WnL6YnsCbocKepMSjqMekqceprsqrsMysscytss2uss2xts+xttC0uNG1udK1utK2utK3u9O6vdS7v9W8wNa9wda9wdfBxNnDx9rEx9vFyNzFydvHy93Kzd/Mz+DR0+LS1OPT1uTVnV/V1+XX2ebY2NjZuJbZ2+faoVza3Ojc3+rf4evf4ezi5O7j5e7n6fHp6/Lq6/Lr7PPsmC3snTfs7fPunjnu7/Tu7/Xw8fbx8vfy8/f09fj09fn19vn29/r3z5332LH39/r42LD42bL42bP5+fv76tX77dz7+/v7+/387dv9/f7+9ev//v3///9+dhG/AAAACXRSTlMAGxuq7e7u+vsOT6YMAAABbklEQVQ4y+WUV1cTYRQAlwSIsxoLltgLKgZ7AwV777FiL9gT1x4FGxpb0Gg0On/YBx83D+wz8z7nu+fe800QpNKtpTHSmk4FQUt7pu4YqWfaW4L0BBOQSQdt9SRCvS0omYjSOBZ+fB0d/f5T/VQoDHi6cF4b1/Zt6d9fUZ+cLFyMvfDny6vhN3/1EOwegW4/LAHgpb6bBpNr8ZE2PBz+rQvIvrgJ2+2DdaeOba7pXoBbceHAxHvfHIRNHoHjLobLqlZnkIeDcaHIlAeuh6Jb4bb9EG58rh6G4nTWNNnSHFYNZcnrcsKK1d4Qpl63MY9lrmRmE6GHcCdc0Q7mqt5ZAfM9C7uKvfA0LlyASSzUt7Daz+pIyGw7+c+JuPAxCxzV+7DHrq5tOzqhbxA6crlcSE+TS+dhVk0vwRk7AFhb64a76lIWva7EhKEoKqvvo6jqs6sD526UNYoeq5ajR78a4/k/JM5M4pAlTGUqSBrjf5znrWNE0ZcCAAAAAElFTkSuQmCC") #fff;
  }

  .mastercard {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAA3NCSVQICAjb4U/gAAACc1BMVEUAAADQ0NDa2tra2trZ2dnY2Nja2trt7e3t7e3MAADMAQHMBATNCQnOCwvODAzODg7PDwnPERHRGxvSFgfSHh7SHx/SIB7THhDTJCTTJibTJyfUKSnVIAXVLS3VMDDWMjLWNTXWNjbXIQDXLyLXNS7XNzfXOzvYLxbYPT3YPj7Y2NjZOy/ZRUXaSEjaSUnbLQDbLgDbS0vbTU3cSj/cU1PdNADdSjTdVVXdVlbeNwDeW1vfYmLgUDPgZWXgZmbgaGjhXkvhamrhbW3ia2Lib2/jXDfja1njdXXkeHjkeXnke3vlgIDlgYHmg4PmhITmhobnh4fniIjni4voVgDojIzokJDqXADqaiTqlpbqmJjqmZnqmprrnJzrn5/tpqbuqqrura3urq7vsbHvsrLvs7PwbADwbQDwtLTwtbXwt7fxvLzycgDyjULyvr7yv7/zdQDzmVvzn2fzxMTzxcXzx8f2fwD21tb3gQD3x6/3ybL32Nj4hAD43t7439/44OD5iQD54eH54uL65ub65+f76+v7+/v88vL89PT99/f9+Pj9+fn+lwD+/f3/mQD/mgT/nQv/nw//oRT/oRX/oRb/ohj/qCf/qSn/qSr/qy3/rDH/rjX/rjb/sT7/sj//s0L/tEX/tUf/tUj/tkn/t0v/uVD/uVH/u1X/vFj/vVr/vl7/v2H/w2n/xGz/x3P/yHb/yXr/zob/z4j/0Iv/1Zj/1pr/153/2J7/26X/3q7/4LL/4LP/4bX/4bb/5cD/5sL/58P/58T/58X/6sz/7NH/7dL/8d7/8t//9OX/9eb/9ef/9ur/9+v/+vT/+/X//Pj//fz///90HdR0AAAACXRSTlMAGxuq7e7u+vsOT6YMAAABmElEQVQ4y2NgYGJm0SISsDAzMTAwsrG3XiAStLKzMTIwc1wgAbAzM7C2kqKhlZVB6wJJQItSDS3R5orSmo7pPUD2+d2r506bvWzLKdwaOr14OSFAMuXCzqm9ENC//hwODc2KnHDAVdCLALNOYNXQLo9QzylgGoykY+YZbBqckNSrpKamdSPpWINFQw03kgZhJSUlSyQNfUcxNfjzyfFISUDUi5WCQO+EOZOgGmZswNSgY3VBpyPOxJZf1d4uWdxZW9k45+SBtStWTVowffH8o/MxNUgHNsY0entmxrW5R6VnhNb6NlVu6p247uCOs3sOH941DYuG9MTa3JCiGp+S+CzdrrziBOuK5b1L9x8/tG3vko0bsWjQafCKaIhNqon0qyvzqApyKZMtPLZl8/bTR1Zv3Xd6JRYnBeiJChkJGqppWIgoKKi7mTnIVC9YPHnhnHlTJiyaM3EDgWANz87OLicQrCgRx6VvYJBPIOJQk4ZNWD3BpIGS+DhdCSc+0pM3JAOpkpCBaJOnSS5mSC7ISCwqgYUriYUxAINRRW57ksG5AAAAAElFTkSuQmCC") #fff;
  }

  .discover {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAA3NCSVQICAjb4U/gAAACLlBMVEUAAADQ0NDa2tra2trZ2dnY2Nja2trt7e3t7e3vzbDvzbEBAQECAgIDAwMTExMUFBQWFhYYGBgZGRkeHh4jIyMmJiYnJycpKSksLCwtLS0uLi4wMDAzMzM0NDQ3Nzc6Ojo8PDw/Pz9CQkJDQ0NHR0dJSUlKSkpMTExOTk5PT09RUVFWVlZYWFhcXFxgYGBiYmJjY2Nra2tsbGxtbW1wcHBxcXF0dHR1dXV2dnZ3d3d4eHh8fHx9fX1+fn6AgICBgYGCgoKDg4OLi4uMjIyPj4+VlZWWlpabm5udnZ2enp6fn5+hoaGjo6OoqKirq6usrKyvr6+wsLCysrKzs7O4uLi7u7u8vLy9vb2/v7/AwMDBwcHExMTGxsbHx8fJycnLy8vQ0NDR0dHS0tLU1NTW1tbY2NjZ2dnb29vd3d3f39/h4eHi4uLn5+fo6Ojp6enr6+vs7Ozt7e3v7+/x8fHy8vL1giD1giH1gyP1hCT1iS31ii71izD1jDL2kTv2kjz2kz/2lED2lkP2lkT2l0X2mUn2pmH2pmL3m033n1X3oVf3pF73pV739/f4q2n4q2r4rWz4r3D4r3H4sXT4s3f5uoT5u4b5vov5+fn6xJb6yJ36yqD6zKT6+vr7zqj70a372Ln7+/v83sT838b84Mj84sv848785M/85dD89O78/Pz959X96Nb969z9/f3+8+r+9e7+9u/+9/H++PP++vb++vf+/Pn+/Pr+/fz+/v7////OeAUcAAAAC3RSTlMAGxuq7e7u+vv7+w/+RoMAAAGnSURBVDjLY2BgYmZJJRKwMDMxMDCysS/YSSRYwM7GyMDMsZMEwM7MwLqAFA0LWBlSd5IEUumkwc7A0HPBTuvcTAN13535FuqWJTsXdrdP2+IZuHOnR6iNgYHVDgMDsySEBin3QE2NnWJpKk6x8T1iDsku6UvKSktL+4Kld84RzBb3Co9ZyRPnJYikIXHnAr5ssTR9hYCVIfIg8UmlILBCOMFfa6e4jWvQWh5/e0kUDTuFMsTSpvvI6gUog8QngzVsdDRVC9spbu7st5bbmL8ASUNEipEi0ElRRQEyhYL+K/2Tl5cD1U/cmSMgsXOneHRe3krenSpuCA26ckp2xTu1s2xFZSJ3JqiJqKbvXNrbOWPrzp0m3jt36sjJyS2Q35ms0rNz53wSg3VRI2kaVlc1kKRhVU0pSRoWVZaSpGF2RSkpGjZNAMcM0RoW15aSomE9JOKJ1bB1VnUpCRq2z6srLSVew+ZZyMoJalgzpbq0lGgNG+Z2lGKAplQcxcy6uV3lpVhAKyuWgmzLwqktpTgAJzNaUblt2cz+xnocoLmNiw1YuJJYGAMAEKBGzN/0FVAAAAAASUVORK5CYII=") #fff;
  }

  .expiry-date-group {
    float: left;
    width: 50%
  }

  .expiry-date-group input {
    width: calc(100% + 1px);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .expiry-date-group input:focus {
    position: relative;
    z-index: 10;
  }

  .security-code-group {
    float: right;
    width: 50%
  }

  .security-code-group input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .zip-code-group {
    clear: both;
  }

  #PayButton {
    outline: 0!important;
    height: 42px;
    font-size: 16px;
    background-color: #54C7C3;
    border: none;
    margin-top: 30px;
    width: 48%;
    line-height: 28px;
  }

  #PayButton:hover {
    background-color: #6DCECB!important;
  }

  #PayButton:active {
    background-color: #4FBCB9!important;
  }

  #PayButton:disabled {
    background: rgba(84, 199, 195, .5)!important;
    color: #FFF!important;
  }

  #Checkout {
    z-index: 100001;
    background: ;
    width: 50%;
    min-width: 300px;
    height: 100%;
    min-height: 100%;
    background: 0 0 #ffffff;
    border-radius: 8px;
    border: 1px solid #dedede;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  #Checkout>h1 {
    margin: 0;
    padding: 20px;
    text-align: center;
    background: #EEF2F4;
    color: #5D6F78;
    font-size: 24px;
    font-weight: 300;
    border-bottom: 1px solid #DEDEDE;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  #Checkout>form {
    margin: 0 25px 25px;
  }

  #Checkout label {
    color: #46545C;
    margin: 15px 0;
    font-size: 15px;
    font-weight: 600;
  }

  .input-container {
    position: relative;
  }

  .input-container input {
    padding-right: 25px;
  }

  .input-container>i, a[role="button"] {
    color: #d3d3d3;
    width: 25px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    position: absolute;
    top: 2px;
    right: 2px;
    cursor: pointer;
    text-align: center;
  }

  .input-container>i:hover, a[role="button"]:hover {
    color: #777;
  }
  .amount-placeholder {
    font-size: 20px;
    height: 34px;
  }

  .amount-placeholder>button {
    float: right;
    width: 60px;
  }

  .amount-placeholder>span {
    line-height: 34px;
  }

  .card-row {
    text-align: center;
    margin: 20px 25px 10px;
  }

  .card-row span {
    width: 48px;
    height: 30px;
    margin-right: 3px;
    background-repeat: no-repeat;
    display: inline-block;
    background-size: contain;
  }

  .card-image {
    background-repeat: no-repeat;
    padding-right: 50px;
    background-position: right 2px center;
    background-size: auto 90%
  }

  .cvc-preview-container {
    overflow: hidden;
  }

  .cvc-preview-container.two-card div {
    width: 48%;
    height: 80px;
  }

  .cvc-preview-container.two-card div.amex-cvc-preview {
    float: right;
  }

  .cvc-preview-container.two-card div.visa-mc-dis-cvc-preview {
    float: left;
  }

  .cvc-preview-container div {
    height: 160px;
  }

  .amex-cvc-preview {
    background: url("data:image/png;base64,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") center center/contain no-repeat;
  }

  .visa-mc-dis-cvc-preview {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACOCAMAAAASE4S+AAAAAXNSR0IArs4c6QAAAadQTFRFAAAAzbFj+NyAyLNg+N2DzbRk+96CzrVj+96AzrNj+92By7Rl+92AzbRl/eCDzrRl/t+DzrVl/t+CzbVm/t+C3MFt3MFv/N2B/N6CzrRm/uCDzrRm/uCC7M93/N6CAAAAAQEBAgIBBAQCBQUDBwcECQgFDAsGDg0HEA4IEQ8JFRMLFxUMIBwQIR0RJSETKyYWLikYLyoYMCsZMSsZNC4bNzEcOTIdQDkhQTkhQzsiRT0jRj4kSkEmTEMnWE4tWU8uWk8uXFEvXVIwXlMwX1QxaV02bWA4bmE5cWQ6eGo+eWs+fW5Afm9Bi3pHjHtIkH9KmIZOmYdPnIlQnYpRo5BUppJVqJRWqpZXq5dYrJdYrZhZuaNfvaZhvqdiwKljwapjxK1lybFnyrJoy7NozrVm1Ltq171u2L5v2b9s2b9t2sBt3cNy3zEx3zIx38Rz4MVz4cZ04kI552NI6GVJ6Mx36s5368957dF674xb79J78NN78dV78tV789Z99Nd99dh+9rZv9th+9tl+99l/+duA+sx5+sx6+t2B+92B/N6B/d+C/uCD////AikOogAAAB90Uk5TACQkJSU9PT4+Q0NERJqav7/AwNjY4uLi4u7u8/P6+u6knPAAAAJkSURBVHja7d3pTxNBGMfxQbwAW06Pcj0tntQT8b7v+0JFxaserQcuKlQUFbFUaqvjH+1uG0lMfEETie4z39+bJ/tik/1kjt3MbDLGBFkWbeu0CtPZFq03v7KwxSpO04KKcmm7VZ32xeW2VK70nUF7tlj1afJnH+tA6k3UBWbUrHKBudJ0u8DsNtaJwIQJEyZMmDBhwoQJEyZMmPPCFCcCEyZMmDBhwoQJEyZMmDBhwoQJEyZMmDBhwoQJ010m+5swYcKECRMmTJgwYcKECRMmTJgwYcIMFfPHP8/vz5PLjnpzzmg2F07mxIhXVUYmwsjMVan0nbkQMrOeN1aY+zAsjHleNoRMf1x+rWa6KfjjM4RMvxdWN63+4QaYMGHC/EvM6b0HgpI6tvtoyq9vz+4/clcf89sJ2eiXIZGEyJD9sEl6RAa1MVPbpczsk8vT52SHHZCDUxelXxtzW/x4wPx+6cxn+0A2208PX9pB2aONef7xk3JrBjkth4Jysnf9fX1T0Czzmqx+6pcvcel/pJd5RRLXg1p6d0vWvdHKHJCeG2XljLVb5aZS5r2E3A6uTiUu2Km1klLK3CXxZDK5xd6RNYd3St+MTuaryr94G6y92iuy77X+b9rSi/d8usOEyZIXC5gsR7O5MN9bRexvwoQJEyZMmDBhwoQJEyZMmDBhwoT5vzNLLihLJu8CM2+6XGB2meUuMFeYyEf9ysmIqcsUtSuLmQZjGp8pdxafNxtjamIZ1f12MhOrDQ6uXhRLD4/nVb4/S/nx4XRsSeUY8prGtOI0186eKl8Xae3QSOxojTSUgT8BEvkXyqDHONgAAAAASUVORK5CYII=") center center/contain no-repeat;
  }

  .submit-button-lock {
    height: 20px;
    margin-top: -2px;
    margin-right: 7px;
    vertical-align: middle;
    background: url("data:image/png;base64,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NQxdFfpzGC4sNKwm7Hm4VXh+eHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4+ziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD/iRPCqeVMrvRfuXflBNeTu4f7kufGK+eN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl/ygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ/KUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752/ob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy+KK4k8l3JLr31l9V/ndzPaE7b2l9qX7d+B2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI+0MqiyvUqvakfVp+qk6oEaj5rmvep7t+2d2sfb17/fbX/TAY0DxQc+HhQcvH/I91BrrUFtxWHc4azDz+ui6rq/Z39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv/eD1Q3sTq+lQM6O5+AQ4ITnx4sf4H++eDDzZeYp9qukn/Z/2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0/m/989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX+x+aem172296XCz/ZbjrY6+BX3n+l37L972un3ljv+dGwOLBvruLr57/17cPel93v3RB6kPXj/Mejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy//lfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0+OFvyn+tveV0auffnf7vWdiycTwa9HrmT9K3qi+OfrW9m3nZOjk03dp76anit6rvj/2gf2h+2P0x5Hp7E/4T5WfjT93fAn88ngmbWbm3/eE8/syOll+AAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAAgYMEyIzOUpTVFViY3N2gJmcnaipq7fX3ebx+Pn8eTEuDQAAAI9JREFUKM/N0UkOglAQRdFHDyK90n64+9+lAyQgookjuaNKTlJJpaQlO2n6sW8SW/uCjrku2EloWDLhi3gDa4O3pTtA5Tt+BXDbiDsBmSQpAyZ3pRhoLUmS1QLxSilQPOcCSFfKgfxgPgfZ9ch7Y21LCcdd5wVH5SckEzkXc0ylpPJnMpETmX/d9eUpH1/5AKrsQVrz7YPBAAAAAElFTkSuQmCC") center center/contain no-repeat;
    width: 14px;
    display: inline-block;
  }

  .align-middle {
    vertical-align: middle;
  }

  input {
    box-shadow: none!important;
  }

  input:focus {
    border-color: #b0e5e3!important;
    background-color: #3F4C58!important;
    color:#fff !important;
  }

  .hide {
    display: none;
  }

  .mb-50 {
    margin-bottom: 50px !important;
  }

  .error {
    color: red !important;
    margin: 10px !important;
  }

  .btb-group {
    display: flex;
    /* margin-top: 22%; */
    justify-content: space-between;
  }

  .btn-light {
    background-color: #d3d4d5 !important;
  }

  #PayButton.btn-light:hover {
    background-color: #bac0c7!important;
  }

  .icon-image{
    width: 30px !important;
  }
  .link {
    text-decoration: none;
    font-weight: 600;
    color: #fff!important;
}

  .note-text {
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
  }


  @media only screen and (max-width: 991px) {
    .btb-group {
        margin-top: 5%;
    }

    #PayButton {
        margin-top: 10px;
    }

    .reserve-class {
        margin-left: 15px;
    }

    #Checkout {
        min-width: 450px;
    }

  }

  @media only screen and (max-width: 479px) {
    .note-text {
        font-size: 13px;
        letter-spacing: 0px;
    }

    #Checkout {
        min-width: 350px;
    }

    #Checkout>h1 {
        font-size: 22px;
        padding: 15px;
    }

    .reserve-class {
        margin-left: 10px;
    }

    .font-small {
        font-size: 12px;
    }

    #Checkout>form {
        margin: 0 15px 15px;
    }

    #PayButton {
        white-space: nowrap;
        font-size: 12px;
        width: 49%;
    }

  }

  @media only screen and (max-width: 360px) {
    #Checkout {
        min-width: 300px;
    }

    #Checkout label {
        font-size: 13px;
    }

    #PayButton {
        font-size: 14px;
    }

    .font-small {
        font-size: 11px;
    }

    #PayButton {
        white-space: nowrap;
        font-size: 12px;
        width: 49%;
    }
  }




  /* @media only screen and (max-width: 768px) {
    .security-code-group label {
        white-space: nowrap;
    }
    .btb-group {
        margin-top: 45%;
    }
    #PayButton  {
        height:  60px;
    }
} */
.bonus-point-color {
    color: #048f04 !important;
}


.member-ship-bar {
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    height: 20px;
    left: 0px;
    max-width: 326px;
    margin-inline: auto;
    width: 100%;
    background: rgb(216, 216, 216);
    margin-bottom: 3px;
}

.member-ship-bar .subbar {
    background: #252422 !important;
    height: 100%;
}

.font-member-ship span{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}



/* ---------- Add new css ---------- */

.btn-box {
    display: flex;
    align-items: center;
    margin-top: 15px;
    line-height: 50px;
}

.btn-box.btnContent {
  	min-height: 50px;
}

.btn-spin-100 {
  	max-width: 100% !important;
}

.btn-box .btn-common {
    font-size: 15px;
    font-family: 'KaiseiOpti-Bold';
    color: #fff;
    border-radius: 3px 10px 3px 10px;
    background: linear-gradient(180deg, rgba(234,234,234,1) 0%, rgba(252,253,248,1) 21%, rgba(255,255,255,1) 47%, rgba(252,253,248,1) 75%, rgba(234,234,234,1) 100%);
    box-shadow: none;
    width: 100%;
    cursor: pointer;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-text-stroke: 0.5px #555555;
    box-shadow: 2px 5px 20px #00000038;
}

.btn-box .btn-common.green-btn {
    background-color: #00FF00 !important;
    margin-right: 20px;
}

.btn-box .btn-common.blue-btn1 {
    /* margin-right: 10px; */
    color: transparent !important;
    text-shadow: 0.7px 0.5px 0px #6CB4D3 !important;
}

.item-content.item-custom {
    bottom: 24px !important;
}

.item-content.item-custom-sold {
    bottom: 86px;
}

.item-content.item-custom-coming {
    bottom: 50px;
}


#expiry_points tr th{
    white-space: nowrap !important;
}

.invite-point-text {
    font-size: 12px !important;
    color: #8b8686 !important;
}

.change-order {
    display: block !important;
    text-align: end !important;
    margin-left: auto !important;
    float: none !important;
}

.btn-image img {
    max-width: 22px;
    vertical-align: text-bottom;
    margin-right: 5px;
}

.ml-7 {
    margin-left: 7px !important;
}

.delete_account-content label,
.delete_account-content ul,
.delete_account-content p {
    font-size: 14px !important;
}

.delete_account-content ul {
    padding: 10px 25px !important;
}

.delete_account-content ul li {
    list-style-type: disc !important;
}

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

.image-position {
	margin-top: 10px;
	right: 15px;
}

.paypay-note {
	color: #dc3545;
	text-align: left;
	margin-top: 1rem;
	font-size: 9px;
    FONT-VARIANT: JIS78;
    line-height: 1.5;
    margin-bottom: 0 !important;
}

.w-90 {
    width: 90% !important
}

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

.icon-image{
	width: 25px !important;
}

.btn-line {
    background: #06c755;
    color: #ffffff;
    padding: 8px 24px;
}

.btn-line img {
    margin-right: 5px;
    width: 27px;
}

.btn-line:hover {
    background:#000;
    color: #ffffff;
}

.au-image {
    height: 22px !important;
    max-width: none !important;
    width: 120px !important;
}

.softbank-section {
    padding: 0 !important;
    min-height: 59px;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.softbank-section img{
    height: 50px !important;
    max-width: 50px !important;
    vertical-align: middle;
}

.btn-box {
    display: flex;
    align-items: center;
    margin-top: 10px;
    min-height: 50px;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.spin-btn100 {
    /* max-width: 100% !important; */
    color: transparent !important;
    text-shadow: 0.7px 0.5px 0px  #FFF !important;
    background: linear-gradient(180deg, rgba(231,146,215,1) 0%, rgba(224,159,183,1) 14%, rgba(230,177,219,1) 47%, rgba(224,159,183,1) 82%, rgba(231,146,215,1) 100%) !important;
}

  .btn-box.btnContent {
    min-height: 50px;
  }

  .btn-box .btn-common.brown-btn {
      background-color: #271008 !important;
      margin-right: 20px;
      box-shadow: 0px 3px 0px #fff !important;
  }

  .btn-box .btn-common.red-btn {
      background-color: #A50505 !important;
      box-shadow: 0px 3px 0px #fff !important;
  }

  .item-content.item-custom {
      bottom: 24px !important;
  }

  .item-content.item-custom-sold {
    bottom: 76px;
  }

  .item-content.item-custom-coming {
    bottom: 30px;
  }

  #expiry_points tr th{
      white-space: nowrap !important;
  }

  .invite-point-text {
      font-size: 12px !important;
      color: #8b8686 !important;
  }

  .change-order {
      display: block !important;
      text-align: end !important;
      margin-left: auto !important;
      float: none !important;
  }

  .ml-7 {
      margin-left: 7px !important;
  }

  .delete_account-content label,
  .delete_account-content ul,
  .delete_account-content p {
      font-size: 14px !important;
  }

  .delete_account-content ul {
      padding: 10px 25px !important;
  }

  .delete_account-content ul li {
      list-style-type: disc !important;
  }

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

.pricetag .bar .subbar.yellow {
    /* background: linear-gradient(0deg, rgba(103,102,30,1) 0%, rgba(243,240,57,1) 100%) !important; */
    background: url(../../assets/images/green-bar.png) no-repeat;
    background-size: 100% 100%;
}

.pricetag .bar .subbar.pink {
    /* background: linear-gradient(0deg, rgba(120,13,109,1) 0%, rgba(221,40,125,1) 100%) !important; */
    background: url(../../assets/images/pink-bar.png) no-repeat;
    background-size: 100% 100%;
}

.landing .item-content .pricetag .price img {
    max-width: 25px;
}

.grid.details .item-content .pricetag .price img {
    max-width: 20px;
}

.grid.details .bar {
    max-width: 800px;
    background-color: #ffffff;
    background-size: 100% 100%;
    border-radius: 20px;
    padding: 2px 4px;
    height: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid.details .bar.card-bar .com-span {
    width: 100%;
    max-width: 55px;
}

.spin-btn-width {
  max-width: 130px !important;
  width: 100%;
}

.bar.card-bar .com-span.barBlue {
    background: linear-gradient(180deg, rgba(138,201,247,1) 0%, rgba(138,201,247,1) 38%, rgba(111,172,217,1) 70%, rgba(192,197,201,1) 100%);
}

.bar.card-bar .com-span.orangeBar {
    background: linear-gradient(180deg, rgba(255,196,139,1) 0%, rgba(255,196,139,1) 38%, rgba(232,183,135,1) 65%, rgba(214,201,190,1) 100%)
  }

  .bar.card-bar .com-span.redBar {
    background: linear-gradient(180deg, rgba(255,190,185,1) 0%, rgba(255,115,103,1) 38%, rgba(194,112,104,1) 70%, rgba(224,201,199,1) 100%);
  }

.bar.card-bar .com-span.box-1 {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.bar.card-bar .com-span {
    display: inline-block;
    max-width: 27px;
    height: 14px;
    background: transparent;
    width: 100%;
}

.bar.card-bar .com-span.box-13 {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.btn-box .btn-common.pink-btn {
    color: transparent !important;
    text-shadow: 0.7px 0.5px 0px  #ED8290 !important;
}

.btn-box .btn-common .spinCount {
    font-size: 24px !important;
    margin-top: -4px;
    margin-right: 1px;
}

.coming-soon-text-div img {
    max-width: 200px;
    width: 100%;
}


.history-items .items .coin_box_new {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    border-radius: 5px;
    /* background-color: #dbdbdb; */
    padding: 2px 5px;
    gap: 3px;
    font-size: 15px;
    /* color: #000; */
    font-weight: 800;
    flex-wrap: wrap;
    font-size: 20px;
    border: 1px solid;
}

.history-items .items .coin_box_new sub {
  bottom: -1px;
}

.history-items .items .coin_box_new img {
  width: 100%;
  max-width: 22px;
}

.history-items .items .coin_box_new p {
  width: 100%;
  text-align: center;
  font-size: 16px;
}

.history-items .items .coin_box_new.mobile_view {
    display: none;
}
.desktop_view {
    display: block;
}

@media (max-width:767px) {
    .grid.details .bar.card-bar .com-span {
        max-width: 38px;
    }
}
@media (max-width:575px) {
    .grid.details .bar.card-bar .com-span {
        max-width: 32px;
    }
    .history-items .items .coin_box_new.mobile_view {
        display: flex;
    }
    .desktop_view {
        display: none;
    }
}

.XimgBox {
    text-align: center;
    margin-bottom: 0px;
    padding: 10px;
}

.XimgBox img {
    width: 100%;
    max-width: 40px;
}

@media (max-width:575px) {
    .copyright {
      justify-content: flex-start;
      margin-top: 20px;
  }
  .btn-box .btn-common {
    font-size: 16px;
  }
  .btn-box .btn-common .spinCount {
    font-size: 20px !important;
}
.bar.card-bar .com-span {
    max-width: 24px !important;
}
}

@media (max-width:479px) {
    .grid .btnFixBox .bar.card-bar .com-span {
        max-width: 25px !important;
    }
}

@media (max-width:375px) {
    .btn-box .btn-common {
        font-size: 14px !important;
      }
      .btn-box .btn-common .spinCount {
        font-size: 18px !important;
    }
    .bar.card-bar .com-span {
        max-width: 22px !important;
    }
    .grid .btnFixBox .bar.card-bar .com-span {
        max-width: 23px !important;
    }
}

.sold-out-text img {
    max-width: 200px !important;
}

.point-sec {
    background: rgba(255, 255, 255, 0.6);
    width: 130px;
    padding: 10px;
}

.point-text-sec {
    display: inline-flex;
    justify-content: center;
}

.btn-box.btn-detail {
    justify-content: center !important;
    margin-bottom: 20px;
    gap: 10px;
    width: 100%;
}

.btn-box.btn-detail .btn-common {
    width: 100%;
    max-width: 100% !important;
}
/* .btn-box.btn-detail.btnContent .spin-btn100 {
    max-width: 320px !important;
}

.btn-box.btn-detail .single-button {
    max-width: 320px !important;
}

.btn-box.btn-detail .btn-common {
    max-width: 150px;
} */
/* gamecard css start */

:root {
    --white-color: #fff;
    --offwhite-color: #ece7e7;
    --black-color: #000;
    --gray-color: #B9B8BB;
    --yellow-color: #FFB812;
    --dark-sky: #47cdd4;
}
#gamecard2 .icons-box .icon ul li .black {
    background-color: #000;
}
#gamecard2 .icons-box {
    display: flex;
    align-items: center;
    margin: 20px 0px;
}

#gamecard2 .icons-box .icon ul {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

#gamecard2 .icons-box .icon ul li:not(:last-child) {
margin-right: 15px;
}

#gamecard2 .icons-box .text p {
font-size: 18px;
font-family: 'MPLUS1p-Black';
font-weight: 500;
color: var(--black-color);
}

#gamecard2 .icons-box .icon ul li a {
padding: 5px 25px;
border-radius: 3px;
}

#gamecard2 .icons-box .icon ul li .facebook {
background-color: hsl(222.86deg 45.37% 42.35%);
}

#gamecard2 .icons-box .icon ul li .comment {
    background-color: hsl(144.56deg 94.15% 40.2%);
}

#gamecard2 .icons-box .icon ul li a i {
    color: var(--white-color);
    font-size: 18px;
}

/* product detail page */
.centerScrollbox {
    /* height: calc(100vh - 60px);
    overflow-y: scroll; */
    scrollbar-width: none;
    padding: 10px 0px 270px;
    text-align: center;
}

.centerScrollbox .textBox {
    padding: 0px;
}

.productdetails .btn-back a {
    font-size: 13px;
    display: inline-block;
    background: url(../img/btn-back-arrow-black.svg) 6px 13px no-repeat;
    padding: 10px 10px 11px 25px;
    color: #000;
    font-weight: 600;
    background-size: 14px 14px;
    text-decoration: none;
    border-radius: 8px;
}

.topimgBox {
    margin-bottom: 15px;
}

.centerScrollbox .alphaImg {
    padding: 10px 0;
}
.productdetails .btnFixBox {
    padding: 0px 20px 5px;
}
.btnFixBox {
    padding: 10px 20px 25px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 790px;
    background: #fff;
    width: 100%;
}
.grid .btnFixBox .bar {
    max-width: 800px;
    background-color: #e9e9e9;
    background-size: 100% 100%;
    border-radius: 20px;
    padding: 2px 4px;
    height: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 0px;
    margin-inline: auto;
    margin-bottom: 3px;
}

.grid .btnFixBox .pricetag .price {
    position: relative;
    bottom: -15px;
    background: url(../../backend/img/icon-tag.svg) no-repeat center;
    display: inline-block;
    padding: 5px 20px 5px 15px;
    font-weight: 600;
    color: #F1A81D;
}

.grid .btnFixBox .pricetag {
    text-align: center;
}

.grid .btnFixBox .pricetag .price img {
    max-width: 20px;
}

.grid .btnFixBox .pricetag .price img, .grid .btnFixBox .pricetag .price span {
    display: inline-block;
    vertical-align: middle;
}

.grid .btnFixBox .bar.card-bar .com-span {
    width: 100%;
    max-width: 55px;
}

.wining-card-section {
    /* border: 1px solid; */
    padding: 10px;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    background-color: #1D2939;
}

.ticket_div {
    display: flex;
    align-items: center;
    background: #1d2939;
    border-radius: 30px;
    padding: 5px 10px;
    gap: 5px;
}

.ticket_div img {
    width: 20px;
}

.ticket_div span {
    color: #fff;
    font-size: 14px;
}

.series_fix_box {
    margin-bottom: 25px;
  }

  .series_fix_box .top_img {
    position: relative;
  }

  .series_box .img_box img {
    width: 100%;
    height: 100%;
    object-fit: inherit;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .series_fix_box .top_img .point {
    background-color: #344054;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    max-width: 180px;
    width: 100%;
    margin: 0px auto;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
  }

  .series_fix_box .series_box {
    background: #000;
    border-radius: 12px;
  }

  .series_fix_box .top_img .point h6 {
    margin-bottom: 0;
    color: #fff;
    font-family: 'KaiseiOpti-Bold';
  }

  .series_fix_box .point_Box {
    padding: 10px 16px 16px;
    background-image: url(../../assets/images/black_layer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 0px 0px 12px 12px;
  }

  .series_fix_box .inner_point_box {
    display: flex;
    align-items: center;
  }

  .series_fix_box .inner_point_box .point,
  .series_fix_box .point_Box .point_bar {
    width: calc(50%);
  }

  .series_fix_box .inner_point_box .point {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .series_fix_box .inner_point_box .point h6 {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: #fff;
  }

  .series_fix_box .inner_point_box .point img {
    width: 100%;
    max-width: 35px;
  }

  .series_fix_box .point_Box .point_bar {
    position: relative;
  }
  .series_fix_box .point_Box .point_bar .progress {
    height: 22px;
    background-color: #2C3138;
    -webkit-box-shadow: inset 0px 0px 0px 1px #434343;
    -moz-box-shadow: inset 0px 0px 0px 1px #434343;
    box-shadow: inset 0px 0px 0px 1px #434343;
    border-radius: 5px;
  }

  .series_fix_box .point_Box .point_bar .progress .progress-bar {
    background: linear-gradient(90deg, rgba(0, 128, 121, 1) 0%, rgba(0, 207, 212, 1) 100%);
    position: relative;
  }

  .series_fix_box .point_Box .point_bar .progress .progress-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px 0px 0px 5px;
    padding: 1px;
    background: linear-gradient(340deg, rgba(0, 128, 121, 1) 0% 0%, rgba(0, 207, 212, 1) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .series_fix_box .point_Box .point_bar h6 {
    color: #fff;
    font-size: 16px;
    width: 100%;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .series_fix_box .point_Box .learn_more {
    margin-top: 15px;
  }

  .series_fix_box .point_Box .learn_more .btnMore {
    font-size: 16px;
    color: #fff;
    background: linear-gradient(90deg, rgba(13, 48, 122, 1) 0%, rgba(24, 88, 224, 1) 29%, rgba(24, 88, 224, 1) 71%, rgba(13, 48, 122, 1) 100%);
    padding: 10px 12px;
    width: 100%;
    text-align: center;
    border: none;
    box-shadow: none;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    border-radius: 5px;
    position: relative;
    text-shadow: 0px 1px 12px #000000d6;
  }

  .series_fix_box .point_Box .learn_more .btnMore::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    padding: 1px;
    background: linear-gradient(90deg,rgba(23, 86, 219, 1) 0%, rgba(43, 74, 140, 1) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .series_fix_box.soldout .top_img .soldout_text h4 {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    text-align: center;
    width: 100%;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
  }

  .series_fix_box.soldout .series_box .img_box {
    position: relative;
  }

  .series_fix_box.soldout .series_box .img_box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0, 0.6);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }


  .series_fix_box.com-soon .top_img .com_soon_text h4 {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    text-align: center;
    width: 100%;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
  }

  .series_fix_box.com-soon .series_box .img_box {
    position: relative;
  }

  .series_fix_box.com-soon .series_box .img_box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0, 0.6);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }


  .series_fix_box .img_box {
    height: 240px !important;
  }


@media (max-width:575px) {
    .series_grid_box .series_fix_box {
        width: calc(100%);
    }
  }


  .single_view_design {
    min-height: calc(100vh - 72px);
    background-color: #1D2939;
    width: 100%;
    max-width: 672px;
    margin: 0 auto;
  }

  .black_layer {
    background-color: #000;
  }

  /* .first-img {
    height: 444px;
  } */

  .first-img img {
    width: 100%;
    /* height: 100%;
    object-fit: inherit; */
  }

  .border_box {
    padding: 40px 0;
  }

  .border_box .devider{
    position: relative;
  }

  .border_box .devider::after {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    background: rgb(208, 213, 221);
    width: 100%;
    height: 1px;
  }

  .lable-img {
    position: relative;
  }

  .lable-img img {
    width: 100%;
    max-width: 170px;
    margin: -19px auto 0;
    display: block;
  }

  .lable-img h6 {
    color: #fff;
    font-size: 18px;
    font-family: 'KaiseiOpti-Medium';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .details_sticky {
    background-image: url(../../assets/images/black_layer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 48px 16px 24px;
    position: sticky;
    bottom: 0;
  }

  .details_sticky .point_bar {
    position: relative;
    margin-bottom: 15px;
  }

  .details_sticky .point_bar .progress {
    height: 34px;
    background-color: #2C3138;
    -webkit-box-shadow: inset 0px 0px 0px 1px #434343;
    -moz-box-shadow: inset 0px 0px 0px 1px #434343;
    box-shadow: inset 0px 0px 0px 1px #434343;
  }

  .details_sticky .point_bar .progress .progress-bar.sky {
    background: linear-gradient(90deg,rgba(0, 128, 121, 1) 0%, rgba(0, 207, 212, 1) 100%);
  }

  .details_sticky .point_bar h6 {
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    text-shadow: 0px 1px 12px #000000d6;
  }

  .details_sticky .point_bar h6 span {
    font-weight: 400;
    vertical-align: bottom;
  }

  .details_sticky .point {
    background: linear-gradient(180deg,rgba(82, 94, 115, 1) 0%, rgba(22, 24, 27, 1) 100%);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px 20px;
    width: fit-content;
    margin: 0px auto;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #363B43;
  }

  .details_sticky .point .coin{
    width: 100%;
    max-width: 40px;
  }

  .details_sticky .point .ticket{
    width: 100%;
    max-width: 30px;
    height: 30px;
}

  .details_sticky .point h6 {
    font-size: 16px;
    margin-bottom: 0;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    text-shadow: 0px 1px 12px #000000d6;
  }

  .details_sticky .btn-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
  }

  .details_sticky .btn-container .btn {
    font-size: 18px;
    width: calc(50% - 5px);
    color: #fff;
    min-height: 48px;
    padding: 10px 12px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    text-shadow: 0px 1px 12px #000000d6;
    border: none;
  }

  .details_sticky .btn-container .btn .coin {
    max-width: 35px;
    margin: 0 5px;
    vertical-align: middle;
  }

  .details_sticky .btn-container .btn .ticket {
    width: 100%;
    max-width: 25px;
    margin: 0 5px;
    vertical-align: middle;
}

  .details_sticky .btn-container .btn.btn100Spin {
    width: calc(100%) !important;
    margin-top: 10px;
  }

  .details_sticky .btn-container .btnYellow {
    background: linear-gradient(90deg,rgba(204, 129, 24, 1) 0%, rgba(227, 176, 8, 1) 29%, rgba(227, 176, 8, 1) 71%, rgba(204, 129, 24, 1) 100%);
    position: relative;
  }

  .details_sticky .btn-container .btnYellow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    padding: 2px;
    background: linear-gradient(120deg,rgba(230, 197, 86, 1) 0%, rgba(170, 117, 31, 1) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .details_sticky .btn-container .btnBlue {
    background: linear-gradient(90deg,rgba(13, 48, 122, 1) 0%, rgba(24, 88, 224, 1) 29%, rgba(24, 88, 224, 1) 71%, rgba(13, 48, 122, 1) 100%);
    position: relative;
  }

  .details_sticky .btn-container .btnBlue::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    padding: 2px;
    background: linear-gradient(90deg, rgba(23, 86, 219, 1) 0%, rgba(43, 74, 140, 1) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .bottomSpace {
    padding-bottom: 60px;
  }

  .commonGradeImg {
    margin-bottom: 30px;
  }

  .commonGradeImg img {
    width: 100%;
    max-width: 260px;
    border-radius: 12px;
    margin: 0 auto;
    display: block;
  }

  .img_grid_box {
    justify-content: center;
    padding: 0 50px;
  }

  .img_grid_box .img_grid {
  position: relative;
}

.img_grid_box .img_grid img {
  width: 100%;
  border-radius: 12px;
  height: 100%;
  object-fit: cover;
}

.img_grid_box .img_grid .card_count {
  position: absolute;
  background-color: #000;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  border-radius: 5px;
}

.img_grid_box .img_grid .card_count p {
  font-size: 16px;
  color: #fff;
  margin-bottom: 0;
}

  .other_img h4 {
    color: #fff;
    font-family: 'KaiseiOpti-Bold';
    font-size: 18px;
    margin: 15px 0;
    text-align: center;
  }

  .last_note {
    padding: 0 30px 20px;
  }

  .last_note p {
    font-size: 12px;
    color: #fff;
    font-family: 'Arial Regular';
  }

  .detail-h4 {
    color: #fff;
    text-align: center;
    width: 100%;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
}
  .my_profile_one {
    padding: 0 20px 20px;
  }

  .my_profile_one .title {
    padding: 20px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .my_profile_one .title h4 {
    color: #fff;
    font-size: 24px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
  }

  .my_profile_one .title a i {
    color: #B2BEBE;
    font-size: 25px;
  }

  .user_details {
    display: flex;
    gap: 15px;
    align-items: center;
  }

  .user_details .user_img {
    height: 65px;
    width: 65px;
    border-radius: 50%;
    background: #5B5C66;
    display: flex;
    align-items: center;
    justify-content: center;
}
  .user_details .user_img img {
    width: 63px;
    object-fit: cover;
    border-radius: 50px;
}

  .user_details .user_text p:first-child {
    padding-bottom: 5px;
  }

  .user_details .user_text p {
    margin-bottom: 0;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
  }

  .rank_card_main {
    padding: 20px 0;
  }

  .rank_card_main .rank_card_box {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 20px;
    gap: 24px;
  }

  .rank_card_main .rank_card_box .left_img {
    width: 35%;
  }

  .rank_card_main .rank_card_box .right_box {
    width: 65%;
  }

  .rank_card_main .rank_card_box .left_img img {
    width: 100%;
  }

  .rank_card_main .rank_card_box .right_box h3 {
    color: #fff;
    font-size: 50px;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    position: relative;
  }

  .rank_card_main .rank_card_box .right_box h3::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .rank_card_box .right_box .bar_text {
    display: flex;
    gap: 5px;
    margin: 15px 0 10px;
  }

  .rank_card_box .right_box .bar_text p {
    margin-bottom: 0;
    font-size: 20px;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-weight: 600;
  }

  .rank_card_main .rank_card_box .rank_bar .progress {
    height: 16px;
    border-radius: 30px;
  }

  .rank_card_main .rank_card_box .rank_bar .progress .progress-bar {
    border-radius: 30px;
    position: relative;
  }

  .rank_card_main .rank_card_box .rank_bar .progress .progress-bar::after,
  .rank_card_box .right_box .card_end .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .rank_card_box .right_box .card_end {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }

  .rank_card_box .right_box .card_end .text p {
    margin-bottom: 0;
    font-size: 16px;
    text-align: end;
    font-family: "Inter", sans-serif;
    font-weight: 600;
  }

  .rank_card_box .right_box .card_end .btn {
    border-radius: 30px;
    min-height: 40px;
    font-size: 14px;
    padding: 5px 20px;
    color: #fff;
    box-shadow: none;
    border: none;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
  }

  /* --------- bronze_card card css start-------- */

  .rank_card_box.bronze_card {
    background: linear-gradient(183deg,rgba(245, 156, 65, 1) 0%, rgba(80, 48, 28, 1) 74%);
  }

  .rank_card_box.bronze_card .right_box h3 {
    background: linear-gradient(180deg,rgba(213, 138, 61, 1) 0%, rgba(183, 95, 19, 1) 90%);
    box-shadow: 0px 0px 10px #673a1eb0;
  }
  .rank_card_box.bronze_card .right_box h3::after {
    background: linear-gradient(160deg,rgba(233, 195, 132, 1) 0%, rgba(169, 89, 28, 1) 100%);
  }

  .rank_card_box.bronze_card .rank_bar .progress {
    background-color: #563826;
  }
  .rank_card_box.bronze_card .rank_bar .progress .progress-bar {
    background: linear-gradient(90deg,rgba(246, 172, 83, 1) 0%, rgba(205, 87, 60, 1) 58%);
  }
  .rank_card_box.bronze_card .rank_bar .progress .progress-bar::after {
    background: linear-gradient(150deg,rgba(246, 98, 74, 0) 0%, rgba(246, 98, 74, 1) 100%);
  }

  .rank_card_box.bronze_card .right_box .bar_text p.dark,
  .rank_card_box.bronze_card .right_box .card_end .text p {
    color: #CAB18B;
  }

  .rank_card_box.bronze_card .card_end .btn::before {
    background: linear-gradient(140deg,rgba(252, 170, 81, 1) 0%, rgba(190, 107, 45, 1) 100%);
  }
  .rank_card_box .right_box .card_end .btn.btnBronze {
    background: linear-gradient(90deg,rgba(182, 120, 61, 1) 0%, rgba(147, 81, 34, 1) 100%);
  }
  /* --------- bronze_card card css end-------- */


  /* --------- sliver card css start-------- */

  .rank_card_box.silver_card {
    background: linear-gradient(180deg,rgba(140, 153, 172, 1) 0%, rgba(53, 66, 82, 1) 74%);
  }

  .rank_card_box.silver_card .right_box h3 {
    background: linear-gradient(180deg, rgba(164, 178, 198, 1) 24%, rgb(27 51 81 / 78%) 100%);
    box-shadow: 0px 0px 10px #354252;
  }
  .rank_card_box.silver_card .right_box h3::after {
    background: linear-gradient(160deg,rgba(249, 249, 251, 1) 0%, rgba(107, 124, 147, 1) 100%);
  }

  .rank_card_box.silver_card .rank_bar .progress {
    background-color: #2C3643;
  }
  .rank_card_box.silver_card .rank_bar .progress .progress-bar {
    background: linear-gradient(90deg,rgba(138, 150, 172, 1) 0%, rgba(103, 116, 137, 1) 58%);
  }
  .rank_card_box.silver_card .rank_bar .progress .progress-bar::after {
    background: linear-gradient(90deg,rgba(245, 253, 255, 0) 0%, rgba(126, 142, 161, 1) 100%);
  }

  .rank_card_box.silver_card .right_box .bar_text p.dark,
  .rank_card_box.silver_card .right_box .card_end .text p {
    color: #C2C8D4;
  }

  .rank_card_box.silver_card .card_end .btn::before {
    background: linear-gradient(160deg,rgba(68, 162, 255, 1) 0%, rgba(61, 131, 214, 1) 100%);
  }
  .rank_card_box .right_box .card_end .btn.btnSilver {
    background: linear-gradient(90deg,rgba(58, 139, 231, 1) 0%, rgba(53, 100, 160, 1) 100%);
  }

  /* --------- sliver card css end-------- */

  /* --------- gold_card css start-------- */

  .rank_card_box.gold_card {
    background: linear-gradient(170deg, rgba(255, 227, 102, 1) -10%, rgba(166, 99, 11, 1) 70%);
  }

  .rank_card_box.gold_card .right_box h3 {
    background: linear-gradient(180deg,rgba(250, 213, 65, 1) 0%, rgba(213, 133, 9, 1) 71%);
    box-shadow: 0px 0px 10px #7D4407;
  }
  .rank_card_box.gold_card .right_box h3::after {
    background: linear-gradient(158deg, rgba(249, 249, 251, 1) 0%, rgba(171, 100, 12, 1) 71%);
  }

  .rank_card_box.gold_card .rank_bar .progress {
    background-color: #98580B;
  }
  .rank_card_box.gold_card .rank_bar .progress .progress-bar {
    background: linear-gradient(90deg,rgba(232, 175, 43, 1) 0%, rgba(220, 144, 19, 1) 58%);
  }
  .rank_card_box.gold_card .rank_bar .progress .progress-bar::after {
    background: linear-gradient(90deg,rgba(245, 253, 255, 0) 0%, rgba(248, 175, 22, 1) 100%);
  }

  .rank_card_box.gold_card .right_box .bar_text p.dark,
  .rank_card_box.gold_card .right_box .card_end .text p {
    color: #F6E3A1;
  }

  .rank_card_box.gold_card .card_end .btn::before {
    background: linear-gradient(160deg,rgba(253, 186, 36, 1) 0%, rgba(250, 155, 13, 1) 100%);
  }
  .rank_card_box .right_box .card_end .btn.btnGold {
    background: linear-gradient(90deg,rgba(225, 152, 25, 1) 0%, rgba(203, 122, 8, 1) 100%);
  }

  /* --------- gold_card css end-------- */

  /* --------- platinum_card css start-------- */

  .rank_card_box.platinum_card {
    background: linear-gradient(175deg,rgba(101, 167, 194, 1) 0%, rgba(47, 91, 124, 1) 70%);
  }

  .rank_card_box.platinum_card .right_box h3 {
    background: linear-gradient(180deg,rgba(80, 185, 216, 1) 0%, rgba(55, 115, 160, 1) 71%);
    box-shadow: 0px 0px 10px #345074;
  }
  .rank_card_box.platinum_card .right_box h3::after {
    background: linear-gradient(170deg,rgba(249, 249, 251, 1) 0%, rgba(47, 115, 171, 1) 100%);
  }

  .rank_card_box.platinum_card .rank_bar .progress {
    background-color: #254E67;
  }
  .rank_card_box.platinum_card .rank_bar .progress .progress-bar {
    background: linear-gradient(90deg,rgba(137, 193, 232, 1) 0%, rgba(76, 123, 197, 1) 58%);
  }
  .rank_card_box.platinum_card .rank_bar .progress .progress-bar::after {
    background: linear-gradient(90deg,rgba(245, 253, 255, 0) 0%, rgba(96, 136, 234, 1) 100%);
  }

  .rank_card_box.platinum_card .right_box .bar_text p.dark,
  .rank_card_box.platinum_card .right_box .card_end .text p {
    color: #DFF0F5;
  }

  .rank_card_box.platinum_card .card_end .btn::before {
    background: linear-gradient(170deg,rgba(73, 156, 205, 1) 0%, rgba(64, 130, 181, 1) 100%);
  }
  .rank_card_box .right_box .card_end .btn.btnPlatinum {
    background: linear-gradient(90deg,rgba(66, 127, 169, 1) 0%, rgba(59, 113, 152, 1) 100%);
  }

  /* --------- platinum_card  css end-------- */

  /* --------- platinum2 card css start-------- */

  .rank_card_box.platinum2_card {
    background: linear-gradient(165deg,rgba(86, 152, 189, 1) 0%, rgba(44, 94, 135, 1) 70%);
  }

  .rank_card_box.platinum2_card .right_box h3 {
    background: linear-gradient(180deg,rgba(113, 107, 222, 1) 0%, rgba(69, 77, 176, 1) 71%);
    box-shadow: 0px 0px 10px #345074;
  }
  .rank_card_box.platinum2_card .right_box h3::after {
    background: linear-gradient(160deg,rgba(249, 249, 251, 1) 0%, rgba(120, 89, 223, 1) 100%);
  }

  .rank_card_box.platinum2_card .rank_bar .progress {
    background-color: #234E71;
  }
  .rank_card_box.platinum2_card .rank_bar .progress .progress-bar {
    background: linear-gradient(90deg,rgba(118, 186, 229, 1) 0%, rgba(94, 163, 207, 1) 58%);
  }
  .rank_card_box.platinum2_card .rank_bar .progress .progress-bar::after {
    background: linear-gradient(90deg,rgba(245, 253, 255, 0) 0%, rgba(117, 194, 238, 1) 100%);
  }

  .rank_card_box.platinum2_card .right_box .bar_text p.dark,
  .rank_card_box.platinum2_card .right_box .card_end .text p {
    color: #ABC7D7;
  }

  .rank_card_box.platinum2_card .card_end .btn::before {
    background: linear-gradient(150deg,rgba(61, 124, 199, 1) 0%, rgba(60, 118, 189, 1) 100%);
  }
  .rank_card_box .right_box .card_end .btn.btnPlatinum2 {
    background: linear-gradient(90deg,rgba(51, 113, 178, 1) 0%, rgba(45, 95, 154, 1) 100%);
  }

  /* --------- platinum2_card css end-------- */

  /* --------- platinum3 card css start-------- */

  .rank_card_box.platinum3_card {
    background: linear-gradient(165deg,rgba(134, 75, 163, 1) 32%, rgba(61, 41, 108, 1) 70%);
  }

  .rank_card_box.platinum3_card .right_box h3 {
    background: linear-gradient(180deg,rgba(186, 72, 174, 1) 0%, rgba(75, 35, 152, 1) 115%);
    box-shadow: 0px 0px 10px #351D65;
  }
  .rank_card_box.platinum3_card .right_box h3::after {
    background: linear-gradient(160deg,rgba(239, 81, 190, 1) 0%, rgba(98, 35, 188, 1) 100%);
  }

  .rank_card_box.platinum3_card .rank_bar .progress {
    background-color: #352462;
  }
  .rank_card_box.platinum3_card .rank_bar .progress .progress-bar {
    background: linear-gradient(90deg,rgba(168, 77, 181, 1) 0%, rgba(115, 51, 162, 1) 58%);
  }
  .rank_card_box.platinum3_card .rank_bar .progress .progress-bar::after {
    background: linear-gradient(90deg,rgba(245, 253, 255, 0) 0%, rgba(155, 71, 189, 1) 100%);
  }

  .rank_card_box.platinum3_card .right_box .bar_text p.dark,
  .rank_card_box.platinum3_card .right_box .card_end .text p {
    color: #D0BEDB;
  }

  .rank_card_box.platinum3_card .card_end .btn::before {
    background: linear-gradient(160deg,rgba(51, 118, 200, 1) 0%, rgba(49, 96, 174, 1) 100%);
  }
  .rank_card_box .right_box .card_end .btn.btnPlatinum3 {
    background: linear-gradient(90deg,rgba(51, 84, 164, 1) 0%, rgba(51, 76, 151, 1) 100%);
  }

  /* --------- platinum3_card css end-------- */

  /* --------- diamond card css start-------- */

  .rank_card_box.diamond_card {
    background: linear-gradient(160deg,rgba(71, 163, 173, 1) 0%, rgba(38, 98, 120, 1) 70%);
  }

  .rank_card_box.diamond_card .right_box h3 {
    background: linear-gradient(180deg,rgba(102, 201, 222, 1) 0%, rgba(73, 149, 164, 1) 71%);
    box-shadow: 0px 0px 10px #266278;
  }
  .rank_card_box.diamond_card .right_box h3::after {
    background: linear-gradient(170deg,rgba(249, 249, 251, 1) 0%, rgba(131, 193, 204, 1) 100%);
  }

  .rank_card_box.diamond_card .rank_bar .progress {
    background-color: #204F61;
  }
  .rank_card_box.diamond_card .rank_bar .progress .progress-bar {
    background: linear-gradient(90deg,rgba(103, 203, 225, 1) 0%, rgba(105, 126, 206, 1) 58%);
  }
  .rank_card_box.diamond_card .rank_bar .progress .progress-bar::after {
    background: linear-gradient(90deg,rgba(245, 253, 255, 0) 0%, rgba(117, 198, 239, 1) 100%);
  }

  .rank_card_box.diamond_card .right_box .bar_text p.dark,
  .rank_card_box.diamond_card .right_box .card_end .text p {
    color: #CCE0E3;
  }

  .rank_card_box.diamond_card .card_end .btn::before {
    background: linear-gradient(160deg,rgba(55, 133, 193, 1) 0%, rgba(44, 119, 186, 1) 100%);
  }
  .rank_card_box .right_box .card_end .btn.btnDiamond {
    background: linear-gradient(90deg,rgba(45, 120, 166, 1) 0%, rgba(42, 103, 153, 1) 100%);
  }

  .rank_card_box.opal_card {
    background: linear-gradient(177deg,rgba(104, 140, 192, 1) 27%, rgba(85, 75, 140, 1) 57%, rgba(48, 65, 118, 1) 73%);
  }

  .rank_card_box.opal_card .right_box h3 {
    background: linear-gradient(180deg,rgba(145, 69, 188, 1) 0%, rgba(115, 50, 161, 1) 71%);
    box-shadow: 0px 0px 10px #3D3357;
  }
  .rank_card_box.opal_card .right_box h3::after {
    background: linear-gradient(175deg,rgba(150, 150, 185, 0.5) 0%, rgba(183, 105, 184, 1) 100%);
  }

  .rank_card_box.opal_card .rank_bar .progress {
    background-color: #393D76;
  }
  .rank_card_box.opal_card .rank_bar .progress .progress-bar {
    background: linear-gradient(90deg,rgba(100, 183, 243, 1) 0%, rgba(205, 90, 170, 1) 58%);
  }
  .rank_card_box.opal_card .rank_bar .progress .progress-bar::after {
    background: linear-gradient(90deg,rgba(245, 253, 255, 0) 0%, rgba(252, 122, 217, 1) 58%);
  }

  .rank_card_box.opal_card .right_box .bar_text p.dark,
  .rank_card_box.opal_card .right_box .card_end .text p {
    color: #C0C0D6;
  }

  .rank_card_box.opal_card .card_end .btn::before {
    background: linear-gradient(175deg,rgba(76, 162, 220, 1) 0%, rgba(65, 115, 192, 1) 100%);
  }
  .rank_card_box .right_box .card_end .btn.btnOpal {
    background: linear-gradient(90deg,rgba(65, 126, 195, 1) 0%, rgba(57, 96, 164, 1) 100%);
  }

  /* --------- opal_card css end-------- */

  .ticket_status .title_box, .rank_card_main .title_box{
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .ticket_status .title_box h4, .rank_card_main .title_box h4 {
    color: #fff;
    font-size: 24px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
  }

  .ticket_status .title_box a, .rank_card_main .title_box a{
    color: #B2BEBE;
    font-size: 14px;
    text-decoration: none;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
  }

  .ticket_status .title_box a i, .rank_card_main .title_box a i{
    margin-left: 10px;
    font-size: 20px;
    vertical-align: middle;
  }

  .ticket_status .ticket_view {
    background-color: #192734;
    border-radius: 15px;
    padding: 20px;
  }

  .ticket_status .ticket_view .green_bar_box {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .green_bar_box .ticket p {
    color: #FDFDFF;
    margin-bottom: 0;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
  }

  .green_bar_box .progress-box {
    position: relative;
    padding: 8px 0;
    width: 100%;
    max-width: 320px;
  }

  .green_bar_box .progress {
    width: 100%;
    max-width: 320px;
    background-color: #5b5c66;
    height: 10px;
  }

  .green_bar_box .progress-box .progress-bar-point {
    position: absolute;
    height: 12px;
    width: 12px;
    background-color: #28ED8A;
    box-shadow: 0px 0px 10px 2px #28ED8A;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
  }

  .green_bar_box .progress .progress-bar {
    background-color: #28ED8A;
  }

  .ticket_status .ticket_view .ticket_text {
    padding-top: 15px;
  }

  .ticket_status .ticket_view .ticket_text p {
    font-size: 18px;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
  }

  .ticket_status .ticket_view .ticket_text p:last-child {
    margin-bottom: 0;
  }

  .user_search {
    padding: 15px 0;
  }

  .user_search h4 {
    font-size: 24px;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
  }

.user_search .search_box {
    background-color: #192734;
    border-radius: 15px;
    padding: 28px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    position: relative;
}

.user_search .search_box .error {
    position: absolute;
    bottom: -7px;
}

.user_search .search_box input {
    border: 1px solid #3F4C58;
    color: #fff;
    width: 100%;
    /* border-radius: 5px; */
    min-height: 40px;
    padding: 5px 15px;
    background-color: #192734 !important;
    outline: none !important;
    box-shadow: none;
}
.user_search .search_box .search_btn {
    background: #1857E2;
    padding: 10px 11px;
    color: #fff;
    border: none;
}

  .user_search .search_box input:focus {
    border-color: #3F4C58 !important;
  }

  .user_search .search_box input::placeholder {
    color: #B2BEBE;
    font-size: 14px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
  }

  .coin_balance .title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .coin_balance .title_box h4 {
    font-size: 24px;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
  }

  .coin_balance .title_box a {
    color: #B2BEBE;
    font-size: 14px;
    text-decoration: none;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
  }

  .coin_balance .balance_point {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-radius: 15px;
    margin: 10px 0;
    background-color: #192734;
  }

  .coin_balance .balance_point .balance {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .coin_balance .balance_point .balance h5 {
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
  }

  .coin_balance .balance_point .balance img {
    width: 100%;
    max-width: 35px;
    vertical-align: middle;
  }

  .coin_balance .balance_point .balance h5 sub {
    font-weight: 500;
  }

  .coin_balance .balance_point .charge_btn .btn_charge {
    color: #fff;
    font-size: 16px;
    background-color: #1857E2;
    border-radius: 10px;
    min-height: 35px;
    outline: none;
    box-shadow: none;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
  }

  .invitation_code {
    padding: 15px;
    background-color: #192734;
    margin: 20px 0;
    border-radius: 15px;
  }

  .invitation_code .code_view {
    border-radius: 15px;
    border: 2px dotted #000;
    padding: 16px 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1D2939;
  }

  .invitation_code .code_view .copy_code {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .invitation_code .code_view .copy_code h5 {
    font-size: 30px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
  }

  .invitation_code .code_view .copy_code .btn_copy {
    color: rgb(24, 88, 224);
    border: 1px solid rgb(24, 88, 224);
    border-radius: 5px;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
  }

  .invitation_code .guest_list {
    padding-top: 20px;
    text-align: center;
  }

  .invitation_code .guest_list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 13px;
    text-decoration: none;
  }

  .invitation_code .guest_list a i {
    color: #000;
    margin-left: 10px;
  }

  .twitter_btn {
    padding-top: 15px;
  }

  .twitter_btn .btn_twit {
    font-size: 13px;
    color: #fff !important;
    background-color: #000 !important;
    width: 100%;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .twitter_btn .btn_twit img {
    width: 100%;
    max-width: 15px;
    vertical-align: middle;
  }

  .my_profile_one.my_profile_two .user_details {
    flex-direction: column;
  }

  .profile_box {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin: 20px 0;
  }

  .profile_box .wishlist {
    background-color: #192734;
    padding: 5px 10px;
    border-radius: 5px;
  }

  .profile_box .wishlist i {
    color: #FB3762;
    margin-right: 5px;
    font-size: 14px;
  }

  .profile_box .wishlist span {
    color: #FDFDFF;
    font-size: 14px;
  }

  .profile_box .edit_icon a {
    background-color: #192734;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
  }

  .my_profile_one.my_profile_two .user_details .user_text {
    text-align: center;
  }

  .my_profile_two .user_details .user_text a {
    font-size: 13px;
    color: #fff;
    background-color: #D49559;
    text-decoration: none;
    border-radius: 5px;
    padding: 5px 15px;
    margin-bottom: 5px;
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
  }

  .my_profile_one.my_profile_two .user_details .user_text p {
    margin-bottom: 5px !important;
  }

  .my_profile_one.my_profile_two .title {
    justify-content: center;
    position: relative;
  }

  .my_profile_one.my_profile_two .title a {
    position: absolute;
    left: 0;
  }

  .notice_main_box h4,
  .earning_history h4 {
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    margin-bottom: 15px;
  }

  .notice_main_box .notice_box,
  .earning_history .history_box {
    padding: 15px;
    border-radius: 15px;
    background-color: #192734;
    margin-bottom: 20px;
  }

  .notice_main_box .notice_box ul li:not(:last-child),
  .earning_history .history_box ul li:not(:last-child) {
    /*margin-bottom: 10px;*/
  }

  .notice_main_box .notice_box ul li,
  .earning_history .history_box ul li {
    display: flex;
    gap: 15px;
  }

  .notice_main_box .notice_box ul li span,
  .notice_main_box .notice_box ul li p,
  .earning_history .history_box ul li span,
  .earning_history .history_box ul li p {
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    margin-bottom: 0;
  }

  .notice_main_box .notice_box ul li p {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
  }

  .earning_history .history_box ul li p img {
    width: 100%;
    max-width: 15px;
    margin-left: 5px;
  }

  .earning_history .history_box .non-represent p {
    margin-bottom: 0;
    text-align: center;
    color: #B2BEBE;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
  }

  .affiliates_box .nav-tabs {
    justify-content: space-between;
    padding: 10px;
    background-color: #192734;
    border-radius: 15px;
    margin-bottom: 15px;
  }

  .affiliates_box .nav-tabs .nav-item {
    width: calc(50% - 5px);
  }

  .affiliates_box .nav-tabs .nav-item .nav-link.active {
    background-color: #3F4C58;
    border: none !important;
    color: #fff;
  }

  .affiliates_box .nav-tabs .nav-item .nav-link {
    border: none !important;
    color: #fff;
    background-color: #1D2B38;
    border-radius: 10px;
  }

  .affiliates_box .nav-tabs .nav-item .nav-link svg {
    height: 25px;
    width: 25px;
    margin-right: 5px;
  }

  .introduce_our {
    background: #192734;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 15px;
  }

  .introduce_our .text_box {
    padding-bottom: 20px;
  }

  .introduce_our .text_box p {
    color: #fff;
    font-size: 16px;
    margin-bottom: 2px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
  }

  .introduce_our .commision_rate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }

  .introduce_our .commision_rate h5,
  .introduce_our .commision_rate p {
    color: #fff;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    margin-bottom: 0;
  }

  .ref_code_box {
    padding-bottom: 10px;
  }

  .ref_code_box .com_box {
    margin-bottom: 20px;
  }

  .ref_code_box .com_box label {
    color: #fff;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    margin-bottom: 10px;
  }

  .ref_code_box .com_box .link_box input {
    border: 1px solid #3F4C58;
    color: #fff;
    width: 100%;
    border-radius: 5px;
    min-height: 40px;
    padding: 5px 15px;
    background-color: #192734 !important;
    outline: none !important;
    box-shadow: none !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ref_code_box .com_box .link_box {
    display: flex;
    gap: 10px;
  }

  .ref_code_box .com_box .link_box .btn_copy {
    color: rgb(24, 88, 224);
    border: 2px solid rgb(24, 88, 224);
    border-radius: 5px;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    white-space: nowrap;
  }

  .social_links h5 {
    color: #fff;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    margin-bottom: 15px;
  }

  .social_links ul {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
  }

  .social_links ul li a img {
    width: 100%;
    max-width: 30px;
  }

  .ref_terms {
    text-align: center;
  }

  .ref_terms a {
    color: #B2BEBE;
    font-size: 14px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    text-decoration: none;
  }

  .winners_view {
    background: #192734;
    padding: 15px 20px;
    border-radius: 15px;
    margin-bottom: 25px;
  }

  .winners_view .flex_box {
    display: flex;
    border-bottom: 1px solid #3F4C58;
  }

  .winners_view .flex_box .box-box {
    width: calc(50%);
  }

  .winners_view .flex_box .box-box:first-child {
    border-right: 1px solid #3F4C58;
  }

  .winners_view .box-box {
    padding: 20px 10px;
    text-align: center;
  }

  .winners_view .box-box img {
    width: 100%;
    max-width: 50px;
  }

  .winners_view .box-box p {
    color: #FDFDFF;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    margin: 10px 0;
  }

  .winners_view .box-box h5 {
    color: #FDFDFF;
    font-size: 18px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
  }

  .winners_view .box-box h5 span {
    font-weight: 500;
  }

  .winners_view .box-box .btn_new {
    color: #fff;
    font-size: 16px;
    background-color: #1857E2;
    border-radius: 8px;
    min-height: 35px;
    outline: none;
    box-shadow: none;
    margin-top: 15px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
  }

  .asked_question .title_box h4 {
    color: #FDFDFF;
    font-size: 18px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    margin-bottom: 15px;
  }

  .asked_question .faqs_box {
    background: #192734;
    padding: 15px 20px;
    border-radius: 15px;
  }

  .asked_question .faqs_box .faq_title h5 {
    color: #FDFDFF;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    margin: 10px 0;
  }

  .asked_question .faqs_box .accordion-item {
    background: #1D2B38;
    border-radius: 12px;
    border: 1px solid #1D2B38;
    padding: 0 15px;
  }

  .asked_question .faqs_box .accordion-item:not(:last-child) {
    margin-bottom: 15px;
  }

  .asked_question .faqs_box .accordion-button {
    background: transparent !important;
    box-shadow: none !important;
    color: #FFFFFF;
    font-size: 16px;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    padding: 15px 0px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
  }

  .asked_question .faqs_box .accordion-button span {
    color: #28ED8A;
  }

  .asked_question .faqs_box .accordion-body {
    padding: 15px 0 !important;
    border-top: 1px solid #fff;
  }

  .asked_question .faqs_box .accordion-body p {
    font-size: 14px;
    color: #FFFFFF;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
  }

  .asked_question .faqs_box .accordion-body p.removeSpace {
    margin-bottom: 0;
  }

  .asked_question .faqs_box .accordion-button::after {
  background: url('../assets/plus.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 20px;
    height: 20px;
  }

  .asked_question .faqs_box .accordion-button:not(.collapsed)::after {
    background: url('../assets/minus.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .details_table {
    background-color: #192734;
    padding: 15px;
    border-radius: 15px;
  }

  .details_table ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #3F4C58;
  }
  .details_table ul.pagination li {
    padding: 0px;
  }
  .details_table ul li p {
    color: #fff;
    margin-bottom: 0;
  }

  .friend_details .top_table {
    padding-top: 15px;
  }

  .friend_details .top_table ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
  }

  .friend_details .top_table ul li span {
    color: #B2BEBE;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
  }

  .friend_details .top_table ul li p {
    color: #fff;
    margin-bottom: 0;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
  }

  .coin_table {
    background-color: #192734;
    padding: 15px;
    border-radius: 15px;
  }

  .coin_table ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
  }

  .coin_table ul li p {
    color: #fff;
    margin-bottom: 0;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
  }

  .coin_table ul li h6 {
    color: #fff;
    margin-bottom: 0;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
  }

  .coin_table .tip_btn {
    text-align: center;
  }

  .coin_table .tip_btn .btn_tip {
    color: #fff;
    font-size: 16px;
    background-color: #1857E2;
    border-radius: 6px;
    min-height: 35px;
    outline: none;
    box-shadow: none;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    margin-top: 15px;
  }

  .invitation_code .guest_list a i {
    color: #000;
    margin-left: 10px;
    font-size: 20px;
}

.fa-chevron-right:before {
    content: "\f054";
}

.page-link {
    margin: 40px 0;
}

.page-link ul li a {
    color: #fff !important;
    text-decoration: none;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}

.page-link ul li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 16px 0;
}

@media (max-width: 479px) {
    .details_sticky .btn-container .btn {
        font-size: 14px;
    }
}

@media (max-width: 479px) {
    .details_sticky .btn-container .btn img {
        max-width: 25px;
    }
}

.modal-content {
    background-color: #17212E !important;
    color: #fff !important;
    border: 1px solid #3d3d3d;
}

.modal-header {
    border-bottom: 2px solid #3d3d3d;
}

.waves-effect:hover {
    color: #000 !important;
}

.modal {
    z-index: 10000 !important;
}
.table{
    color: #fff;
}

.table tr:hover td{
    color: #fff;
}

.btn-back a{display: inline-block; background:url(../img/btn-back-arrow.svg) 6px 13px no-repeat rgba(0, 0, 0, 0.2); padding:10px 10px 11px 25px; color:#fff; font-weight:600; background-size:14px 14px; text-decoration:none; border-radius:8px;}

.table>:not(caption)>*>* {
    background: #17212E;
    color: #fff;
}

.table>:not(caption)>tr>th{
    background: #32394e;
}

/* --------- terms of use css start ---------- */

.terms_of_use {
  padding: 20px;
}

.terms_of_use .title h4 {
  color: #fff;
  font-size: 22px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  margin-bottom: 30px;
}

.terms_of_use .inner_text {
  background-color: #192734;
  padding: 15px;
  border-radius: 10px;
}

.terms_of_use .inner_text .box {
  margin-bottom: 20px;
}

.terms_of_use .inner_text .box p {
  font-size: 14px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  margin-bottom: 5px;
}

.terms_of_use .inner_text .box h6 {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 14px;
}

.fill_details .flex_box {
  display: flex;
  justify-content: space-between;
  gap: 25px;
}

.fill_details .flex_box .form-group {
  width: calc(50%);
}

.fill_details .form-group {
  margin-bottom: 15px;
}

.fill_details .form-group input, .fill_details .form-group textarea {
  width: 100%;
  background-color: #3F4C58 !important;
  border-radius: 8px;
  outline: none;
  border: none;
  min-height: 35px;
  color: #fff;
  padding: 5px 10px;
}

.fill_details .form-group label {
  color: #fff;
  margin-bottom: 5px;
  font-size: 14px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

.fill_details .form-group label span {
  color: #D21638;
}

.fill_details .form-group textarea {
  resize: none;
  min-height: 150px;
}

.fill_details .btn_box {
  text-align: center;
}

.fill_details .btn_box .btn_send {
  color: #fff;
  font-size: 16px;
  background-color: #1857E2;
  border-radius: 10px;
  min-height: 35px;
  outline: none;
  box-shadow: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  width: 100%;
  max-width: 130px;
}

/* --------- terms of use css end ---------- */


/* --------- member_rank_details css start ---------- */

.member_rank_details .single_view_design {
  max-width: 780px;
}

.rank_table_view {
  padding: 20px;
}

.rank_table_view .title h4 {
  color: #fff;
  font-size: 22px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  margin-bottom: 30px;
}

.rank_table_view .rank_table {
  background-color: #192734;
  padding: 15px;
  border-radius: 10px;
}

.rank_table_view .rank_table .table_title h5 {
  color: #fff;
  font-size: 18px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  margin-bottom: 20px;
}

.rank_table .table_box {
  overflow-y: auto;
}

.table_box table {
  width: 100%;
  min-width: 800px;
  color: #fff !important;
  border-collapse: separate;
  border-spacing: 0;
}

.table_box th,
.table_box td {
  padding: 12px 10px;
  border: 1px solid #e5e7eb;
  text-align: center;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  background-color: #192734;
}

.table_box td:not(:last-child),
.table_box th:not(:last-child){
  border-right: 0;
}

.table_box td {
  border-top: 0;
}

.table_box thead tr th:first-child {
  border-top-left-radius: 12px;
}

.table_box thead tr th:last-child {
  border-top-right-radius: 12px;
}

.table_box tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}

.table_box tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

.table_box td img {
  width: 100%;
  max-width: 105px;
}

.table_box th {
  font-weight: bold;
}

.table_box td {
  vertical-align: middle;
}

.condition_text {
  margin-top: 5px;
}

.condition_text .box_box:not(:last-child) {
  margin-bottom: 20px;
}

.condition_text .box_box p {
  color: #fff;
  font-size: 14px;
  /* margin-bottom: 0; */
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}


/* --------- member_rank_details css end ---------- */

@media (max-width:479px) {
  .img_grid_box {
      padding: 0 20px;
  }

  .commonGradeImg img {
      max-width: 200px;
  }

  footer .footer_box ul {
      flex-wrap: wrap;
  }

  .ticket_status .title_box h4,
  .user_search h4,
  .coin_balance .title_box h4,
  .my_profile_one .title h4,
  .notice_main_box h4, .earning_history h4 {
    font-size: 20px;
  }

  .coin_balance .balance_point .balance h5 {
    font-size: 16px;
  }

  .invitation_code .code_view .copy_code h5 {
    font-size: 25px;
  }

  .ticket_status .ticket_view .ticket_text p,
  .introduce_our .text_box p,
  .asked_question .faqs_box .accordion-button,
  .coin_table ul li p,
  .coin_table ul li h6,
  .friend_details .top_table ul li p {
    font-size: 14px;
  }

  .asked_question .faqs_box .accordion-body p {
    font-size: 13px;
  }

  .green_bar_box .progress-box {
    max-width: 190px;
  }

    .my_profile_one {
      padding: 0 10px 20px;
  }

  .asked_question .faqs_box {
    padding: 15px 5px;
  }

  .affiliates_box .nav-tabs .nav-item .nav-link {
    font-size: 13px;
    padding: 8px 10px;
  }

  .details_sticky .btn-container .btn img {
    max-width: 25px;
  }

  .details_sticky .btn-container .btn {
    font-size: 14px;
  }

  .rank_card_main .rank_card_box .right_box h3 {
    font-size: 26px;
    padding: 5px 15px;
  }
  .rank_card_box .right_box .bar_text p {
    font-size: 13px;
  }
  .rank_card_main .rank_card_box {
    padding: 15px;
  }

  .rank_card_box .right_box .card_end .text p {
    font-size: 12px;
  }
  .rank_card_box .right_box .card_end .btn {
    min-height: 35px;
    font-size: 13px;
    padding: 5px 15px;
  }

}

@media (max-width:375px) {
  .commonGradeImg img {
      max-width: 150px;
  }
}

.ticket_view .charge_btn .btn_charge {
    color: #fff;
    font-size: 16px;
    background-color: #1857E2;
    border-radius: 10px;
    min-height: 35px;
    outline: none;
    box-shadow: none;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    padding: 5px 50px;
}

.ticket_view .charge_btn {
    display: flex;
    justify-content: end;
    margin-top: 15px;
}

table tr {
    color: #ffff;
    --bs-table-bg: #192734;
    border-color: #3F4C58;
}

.card-bg{
    background-image: url(../../assets/images/black_layer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .card_item {
    background: #1d2939;
    border-radius: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card_item a{
    padding: 8px 8px;
  }

  .card_item i {
      color: #fff;
      font-size: 13px;
    }

  .card_item span {
    font-size: 12px;
    color: #fff;
    position: absolute;
    top: -8px;
    right: -6px;
    background-color: #d6001c;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .cart-bg {
    background-color: #1D2939 !important;
    color: #fff !important;
  }

  .cart-btn-bg {
      background: linear-gradient(90deg, rgba(23, 86, 219, 1) 0%, rgba(43, 74, 140, 1) 100%) !important;
      color: #fff;
  }

  .profile-image-preview {
    margin-top: 20px;
    width: 80px;
}
.profile-image-input{
    padding: 10px 16px !important;
}

.table-link a{
    color: #ffff;
    text-decoration: none;
}

.other-card-list {
    width: 33%;
    list-style-type: disc;
}

.other-card-list li {
    font-size: 13px;
    list-style: disc !important;
    margin-bottom: 8px;
}
.delete-membership {
  font-size: 10px !important;
}

.delete-membership a {
  text-decoration: none !important;
  color: #fff !important;
}

.btn-close {
  filter: invert(1);
}

.other-card-list {
    width: 33%;
    list-style-type: disc;
}

.other-card-list li {
    font-size: 13px;
    list-style: disc !important;
    margin-bottom: 8px;
}
.delete-membership {
  font-size: 10px !important;
}

.delete-membership a {
  text-decoration: none !important;
  color: #fff !important;
}

.btn-close {
  filter: invert(1);
}

.ticket-sec img{
    width: 30px !important;
}

.ticket-sec .balance_point {
    padding-left: 17px;
}

.title-sec {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0 !important;
}
.title-sec img {
    max-width: 26px;
}

.history-tier2 .select-button{
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 10px;
    color: #333;
    font-weight: bold;
    padding: 5px 17px;
}

.history-tier2 .content-sec{
    display: flex;
    gap: 20px;
    align-items: center;
}


@media (max-width: 991px) and (min-width: 768px) {
 .history-tier2 .content-sec{
    gap: 9px;
  }
}

@media only screen and (max-width: 767px) {
    .history-tier2 {
         padding: 19px 10px 0 11px;
    }

    .history-tier2 .content-sec {
        font-size: 12px;
        margin-bottom: 25px;
        justify-content: space-between;
    }

    .historypage .title {
        font-size: 14px;
    }
    .history-tier2 .btn-container .btn {
        padding: 11px;
        font-size: 13px;
    }

    .rendeem-points {
        white-space: nowrap;
    }
}

.darkgreyfooter ul li .roundBox .form-check-input {
    width: 70px;
    height: 32px;
    border: none;
    background-color: rgba(86, 110, 230, 0.3);
    box-shadow: none !important;
    cursor: pointer;
}

.darkgreyfooter ul li .roundBox .form-switch .form-check-input {
  background-image: url(../../assets/images/sun.png) !important;
  transition: 0.3s;
}

.darkgreyfooter ul li .roundBox .form-switch .form-check-input:checked {
  background-image: url(../../assets/images/darkmode.png) !important;
}

.darkgreyfooter ul li .roundBox .form-check-input:checked {
  background-color:rgba(86, 110, 230, 0.3);
  box-shadow: none !important;
}

body.light {
  background: #fff !important;
}

body.light .tab-container .tab {
    color: #000;
}

body.light .tab-container .tab.active {
    font-weight: bold;
    color: #fff;
    background: linear-gradient(90deg, rgba(23, 86, 219, 1) 0%, rgba(43, 74, 140, 1) 100%);
    border-radius: 50px !important;
}

body.light .single_view_design,
body.light .black_layer,
body.light .asked_question .faqs_box .accordion-item,
body.light .table_box th, body.light .table_box td,
body.light .invitation_code .code_view {
  background-color: #eeeeee;
}

body.light .table_box th, body.light .table_box td {
    border-color: #dcdcdc;
}

body.light .asked_question .faqs_box .accordion-item {
  border-color: #eeeeee;
}

body.light .single_view_design .inner_text,
body.light .coin_table,
body.light .affiliates_box .nav-tabs,
body.light .introduce_our,
body.light .winners_view,
body.light .asked_question .faqs_box,
body.light .details_table,
body.light .rank_table_view .rank_table,
body.light .ticket_status .ticket_view,
body.light .user_search .search_box,
body.light .coin_balance .balance_point,
body.light .invitation_code,
body.light .notice_main_box .notice_box, body.light .earning_history .history_box {
  background-color: #dcdcdc;
}

body.light .asked_question .faqs_box .accordion-body {
  border-color: #dcdcdc;
}

body.light .ref_code_box .com_box .link_box input {
  background: #dcdcdc !important;
}

body.light .fill_details .form-group input,
body.light .fill_details .form-group textarea,
body.light .user_search .search_box input {
  background: #eeeeee !important;
  color: #000;
}

body.light .affiliates_box .nav-tabs .nav-item .nav-link.active {
  background-color: #3F4C58;
}

body.light .terms_of_use .title h4,
body.light .terms_of_use .inner_text .box h6,
body.light .my_profile_one .title h4,
body.light .friend_details .top_table ul li span,
body.light .coin_table ul li h6,
body.light .other_img h4,
body.light .asked_question .title_box h4,
body.light .introduce_our .commision_rate h5,
body.light .introduce_our .commision_rate p,
body.light .ref_code_box .com_box label,
body.light .ref_code_box .com_box .link_box input,
body.light .social_links h5,
body.light .asked_question .faqs_box .faq_title h5,
body.light .winners_view .box-box p,
body.light .winners_view .box-box h5,
body.light .details_table ul li p,
body.light .asked_question .faqs_box .accordion-button,
body.light .fill_details .form-group label,
body.light .rank_table_view .title h4, body.light .rank_table_view .rank_table .table_title h5,
body.light .table_box th, body.light .table_box td,
body.light .user_details .user_text p,
body.light .ticket_status .title_box h4,
body.light .user_search h4,
body.light .coin_balance .title_box h4,
body.light .ticket_status .ticket_view .ticket_text p,
body.light .green_bar_box .ticket p,
body.light .coin_balance .balance_point .balance h5,
body.light .invitation_code .code_view,
body.light .notice_main_box h4,
body.light .earning_history h4 {
  color: #000;
}

body.light .notice_main_box .notice_box ul li span,
body.light .notice_main_box .notice_box ul li p,
body.light .earning_history .history_box ul li span,
body.light .earning_history .history_box ul li p {
  color: #000;
}

body.light .terms_of_use .inner_text .box p,
body.light .friend_details .top_table ul li p,
body.light .coin_table ul li p,
body.light .last_note p,
body.light .introduce_our .text_box p,
body.light .ref_terms a,
body.light .asked_question .faqs_box .accordion-body p,
body.light .condition_text .box_box p,
body.light .ticket_status .title_box a,
body.light .coin_balance .title_box a,
body.light .invitation_code .guest_list a,
body.light .earning_history .history_box .non-represent p {
  color: #1D2939;
}

body.light .affiliates_box .nav-tabs .nav-item .nav-link {
  background-color: #7f8183;
}

body.light .fill_details .btn_box .btn_send,
body.light .winners_view .box-box .btn_new,
body.light .coin_table .tip_btn .btn_tip,
body.light .coin_balance .balance_point .charge_btn .btn_charge {
      background-color: #000;
}


/* ----------- Dark mode css end ------------*/


@media (max-width:767px) {
  .rank_card_main .rank_card_box .left_img {
    width: 30%;
  }

  .rank_card_main .rank_card_box .right_box {
    width: 70%;
  }

  .rank_card_main .rank_card_box .right_box h3 {
    font-size: 40px;
  }

  .rank_card_box .right_box .bar_text p {
    font-size: 18px;
  }

  .rank_card_box .right_box .card_end .text p {
    font-size: 14px;
  }
  .w-nowrap{
    white-space: nowrap;
  }
}

@media (max-width:575px) {
  .series_grid_box {
    flex-wrap: wrap;
  }

  .series_grid_box .series_fix_box {
    width: calc(100%);
  }

  .rank_card_main .rank_card_box {
    gap: 15px;
  }

  .rank_card_main .rank_card_box .right_box h3 {
    font-size: 35px;
  }
}

@media (max-width:479px) {
  .img_grid_box {
    padding: 0 20px;
  }

  /* .img_grid_box .img_grid {
      width: calc(100%);
  } */

  .bottomSpace {
    padding-bottom: 30px;
  }

  .commonGradeImg img {
    max-width: 200px;
  }

  footer .footer_box ul {
    flex-wrap: wrap;
  }

  .ticket_status .title_box h4,
  .user_search h4,
  .coin_balance .title_box h4,
  .my_profile_one .title h4,
  .notice_main_box h4,
  .earning_history h4 {
    font-size: 20px;
  }

  .coin_balance .balance_point .balance h5 {
    font-size: 16px;
  }

  .invitation_code .code_view .copy_code h5 {
    font-size: 25px;
  }

  .ticket_status .ticket_view .ticket_text p,
  .introduce_our .text_box p,
  .asked_question .faqs_box .accordion-button,
  .coin_table ul li p,
  .coin_table ul li h6,
  .friend_details .top_table ul li p {
    font-size: 14px;
  }

  .asked_question .faqs_box .accordion-body p {
    font-size: 13px;
  }

  .green_bar_box .progress-box {
    max-width: 190px;
  }

  .my_profile_one {
    padding: 0 10px 20px;
  }

  .asked_question .faqs_box {
    padding: 15px 5px;
  }

  .affiliates_box .nav-tabs .nav-item .nav-link {
    font-size: 13px;
    padding: 8px 10px;
  }

  .details_sticky .btn-container .btn img {
    max-width: 25px;
  }

  .details_sticky .btn-container .btn {
    font-size: 14px;
  }

  .rank_card_main .rank_card_box .right_box h3 {
    font-size: 26px;
    padding: 5px 15px;
  }

  .rank_card_box .right_box .bar_text p {
    font-size: 13px;
  }

  .rank_card_main .rank_card_box {
    padding: 15px;
  }

  .rank_card_box .right_box .card_end .text p {
    font-size: 12px;
  }

  .rank_card_box .right_box .card_end .btn {
    min-height: 35px;
    font-size: 13px;
    padding: 5px 15px;
  }

}

@media (max-width:375px) {
  .commonGradeImg img {
    max-width: 150px;
  }
}

.accordion-body{
  color: #fff !important;
}

.img_grid_box .img_grid .badge_img {
    position: absolute;
    top: 0;
    right: 10px;
    display: flex;
    flex-direction: column;
}

.second-badge-img {
    margin-top: -13px;
}

.img_grid_box .img_grid .badge_img img {
    width: 55px;
}

body.light .ticket_status .title_box h4, body.light .rank_card_main .title_box h4 {
    color: #000;
}

body.light .ticket_status .title_box a, body.light .rank_card_main .title_box a {
    color: #1D2939;
}

body.light .page-link ul li a {
    color: #000 !important;
}

body.light .modal-content {
    background-color: #eeeeee !important;
    color: #000 !important;
    border: 1px solid #3d3d3d;
}

body.light label {
    color: #000;
}

body.light .form-control {
    background: #eeeeee;
    color: #000;
}

body.light .btn-close {
    filter: none;
}

body.light .table>:not(caption)>*>* {
    background: #eeeeee;
    color: #000;
}
body.light .grey-color {
    color: #000;
}


body.light .nav-tabs .nav-item .nav-link.active {
    border-bottom: 3px solid #1857E2;
    color: #fff;
    background-color: #1857E2;
}

body.light .wining-card-section {
    color: #000;
    padding: 10px;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    background-color: #eeeeee;
}

body.light .history-items .items .items-content .right .text1,
body.light .history-items .items .items-content .right .text4,
body.light .historypage .title,
body.light .link ,
body.light .user_search .search_box input {
    color: #000 !important;
}

body.light .history-tier2 {
    background: #eeeeee;
}

body.light .form-control:focus{
    background: #eeeeee !important;
    color: #000 !important;
}

body.light {
    color: #000;
}

body.light .darkgreyfooter ul li .roundBox .form-check-input {
    background-color: #ffffff !important;
}

.tip_table {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 15px;
    background-color: #192734;
}
.note {
    color: red;
}

.sent_tip_section {
    background-color: #76ba41;
    padding: 6px;
    border-radius: 6px;
}
.wrap-search-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alert-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fcebea;
    color: #cc1f1a;
    border-radius: 30px;
    padding: 8px 16px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    max-width: 600px;
    margin: 0px auto 30px;
}

    .alert-left {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .alert-icon {
      font-size: 16px;
    }

    .alert-right {
      font-size: 12px;
      color: #cc1f1a;
    }

    .alert-right span {
      font-weight: bold;
      color: red;
    }

.ticket-details, .tip-details {
  margin-top: 30px;
}

/* .ticket-details .banner-sec {
  border-bottom: 1px solid #555;
}

.ticket-details .banner-sec img {
  margin-bottom: 10px;
} */

.ticket-details .br-line , .tip-details .br-line{
  color: #555;
  border-top: 2px solid !important;
}

.ticket-details  .ticket-table {
  border: 1px solid #fff;
  border-collapse: collapse;
}

.ticket-details  .ticket-table table {
  width: 100%;
  border-collapse: collapse;
}

.ticket-details  .ticket-table th, td {
  border: 1px solid #fff;
  padding: 10px 15px;
  text-align: center;
}

.ticket-details  .ticket-table th {
  background-color: #1D2939;
  font-weight: bold;
}

.ticket-details  .ticket-table td {
  background-color: #1D2939;
}

.ticket-details  .ticket-table td:first-child {
  text-align: left;
}

.ticket-details .img-2-border, .tip-details .img-2-border {
  border: 1px solid #192734;
}

.btn-mute {
      background-color: #1f262f !important;
      color: #fff !important;
}

#spin_info_modal .point-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

#spin_info_modal .point-section img {
  max-width: 25px;
}

.tip-details ul{
    padding: 20px 60px;
    background: #17212E;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.tip-details ul li{
  list-style: disc;
}

.no-line-break {
  white-space: nowrap;
 }
 .f-12 {
  font-size: 12px !important;
 }

 .grid_dropdown {
    text-align: end;
    margin-top: 10px;
}
.grid_dropdown .dropdown {
  position: relative;
  display: inline-block;
}
.grid_dropdown .dropdown-toggle {
  cursor: pointer;
  padding: 10px 15px;
  background-color: transparent;
  border-radius: 5px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
}
.grid_dropdown .dropdown-toggle i {
  font-size: 18px;
}
.grid_dropdown .dropdown-menu div .right_span i {
  margin-left: 8px;
}
.grid_dropdown .dropdown-toggle::after {
  display: none;
}
.grid_dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    background-color: white;
    border: none;
    border-radius: 5px;
    width: 250px;
    box-shadow: 0 10px 10px rgb(0 0 0 / 16%);
    z-index: 100;
    background: #1D2939;
    color: #fff;
}
.grid_dropdown .dropdown-menu div {
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grid_dropdown .dropdown-item.selected .left {
  color: black;
}
.grid_dropdown .dropdown-item .left {
  width: 20px;
  color: transparent;
}
.grid_dropdown .dropdown-menu div:hover {
  background-color: #324a6a;
}

.grid_dropdown .text-left {
  color: #fff !important;
}

.grid_dropdown .dropdown-item.selected .left {
  color: #fff !important;
}
.d-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.a_garde .img_grid_box .img_grid .badge_img img {
    width: 45px;
    margin-right: 10px;
}

.b_garde .img_grid_box .img_grid .badge_img , 
.c_garde .img_grid_box .img_grid .badge_img, 
.d_garde .img_grid_box .img_grid .badge_img,
.o_garde .img_grid_box .img_grid .badge_img {
     right: 12px !important;
}
.b_garde .img_grid_box .img_grid .badge_img img, 
.c_garde .img_grid_box .img_grid .badge_img img,  
.d_garde .img_grid_box .img_grid .badge_img img,
.o_garde .img_grid_box .img_grid .badge_img img {
    width: 40px;
}

.b_garde .img_grid_box .img_grid .badge_img .second-badge-img, 
.c_garde .img_grid_box .img_grid .badge_img .second-badge-img, 
.d_garde .img_grid_box .img_grid .badge_img .second-badge-img,
.o_garde .img_grid_box .img_grid .badge_img .second-badge-img {
    margin-top: -10px !important;
}


@media (max-width:767px) {
 .img_grid_box .img_grid .badge_img img {
      width: 45px;
  }

  .a_garde .img_grid_box .img_grid .badge_img img {
    width: 30px;
    margin-right: 10px;
  }

  .a_garde .img_grid_box .img_grid .badge_img .second-badge-img { 
    margin-top: -12px;
  }

  .second-badge-img {
      margin-top: -12px;
  }

  .b_garde .img_grid_box .img_grid .badge_img img, 
  .c_garde .img_grid_box .img_grid .badge_img img,  
  .d_garde .img_grid_box .img_grid .badge_img img,
  .o_garde .img_grid_box .img_grid .badge_img img {
      width: 30px;
  }

  .b_garde .img_grid_box .img_grid .badge_img .second-badge-img, 
  .c_garde .img_grid_box .img_grid .badge_img .second-badge-img, 
  .d_garde .img_grid_box .img_grid .badge_img .second-badge-img,
  .o_garde .img_grid_box .img_grid .badge_img .second-badge-img {
      margin-top: -5px !important;
  }
}