@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{ max-width: 540px!important; padding-left:0; padding-right:0; overflow-x:hidden; }
.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; }
.font2.bold.italic{ font-family: 'Inter-Bold'!important; font-style: italic; }

.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;}

.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'!important; 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:18px; line-height:28px;}
.title-detail{ font-size: 24px; line-height: 32px; font-family: PublicSans-Medium; }
.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-yellow-2, a.color-yellow-2{ color: #FFC15D!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; }
.color-purple{ color: #4F00B5!important;}
.color-purple-2{ color: #6500CC!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;}

.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:12px 16px;
}

.bg-payment{
    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:12px 16px;
}

.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');}

.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;
}

.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: 10px 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;
}
a.btn-blue, a.btn-blue:hover, a.btn-blue:active, a.btn-blue:focus{
    background-color:transparent; border-color:#005DE9; color:#005DE9;
}
.btn-blue, .btn-blue:hover, .btn-blue:active,.btn-blue:focus{
    background-color:#005DE9; border-color:#005DE9; color:#FDFDFD;
}
.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-white, .btn-white:hover, .btn-white:active, .btn-white:focus,
a.btn-white, a.btn-white:hover, a.btn-white:active, a.btn-white:focus{
    border-color: #FDFDFD; color: #18191F!important; background-color: #FDFDFD;
}
.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-purple, .btn-purple:hover, .btn-purple:active, .btn-purple:focus,
a.btn-purple, a.btn-purple:hover, a.btn-purple:active, a.btn-purple:focus{
    border-color: #ffffff; color: #FFFFFF; background-color: #4F00B5;
}
.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; }

.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; }

.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-90{ float: left; width: 90%; min-height: 1px;}
.row-flat-95{ float: left; width: 95%; min-height: 1px;}
.space-default{ float: left; width: 100%; height: 24px; }
.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-v-full{flex:1; height:100%; display: flex; flex-direction: column; justify-content: center;}
.flex-1{ flex:1;}

.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;}

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

.pad-h24{padding-left:24px; padding-right:24px;}

.mv5{margin-top:5px; margin-bottom:5px;}
.mb5{margin-bottom:5px;}
.mt3{margin-top:3px;}
.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;}
.mv16{margin-top:16px; 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;}
.mt60{margin-top:60px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}

.pv8{ padding-top:8px; padding-bottom:8px;}
.pv12{ padding-top:12px; padding-bottom:12px;}
.pb8{ padding-bottom:8px;}
.pt8{ padding-top:8px;}
.pv16{ padding-top:16px; padding-bottom:16px;}
.pb16{ padding-bottom:16px;}
.pt16{ padding-top:16px;}

.header-default{ 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-container{display:flex; flex-direction:row; align-items:center;}
.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: 75px; margin: 0 15px; margin-right:5px; 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-heart{ 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; padding-right:8px;}
.header-title span{ font-size:14px; margin-left: 20px; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'PublicSans-Bold';}

.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;}

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

