@font-face {
    font-family: PublicSans-Regular;
    src: url('../../fonts/public_sans/PublicSans-Regular.ttf');
}
@font-face {
    font-family: PublicSans-Medium;
    src: url('../../fonts/public_sans/PublicSans-Medium.ttf');
}
@font-face {
    font-family: PublicSans-Bold;
    src: url('../../fonts/public_sans/PublicSans-Bold.ttf');
}
@font-face {
    font-family: PublicSans-Italic;
    src: url('../../fonts/public_sans/PublicSans-Italic.ttf');
}
@font-face {
    font-family: Inter-Regular;
    src: url('../../fonts/inter/Inter-Regular.ttf');
}
@font-face {
    font-family: Inter-Bold;
    src: url('../../fonts/inter/Inter-Bold.ttf');
}

body{
    background-color: #18191F!important;
    font-family: 'PublicSans-Regular';
    font-size: 14px;
    color: #FDFDFD;
    overflow-y: auto;
}

.container-fluid{ padding-left:0; padding-right:0; overflow-x:hidden; }
.container-small{max-width: 540px!important;}
.container-medium{max-width: 720px!important;}
.no-padding{ padding: 0!important; }

b, strong, .bold{ font-family: 'PublicSans-Bold'; }
i, .italic{ font-family: 'PublicSans-Italic'; }
.font1{ font-family: 'PublicSans-Regular'!important; }
.font1.bold{ font-family: 'PublicSans-Bold'!important; }
.font2{ font-family: 'Inter-Regular'!important; }
.font2.bold{ font-family: 'Inter-Bold'!important; }

.font-10{ font-size: 10px!important;}
.font-12{ font-size: 12px!important;}
.font-13{ font-size: 13px!important;}
.font-14{ font-size: 14px!important;}
.font-16{ font-size: 16px!important;}
.font-18{ font-size: 18px!important;}
.font-20{ font-size: 20px!important;}
.font-24{ font-size: 24px!important;}
.font-28{ font-size: 28px!important;}
.font-40{ font-size: 40px!important;}

