.container{ padding-left:20px; padding-right:20px; }
.row{ margin-right:-20px; margin-left:-20px;}
.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:20px; padding-left:20px;
}

.form-control, .form-control:focus, .form-control:active{
    color: #FDFDFD; padding:12px 16px; border-radius: 10px; margin-bottom: 20px; width: 100%;
    background-color: #444655; outline: 0!important; box-shadow:none; border-width: 0;
}
.form-control:disabled, .form-control[readonly]{
    color: #A8AABC; background-color: #444655;
}
.form-white, .form-white:focus, .form-white:active{
    background-color: #FDFDFD; color: #444655;
}
.form-line, .form-line:focus, .form-line:active{
    background-color: transparent; border-bottom: 1px solid #444655!important; border-radius: 0!important;
    padding-left:0; padding-right:0; margin-bottom:0;
}
.form-control.has-error{ margin-bottom: 0; }
.form-error-message {
    margin-bottom:20px; color:#C72249; font-size:12px;
    float: left; width:100%; margin-left:16px; margin-top:10px;
}
.form-group{ margin-bottom: 0; width:100%; float:left;}
.form-group.with-icon{position: relative;}
.form-group.no-margin input{margin-bottom: 0;}
.form-group.with-icon input{
    padding-left: 56px;
}
.form-group.with-icon-right input{
    padding-right: 56px;
}
.form-group.right-only input{
    padding-left: 16px;
}
.form-group.with-icon i{
    display: inline-block; width: 24px; height: 24px; position: absolute; margin-left:16px; margin-right:16px; margin-top: 6px;
    background-repeat: no-repeat; background-size: contain; background-position: center; z-index: 1;
}
.form-group.with-icon i.right{top: 0; right:0;}
.form-group.with-icon i.ic-user{background-image:url('../../images/ic_user.png');}
.form-group.with-icon i.ic-email{background-image:url('../../images/ic_email.png');}
.form-group.with-icon i.ic-email-at{background-image:url('../../images/ic_at_email.png');}
.form-group.with-icon i.ic-password{background-image:url('../../images/ic_lock.png');}
.form-group.with-icon i.ic-referral{background-image:url('../../images/ic_referral.png');}
.form-group.with-icon i.ic-instagram{background-image:url('../../images/ic_instagram.png');}
.form-group.with-icon i.ic-twitter{background-image:url('../../images/ic_twitter.png');}
.form-group.with-icon i.ic-dob{background-image:url('../../images/ic_birthday.png');}
.form-group.with-icon i.ic-location{background-image:url('../../images/ic_location.png');}
.form-group.with-icon i.ic-eye{background-image:url('../../images/ic_eye.png');}
.form-group.with-icon i.ic-eye-close{background-image:url('../../images/ic_eye_close.png');}
.form-group.with-icon i.ic-search{background-image:url('../../images/ic_search.png');}
.form-group.with-icon i.ic-check{background-image:url('../../images/ic_result_success.png');}
.form-group.with-icon i.ic-wa{background-image:url('../../images/ic_whatsapp.png');}
.form-group.with-icon i.ic-artist{background-image:url('../../images/ic_artist.png');}
.form-group.with-icon i.ic-music{background-image:url('../../images/ic_music.png');}
.form-label{ margin-bottom: 12px; }
.help-text{ font-size:11px; color: #595959; margin-top:-15px; display:block;}
.form-group.with-help .form-control.has-error{ margin-bottom:20px;}

input[type="checkbox"] { display: none; }
.checkbox-group{ font-size: 14px; color: #A8AABC; width: 100%; float:left; margin-top:8px; margin-bottom:8px; cursor:pointer; }
.checkbox-group i{ margin-right: 12px; display: block; width: 16px; float: left;}
.checkbox-group span{ display: block; margin-top: -2px; float: left; width: calc(100% - 28px); }
.checkbox-group i:before { content: "\f0c8"; font-size: 16px; color: #A8AABC; }
.checkbox-group input[type="checkbox"]:checked ~ i:before { content: "\f14a"; color: #FF62A2; }
.checkbox-group input[type="checkbox"]:checked ~ span{color: #FF62A2;}

input[type="radio"] { display: none; }
.radio-group{ font-size: 14px; color: #A8AABC; width: 100%; float:left; margin-top:8px; margin-bottom:8px; cursor:pointer;  }
.radio-group i{ margin-right: 12px; display: block; width: 16px; float: left;}
.radio-group span{ display: block; margin-top: -2px; float: left; width: calc(100% - 28px); }
.radio-group i:before { content: "\f111"; font-size: 16px; color: #A8AABC; }
.radio-group input[type="radio"]:checked ~ i:before { content: "\f058"; color: #FF62A2; }
.radio-group input[type="radio"]:checked ~ span{color: #FF62A2;}


.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }
.tt-query, .tt-hint { outline: none; }
.tt-query { box-shadow: none; }
.tt-hint {color: #A8AABC;}
.tt-menu {
    margin-top: -15px; padding: 10px 20px; max-height: 200px; overflow-y: auto; cursor: pointer;
    background-color: #444655; border: 1px solid #A8AABC; border-radius: 4px;
}
.tt-suggestion {margin-bottom:5px;}
.tt-suggestion.tt-is-under-cursor {color: #A8AABC; background-color: #444655!important;}
.tt-suggestion p { margin: 0; }

.datepicker table tr td.active{ background:#FF62A2!important; }
.datepicker td, .datepicker th{ padding:10px!important;}
.datepicker-dropdown.datepicker-orient-left:before, .datepicker-dropdown.datepicker-orient-left:after{ left:55px!important;}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #444655 !important;
    color: #FDFDFD !important;
    -webkit-box-shadow: 0 0 0 1000px #444655 inset !important;
    -webkit-text-fill-color: #FDFDFD !important;
    border: 1px solid #444655;
    transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill ~ .placeholder,
input:-webkit-autofill:hover ~ .placeholder,
input:-webkit-autofill:active ~ .placeholder,
input:-webkit-autofill:focus ~ .placeholder { display: none; }


.noselect, .goto, span, label, .notification-slider {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.ic-facebook, .ic-instagram, .ic-tiktok, .ic-twitter, .ic-youtube{
    display:inline-block;width:40px;height:40px;margin-right:5px;background-size:contain;
}
.ic-facebook{ background-image: url('../../images/socmed/ic_facebook.png'); }
.ic-instagram{ background-image: url('../../images/socmed/ic_instagram.png'); }
.ic-tiktok{background-image: url('../../images/socmed/ic_tiktok.png');}
.ic-twitter{background-image: url('../../images/socmed/ic_twitter.png');}
.ic-youtube{background-image: url('../../images/socmed/ic_youtube.png');}

.description.content a:hover{color:#FF62A2;}

.button-feedback{
    background-color:#FF62A2; color:#FDFDFD; padding: 7px 15px;
    border-top-left-radius: 8px; border-top-right-radius: 8px; cursor: pointer;
    position: fixed; transform: rotate(270deg); right:-30px; top:50%; z-index:1000;
}

.font0{font-style: normal!important;}
a.countdown, a.countdown:focus, a.countdown:hover, a.countdown:active{ background-color: #444655!important; color: #FDFDFD!important;}
.ic-exclamation{ width: 16px; height: 16px; float: right; display: block; margin-top: 2px; background-image: url('../../images/ic_exclamation.png'); background-size: cover;}
.btn-input{
    padding: 4px!important; border-radius: 4px!important; font-size: 10px!important;
    cursor:pointer; width:50px!important;  position: absolute; margin-left:16px; margin-right:16px; margin-top: 6px;
    z-index: 1; top: 0; right:0;
}

.top-voters{ max-height: 820px; overflow-y:auto; }
div::-webkit-scrollbar {width: 8px;}
div::-webkit-scrollbar-track {background: transparent;}
div::-webkit-scrollbar-thumb {background: #ADA9BB;}
div::-webkit-scrollbar-thumb:hover {background: #555;}

.bonus-payment{ font-size:10px; padding:1px 4px; border:1px solid #FF62A2; color:#FF62A2; border-radius:4px; margin-left:10px; }
.spinner-input input{ background-color: transparent; outline: 0!important; text-decoration: underline;
    box-shadow:none; border-width: 0; font-size:18px; text-align: center; }
.spinner-input input::-webkit-outer-spin-button,
.spinner-input input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
.spinner-input input[type=number] { -moz-appearance:textfield;}

.dragscroll{overflow: auto;}

.btn-close-popup{ 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; }
.loader{
    width: 100%; height: 85vh; background-image: url('../../images/loading.gif'); background-position: center center;
    background-size: 100px 100px; background-repeat: no-repeat;
}
/*.video-html{ padding:10px; padding-top:0; }*/
.modal-fulls{background-color: rgba(0,0,0,0.5)!important;}
.modal-fulls .modal-content,
.modal-fulls .modal-dialog,
.modal-fulls .modal-body{ background-color: transparent!important;}
.modal-fulls .modal-content{box-shadow: none!important; border-radius: 0!important;}
.video-container{position: relative; overflow: hidden; width: 100%; padding-top: 56.25%;}
.video-container iframe{position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius:1px; width: 100%; height: 100%;}
.embed-video { width: 100%!important; height: auto!important; }
.tiktok-embed{ margin:0!important;}

/*.modals .modal-dialog{ background-color:#18191F;}*/
.modals .modal-content{background-color:#18191F; border:0; border-radius:0;}

.notification-slider{ margin-top:24px; margin-bottom:24px;}
.notification-slider .item{
    cursor: pointer; padding:12px; width:100%;
    border-radius: 4px;
}
.notification-slider img{ width:24px;height:24px;}
.tns-nav{text-align: center;}
.tns-nav button{ width: 10px!important; height:4px; outline:0!important;box-shadow:none!important; border-width:0!important;
    padding:0!important; margin-left:2px; margin-right:2px; background: rgba(255, 255, 255, 0.4); border-radius: 4px;}
.tns-nav button.tns-nav-active{ width: 16px!important; background: #FF4756;}
.mr20{margin-right:20px;}
.ph20{padding-left:20px; padding-right:20px;}


.notification-border{
    padding: 2px !important;
    position: relative;
    z-index:1;
    background-image: linear-gradient(45deg, #FF62A2 0%, #00D1E6 100%);
    filter: brightness(120%)
  }
.notification-border:before{
    z-index: -1;
    position: absolute;
    content: "";
    background-image: linear-gradient(45deg,#FF62A2 0%, #00D1E6 100%);
    filter: blur(5px);
    opacity: 0.7;
    width: 100%;
    height: 100%;
    transform: translateY(-2px) scaleY(1.05);
  }

.gradient{
    background-color: #18191F;
    transition: all ease-in-out 0.3s;
    text-align: left;
    padding: 12px 16px;
    border-radius: 4px;
}
.gradient:hover{ 
    /* background-color: rgba(0, 0, 0, 0); */
    transform: scale(0.99, 0.95);
}
/* .gradient:hover .text-color{
    transition: all ease-in-out 0.3s;
    color: #ffffff  !important;
} */

.header-notification{ background-image:url('../../images/ic_bell.png'); height: 25px; width: 25px; margin-right:12px; background-size: contain; background-repeat: no-repeat;}
.header-notification.active{ background-image:url('../../images/ic_bell_active.png'); }

.notification-menu{
    width: 96vw; min-height: 80px; top: 0; right: 0; margin-top: 55px; margin-right: 2vw; padding: 0; display:none;
    z-index: 899; position: fixed; background-color: #18191F; border-radius: 0;
}
.notification-menu .load-list{ overflow-y: auto;}
.notification-menu > div{ padding:10px 20px;}
.notification-menu > div:first-child{ margin-top: 5px;}
/*.notification-menu > div:last-child{ margin-bottom: 5px;}*/
/*.notification-menu > div:hover{ background-color: #444655; }*/
.notification-menu > div img{ width:30px; height:30px; display: inline-block; margin-right:10px;}
.notification-menu .divider-notif{background-color:#444655; margin:0 20px; width:calc(100% - 40px); height:2px; padding:0!important;}
.ic-check-white{background-image:url('../../images/ic_check_white.png'); background-size: contain; background-repeat: no-repeat;
    margin-left:8px; width:14px;height:14px;display:inline-block;}
.btn-dark-purple, .btn-dark-purple:hover, .btn-dark-purple:active, .btn-dark-purple:focus,
a.btn-dark-purple, a.btn-dark-purple:hover, a.btn-dark-purple:active, a.btn-dark-purple:focus{
    border-color: rgba(255, 121, 193, 0.2);; color: #ffffff; background-color: rgba(255, 121, 193, 0.2);;
}
.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;
}

@media (max-width: 767px) {
    .center-video-container {
        height: 80vh; display: flex; flex:1; align-items: center; justify-content: center;
    }
    .notification-menu{
        margin-top:0; position: fixed; top:0; left:0; width:100%; z-index: 1200; height:100%;
    }
    .notification-menu .load-list{ height:65vh;}
}

@media (min-width: 768px) {
    .notification-slider .item{ padding:16px 32px;}
    .notification-slider img{ width:32px;height:32px;}
    .notification-slider .font-14{font-size:18px!important;}
    .notification-slider .font-13{font-size:16px!important;}
    .notification-menu {margin-right: 10%; max-width:450px;}
    .notification-menu .load-list{ max-height:50vh;}
}