.modal-dialog{ max-width: 540px; }
.modal-body{ padding: 10px; }
.modal-content{ border-width:0!important; }
.modal-full .modal-dialog{margin:0 auto; height:100%; background-color:#18191F;}
.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-bottom{height: 100%;}
.modal-bottom .modal-dialog {
    position: absolute; bottom: -1px; left: 0; right: 0; max-width: 100% !important; margin: 0;
}
.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-error-register .modal-content { border-top-left-radius: 15px; border-top-right-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{ word-break:break-all;}*/
.description img{width:100%!important; height: auto!important; margin-bottom:10px;}

#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;}
.caption1{width:100%; height:25px; 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;}

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

.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-image{ width: 100%; height:340px; border-top-left-radius:8px; border-top-right-radius:8px;
    background-size: cover; background-position: top center; background-repeat: no-repeat;}
.event-item-detail{ float:left; width:100%; background-color: #2D2D2D; border-bottom-left-radius:8px; border-bottom-right-radius:8px; padding: 16px 8px;}
.event-item .with-border{ border-bottom: 1px solid #444655;}
.badge-event-1{display:inline;background-color: #444655; border-radius: 4px; color:#D9DBE1; padding:4px; font-size: 12px;}
.badge-event-2{display:inline-block;background-color: #18191F; border-radius: 4px; color:#FDFDFD; padding:4px 8px;}

.event-container-2 .event-item{ float:left!important; width: 50%!important; padding-left:0!important; margin-top:24px;}
.event-container-2 .event-item-image{ height:330px!important;}
.event-container-2 .event-item:nth-child(odd){ padding-left:16px!important;padding-right:8px!important;}
.event-container-2 .event-item:nth-child(even){ padding-right:16px!important;padding-left:8px!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;}

.icon-profile{ width: 40px; height: 40px; border-radius: 100px; 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;}

.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-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-128{ width:128px; height:128px;}
.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:200px; border-radius:20px; }
.fandom-item1-banner{ background-repeat: no-repeat; background-position: center; background-size: cover; height: 115px;
    float:left; width: 100%; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.fandom-item1-profile{ border-radius:50%; width:120px; height: 120px; background-position: center; background-size: cover;
    z-index: 5; position: relative; margin-top: -55px; margin-left: 24px;}
.fandom-box-grid{  }
.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'); }
.fandom-social{ padding: 16px 12px; border-radius: 8px; float:left; width:calc(100% - 32px); margin-left:16px; margin-right:16px; color: #FDFDFD; margin-bottom: 24px;}

.vote-item{ float:left; width: 135px; margin-left:16px; }
.vote-item:last-child{ margin-right:16px; }
.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: center; background-size: cover;}
.highlight-img-default{ height:170px; 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: 40px; height:40px; border-radius: 100px; background-size: cover; background-repeat: no-repeat; background-position: center center;}
.album-img, .album-1st{ display: block; margin-right: 12px; width: 60px; height:60px; 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{ width:72px; height:72px; display: inline-block;}

.heart-row{margin-bottom:16px;}
.heart-row > div{float:left;}
.heart-row > div:first-child{margin-right: 16px;}
.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-image:url('../../images/ic_payment.png'); background-size: contain; background-repeat: no-repeat; background-position: center;}
.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{height: calc(100% - 100px); 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;}

.pull-right{float:right;}
.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;}

.heart-badge{min-width:60px;display:flex;flex-direction:row; align-items: center;}
.heart-badge img{}
.heart-badge div{flex:1;}

.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;}
.calendar .day.wrong-month{ color:transparent!important;}
.calendar .day.today{ background-color: #FF8A77!important; border-radius: 12px!important;}
/*.calendar .day.has-event{background-image: url('../../images/ic_heart_active.png'); background-size: cover; }*/
.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-warning{ background-color: #FBD54A!important; color: #18191F!important; border-radius: 4px; padding:10px 12px;}
.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; margin-bottom:40px;}
.ticket-body{padding: 40px 24px; }
.ticket-title{color:#F9F871;font-size: 28px; line-height: 38px;}

.bg-kor{background-color: #C8A2C8; }
.bg-ticket-2 {background-color: #C8A2C8!important; min-height: 750px;
    background-image: url('../../images/ticket/bg_heart.png'), url('../../images/ticket/bg_asterisk.png'), url('../../images/ticket/bg_arc.png');
    background-size: 60px 60px, 100px 100px, 100px 100px;
    background-position: right top, left bottom, right bottom;
    background-repeat: no-repeat;
}
.bg-ticket-2 .header-default{ background-color: transparent!important; color:#FDFDFD!important; position: relative;}
.bg-ticket-2 .header-space{height:10px;}
.bg-ticket-2 .header-menu-back{ background-image: url('../../images/ic_arrow_left.png')!important;}

.ticket {
    position: relative; box-sizing: border-box; margin: 20px auto; padding: 20px;
    background: #FDFDFD; width: 300px; height: 560px;
}
.ticket:before, .ticket:after { content: ''; position: absolute; left:-10px; right:-10px; width: 320px; }
.ticket:before {
    top: -10px; height:570px;
    background: radial-gradient(circle, transparent, transparent 50%, #fdfdfd 50%, #fdfdfd 100% ) -9px -12px / 24px 24px repeat-x, radial-gradient(circle, transparent, transparent 50%, #fdfdfd 50%, #fdfdfd 100% ) -10px -12px / 24px 24px repeat-y, radial-gradient(circle, transparent, transparent 50%, #fdfdfd 50%, #fdfdfd 100% ) 306px -12px / 24px 24px repeat-y;
 }
.ticket:after {
     bottom: -8px; height: 12px;
     background: radial-gradient(circle, transparent, transparent 50%, #fdfdfd 50%, #fdfdfd 100% ) -8px 0px / 24px 24px repeat-x;
}

.ticket-with-note {min-height: 855px!important;}
.ticket-with-note .ticket { height: 670px!important; }
.ticket-with-note .ticket:before { top: -11px!important; height:680px!important; }
.ticket-with-note .ticket:after { bottom: -10px!important; }

.ticket-offline {min-height: 980px!important;}
.ticket-offline .ticket { height: 795px!important; }
.ticket-offline .ticket:before { top: -11px!important; height:805px!important; }
.ticket-offline .ticket:after { bottom: -10px!important; }

.ticket-offline.ticket-with-note {min-height: 1080px!important;}
.ticket-offline.ticket-with-note .ticket { height: 895px!important; }
.ticket-offline.ticket-with-note .ticket:before { top: -11px!important; height:905px!important; }
.ticket-offline.ticket-with-note .ticket:after { bottom: -10px!important; }

.tickets {margin: 0 auto; width: 100%; max-width: 350px;}
.ticket-frame-top{ background-image: url('../../images/ticket/ticket_frame_v.png'); background-size:contain; background-repeat: repeat-x; background-position: bottom; height: 15px; }
.ticket-frame-bottom{ background-image: url('../../images/ticket/ticket_frame_v.png'); background-size:contain; background-repeat: repeat-x; background-position: top; height: 15px; transform: rotate(180deg); }
.ticket-frame-left{ height:100%; background-image: url('../../images/ticket/ticket_frame_h.png'); background-size:contain; background-repeat: repeat-y; background-position: center right; width:100%; }
.ticket-frame-right{ height:100%; background-image: url('../../images/ticket/ticket_frame_h.png'); background-size:contain; background-repeat: repeat-y; background-position: center left; width:100%; transform: rotate(180deg);}

.ticket-container{ background-color: #FFDB5D; }
.ticket-container .ticket-title{color:#FF5B2B; font-size: 28px; line-height: 32px; padding:20px; border-bottom: 1px dashed #18191F; overflow-y: hidden;
    background-image: url('../../images/ticket/bg_asterisk_2.png'); background-size: 40%; background-position: left top; background-repeat: no-repeat;}
.ticket .ticket-title{ height:170px;}
.ticket .ticket-container { position: relative; }
.ticket-container .ticket-body{padding:20px;color:#005DE9;}
.ticket-container .ticket-footer{padding:12px 20px; letter-spacing: 3px; font-family: 'Inter-Regular'; color:#2D2D2D; font-size:10px; line-height:18px; margin-bottom:0;}
.pointer-ticket{ display: inline-block; margin-top:8px; background-image: url('../../images/ticket/ic_arrow.png'); background-size: contain; background-repeat: no-repeat; width:28px; height:20px;}
.ticket-ic{background-size: contain; width:30px; height:30px; background-repeat: no-repeat;}
.ticket-location{background-image: url('../../images/ticket/ic_location.png');}
.ticket-ticket{background-image: url('../../images/ticket/ic_ticket.png');}
.ticket-calendar{background-image: url('../../images/ticket/ic_calendar.png');}
.ticket-note{background-image: url('../../images/ticket/ic_notes.png');}
.sponsor{color:#005DE9; font-size:12px; padding-left:20px;padding-right:20px;}
.sponsor img{ height: 24px; width:auto; margin-bottom:12px; margin-left:6px; margin-right:6px;}

.bg-festival .bg-kor{background-color: #683CCD; }
.bg-festival{ background-color: #683CCD!important; background-image: url('../../images/ticket/bg_heart_festival.png'), url('../../images/ticket/bg_asterisk_festival.png'), url('../../images/ticket/bg_arc_festival.png'); }
.bg-festival .ticket-frame-top{ background-image: url('../../images/ticket/ticket_frame_v_festival_1.png'); }
.bg-festival .ticket-frame-bottom{ background-image: url('../../images/ticket/ticket_frame_v_festival_1.png'); }
.bg-festival .ticket-frame-left{ background-image: url('../../images/ticket/ticket_frame_h_festival_1.png'); }
.bg-festival .ticket-frame-right{ background-image: url('../../images/ticket/ticket_frame_h_festival_1.png'); }
.bg-festival .ticket-location{background-image: url('../../images/ticket/ic_location_1.png');}
.bg-festival .ticket-ticket{background-image: url('../../images/ticket/ic_ticket_1.png');}
.bg-festival .ticket-calendar{background-image: url('../../images/ticket/ic_calendar_1.png');}
.bg-festival .ticket-note{background-image: url('../../images/ticket/ic_notes_1.png');}
.bg-festival .ticket-container{ background-color: #FBD84A; background-image: url('../../images/ticket/bg_festival_1.png'); background-size: cover; }
.bg-festival .ticket-festival{ background-image: url('../../images/ticket/logo_festival_1.png'); background-size: contain; background-position: top center; background-repeat: no-repeat; float:left;}
.bg-festival .ticket-container .ticket-title{color:#4F00B5; font-size: 20px; line-height: 23px; padding:20px; padding-top:0;padding-bottom:0; border-bottom: none; background-image: none; text-align: left; margin-top:120px;}
.bg-festival .ticket-container .ticket-body{color:#6500CC;}
.bg-festival .ticket-container .ticket-footer{padding-top:0;color:#6500CC;}
.bg-festival .ticket-qrcode{ padding: 12px;border-radius:12px; background-color: #ffffff; display: inline-block; cursor:pointer;}
.btn-festival, .btn-festival:hover, .btn-festival:active, .btn-festival:focus,
a.btn-festival, a.btn-festival:hover, a.btn-festival:active, a.btn-festival:focus{
    border-color: #4F00B5; color: #4F00B5; background-color: transparent;
}
.bg-festival .sponsor{color:#4F00B5;}

.bg-festival-2 .ticket-frame-top{ background-image: url('../../images/ticket/ticket_frame_v_festival_2.png'); }
.bg-festival-2 .ticket-frame-bottom{ background-image: url('../../images/ticket/ticket_frame_v_festival_2.png'); }
.bg-festival-2 .ticket-frame-left{ background-image: url('../../images/ticket/ticket_frame_h_festival_2.png'); }
.bg-festival-2 .ticket-frame-right{ background-image: url('../../images/ticket/ticket_frame_h_festival_2.png'); }
.bg-festival-2 .ticket-location{background-image: url('../../images/ticket/ic_location_2.png');}
.bg-festival-2 .ticket-ticket{background-image: url('../../images/ticket/ic_ticket_2.png');}
.bg-festival-2 .ticket-calendar{background-image: url('../../images/ticket/ic_calendar_2.png');}
.bg-festival-2 .ticket-note{background-image: url('../../images/ticket/ic_notes_2.png');}
.bg-festival-2 .ticket-container{ background-color: #683CCD; background-image: url('../../images/ticket/bg_festival_2.png'); }
.bg-festival-2 .ticket-festival{background-image: url('../../images/ticket/logo_festival_2.png');}
.bg-festival-2 .ticket-container .ticket-title{color:#FFFFFF; }
.bg-festival-2 .ticket-container .ticket-body{color:#FFFFFF;}
.bg-festival-2 .ticket-container .ticket-footer{padding-top:0;color:#FFFFFF;}
/*.bg-festival-2 .ticket-qrcode{ background-color: #FBD800;}*/
.bg-festival-2 .btn-festival, .bg-festival-2 .btn-festival:hover, .bg-festival-2 .btn-festival:active, .bg-festival-2 .btn-festival:focus,
.bg-festival-2 a.btn-festival, .bg-festival-2 a.btn-festival:hover, .bg-festival-2 a.btn-festival:active, .bg-festival-2 a.btn-festival:focus{
    border-color: #FFFFFF; color: #FFFFFF; background-color: transparent;
}
.bg-festival-2 .sponsor{color:#FFFFFF;}

.search-box{ padding: 0 16px;}
.search-box input{ background-color: #444655; border-radius: 10px; padding-right:50px; margin-bottom:0;}
.search-box input:focus{margin-bottom:0;}
.search-box i{ padding-right:50px;}

.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;}

/*.row-radio.active, .row-radio:hover{ background-color: #FF62A2;}*/
.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'); }

/* Style for desktop */
@media (min-width: 768px) {
    .header-right{ right: 32%; }
    .profile-menu{ margin-right: 32%;}
    .modal-bottom .modal-content{width:542px; margin: auto;}
}

/* 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;  }
.center-slick .slick-list {padding:0 !important;}