.underline{ text-decoration: underline; }
.capitalize{ text-transform: capitalize; }
.uppercase{ text-transform: uppercase; }
.lowercase{ text-transform: lowercase; }
.pointer{cursor:pointer;}
.inline-block{display: inline-block;}
.strikethrough{text-decoration:line-through;}
.word-break{word-break: break-all;}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #A8AABC!important; opacity: 1!important; font-family: 'PublicSans-Regular'; font-size: 14px; text-transform: capitalize!important;
}
input:valid ~ .placeholder { display: none; }
.placeholder { position: absolute; pointer-events: none; margin: auto; color: #A8AABC; top: 10px; left: 56px; }
.placeholder span { color: #C72249; }
textarea{resize: none!important;}
.pointer{ cursor: pointer; }
.title{font-size:36px; line-height:48px;}
.title2{font-size:28px; line-height:38px;}
.title-detail{ font-size: 24px; line-height: 32px; font-family: PublicSans-Medium; }
.title-headline{ font-size: 48px; line-height: 62px; font-family: PublicSans-Medium; }
.subtitle{ font-size: 16px; line-height: 20px;}
.subtitle2{ font-size: 18px; line-height: 27px;}
.underline-pink{ border-bottom: 2px solid #FF62A2; padding-bottom:5px; display: inline-block;}
.toggle-password{ cursor: pointer; }
.hidden{display: none;}

.color-dark, a.color-dark{ color: #18191F!important; }
.color-white, a.color-white{ color: #FDFDFD!important; }
.color-dark-grey, a.color-dark-grey{ color: #444655!important; }
.color-grey, a.color-grey{ color: #A8AABC!important; }
.color-light-grey, a.color-light-grey{ color: #D9DBE1!important; }
.color-pink, a.color-pink{ color: #FF62A2!important; }
.color-peach, a.color-peach{ color: #FF8A77!important; }
.color-yellow, a.color-yellow{ color: #FFAE1B!important; }
.color-aqua, a.color-aqua{ color: #00D1E6!important; }
.color-red, a.color-red{ color: #C72249!important; }
.color-green, a.color-green{ color: #6DFACD!important; }

.bg-white{ background-color: #FDFDFD!important; }
.bg-dark-grey{ background-color: #444655!important; }
.bg-grey{ background-color: #A8AABC!important; }
.bg-light-grey{ background-color: #D9DBE1!important; }
.bg-pink{ background-color: #FF62A2!important; }
.bg-peach{ background-color: #FF8A77!important; }
.bg-yellow{ background-color: #FFAE1B!important; }
.bg-aqua{ background-color: #00D1E6!important; }
.bg-red{ background-color: #C72249!important; }
.bg-green{ background-color: #6DFACD!important; }

.bg-contain{ background-size: contain!important;}
.bg-cover{ background-size: cover!important; }
.bg-center{ background-position: center center !important;}
.bg-image{ background-size: cover!important; background-position: center !important; background-repeat: no-repeat;}

.bg-auth{ background-color: #18191F!important; background-image: url('../../images/bg_login.png');
    background-repeat: no-repeat; background-position: top center; background-size: cover;
    filter: blur(80px); -webkit-filter: blur(80px); mix-blend-mode: color; min-height: 500px; height: 100%;
}
.bg-auth-after { position: absolute; top: 0;}
.bg-referral { background-image: url('../../images/bg_referral.png'); background-size: 80%; height:250px; background-position: center;background-repeat: no-repeat;}

.notif-box{width:80%; position: relative; margin:auto;}
.bg-bonus{
    background: linear-gradient(269.11deg, #FF4756 0.97%, #FF656F 99.79%);
    box-shadow: 0 2px 12px rgba(255, 0, 92, 0.28); border-radius: 4px; padding:20px 40px;
    width: 80%; margin: 0 auto; margin-top: -36px; position: relative; font-size: 20px;
}
.bg-bonus img{ width:32px; height:32px;}
.bg-warning{ background-color: #FBD54A!important; color: #18191F!important; border-radius: 4px; padding:10px 12px;}
.default-thumbnail{ background-color: #444655!important; background-image: url('../../images/thumbnail_square.png');
    background-repeat: no-repeat!important; background-position: center center!important; background-size: 80%!important;}

.result-container{
    background-image: url('../../images/bg_result.png'); background-repeat: no-repeat; background-position: center; background-size: cover;
    min-height: 250px; display: flex; align-items: center; justify-content: center; width:100%; padding:16px; flex-direction:column;
}

.bg-payment{
    background: linear-gradient(269.11deg, #FF4756 0.97%, #FF656F 99.79%);
}

.stop-scrolling { height: 100%; overflow: hidden; }
.load-list{ min-height:200px!important;}

*[class*="btn-"]{
    font-size: 12px; padding: 4px 16px; border: 1px solid transparent; outline: 0!important;
    cursor: pointer; border-radius: 4px; text-align: center; display: inline-block;
}
.btn{ border-radius: 24px; padding: 12px 16px; font-size:14px; font-family: 'Inter-Bold'; outline:0!important; box-shadow:none; }
.btn:focus{ outline:0!important; box-shadow:none; }
.btn img{ width:24px; height:24px; position:absolute; left: 40px; margin-top: -2px;}
.btn img.in{ position:inherit; width:16px; height:16px;}
.btn-small{ padding:4px 16px; border-radius: 4px; font-size:12px;}
.btn-pink, .btn-pink:hover, .btn-pink:active, .btn-pink:focus,
a.btn-pink, a.btn-pink:hover, a.btn-pink:active, a.btn-pink:focus{
    border-color: #FF62A2; color: #FDFDFD; background-color: #FF62A2;
}
.btn-cyan, .btn-cyan:hover, .btn-cyan:active, .btn-cyan:focus,
a.btn-cyan, a.btn-cyan:hover, a.btn-cyan:active, a.btn-cyan:focus{
    border-color: #00D1E6; color: #FDFDFD; background-color: #00D1E6;
}
.btn-pink-reverse, .btn-pink-reverse:hover, .btn-pink-reverse:active, .btn-pink-reverse:focus,
a.btn-pink-reverse, a.btn-pink-reverse:hover, a.btn-pink-reverse:active, a.btn-pink-reverse:focus{
    border-color: #FF62A2; color: #FF62A2; background-color: transparent;
}
a.btn-blue, a.btn-blue:hover, a.btn-blue:active, a.btn-blue:focus{
    background-color:transparent; border-color:#005DE9; color:#005DE9;
}
.btn-yellow, .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus,
a.btn-yellow, a.btn-yellow:hover, a.btn-yellow:active, a.btn-yellow:focus{
    border-color: #FFC15D; color: #FFFFFF; background-color: #FFC15D;
}
.btn-transparent, .btn-transparent:hover, .btn-transparent:active, .btn-transparent:focus,
a.btn-transparent, a.btn-transparent:hover, a.btn-transparent:active, a.btn-transparent:focus{
    border-color: #444655; color: #FDFDFD; background-color: transparent;
}
.btn-link, .btn-link:hover, .btn-link:active, .btn-link:focus,
a.btn-link, a.btn-link:hover, a.btn-link:active, a.btn-link:focus{
    border-color: transparent; color: #FDFDFD; background-color: transparent;
}
.btn-disabled, .btn-disabled:hover, .btn-disabled:active, .btn-disabled:focus,
a.btn-disabled, a.btn-disabled:hover, a.btn-disabled:active, a.btn-disabled:focus{
    border-color: #444655; color: #18191F; background-color: #444655;
}
.btn-disabled-2, .btn-disabled-2:hover, .btn-disabled-2:active, .btn-disabled-2:focus,
a.btn-disabled-2, a.btn-disabled-2:hover, a.btn-disabled-2:active, a.btn-disabled-2:focus{
    border-color: #A8AABC; color: #FDFDFD; background-color: #A8AABC;
}
a, a:hover, a:active, a:visited, a:focus{ text-decoration: none; color: inherit;}
.spinner{background-color: #A8AABC; border-radius: 16px; width:100%; float:left; font-size:18px;}
.spinner div{float:left; text-align: center;}
.spinner .spinner-sub, .spinner .spinner-add{ width:50px; cursor: pointer; font-size:28px; }
.spinner .spinner-sub.disable, .spinner .spinner-add.disable{ color: #444655;}
.spinner .spinner-val{width: calc(100% - 100px); padding:8px 16px; color:#444655; text-decoration: underline;}
.spinner.small{border-radius: 4px!important; font-size:14px!important;}
.spinner.small .spinner-sub, .spinner.small .spinner-add{ width:30px!important; font-size:24px!important; }
.spinner.small .spinner-val{width: calc(100% - 60px)!important; padding:7px 5px!important; }

.float-left{ float: left; }
.float-right{ float: right; }
.inline-block{ display: inline-block; }
.row-flat{ float: left; width: 100%; min-height: 1px;}
.row-flat-5{ float: left; width: 5%; min-height: 1px;}
.row-flat-10{ float: left; width: 10%; min-height: 1px;}
.row-flat-20{ float: left; width: 20%; min-height: 1px;}
.row-flat-25{ float: left; width: 25%; min-height: 1px;}
.row-flat-30{ float: left; width: 30%; min-height: 1px;}
.row-flat-35{ float: left; width: 35%; min-height: 1px;}
.row-flat-40{ float: left; width: 40%; min-height: 1px;}
.row-flat-50{ float: left; width: 50%; min-height: 1px;}
.row-flat-55{ float: left; width: 55%; min-height: 1px;}
.row-flat-60{ float: left; width: 60%; min-height: 1px;}
.row-flat-65{ float: left; width: 65%; min-height: 1px;}
.row-flat-70{ float: left; width: 70%; min-height: 1px;}
.row-flat-75{ float: left; width: 75%; min-height: 1px;}
.row-flat-80{ float: left; width: 80%; min-height: 1px;}
.row-flat-95{ float: left; width: 95%; min-height: 1px;}
.space-default{ float: left; width: 100%; height: 80px; }
.space-10{ float: left; width: 100%; height: 10px; }
.space-15{ float: left; width: 100%; height: 15px; }
.space-25{ float: left; width: 100%; height: 25px; }
.space-30{ float: left; width: 100%; height: 30px; }
.space-32{ float: left; width: 100%; height: 32px; }
.space-50{ float: left; width: 100%; height: 50px; }
.space-75{ float: left; width: 100%; height: 75px; }
.space-100{ float: left; width: 100%; height: 100px; }

.flex-h, .flex-h2{display: flex; flex-direction: row; align-items: center;}
.flex-h div{flex:1;}
.flex-v, .flex-vc{display: flex; flex-direction: column; justify-content: center;}
.flex-vc {align-items: center;}
.flex-center{ display: flex; align-items: center; justify-content: center; flex: 1; width:100%;}
.flex-center-v{ display: flex; align-items: center; flex: 1; width:100%; height: 100%;}

.divider{ width:100%; height:1px; float:left; background-color:#444655;}
.divider-light{ width:100%; height:1px; float:left; background-color:#A8AABC;}
.progress{ border-radius: 8px; background-color:#FDFDFD;}
.progress-bar{ border-radius: 8px; background-color:#FF62A2; text-align: right;}

.mv5{margin-top:5px; margin-bottom:5px;}
.mb5{margin-bottom:5px;}
.mt5{margin-top:5px;}
.mt8{margin-top:8px;}
.mv8{margin-top:8px; margin-bottom:8px;}
.mv12{margin-top:12px; margin-bottom:12px;}
.mb12{margin-bottom:12px;}
.mt12{margin-top:12px;}
.mv15{margin-top:15px; margin-bottom:15px;}
.mb16{margin-bottom:16px;}
.mv20{margin-top:20px; margin-bottom:20px;}
.mb20{margin-bottom:20px;}
.mt20{margin-top:20px;}
.mv24{margin-top:24px; margin-bottom:24px;}
.mb24{margin-bottom:24px;}
.mt24{margin-top:24px;}
.mv32{margin-top:32px; margin-bottom:32px;}
.mb32{margin-bottom:32px;}
.mt32{margin-top:32px;}
.mt40{margin-top:40px;}
.mb40{margin-bottom:40px;}
.mv40{margin-top:40px; margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mt60{margin-top:60px;}

.pv8{ padding-top:8px; padding-bottom:8px;}
.pb8{ padding-bottom:8px;}
.pt8{ padding-top:8px;}
.pv16{ padding-top:16px; padding-bottom:16px;}
.pb16{ padding-bottom:16px;}
.pt16{ padding-top:16px;}
.pt40{ padding-top:40px;}
.pv40{ padding-top:40px; padding-bottom:40px;}

.ph16{padding-left:16px; padding-right:16px;}

.header-default, .header-large{ width: 100%; height: 55px; padding: 15px 0; position:fixed;
    top: 0; left: 0; right: 0; z-index: 900; background-color: #18191F;
    -moz-box-sizing: border-box; box-sizing: border-box;}
.header-item{ display: inline-block; }
.header-right{ float:right; }
.header-menu-back{ height: 25px; width: 25px; background-image: url('../../images/ic_arrow_left.png'); background-size: contain; background-repeat: no-repeat;}
.header-menu-toggle{ height: 25px; width: 25px; background-image: url('../../images/ic_menu.png'); background-size: contain; background-repeat: no-repeat; }
.header-logo{ height: 25px; width: 80px; margin: 0 20px; background-image: url('../../images/logo.png'); background-size: contain; background-repeat: no-repeat; }
.header-user{ height: 25px; width: 25px; margin-right:5px; background-image: url('../../images/ic_menu_user.png'); background-size: cover; background-repeat: no-repeat; background-position:center center; border-radius: 50%;}
/*.header-user.open-profile{ width: 35px;}*/
.header-user.open-profile div{ position:relative; height: 25px; width: 37px; background-image: url('../../images/ic_caret_profile.png'); background-size: 8px; background-repeat: no-repeat; background-position: center right;}
.header-user span{ position:absolute; height: 16px; width:16px; margin-left: 16px; margin-top: -5px; background-image: url('../../images/ic_exclamation.png'); background-size: cover; border-radius: 50%;}
.header-share{ height: 25px; width: 25px; background-image: url('../../images/ic_share.png'); background-size: contain; background-repeat: no-repeat; }
.header-space{ float:left; width: 100%; height: 60px; }
.header-tools{ float:left;}
.header-tools.btn{ margin-left: 15px;}
.header-tools.btn:first-child{ margin-left:0;}
.header-heart{ margin-top: 4px; border-right: 1px solid #444655; padding-right: 16px; margin-right: 16px;}
.header-heart.no-border{ border-width: 0; padding-right:0;margin-right:0;}
.header-title{ overflow: hidden; height: 22px;}
.header-title span{ font-size:14px; margin-left: 20px; display: block; float:left; width:140px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'PublicSans-Bold';}

.header-large .header-logo{margin:0; margin-right: 40px;}
.header-menu a{margin-right:40px; float:left; font-family: 'Inter-Regular'; text-transform: uppercase; color:#D9DBE1;}
.header-menu a span{ width: 23px; height:2px; background-color: transparent; display: block; margin-top:5px; }
.header-menu a.active, .header-menu a:hover{ color: #FF62A2; }
.header-menu a.active, .header-menu a:hover{ color: #FF62A2; }
.header-menu a.active span, .header-menu a:hover span{ background-color: #FF62A2; }


.default-content{ height: 100%; overflow-y: auto; overflow-x: hidden;}
.default-content.with-fixed-bottom{ padding-bottom: 100px;}

.menu-list{ display: flex; flex:1; flex-direction:column; justify-content: center; align-items: center;}
.menu-list a{ display: flex; font-size: 28px; color: #FDFDFD; padding-top:32px; padding-bottom:32px; border-bottom:1px solid #444655; justify-content:center; width:100px;}
/*.menu-list a:first-child{ margin-top:32px;}*/
.menu-list a:last-child{ border-bottom: 0;}
.menu-list a.active, .menu-list a:hover{ color: #FF62A2;}

.modal-body{ padding: 10px; }
.modal-full .modal-dialog{margin:0 auto; height:100%; background-color:#18191F; max-width:100%!important;}
.modal-full .modal-content{background-color:#18191F; height:100%; border:0; border-radius:0;}
.modal-full .modal-header{border-bottom:0;opacity: 1 !important; background-color: transparent;}
.btn-menu-close{ display:block; width: 24px; height: 24px; cursor: pointer; opacity:1!important;
    background-image:url('../../images/ic_x.png'); background-size: contain; background-repeat: no-repeat; }
.modal-full .modal-body{ max-width: 540px; margin: 0 auto;}

.btn-claim-bonus{min-width:70px;}

.modal-bottom{height: 100vh;}
.modal-bottom .modal-dialog {
    position: absolute; bottom: 0; left: 0; right: 0; max-width: 100% !important; margin: 0;
}
.modal .modal-content,
.modal-bottom .modal-content { border-radius: 0; background-color:#18191F; padding:12px 8px;}
.modal-bottom .modal-dialog.show { overflow: hidden; }
.modal-bottom .modal-dialog.show .modal-dialog { transform: translateY(0%) !important; min-height: 80px; }

.modal .modal-content{ border-radius: 15px; box-shadow: 0 .125rem .25rem rgba(68, 70, 85, .5);}

#modal-error-register .modal-content { border-radius: 15px; background-color:#fdfdfd;}

.sharetastic__button{width: 60px; height: 60px; margin:8px 10px;}
.fixed-bottom{ padding-top:16px; padding-bottom:16px; background-color: #18191F; border:0;}

.description .about-us-icon{
    width:40px!important;
}

@media only screen and (max-width: 3000px){
    .description .about-us-icon{
        width:35px!important;
    }
}

@media only screen and (max-width: 1024px){
    .description .about-us-icon{
        width:25px!important;
    }
}

@media only screen and (max-width: 768px){
    .description .about-us-icon{
        width:20px!important;
    }
}

@media only screen and (max-width: 512px){
    .about-us-icon{
        width:15px!important;
    }
}

#block-loading {
    position: fixed; display: none; top: 0; left: 0;
    justify-content: center;align-items: center; width: 100%; height: 100%;
    background-color: rgba(24, 25, 31, 0.9); z-index: 9999;
}
#block-loading img{ width: 65%; height:auto;}

.auth-logo{ width: 165px; height: auto;}

.loading-box{
    float:left; width: 100%; height: 150px;
    background-image: url('../../images/loading.gif'); background-position: center center; background-size: 100px 100px; background-repeat: no-repeat;
}
.caption2{width:100%; height:45px; display: inline-block; overflow: hidden;}
.ellip {display: block; height: 100%;}
.ellip-line {display: inline-block; text-overflow: ellipsis;white-space: nowrap; word-wrap: normal; max-width: 100%;}
.ellip, .ellip-line {position: relative; overflow: hidden;}
.ellipsis-line{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.more-box{float:left; width:100%; padding-top:20px; padding-bottom:24px; text-align: center; font-family: 'Inter-Regular'!important;}
.goto{ cursor: pointer; }

.auth-slider-container{ height: 100px;}

.slider-container{
    float:left; width: 100%; overflow-x: auto;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.slider-container::-webkit-scrollbar{ display: none;  /* Safari and Chrome */ }
.slider-wrapper{ float:left; width: max-content;}
.slider-item{ float:left; margin-left:16px; }
.slider-item:last-child{ margin-right:16px; }

.banner-item{ min-height: 210px; background-size: cover; background-repeat: no-repeat; background-position: center top;}
.banner-item span{display: flex; min-height: 210px; font-size:22px; font-family: 'PublicSans-Bold'; flex:1; align-items: center; padding-left:16px;}
.banner-item-h{height:210px;}
.banner-item-h span{height:210px;}

.event-item{ width: 270px; padding-left:16px; display: inline-block; }
.event-item:last-child{ padding-right:16px; }
.event-item-image{ display: inline-block; width: 100%; height:433px; border-radius:8px;
    background-size: cover; background-position: top center; background-repeat: no-repeat;}
.event-item .with-border{ border-bottom: 1px solid #444655;}

.event-container-2 .event-item{ float:left!important; width: 32%!important; margin-right:1%; margin-bottom:24px;}
.event-container-2 .event-item-image{ height:400px!important;}

.tabs{ font-size: 18px; color:#444655; font-family: 'PublicSans-Medium'; padding: 8px 0; }
.tabs .tab-item{padding-right: 16px; float:left; cursor: pointer;}
.tabs .tab-item:first-child{ padding-left: 20px;}
.tabs .tab-item.active{color:#FDFDFD!important;}

.br8{border-radius:8px;}

.icon-profile{ width: 75px; height: 75px; border-radius: 100px; background-color:#444655; background-size: cover; background-position: center center; background-repeat: no-repeat;}
.change-profile-pic{cursor: pointer;}
.change-profile-pic div{width: 72px; height: 72px; border-radius: 100px; background-size: 50%; background-position: center center; background-repeat: no-repeat;
    background-image: url('../../images/ic_camera.png'); background-color: rgba(68, 70, 85, .5); display: none;}
.change-profile-pic:hover div{ display: block;}
#input-profile-pic{display:none;}
.divider-profile{ background-color: #FF62A2; width:50px; height:3px; }

.img-full{width: 100%; height: auto;}
.img-radius{border-radius:4px;}
.icon-12{ width:12px; height:12px; margin-top:-2px; display: inline-block!important;}
.icon-16{ width:16px; height:16px; margin-top:-3px; display: inline-block!important;}
.icon-24{ width:24px; height:24px; margin-top:6px; display: inline-block!important;}
.icon-36{ width:36px; height:36px; display: inline-block!important;}
.icon-42{ width:42px; height:42px; display: inline-block!important;}
.icon-40{ width:40px; height:40px; display: inline-block!important;}
.icon-52{ width:52px; height:52px; display: inline-block!important;}
.icon-64{ width:64px; height:64px; display: inline-block!important;}
.icon-72{ width:72px; height:72px; display: inline-block!important;}
.icon-98{ width:98px; height:98px; display: inline-block!important;}
.icon-128{ width:128px; height:128px;}
.icon-132{ width:132px; height:132px; display: inline-block!important;}
.icon-180{ width:180px; height:180px; display: inline-block!important;}
.icon-exist{ width:120px; height: auto; display: inline-block;}
.icon-round{ border-radius: 50%;}
.icon-bg{ background-size:cover; background-repeat: no-repeat; background-position: center center;}

.overlay-profile{ display: none; position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 890; top: 0; left: 0; }
.profile-menu{
    width: 180px; min-height: 80px; top: 0; right: 0; margin-top: 55px; margin-right: 10px; padding: 0; display:none;
    z-index: 899; position: fixed; background-color: #2D2D2D; border-radius: 0 0 8px 8px;
}
.profile-menu > div{ padding:10px 20px; cursor:pointer;}
.profile-menu > div:first-child{ margin-top: 5px;}
.profile-menu > div:last-child{ margin-bottom: 5px;}
.profile-menu > div:hover{ background-color: #444655; }
.profile-menu > div img{ width:14px; height:14px; display: inline-block; margin-right:10px;}
.profile-menu .divider-profile{background-color:#444655; margin:5px 20px; width:calc(100% - 40px); height:2px; padding:0!important;}


.fandom-item1{ height:320px; border-radius:20px; }
.fandom-item2{ height:150px; border-radius:20px; margin-bottom:20px;}
.fandom-item3{ height:200px; border-radius:20px; margin-bottom:20px;}
.fandom-item4{ height:180px; border-radius:20px; margin-bottom:20px;}
.fandom-item1-banner{ background-repeat: no-repeat; background-position: center; background-size: cover; height: 175px;
    float:left; width: 100%; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.fandom-item1-profile{ border-radius:50%; width:132px; height: 132px; background-position: center; background-size: cover;
    z-index: 5; position: relative; margin-top: -70px; margin-left: 24px;}
.fandom-item2-banner, .fandom-item3-banner{ background-repeat: no-repeat; background-position: center; background-size: cover; height: 80px;
    float:left; width: 100%; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.fandom-item3-banner{height:125px;}
.fandom-item2-profile{ border-radius:50%; width:72px; height: 72px; background-position: center; background-size: cover;
    z-index: 5; position: relative; margin-top: -35px; margin-left: 24px;}
.fandom-box-grid{ display: flex; flex-direction: column; flex-wrap: wrap; max-height: 600px; }
.fandom-grid{ width: 48%; float:left; flex: 1 0 auto;}
.fandom-grid-default{ width:100%; height: 125px; border-top-left-radius: 15px; border-top-right-radius: 15px; background-repeat: no-repeat; background-position: center; background-size: cover;}
.fandom-grid-img{ border-top-left-radius: 15px; border-top-right-radius: 15px;}
.fandom-grid-box{ background-color:#fff; padding: 16px 8px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-bottom:24px;}
.fandom-grid-select{ width:46%; cursor: pointer;}
.fandom-grid-select:nth-child(odd){ margin-right:4%;}
.fandom-grid-select:nth-child(even){ margin-left:4%;}
.fandom-grid-select .fandom-grid-default { margin-top:-32px;}
.fandom-selected{width:98%; height:30px; position: relative; background-position: center right; z-index: 5; padding: 5px;
    background-image: url('../../images/ic_heart_circle_inactive.png'); background-size: contain; background-repeat: no-repeat;}
.fandom-selected.active{ background-image: url('../../images/ic_heart_circle_active.png'); }

.vote-item{ width: 100%; }
.vote-image{ height: 125px; background-size: cover; background-position: center; float:left; width: 100%; border-top-left-radius: 15px; border-top-right-radius: 15px;}

.highlight-img{ border-radius:3px; display: inline-block; width:100%; height: auto;}
.highlight-bg{ border-radius:3px; width:100%; min-height: 50px; background-position: top; background-size: cover;}
.highlight-img-default{ height:270px; border-radius:3px; }
.news-img-default{ height:90px; border-radius:3px; }

.share{
    width:24px; height:24px; display: inline-block; cursor:pointer;
    background-image: url('../../images/ic_share.png'); background-repeat: no-repeat; background-size: cover;
}
.share.mini{width: 16px; height:16px;}
.label-category{ border: 1px solid #FDFDFD; border-radius: 24px; color: #FDFDFD; padding: 4px 16px; font-size: 12px; margin-right:8px; margin-top:8px; display:inline-block;}
.event-detail-label{ font-size:12px; color: #A8AABC; font-family: 'Inter-Regular'; margin-bottom:4px; margin-top:16px;}
.event-idol{ display: flex; flex-direction: row; align-items: center; margin-bottom:16px;}
.event-idol-img, .event-idol-img-1st{ display: block; width: 72px; height:72px; border-radius: 100px; background-size: cover; background-repeat: no-repeat; background-position: center center;}
.album-img, .album-1st{ display: block; margin-right: 12px; width: 72px; height:72px; background-size: cover; background-repeat: no-repeat; background-position: center center;}
.event-idol-name{ margin-left: 16px; font-size:14px; font-family: 'PublicSans-Medium';}
.table td{ vertical-align: middle; color: #FDFDFD; font-size: 14px;}
.fandom-follower{ display: block; float:left; margin-left:5px;}
.ic-fandom-follower{ width:20px; height: 20px; display: block; float:left; background-image:url('../../images/ic_user.png'); background-position: center; background-repeat: no-repeat; background-size: contain; }
.ic-heart-20{ width:20px; height: 20px; display: block; float:left; background-image:url('../../images/ic_heart_active.png'); background-position: center; background-repeat: no-repeat; background-size: contain; }
.ic-fandom-follower.small{width:16px;height:16px; margin-top:1px;}
.event-idol-img-1st{ display: inline-block;}

.progress.small{ height:4px;}
.progress.small.not-first{ background-color:#444655;}
.progress.small.not-first .progress-bar{ background-color:#FDFDFD;}

.heart-row{margin-bottom:16px; display: flex; flex-direction: row; align-items: center;}
.total-heart-row{margin-bottom:24px; margin-top:24px; border-radius: 4px; padding: 10px 16px; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.heart-row > div, .total-heart-row > div{margin-left:16px;}
.heart-row > div:first-child, .total-heart-row > div:first-child{margin-left: 0;}
/*.heart-row > div:last-child, .total-heart-row > div:last-child{margin-left: 16px;float:right; padding-top:8px;}*/
.heart-row .spinner{width:100px;}

.payment{ display: flex; border-top: 1px solid #444655; padding-bottom: 16px; padding-top: 16px; cursor:pointer; align-items: center;}
.payment .payment-logo{ width:48px; height:26px; margin-right:16px; border-radius: 4px; background-color: #ffffff; background-size: contain; background-repeat: no-repeat; background-position: center; background-image:url('../../images/ic_payment.png');}
.payment .dots{ flex:1; text-align: right;}

.gallery-item{
    width: calc(25% - 12px); min-height: 40px; cursor: pointer; border-radius: 4px; margin-right: 16px; float:left;
    background-repeat: no-repeat; background-size: cover; background-position: center;
}
.gallery-item:last-child{ margin-right:0;}
.gallery-item.last-item{background-color: #444655; font-size: 18px; color:#A8AABC; padding:0;}
.gallery-view{margin-top:40px; height: 500px; background-size: contain; background-repeat: no-repeat; background-position: center center;}
.gallery-slider{ height: 100px; padding: 15px; }
.gallery-slider .gallery-slider-item{ width: 70px; height: 70px; border:2px solid transparent; margin-right:15px; cursor:pointer;
    background-repeat: no-repeat; background-position: center; background-size: cover;}
.gallery-slider .gallery-slider-item.active{ border-color: #FF62A2;}

.vote-type{ float:left; width: 33.3%; text-align: center; border-radius: 12px; cursor: pointer; color: #A8AABC; height:40px;
    margin-bottom: 16px; display: flex; justify-content: center; align-items: center;}
.vote-type.active{ background-color: #FF62A2; color: #FDFDFD;}

.vote-value{ float:left; width: 25%; text-align: center; border-radius: 12px; cursor: pointer; color: #A8AABC; height:40px;
    margin-bottom: 16px; display: flex; justify-content: center; align-items: center;}
.vote-value.active{ background-color: #444655; color: #FDFDFD;}
.vote-value i{background-position: center; background-repeat: no-repeat; background-size: contain; width:16px; height: 16px; display: inline-block;
    background-image:url('../../images/ic_heart_inactive.png'); margin-right: 8px;}
.vote-value.active i{background-image:url('../../images/ic_heart_active.png');}

.radio-vote{ width:24px; height:24px; display: inline-block; background-repeat: no-repeat; background-size: contain;
    background-position: center; background-image: url('../../images/ic_radio_off.png'); cursor: pointer;}
.radio-vote.active{background-image: url('../../images/ic_radio_on.png');}
.radio-vote-disable{background-image: url('../../images/ic_radio_disabled.png'); cursor: not-allowed;}

.table-border-bottom tr td{ border-bottom: 1px solid #444655; }
.tab-container{ padding:15px;}
.tab-container .ic-fandom-follower{ background-position: center right; margin-right: -3px;}
.price-border{ border-radius:15px; border: 1px solid #A8AABC; display: inline-block; padding:1px 8px;}
.price-border.color-peach{ border: 1px solid #FF8A77;}

.news-comment{
    background-color: #444655; color: #fdfdfd; border-radius: 4px; padding: 16px; width: 100%; float: left; margin-bottom:8px;
}
.news-reply{ background-color: transparent; margin-bottom:0;}
.news-comment .icon-profile{border:1px solid #18191F!important; background-color:#18191F;}
.news-reply .icon-profile{border:1px solid #444655!important; background-color:#444655;}
.comment-like, .comment-dislike{
    background-position: left center; background-size: contain; background-repeat: no-repeat; cursor: pointer;
    height: 20px; padding-left: 25px;
}
.comment-like{ color:#6DFACD; background-image:url('../../images/ic_thumb_up.png');}
.comment-dislike{ color:#C72249; background-image:url('../../images/ic_thumb_down.png'); margin-left:16px;}
.comment-reply{ padding-left: 16px; border-left:1px solid #fdfdfd; cursor: pointer; margin-left: 16px;}
#comment-box{ border-radius: 4px;}
.news-recommended-item{ width: 250px; padding-left: 16px;}
.news-recommended-item:last-child{ margin-right: 16px;}

.calendar{ color: #fdfdfd; background-color: #444655!important;
    padding-top: 18px!important;border-radius: 8px!important;}
.calendar .month{ font-size: 16px; margin-top:5px!important;}
.calendar .year{ display: inline; font-size: 16px!important; }
.calendar header .simple-calendar-btn,
.calendar header .simple-calendar-btn:hover {
    border-color:transparent!important; background-color: transparent!important; margin-top:18px!important;
}
.calendar thead{ display: none;}
.calendar .day{cursor: pointer!important;}
.calendar .day.wrong-month{ color:transparent!important;}
.calendar .day.today{ background-color: #FF8A77!important; border-radius: 12px!important;}
/*.calendar .day.has-event:after{ top: calc(50% + 20px); background-color: #F9F871;}*/
.calendar .day.has-event:after{ top: calc(50% + 20px); width:12px; height:12px; left: calc(50% - 6px); background-color: transparent; background-image: url('../../images/ic_heart_active.png'); background-size: contain;}
.event-block{ background-color: #444655; padding:16px; border-radius: 4px; margin-top:16px;}
.calendar .day.wrong-month:after{ background-image:none!important;}

.bg-ticket{ background-color: #FBD54A!important;}
.bg-ticket .header-default{ background-color: #FBD54A!important; color:#18191F!important;}
.bg-ticket .header-menu-back{ background-image: url('../../images/ic_arrow_left_black.png')!important;}
.ticket-section{ background-color: #18191F; float:left; width:100%;}
.ticket-divider{ float:left; width:100%; }
.ticket-divider.solid{ height:2px;}
.ticket-divider.dash{ border-bottom: 2px dashed #18191F;}
.ticket-divider div{ width:16px; height:16px; position: absolute; z-index:50;
    background-color: #FBD54A; border-radius: 50%; margin-top: -7px;}
.ticket-divider div:first-child{ left: 10px;}
.ticket-divider div:last-child{ right: 10px;}
.ticket-header, .ticket-footer{padding:30px; text-align: center; color:#A8AABC;}
.ticket-header img {width:60px; height:auto; display: inline;}
.ticket-footer{ padding: 40px 20px; letter-spacing: 3px; font-family: 'Inter-Regular'; font-size:10px; line-height:18px;}
.ticket-body{padding: 40px 24px; }
.ticket-title{color:#F9F871;font-size: 28px; line-height: 38px;}

.filter-box{ margin-top:-60px; }
.search-box .form-control, .search-box .form-control:focus, .search-box .form-control:active{
    background-color: #444655!important; color: #FDFDFD!important;
}
.search-box{ padding: 0 16px;}
.search-box input{ border-radius: 10px; padding-right:50px; margin-bottom:0;}
.search-box input:focus{margin-bottom:0;}
.search-box i{ padding-right:50px;}

.event-tabs{}
.event-category-item{ cursor:pointer; border-radius: 4px; width:calc(25% - 20px); height: 160px; margin-right: 20px; margin-top:20px; float: left;
    background-color: #444655; background-image:url('../../images/ic_calendar_event.png'); background-size: 40%; background-position: bottom right; background-repeat: no-repeat;}
.event-category-item-count{float:right; margin-top:16px; margin-right:16px; font-size:12px; background-color: #444655; padding:4px 16px; border-radius: 100px;}
.event-category-item-name{position:absolute;bottom:16px; margin-left:16px; font-size:20px;}

.right-box{ border-left: 1px solid #444655; }
.bordered, .transaction-detail{ border: 1px solid #444655; border-radius: 4px;}

.transaction-detail{ padding: 32px;}
.profile-active{ padding-left: 10px; border-left: 2px solid #FF62A2; color: #FDFDFD!important;}
.profile-left{ border-right: 1px solid #444655;}
.text-right-d{ text-align: right;}

.highlight-img-container{ background-size: cover; background-position: center; background-repeat: no-repeat; width:100%; float:left; border-radius:8px;}

/* Style for desktop */
@media (min-width: 768px) {
    .profile-menu{ margin-right: 32%;}
    .banner-item{min-height: 600px; }
    .banner-item-h{height: 600px; }
    .banner-item span{font-size:48px;}
    .container-right { margin-right: 0; margin-left: calc(50vw - 345px); }
    .title-word-space{word-spacing: 100vw;}
    .container{ padding-left:15px; padding-right:15px; }
    .row{ margin-right:-15px; margin-left:-15px;}
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto,
    .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto,
    .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto,
    .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto,
    .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{
        padding-right:15px; padding-left:15px;
    }
}
@media (min-width:992px){
    .container-right { margin-right: 0; margin-left: calc(50vw - 455px); }
}
@media (min-width:1200px){
    .container-right { margin-right: 0; margin-left: calc(50vw - 555px); }
}

/* Style for mobile */
@media (max-width: 767px) {
    .notification-slider .desc {
        margin-top: 0px;
    }
    .bg-bonus{ margin-top:24px; width:100%; padding:12px 16px; font-size: 14px;}
    .notif-box{width:100%;}
    .bg-bonus img{ width:16px; height:16px;}
    .space-default{ height:24px; }
    .title{font-size:18px; line-height:28px; margin-bottom: 15px;}
    .title-headline{font-size: 24px; line-height: 32px;}
    .title-m{margin-left:20px;}
    .subtitle, .subtitle2{font-size: 14px;}
    .right-box, .profile-left{ border-color: transparent!important;}
    .text-right-d{ text-align: left;}
}


.radio-choice{width:30px;height:30px;cursor:pointer;background-size:contain;background-repeat:no-repeat;background-image:url('../../images/ic_radio_off_white.png');}
.radio-choice.on{background-image:url('../../images/ic_radio_on_white.png');}

.icon-down{ display: inline-block; width:16px; height:16px; cursor:pointer; background-size: contain; background-repeat: no-repeat; background-image: url('../../images/ic_chevron_down.png'); }
.icon-up{ display: inline-block; width:16px; height:16px; cursor:pointer; background-size: contain; background-repeat: no-repeat; background-image: url('../../images/ic_chevron_up.png'); }

.icon-project-closed{border-radius: 50%; width: 100px; height: 100px; background-size: cover; background-repeat: no-repeat; background-position: center center; text-align:right; display:inline-block;}
.icon-project-closed .rank-1st{ background-image: url('../../images/ic_1st.png'); background-size:105%; width:50px; height:50px; display: inline-block; margin-top:58px;}

/* toastr */
#toast-container .toast-error{ background-color: #C72249; }
#toast-container .toast-warning{ background-color: #FFAE1B; }
#toast-container .toast-success{ background-color: #6DFACD; }
#toast-container .toast-info{ background-color: #444655;}
.toast-message{ color: #FFFFFF; font-family: 'PublicSans-Regular'; font-size: 14px;}
#toast-container > div {
    -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; opacity: 1;
}
#toast-container > div > div{
    padding-top:10px; padding-bottom: 10px;}

/* slick dots */
.slick-dots{ bottom: -45px;}
.slick-dots li{ margin:0; width: 15px; height: 15px;}
.slick-dots li button{ padding:2px;}
.slick-dots li button:before{ opacity:1; font-size:8px; color:#FDFDFD;}
.slick-dots li.slick-active button:before{ color:#FF62A2; font-size: 12px;}
.slick-slide {outline: 0!important;  }

/*live vote*/
.live-vote-item{ text-align:center; padding-top:20px; padding-bottom:20px;}
.live-vote-icon{ display:inline-block; width:76%; border-radius:50%; position:absolute; top:3.8%;
    background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #444655;
    background-image: url('../../images/thumbnail_square.png');}
.live-vote-statistic{ color: #efefef; border:5px solid transparent; margin-top: -5px; min-width:150px; padding:10px;}
.live-rank{ font-size: 48px;}
.progress-knob{ position:absolute;}
.live-vote-box{ width:100%; float:left; min-height: 200px;}
.ic-heart-vote{ width:20px; height: 20px; background-image:url('../../images/ic_heart_active.png'); background-position: center; background-repeat: no-repeat; background-size: contain; }