@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);

/* e7c028 is the yellow color used in links and buttons background */
/* 2c2c2c is the dark-grey color used in links and buttons background */

#preloader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000; /* change if the mask should have another color then white */
    z-index: 999;
    background-repeat: repeat;
    float: none;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}
.tab_list ul {
    display: inline-block;
    height: 38px;
    text-align: center;
    line-height: 38px;
    font-size:0px;
}
.tab_list ul li {
    border: 1px solid #2c2c2c;
    display: inline-block;
    list-style: none;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    color:#2c2c2c;
    font-size:14px;
    cursor: pointer;
}
.tab_list ul li.current {
    background-color: #2c2c2c;
    color: white;
    border: 1px solid #2c2c2c;
}
.hide {
    display: none;
}
.buttons-start-media,.media-item{
    display: flex;
    justify-content: space-between;
}
.media_list{
    min-height: 200px;
}
.media-item-del{
    cursor: pointer;
}
.media-item-del img{
    height: 25px;
}
#status {
    width: 100%;
    max-width: 286px;
    height: 185px;
    position: absolute;
    left: 50%; /* centers the loading animation horizontally one the screen */
    top: 10%; /* centers the loading animation vertically one the screen */
    background-image: url(../img/pre12.gif); /* path to your loading animation */
    background-repeat: no-repeat;
    background-position: center 45px; /* is width and height divided by two */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #666;
    text-align: center;
    vertical-align: bottom;
    line-height: 300px;
    margin: -92px 0 0 -143px;
    background-color: #000000;
}

.loading-animation {
    width: 100%;
    max-width: 286px;
    height: 100px;
    background-image: url(../img/pre13.gif); /* path to your loading animation */
    background-repeat: no-repeat;
    background-position: center center; /* is width and height divided by two */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #666;
    text-align: center;
    vertical-align: bottom;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
}


/* RESETS */

.separator-light-grey {
    background-color: #dbdbdb;
    height: 1px;
    width: 100%;
}

.separator-dark {
    background-color: #a7a7a7;
    height: 1px;
    width: 100%;
}

.left {
    float: left !important;
}

.right {
    float: right !important;
}

.text-right {
    text-align: right;
}

.noFloat {
    float: none;
}

.float-center {
    float: none;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.clearfix {
    clear: both !important;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.hide {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

a {
    font-weight: 400;
    text-decoration: none;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    vertical-align: middle;
}

.relative {
    position: relative;
}

.static {
    position: static;
}

.full, .full-height {
    min-height: 100%;
}

.display-block {
    display: block;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.hide {
    display: none;
}

ul {
    list-style-type: none;
}

.no-border, .mobile-menu-list ul li.no-border {
    border: none;
}

.marginTopPercent-10 {
    margin-top: 10%;
}

.marginTopPercent-15 {
    margin-top: 15%;
}

.marginTopPercent-20 {
    margin-top: 20%;
}

.marginTopPercent-25 {
    margin-top: 25%;
}

.marginTopPercent-30 {
    margin-top: 30%;
}

.marginTopPercent-35 {
    margin-top: 35%;
}

.marginTopPercent-40 {
    margin-top: 40%;
}

.marginTopPercent-60 {
    margin-top: 60%;
}

.marginTop-minus-4 {
    margin-top: -4px;
}

.marginTop-minus6 {
    margin-top: -6px;
}

.marginTop-minus10 {
    margin-top: -10px;
}

.marginTop-minus15 {
    margin-top: -15px;
}

.marginTop-minus17 {
    margin-top: -17px;
}

.marginTop-minus20, .marginTop-minus-20 {
    margin-top: -20px;
}

.marginTop-minus24 {
    margin-top: -24px;
}

.marginTop-minus25 {
    margin-top: -25px;
}

.marginTop-minus30 {
    margin-top: -30px;
}

.marginTop-minus50 {
    margin-top: -50px;
}

.marginTop-minus65 {
    margin-top: -65px;
}

.marginTop-1 {
    margin-top: 1px;
}

.marginTop-3 {
    margin-top: 3px;
}

.marginTop-5 {
    margin-top: 5px;
}

.marginTop-8 {
    margin-top: 8px;
}

.marginTop-10 {
    margin-top: 10px;
}

.marginTop-11 {
    margin-top: 11px;
}

.marginTop-12 {
    margin-top: 12px;
}

.marginTop-15 {
    margin-top: 15px;
}

.marginTop-18 {
    margin-top: 18px;
}

.marginTop-20 {
    margin-top: 20px;
}

.marginTop-25 {
    margin-top: 25px;
}

.marginTop-28 {
    margin-top: 28px;
}

.marginTop-30 {
    margin-top: 30px;
}

.marginTop-40 {
    margin-top: 40px;
}

.marginTop-45 {
    margin-top: 45px;
}

.marginTop-50 {
    margin-top: 50px;
}

.marginTop-55 {
    margin-top: 55px;
}

.marginTop-60 {
    margin-top: 60px;
}

.marginTop-65 {
    margin-top: 65px;
}

.marginTop-80 {
    margin-top: 80px;
}

.marginTop-90 {
    margin-top: 90px;
}

.marginTop-100 {
    margin-top: 100px;
}

.marginTop-130 {
    margin-top: 130px;
}

.marginBottom-1 {
    margin-bottom: 1px;
}

.marginBottom-10 {
    margin-bottom: 10px;
}

.marginBottom-20 {
    margin-bottom: 20px;
}

.marginBottom-30 {
    margin-bottom: 30px;
}

.marginBottom-50 {
    margin-bottom: 50px;
}

.padding-10 {
    padding: 10px;
}

.padding-20 {
    padding: 20px;
}

.padding-30 {
    padding: 30px;
}

.paddingLeft-10 {
    padding-left: 10px;
}

.paddingLeft-15 {
    padding-left: 15px;
}

.paddingLeft-20 {
    padding-left: 20px;
}

.paddingLeft-30 {
    padding-left: 30px;
}

.paddingLeft-40 {
    padding-left: 40px;
}

.paddingLeft-50 {
    padding-left: 50px;
}

.paddingLeft-60 {
    padding-left: 60px;
}

.paddingLeft-90 {
    padding-left: 90px;
}

.paddingLeft-100 {
    padding-left: 100px;
}

.paddingRight-12 {
    padding-right: 12px;
}

.paddingRight-100 {
    padding-right: 100px;
}

.paddingRight-20 {
    padding-right: 20px;
}

.paddingTop-5 {
    padding-top: 5px;
}

.paddingTop-10 {
    padding-top: 10px;
}

.paddingTop-20 {
    padding-top: 20px;
}

.paddingTop-30 {
    padding-top: 30px;
}

.paddingBottom-5 {
    padding-bottom: 5px;
}

.paddingBottom-10 {
    padding-bottom: 10px;
}

.paddingBottom-15 {
    padding-bottom: 15px;
}

.paddingBottom-20 {
    padding-bottom: 20px;
}

.paddingBottom-30 {
    padding-bottom: 30px;
}

.paddingBottom-40 {
    padding-bottom: 40px;
}

.paddingBottom-60 {
    padding-bottom: 60px;
}

.paddingBottom-80 {
    padding-bottom: 80px;
}

.paddingTopBottom-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.paddingTopBottom-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.paddingTopBottom-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.paddingTopBottom-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.paddingLeftRight-7 {
    padding-left: 7px;
    padding-right: 7px;
}

.paddingLeftRight-30 {
    padding-left: 30px;
    padding-right: 30px;
}

.marginLeft-minus5 {
    margin-left: -5px !important;
}

.marginLeft-minus15 {
    margin-left: -15px !important;
}

.marginLeft-minus20 {
    margin-left: -20px !important;
}

.marginLeft-minus30 {
    margin-left: -30px !important;
}

.marginLeft-minus40 {
    margin-left: -40px !important;
}

.marginLeft-minus50 {
    margin-left: -50px !important;
}

.marginLeft-minus80 {
    margin-left: -80px !important;
}

.marginLeft-minus100 {
    margin-left: -100px !important;
}

.marginLeft-0 {
    margin-left: 0 !important;
}

.marginLeft-1 {
    margin-left: 1px;
}

.marginLeft-2 {
    margin-left: 2px;
}

.marginLeft-5 {
    margin-left: 5px;
}

.marginLeft-10 {
    margin-left: 10px;
}

.marginLeft-15 {
    margin-left: 15px;
}

.marginLeft-20 {
    margin-left: 20px;
}

.marginLeft-25 {
    margin-left: 25px;
}

.marginLeft-30 {
    margin-left: 30px;
}

.marginLeft-40 {
    margin-left: 40px;
}

.marginLeft-44 {
    margin-left: 44px;
}

.marginLeft-50 {
    margin-left: 50px;
}

.marginLeft-70 {
    margin-left: 70px;
}

.marginLeft-80 {
    margin-left: 80px;
}

.marginLeft-90 {
    margin-left: 90px;
}

.marginRight-5 {
    margin-right: 5px;
}


.marginRight-10 {
    margin-right: 10px;
}

.marginRight-12 {
    margin-right: 12px;
}

.marginRight-20 {
    margin-right: 20px;
}

.marginRight-25 {
    margin-right: 25px;
}

.marginRight-30 {
    margin-right: 30px;
}

.marginRight-40 {
    margin-right: 40px;
}

.marginRight-50 {
    margin-right: 50px;
}

.marginRight-60 {
    margin-right: 60px;
}

.marginRightPercent-5 {
    margin-right: 5%;
}

.txt-white {
    color: #ffffff;
}

.txt-dark {
    color: #2c2c2c;
}

.txt-light {
    color: #ababab;
}

.txt-yellow {
    color: #e7c028;
}

.txt-yellow-no-hover {
    color: #e7c028;
}

.txt-blue {
    color: #1f9ceb;
}

.txt-green {
    color: #bbcb36;
}

.txt-red {
    color: #e95454;
}

.txt-orange {
    /*color: #eb6c1f;*/
    color: #ED1C24;
}

.font-100 {
    font-weight: 100;
}

.font-300 {
    font-weight: 300;
}

.font-400 {
    font-weight: 400;
}

.font-700 {
    font-weight: 700;
}

.font-900 {
    font-weight: 900;
}

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

.font-13 {
    font-size: 13px;
}

.font-14 {
    font-size: 14px;
}

.font-15 {
    font-size: 15px;
}

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

.font-17 {
    font-size: 17px;
}

.font-18 {
    font-size: 18px;
}

.font-19 {
    font-size: 19px;
}

.font-20 {
    font-size: 20px;
}

.font-25 {
    font-size: 25px;
}

.font-28 {
    font-size: 28px;
}

.font-30 {
    font-size: 30px;
}

.font-35 {
    font-size: 35px;
    line-height: 35px;
}

.font-40 {
    font-size: 40px;
    line-height: 40px;
}

.font-45 {
    font-size: 45px;
    line-height: 45px;
}

.font-50 {
    font-size: 50px;
    line-height: 50px;
}

.font-300 {
    font-weight: 300;
}

.font-400 {
    font-weight: 400;
}

.font-700 {
    font-weight: 700;
}

.font-900 {
    font-weight: 900;
}

.line-height20 {
    line-height: 20px;
}

.height40 {
    height: 40px;
}

.get-center {
    display: table;
    float: none;
    margin-right: auto;
    margin-left: auto;
}

.align-center {
    float: none;
    margin-right: auto;
    margin-left: auto;
}

.full-width {
    width: 100%;
}

.noPadding {
    padding: 0 !important;
}

.noLeftPadding {
    padding-left: 0 !important;
}

.noRightPadding {
    padding-right: 0 !important;

}

.noMargin, input[type=text].noMargin {
    margin: 0 !important;
}

.noMargin {
    margin: 0 !important;
}

textarea {
    width: 100%;
    min-height: 150px;
    font-family: 'Lato', sans-serif;
    padding: 15px;
}

textarea.popup-textarea {
    min-height: 235px;
}

textarea.terms-of-use-textarea {
    min-height: 500px;
    min-width: 1070px;
}

.ddown {
    background-color: #FFFFFF;
    width: 100%;
    font-size: 18px;
    height: 50px;
    padding-left: 12px;
    border: 1px solid #FFFFFF;
    font-family: 'Lato', sans-serif;
    max-width: 500px;
}

.ddown-small {
    background-color: #FFFFFF;
    font-size: 13px;
    border: 0;
    height: 20px;
    font-family: 'Lato', sans-serif;
    max-width: 150px;
}

.ddown.border {
    border: 1px solid #c7c7c7;
}

.ddown.mic-select {
    width: 90%;
    font-size: 12px;
    height: 35px;
    padding-left: 5px;
}

.ddown.with-x {

}

.ddown.h25 {
    height: 25px;
}

#dropdownMenuButton {
    width: 100%;
    padding: .5rem 1rem;
    opacity: unset !important;
}
.dropdown {
    position: relative;
    margin: auto;
    margin-top: 10px;
    border: none !important;
}
.screen {
    background-image:none;
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 30px;
    /*z-index: 999;*/
    cursor: pointer;
}
.screen.full_screen{
    /*background-image: url(../img/full_screen.png);*/
}
.screen.unfull_screen{
    /*background-image: url(../img/un_full_screen.png);*/
}
.dropdown-menu {
    position: absolute;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    width: 100%;
    will-change: transform;
    top: 0px;
    transform: translate3d(0px, 38px, 0px);
}
.dropdown-menu.show{
    display: block;
}
#example2{
    padding: 0px 15px;
    max-height:150px ;
    overflow-y: auto;
}
input[type="text"] {
    font-family: 'Lato', sans-serif;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/ 0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

.input-txt {
    width: 100%;
    max-width: 500px;
    font-size: 18px;
    height: 50px;
    padding-left: 15px;
    border: 1px solid #FFFFFF;
}

.input-txt-no-width {
    font-size: 18px;
    height: 50px;
    padding-left: 15px;
    border: 1px solid #FFFFFF;
}

.input-txt.fan-landing {
    min-width: 350px;
}

.input-txt.max {
    max-width: 300px;
}

.input-txt.max350 {
    max-width: 350px;
}

.input-txt.max-width {
    width: 100%;
    max-width: 100%;
}

.input-txt.small-phone {
    max-width: 235px;
    height: 50px;
}

.input-txt.small-phone-height {
    max-width: 235px;
    height: 30px !important;
}

.input-txt.medium-phone {
    max-width: 435px;
    height: 50px;
}

.input-txt.max-phone {
    max-width: 100%;
    height: 50px;
}

.input-txt.border {
    border: 1px solid #c7c7c7;
}
.input-txt.border:focus {
    border-color: transparent;
}
.input-txt-no-width.border {
    border: 1px solid #c7c7c7;
}

.error-txt {
    color: #f74a4a;
}

.confirmation-txt {
    color: #339900;
}

.input-txt.error {
    border: 1px solid #f12e2e;
    color: #f12e2e;
    background-color: #ffcccc;
}

.input-txt:focus {
    border: 3px solid #f0c311;
}

.input-txt.error:focus {
    border: 3px solid #f12e2e;
}

.input-txt::-webkit-input-placeholder {
    color: #2c2c2c;
    font-family: 'Lato', sans-serif;
}

.input-txt::-moz-placeholder {
    color: #2c2c2c;
    font-family: 'Lato', sans-serif;
}

/* firefox 19+ */
.input-txt:-ms-input-placeholder {
    color: #2c2c2c;
    font-family: 'Lato', sans-serif;
}

/* ie */
input.input-txt:-moz-placeholder {
    color: #2c2c2c;
    font-family: 'Lato', sans-serif;;
}

.tips {
    color: #FFFFFF;
    background-color: #f12e2e;
    position: absolute;
    left: 100%;
    top: -5px;
    height: auto;
    min-width: 300px;
    text-align: left;
    padding: 5px;
    border-radius: 3px;
    margin-top: 12px;
}

.tips.v2 {
    left: 110%;
}

.tips.v3 {
    left: 100%;
}

.tips::after {
    content: "";
    position: absolute;
    top: 17px;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #f12e2e transparent transparent;
}

.toast-message {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -30%);
    width: 95%;
    max-width: 500px;
    background-color: #836a0a;
    -webkit-box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.35);
    box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.35);
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
    font-size: 18px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    z-index: 99;
}

.stop-scrolling {
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}

.content .row, .header .row, .footer .row {
    max-width: 100%;
}

.all-container .row {
    max-width: 1366px;
}

.row {
    min-width: 250px;
}

.sc-white {
    background-color: #ffffff;
}

.sc-red {
    background-color: #FF0000;
}

.sc-light-grey {
    background-color: #F4F4F4;
}

.sc-dark-grey {
    background-color: #2c2c2c;
}

.sc-blue {
    background-color: #00CCFF;
}

.sc-green {
    background-color: #8ebd11;
}

.black-cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2;
    padding: 40px;
    height: 134%;
}

.sup10 {
    vertical-align: text-top;
    font-size: 10px;
    text-decoration: underline;
}

.sup16 {
    vertical-align: text-top;
    font-size: 16px;
}

.opacity-05 {
    opacity: 0.5;
}

.border-grey {
    border: 1px solid #545454;
}

.border-light-grey {
    border: 1px solid #c8c8c8;
}

.border-light-grey-LeftRight {
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-right-color: #c8c8c8;
    border-left-color: #c8c8c8;
}

.border-bottom-grey {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #dbdbdb;
}

.underline {
    text-decoration: underline;
}

.width49percent {
    width: 49%;
}

.width50percent {
    width: 50%;
}

.width70percent {
    width: 70%;
}

.width85percent {
    width: 85%;
}

.width100percent {
    width: 100%;
}

.width29percent {
    width: 29%;
}

/* END RESETS */


.popup-cover {
    background-color: rgba(230, 230, 230, 0.7);
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 99;
}

.popup-cover.dark {
    background: rgba(0, 0, 0, 0.95);
}

.popup-cover.sc-now-media.popup {
    background-color: transparent;
    width: 60%;
    position: absolute;
    left: auto;
    top: auto;
    right: 0;
    bottom: 120px;
    display: none;
    z-index: 100;
}
.popup-cover.sc-now-media.popup .popup-container{
    background-color: #2c2c2c;
    float: none;
    height: auto;
    width: 90%;
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
    top: 10%;
    position: relative;
    color: #ffffff;
    max-height: 80%;
    overflow-y: auto;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    z-index: 101;
    border: 3px white solid;
}

.popup-container {
    background-color: #2c2c2c;
    float: none;
    height: auto;
    width: 90%;
    max-width: 710px;
    margin-right: auto;
    margin-left: auto;
    top: 10%;
    position: relative;
    color: #ffffff;
    max-height: 80%;
    overflow-y: auto;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
    -webkit-box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.50);
    -moz-box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.50);
    box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.50);
    z-index: 100;
}

.popup-container.max-width {
    width: 100%;
    max-width: 100%;
}

.popup-container.dark {
    background-color: transparent;
    -webkit-box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0);
    -moz-box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0);
    box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0);
}

.link {
    cursor: pointer;
    -webkit-transition: 0.2s;
    -ms-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
}

.landing-celeb {
    background-image: url(../img/index-bg.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

.landing-admin {
    background-image: url(../img/index-bg-bw.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

.logo {
    background-image: url(../img/Starcam-Desktop-Logo-2D-Small.webp);
    background-position: left center;
    background-size: contain;
    display: block;
    height: 80px;
    width: 100%;
    background-repeat: no-repeat;
    min-width: 120px;
}

.header-container.show-for-large-up .logo, .header-container.show-for-medium-up .logo {
    margin-top: -25px;
}

.logo.small {
    height: 47px;
    margin-top: -6px;
    cursor: pointer;
}

.popup-container .logo {
    margin-top: 0;
    height: 140px;
    background-image: url(../img/Starcam-Desktop-Logo-3D.webp);
    background-position: center center;
}

.logo.celeb-land {
    height: 160px;
    background-image: url(../img/Starcam-Desktop-Logo-3D.webp);
    background-position: center center;
}

.login-bg {
    max-width: 400px;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 50px;
}

.submit-btn {
    font-size: 18px;
    color: #FFFFFF;
    background-color: #333333;
    cursor: pointer;
    border: none;
    vertical-align: middle;
    height: 47px;
    min-width: 200px;
    max-width: 500px;
    -webkit-transition: 0.1s;
    -ms-transition: 0.1s;
    -moz-transition: 0.1s;
    transition: 0.1s;
    padding-right: 20px;
    padding-left: 20px;
    line-height: 45px;
    text-align: center;
    font-weight: 400;
    white-space: nowrap;
}

.submit-btn.next-question,.submit-btn.next-sponsor {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #e7c028;
}
.next-question.again{
    background-color: #e7c028;
}
.submit-btn.next-sponsor{
    padding: 0px;
}
.next-sponsor{
    cursor: default;
}
.submit-btn.next-sponsor:hover {
    background-color: transparent;
    color: #FFFFFF;
}.submit-btn.next-sponsor .next-sponsor-btn .text:hover {
     background-color: #e7c028;
     color: #FFFFFF;
}
.next-sponsor-btn{
   /* display: flex;
    justify-content: center;*/
    position: relative;
}
.next-sponsor-btn span{
    cursor: pointer;
}
.next-sponsor-btn .ad-ico{
    background-image: none;
    right: -50px;
    position: absolute;
    height: 40px;
    width: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.pip-ico{
    background-image: none;
    left: -50px;
    position: absolute;
    height: 40px;
    width: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.pip-ico.contract{
    background-image: url(../img/pip_contract.png);
}
.pip-ico.expand{
    background-image: url(../img/pip_expand.png);
}
.next-sponsor-btn.play .ad-ico{
    background-image: url(../img/continue_media_button.png);
}
.next-sponsor-btn.pause .ad-ico{
    background-image: url(../img/pause_media_button.png);
}
.next-sponsor-btn.play .ad-ico:hover{
    background-image: url(../img/continue_media_button_gold.png);
}
.next-sponsor-btn.pause .ad-ico:hover{
    background-image: url(../img/pause_media_button_gold.png);
}
.submit-btn.next-question.approval {
    min-width: 90px;
    width: 90px;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    border: none;
}

.submit-btn.next-question.approval.lines {
    line-height: 15px;
    padding-top: 7px;
}

.submit-btn.next-question.approve-feature-btn {
    background-color: #685d31;
}

.submit-btn.next-question.approve-btn {
    background-color: #3d511e;
}

.submit-btn.next-question.disapprove-btn {
    background-color: #5d2626;
}

.submit-btn.next-question.mute-btn {
    background-color: #9c1111;
}

.submit-btn.next-question.approve-feature-btn:hover {
    background-color: #e7c028;
}

.submit-btn.next-question.approve-btn:hover {
    background-color: #5c8e0e;
}

.submit-btn.next-question.disapprove-btn:hover {
    background-color: #951818;
}

.submit-btn.next-question.mute-btn:hover {
    background-color: #e11111;
}

.submit-btn.same-input-txt {
    height: 50px;
    min-width: 100px;
    max-width: 100px;
}

.submit-btn.yellow {
    background-color: #e7c028;
}

.submit-btn.red {
    background-color: #822c2c;
}

.submit-btn.red-light {
    background-color: #9c1111;
}

.submit-btn.white {
    background-color: #ffffff;
    color: #2c2c2c;
}

.submit-btn.border-dark {
    border: 1px solid #2c2c2c;
}

.submit-btn.request-btn {
    background-image: url(../img/SC-request-event-dark.webp);
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 50px;
}

.submit-btn.requested-btn {
    background-image: url(../img/SC-request-event-active.webp);
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 50px;
}

.submit-btn.transparent-white {
    background: rgba(255, 255, 255, 0.2);
}

.submit-btn.small {
    min-width: 150px;
    max-width: 150px;
}

.submit-btn.small2 {
    min-width: 250px;
    max-width: 250px;
}

.submit-btn.small3 {
    min-width: auto;
    max-height: 35px;
    line-height: 35px;
    font-size: 14px;
    font-weight: 700;
}

.submit-btn.max-width {
    min-width: 100%;
    max-width: 100%;
}

.submit-btn.disabled, .submit-btn.disabled:hover, .submit-btn.disabled:active, .submit-btn.yellow.disabled:hover {
    color: #cacaca;
    background-color: #ececec;
    cursor: default;
}

.admin-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
}

.admin-bottom-nav .pattern-line {
    margin: 0;
}

.admin-bottom-nav-bar {
    background-color: #2c2c2c;
    padding: 15px 40px;
}

.admin-bottom-nav .row {
    max-width: 1600px;
}

.index-footer, .footer-container {
    background-color: #ffffff;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding-bottom: 20px;
}

/* Admin pages: footer scrolls with content, not stuck to bottom */
.admin-bottom-nav ~ .index-footer {
    position: relative;
    left: auto;
    bottom: auto;
    padding-bottom: 80px; /* space for fixed bottom nav */
}

.pattern-line {
    background-image: url(../img/pattern-line.webp);
    background-repeat: repeat-x;
    background-position: center center;
    height: 6px;
    width: 100%;
}

.social-btn {
    height: 27px;
    width: 44px;
    margin-right: 6px;
    margin-left: 6px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    cursor: pointer;
}

.social-btn.facebook {
    background-image: url(../img/Starchat-Desktop-SocialFb.webp);
}

.social-btn.twitter {
    background-image: url(../img/Starchat-Desktop-SocialTw.webp);
}

.social-btn.gplus {
    background-image: url(../img/Starchat-Desktop-SocialGPlus.webp);
}

.social-btn.insta {
    background-image: url(../img/Starchat-Desktop-SocialInsta.webp);
}

.index-block {
    display: inline-block;
    border: 1px solid #303030;
    margin-right: 15px;
    margin-left: 15px;
    max-width: 270px;
    margin-top: 15px;
    padding: 15px 15px 30px;
}

.index-block .icon {
    background-image: url(../img/indexBlock-accInfo.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    height: 100px;
    display: block;
    margin-top: 10px;
}

.index-block .icon.first {
    background-image: url(../img/indexBlock-accInfo.webp);
}

.index-block .icon.second {
    background-image: url(../img/indexBlock-taxPayer.webp);
}

.index-block .icon.third {
    background-image: url(../img/indexBlock-confirmIdentity.webp);
}

.index-block .icon.fourth {
    background-image: url(../img/indexBlock-bankInfo.webp);
}

.acc-info-icon {
    background-image: url(../img/indexBlock-accInfo.webp);
    display: block;
    height: 107px;
    width: 107px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.contact-details-icon {
    background-image: url(../img/indexBlock-confirmIdentity.webp);
    display: block;
    height: 107px;
    width: 107px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.confirmation-icon {
    background-image: url(../img/indexBlock-finalConfirmation.webp);
    display: block;
    height: 107px;
    width: 107px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.admin-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.admin-header-spacer {
    height: 106px; /* header 100px + pattern-line 6px */
}

.header-container {
    background-color: #2c2c2c;
    color: #FFFFFF;
    height: 100px;
    padding-top: 27px;
    padding-left: 40px;
    padding-right: 7px;
}

.header-info-container {
    background-color: #2c2c2c;
    color: #FFFFFF;
    padding-top: 10px;
}

.header-info-content {
    padding-left: 50px;
    padding-right: 50px;
    background-color: #e95454;
    color: #FFFFFF;
    padding-top: 5px;
    border-radius: 20px;
}

.all-container .header-container .row {
    max-width: 1600px;
}

.header-container .hamburger-btn {
    background-image: url(../img/header-hamburger-white.webp);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    float: right;
    width: 25px;
    height: 45px;
    cursor: pointer;
    position: relative;
}

.header-container .hamburger-content {
    position: absolute;
    background-color: #2c2c2c;
    border: 1px solid #b5b5b5;
    right: 30px;
    top: -15px;
    z-index: 5;
    width: 80vw;
    display: none;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 7px;
}

.header-container .hamburger-content.active {
    display: block;
}

.header-container .hamburger-content .btn {
    width: 100%;
    text-align: left;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #606060;
    color: #ffffff;
    padding: 25px;
    font-size: 14px;
}

.header-container .hamburger-content .btn.first {
    border: none;
}

.taxpayer-icon {
    background-image: url(../img/indexBlock-taxPayer2.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    height: 120px;
    width: 120px;
    display: block;
}

.identity-icon {
    background-image: url(../img/indexBlock-confirmIdentity2.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    height: 120px;
    width: 120px;
    display: block;
}

.header-btn {
    padding-right: 15px;
    padding-left: 15px;
    line-height: 40px;
    display: inline-block;
    color: #FFFFFF;
    font-weight: 400;
    border: 3px solid #2c2c2c;
    background-color: #2c2c2c;
}

.header-btn.active {
    color: #e7c028;
    border: 3px solid #e7c028;
}

.page-container {
    padding-right: 20px;
    padding-left: 20px;
}

.page-container.noPadding {
    padding-right: 0;
    padding-left: 0;
}

.notifications-number {
    background-color: #e7c028;
    border-radius: 100%;
    height: 32px;
    width: 32px;
    display: inline-block;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    margin-left: 6px;
    font-weight: 700;
}

.logout-ico {
    background-image: url(../img/SC-Ico-LogOut.webp);
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    height: 36px;
    width: 36px;
    margin-top: -2px;
}

.header-btn.logout {
    background-image: url(../img/SC-Ico-LogOut.webp);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 24px;
    margin-left: 10px;
}

.header-btn.logout:hover {
    background-image: url(../img/SC-Ico-LogOut-Over.webp);
}

.account-btn {
    border-radius: 25px;
    line-height: 50px;
    color: #2c2c2c;
    background-repeat: no-repeat;
    background-position: left center;
    height: 50px;
    padding-left: 55px;
    background-color: #FFFFFF;
    cursor: pointer;
    padding-right: 15px;
    display: inline-block;
    margin-left: 10px;
}

.account-btn.share {
    background-image: url(../img/SC-RoundIco-Share.webp);
}

.account-btn.right {
    background-position: right center;
    padding-left: 15px;
    padding-right: 55px;
    margin-left: 0;
}

.account-btn.schedule {
    background-image: url(../img/SC-RoundIco-ScheduleEvent.webp);
}

.account-btn.starchat {
    background-image: url(../img/SC-small-white-star.webp);
    background-color: #e7c028;
    color: #FFFFFF;
    padding-left: 45px;
    background-position: 12px;
}

.promo-bg {
    background-image: url(../img/SC-PromoBg.webp);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 70%;
    padding-left: 55px;
}

.left-menu-btn {
    width: 100%;
    line-height: 40px;
    cursor: pointer;
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid #ffffff;
}

.left-menu-btn.active {
    border: 1px solid #e7c028;
    color: #e7c028;
}

.left-menu-filter {
    cursor: pointer;
    margin-bottom: 5px;
}

.left-menu-filter.active {
    color: #e7c028;
}

.promo-pic-video {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.promo-qrcode-video {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border: #333333 solid;
}

.promo-qrcode-video img {
    height: 400px;
    max-width: 400px;
}

.promo-dot {
    background-image: url(../img/SC-sliderBtn-off.webp);
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    height: 12px;
    width: 12px;
    margin-right: 5px;
    margin-left: 5px;
    cursor: pointer;
}

.promo-dot.active {
    background-image: url(../img/SC-sliderBtn-on.webp);
}

.promo-dot.active2 {
    background-image: url(../img/SC-sliderBtnWhite-on.webp);
}

.account-left-ico {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 50px;
    height: 50px;
}

.account-left-ico.yellow-event {
    background-image: url(../img/SC-RoundIco-YellowEvent.webp);
}

.account-left-ico.grey-event {
    background-image: url(../img/SC-RoundIco-GreyEvent.webp);
}

.account-left-ico.locked-out {
    background-image: url(../img/SC-RoundIco-LockedOut.webp);
}

.account-left-ico.trans-available {
    background-image: url(../img/SC-RoundIco-TransactionAvailable.webp);
}

.account-left-ico.projects {
    background-image: url(../img/SC-RoundIco-Cause.webp);
}

.account-left-ico.event-request {
    background-image: url(../img/SC-RoundIco-EventRequest.webp);
}

.account-left-ico.question-mark {
    background-image: url(../img/SC-RoundIco-QuestionMarkBlue.webp);
}

.account-left-ico.crown {
    background-image: url(../img/SC-RoundIco-Crown.webp);
}

.account-left-ico.user {
    background-image: url(../img/SC-RoundIco-User.webp);
}

.account-left-ico.bank {
    background-image: url(../img/indexBlock-bankInfo.webp);
}

.account-left-ico.share {
    background-image: url(../img/SC-RoundIco-Share-Over.webp);
}

.actual-page {
    padding-left: 40px;
}

.notif-line {
    padding-top: 20px;
    padding-bottom: 20px;
}

.nav-tabs-container {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCCCCC;
    height: 62px;
}

.nav-tabs-container .tab {
    line-height: 60px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    padding-right: 30px;
    padding-left: 30px;
    cursor: pointer;
    background-color: #FFFFFF;
    color: #7c7c7c;
    font-weight: 300;
}

.nav-tabs-container .tab.active, .nav-tabs-container .tab.active:hover {
    line-height: 61px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-left-color: #CCCCCC;
    color: #000000;
    font-weight: 400;
}

.phone-verified {
    background-image: url(../img/phone-verified.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 25px;
    width: 80px;
    display: inline-block;
}

.phone-verified.not {
    background-image: url(../img/phone-not-verified.webp);
}

.phone-verified.h15 {
    height: 15px;
    border-radius: 5px;
    margin-left: 5px;
}

.close-btn-dark {
    background-image: url(../img/close-btn-dark.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    height: 16px;
    width: 16px;
    cursor: pointer;
}

.background-dark {
    background-color: rgb(0, 0, 0, 0.5);
}

.close-btn-white {
    background-image: url(../img/close-btn-white.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    height: 22px;
    width: 22px;
    cursor: pointer;
}

.close-btn-dark:hover, .close-btn-white:hover, .link:hover .close-btn-dark {
    background-image: url(../img/close-btn-dark_over.webp);
}

.photos-patern {
    background-image: url(../img/patern_03.webp);
    background-repeat: repeat;
}

.info-btn {
    background-image: url(../img/SC-info-btn.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 50px;
    width: 50px;
    cursor: pointer;
}

.info-btn.photos-page {
    position: absolute;
    top: 30px;
    right: 40px;
}

.info-btn:hover {
    background-image: url(../img/SC-info-btn-over.webp);
}

.photos-container {
    max-width: 780px;
    padding-bottom: 100px;
}

.photo-big {
    height: 510px;
    width: 510px;
    float: left;
    margin: 5px;
    position: relative;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-big img {
    background-color: #CCCCCC;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    vertical-align: middle;
    height: 100%;
    width: 100%;
}

.portrait {
    height: 100%;
    width: auto;
}

.lanscape {
    height: auto;
    width: 100%;
}

.hover-effect {
    background-color: #000000;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transition: 0.2s;
    -ms-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
    cursor: pointer;
}

.photo-big:hover .hover-effect, .photo-small:hover .hover-effect {
    opacity: 0.4;
}

.photo-small {
    height: 250px;
    width: 250px;
    float: left;
    margin: 5px;
    position: relative;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-small-qrcode {
    height: 250px;
    width: 250px;
    float: left;
    position: relative;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-small img {
    background-color: #CCCCCC;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    max-height: 250px;
    max-width: 250px;
}

.delete-photo-btn {
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.75);
    background-image: url(../img/SC-bin-btn.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 40px;
    width: 40px;
    position: absolute;
    top: 7px;
    right: 7px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
}

.delete-photo-btn:hover {
    background-image: url(../img/SC-bin-btn-over.webp);
}

.delete-photo-btn:active {
    background-color: rgba(0, 0, 0, 0.95);
}

.featured-photo {
    /*background-color: #FFFFFF;*/
    background-color: rgba(255, 255, 255, 0.95);
    position: absolute;
    right: 7px;
    bottom: 7px;
    font-size: 12px;
    line-height: 25px;
    padding-right: 10px;
    padding-left: 10px;
    font-weight: 700;
    color: #222222;
}

.label-sold-out {
    background-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.95);
    position: absolute;
    right: 7px;
    top: 7px;
    font-size: 12px;
    line-height: 25px;
    padding-right: 10px;
    padding-left: 10px;
    font-weight: 700;
}

.popup-picture-container {
    background-color: #000000;
    width: 100%;
    position: relative;
}

.popup-picture-container img {
    float: none;
    margin-right: auto;
    margin-left: auto;
    display: block;
    background-size: contain;
    max-height: 750px;
    cursor: zoom-in;
}

.popup-cover.view-photo .popup-container {
    max-width: 1280px;
}

.popup-close-inside {
    position: absolute;
    right: 0;
    z-index: 100;
    margin-top: 15px;
}

.popup-close-inside-subscriber {
    position: absolute;
    z-index: 100;
    margin-top: 40px;
    margin-left: -70px;
}

.left-arrow {
    background-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.0);
    height: 100%;
    width: 20%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    background-image: url(../img/SC-left-arrow-white.webp);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: 0.2s;
    -ms-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
}

.left-arrow:hover {
    background-color: rgba(255, 255, 255, 0.1);
    background-position: 40% center;
}

.right-arrow {
    background-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.0);
    height: 100%;
    width: 20%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    background-image: url(../img/SC-right-arrow-white.webp);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: 0.2s;
    -ms-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
}

.right-arrow:hover {
    background-color: rgba(255, 255, 255, 0.1);
    background-position: 60% center;
}

.popup-cover.view-photo .delete-photo-btn {
    margin-top: -50px;
    position: static;
}

.pages-btn {
    line-height: 34px;
    padding-top: 24px;
    padding-bottom: 8px;
}

.pages-btn .number {
    cursor: pointer;
    margin-right: 3px;
    margin-left: 3px;
    padding-right: 8px;
    padding-left: 8px;
    display: inline-block;
}

.pages-btn .number.active, .pages-btn .number.active:hover {
    background-color: #2c2c2c;
    color: #ffffff;
}

.page-btn-left {
    background-image: url(../img/SC-Pages-arrow-Left.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 34px;
    width: 30px;
    cursor: pointer;
}

.page-btn-left:hover {
    background-image: url(../img/SC-Pages-arrow-Left-Over.webp);
}

.page-btn-right {
    background-image: url(../img/SC-Pages-arrow-Right.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 34px;
    width: 30px;
    cursor: pointer;
}

.page-btn-right:hover {
    background-image: url(../img/SC-Pages-arrow-Right-Over.webp);
}

.event-label {
    font-size: 12px;
    line-height: 25px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 4px;
    background-color: #e7c028;
    display: inline-block;
    font-weight: 700;
    color: #FFFFFF;
}

.event-label.draft {
    background-color: #e84b4b;
    background-image: url(../img/SC-Gear-Icon.webp);
    background-position: 7px 5px;
    padding-left: 28px;
    background-repeat: no-repeat;
}

.event-end {
    background-image: url(../img/SC-Ico-Stop-over.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 25px;
    height: 25px;
    width: 25px;
    cursor: pointer;
    display: inline-block;
}

.event-share {
    background-image: url(../img/SC-RoundIco-Share.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 25px;
    height: 25px;
    width: 25px;
    cursor: pointer;
    display: inline-block;
}

.event-share.white {
    background-image: url(../img/SC-RoundIco-Share-light.webp);
}

.event-share:hover {
    background-image: url(../img/SC-RoundIco-Share-Over.webp);
}

.share-btn-header {
    cursor: pointer;
    display: inline-block;
    margin-top: -10px;
}

.share-btn-header.end {
    margin-top: 10px;
}

.share-btn-header:hover .event-share.white {
    background-image: url(../img/SC-RoundIco-Share-Over.webp);
}

.share-btn-header:hover .event-end {
    background-image: url(../img/SC-Ico-Stop_white.webp);
}

.units-icon {
    background-image: url(../img/SC-Units-Icon-Yellow.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 40px;
    height: 20px;
    display: inline-block;
}

.event-questions-answered-ico {
    background-image: url(../img/SC-Question-Mark.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 30%;
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: #1f9ceb;
    border-radius: 100%;
}

.video-stream-container img {
    width: 100%;
    max-width: 800px;
}

.horiz-line {
    background-color: #464646;
    height: 1px;
    width: 10%;
    display: inline-block;
    margin-top: 5px;
}

.horiz-line2 {
    background-color: #464646;
    height: 1px;
    width: 64px;
    display: inline-block;
    margin-top: -30px;
}

.horiz-line3 {
    background-color: #464646;
    height: 1px;
    width: 20px;
    display: inline-block;
    margin-top: -30px;
}

.stream-container {
    background-image: url(../img/stream-bg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding-bottom: 20px;
}

.settings-ico {
    background-image: url(../img/SC-Ico-Settings-White.webp);
    background-repeat: no-repeat;
    background-position: center center;
    width: 22px;
    height: 22px;
    margin: 9px auto auto;
    cursor: pointer;
}

.event-end-ico {
    background-image: url(../img/SC-Ico-Stop-over.webp);
    background-repeat: no-repeat;
    background-position: center center;
    width: 15px;
    height: 15px;
    margin: 12px 3px auto;
    cursor: pointer;
}

.qq-ico {
    background-image: url(../img/SC-Ico-Questions.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 50px;
    width: 50px;
    display: block;
}

.est-time-ico {
    background-image: url(../img/SC-Ico-Time-Dark.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 50px;
    width: 50px;
    display: block;
}

.rem-time-ico {
    background-image: url(../img/SC-Ico-Time-Blue.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 5vw;
    height: 5vw;
    max-height: 40px;
    max-width: 40px;
    display: block;
}

.rem-time-ico.orange {
    background-image: url(../img/SC-Ico-Time-Red.png);
}

.rem-time-ico.yellow {
    background-image: url(../img/SC-Ico-Time-Yellow2.webp);
}

.rem-time-ico.green {
    background-image: url(../img/SC-Ico-Time-Green.webp);
}

.stop-q-ico {
    background-image: url(../img/SC-Ico-Stop.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 50px;
    width: 50px;
    display: block;
}
.disabled .stop-q-btn{
    cursor: not-allowed;
    opacity: 0.5;
}
.stop-q-btn {
    cursor: pointer;
}

.stop-q-btn.open {
    color: #db4040;
}

.stop-q-btn.open .stop-q-ico {
    background-image: url(../img/SC-Ico-Round-Loked.webp);
}

.row.max-width900, .max-width900 {
    max-width: 900px;
}

.row.max-width1200, .max-width1200 {
    max-width: 1200px;
}

.row.max-width1400, .max-width1400 {
    max-width: 1400px;
}

.row.max-width50, .max-width50 {
    max-width: 50px;
}

.row.max-width550, .max-width550 {
    max-width: 550px;
}

.row.max-width, .max-width {
    max-width: 100%;
}

.max-width150 {
    max-width: 150px;
}

.max-width250 {
    max-width: 250px;
}

.max-width350 {
    max-width: 350px;
}

.max-width850 {
    max-width: 850px;
}

.min-width100 {
    width: 100px;
}
.min-width120 {
    width: 120px;
}
.min-width200 {
    min-width: 200px;
}

.min-width300 {
    min-width: 300px;
}

.min-width400 {
    min-width: 400px;
}

.min-width500 {
    min-width: 500px;
}

.min-width600 {
    min-width: 600px;
}

.elipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row.max-height550, .max-height550 {
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
}

.delete-question-btn {
    background-image: url(../img/SC-Ico-Bin-Dark.webp);
    background-repeat: no-repeat;
    background-position: center right;
    height: 50px;
    width: 30px;
    display: inline-block;
    cursor: pointer;
}

.delete-question-btn:hover {
    background-image: url(../img/SC-Ico-Bin-Dark-over.webp);
}

.delete-question-btn.white {
    background-image: url(../img/SC-Ico-Bin-Dark-over.webp);
}

.event-attendees {
    background-image: url(../img/SC-Ico-Attendees.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 5vw;
    height: 5vw;
    max-height: 40px;
    max-width: 40px;
    display: inline-block;
}

.event-earnings {
    background-image: url(../img/SC-Ico-Earnings.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 5vw;
    height: 5vw;
    max-height: 40px;
    max-width: 40px;
    display: inline-block;
}

.event-remaining {
    background-image: url(../img/SC-Ico-Time-Yellow.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 5vw;
    height: 5vw;
    max-height: 40px;
    max-width: 40px;
    display: inline-block;
}

.remaining-time-container {
    border: 2px solid #e7c028;
    height: auto;
    border-radius: 40px;
    display: inline-block;
    margin-top: -10px;
}

.plus-minutes {
    background-color: #e7c028;
    background-image: url(../img/SC-Ico-Plus-White.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 40px;
    width: 40px;
    display: inline-block;
    cursor: pointer;
}

.plus-minutes.blue {
    background-color: #1f9ceb;
}

.plus-minutes.green {
    background-color: #bbcb36;
}

.plus-minutes.yellow {
    background-color: #e7c028;
}

.plus-minutes.orange {
    background-color: #eb6c1f;
}

.remaining-time-container.blue {
    border: 2px solid #1f9ceb;
}

.remaining-time-container.green {
    border: 2px solid #bbcb36;
}

.remaining-time-container.yellow {
    border: 2px solid #e7c028;
}

.remaining-time-container.orange {
    /*border: 2px solid #eb6c1f;*/
    border: 2px solid #ED1C24;
    cursor: pointer;
}

.ddown-arrow {
    background-image: url(../img/SC-arrow-Down-Yellow.webp);
    background-repeat: no-repeat;
    background-position: center 10px;
    display: inline-block;
    height: 20px;
    width: 18px;
    cursor: pointer;
    padding: 20px;
    border-radius: 5px;
}

.ddown-container {
    position: absolute;
    background-color: #707070;
    width: 105px;
    display: none;
    border-radius: 5px;
    right: 20px;
    top: 30px;
    z-index: 3;
    overflow: hidden;
}

.ddown-container .time-extend {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}
.ddown-container-account{
    position: absolute;
    background-color: #EBEBEB;
    width: 180px;
    display: none;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    right:17px;
    z-index: 3;
    overflow: hidden;
}
.pop-more-info:hover .ddown-container-account {
    height: auto;
    display: block;
}
.pop-more-info:hover img.more-info{
    width: 180px;
    padding-left: 160px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.account-more{
    cursor: pointer;
}
.account-more:hover{
    color: white;
    background-color: #1F9DE9;
}
.account-more.disable {
    background-color: gray;
    color: white;
    cursor: not-allowed;
}
.ask-text-btn {
    background-color: #FFFFFF;
    background-image: url(../img/SC-text_icon.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 60px;
    width: 60px;
    border-radius: 60px;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
}

.ask-video-btn {
    background-color: #FFFFFF;
    background-image: url(../img/SC-video_icon.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 60px;
    width: 60px;
    border-radius: 60px;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
}

.ask-text-btn.disabled, .ask-text-btn.disabled:hover {
    cursor: default;
    background-color: #FFFFFF;
}

.ask-video-btn.disabled, .ask-video-btn.disabled:hover {
    cursor: default;
    background-color: #FFFFFF;
}

.units-ico-white {
    background-image: url(../img/SC-units-icon.webp);
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    height: 24px;
    width: 34px;
}

.chat-bubble-bg {
    background-image: url(../img/SC-chat-bubble-bg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    min-height: 200px;
}

.open-in-popup-btn {
    background-image: url(../img/SC-popup-btn.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 20px;
    width: 20px;
    display: inline-block;
    cursor: pointer;
}

.ask-question-field textarea {
    height: 230px;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
    padding: 15px 15px 25px;
}

.input-txt.pledge {
    background-color: transparent;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #6b6b6b;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    background-image: url(../img/SC-Units-Icon-Yellow.webp);
    background-repeat: no-repeat;
    background-position: 25px center;
    padding-left: 70px;
    max-width: 200px;
    font-size: 28px;
}

.event-buy-btn {
    background: rgba(231, 192, 40, 0.2);
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    color: #e7c028;
}

.event-buy-btn:hover {
    background: rgba(231, 192, 40, 0.4);
}

.bg-transparent-white {
    background: rgba(255, 255, 255, 0.2);
}

.bg-dark-grey {
    background-color: #2c2c2c;
}

.record-video-btn {
    background-color: #FFFFFF;
    background-image: url(../img/SC-REC-btn.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    cursor: pointer;
}

.record-video-btn.stop {
    background-image: url(../img/SC-STOP-btn.webp);
}

.rec-video-bar {
    background: rgba(224, 74, 74, 0.3);
    height: 10px;
    width: 100%;
    display: block;
}

.rec-time-passed {
    background-color: #e04a4a;
    height: 10px;
    display: block;
}

.play-video-cover {
    background: rgba(0, 0, 0, 0.65);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.play-video-cover:hover {
    background: rgba(0, 0, 0, 0.45);
}

.play-video-btn {
    background-image: url(../img/SC-play-btn.webp);
    background-repeat: no-repeat;
    background-position: center center;
    border: 2px solid #FFFFFF;
    height: 60px;
    width: 60px;
    border-radius: 30px;
    cursor: pointer;
}

.play-video-btn.recorded {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -30px;
    margin-left: -30px;
}

.stream-bar-preevent-time {
    background: rgba(0, 0, 0, 0.75);
    height: 70px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.edit-question-btn {
    background-image: url(../img/SC-Edit-icon.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 35px;
    width: 35px;
    cursor: pointer;
}

.edit-question-btn:hover {
    background-image: url(../img/SC-Edit-icon-over.webp);
}

.block-fan-btn {
    background-image: url(../img/block.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 35px;
    width: 35px;
    cursor: pointer;
}
.block-fan-btn.disabled,.block-fan-btn.disabled:hover{
    opacity: 0.5;
    background-image: url(../img/block.webp);
    cursor: not-allowed;
}
.block-fan-btn:hover {
    background-image: url(../img/block-over.webp);
}

.delete-question-btn {
    background-image: url(../img/SC-Ico-Bin-Dark.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 35px;
    width: 35px;
    cursor: pointer;
}
.delete-question-btn.disabled,.delete-question-btn.disabled:hover{
    opacity: 0.5;
    background-image: url(../img/SC-Ico-Bin-Dark.webp);
    cursor: not-allowed;
}

.delete-question-btn:hover {
    background-image: url(../img/SC-Ico-Bin-Dark-over2.webp);
}

.increase-pledge-btn {
    background-image: url(../img/SC-BigYellowPlus.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 60px;
    width: 60px;
    cursor: pointer;
    position: absolute;
    bottom: -30px;
    margin-left: -30px;
    left: 50%;
}

.increase-pledge-btn:hover {
    background-image: url(../img/SC-BigYellowPlus-over.webp);
}

.shadow-effect {
    box-shadow: 42px 0 0 -22px rgba(255, 255, 255, 0.25), -42px 0 0 -22px rgba(255, 255, 255, 0.25);
}

.left-arrow-white {
    background-image: url(../img/SC-Pages-arrow-Left-white.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 20px;
    width: 14px;
    cursor: pointer;
}

.left-arrow-white:hover {
    background-image: url(../img/SC-Pages-arrow-Left-Over.webp);
}

.right-arrow-white {
    background-image: url(../img/SC-Pages-arrow-Right-white.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 20px;
    width: 14px;
    cursor: pointer;
}

.right-arrow-white:hover {
    background-image: url(../img/SC-Pages-arrow-Right-Over.webp);
}

.my-questions-tab {
    padding-bottom: 10px;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
}

.my-questions-tab.active {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #e7c028;
    color: #e7c028;
}

.current-question-tab {
    padding-bottom: 10px;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
}

.current-question-tab.active {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #e7c028;
    color: #e7c028;
}

.video-question-thumb {
    background-image: url(../img/SC-videoThumb-icon.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 70px;
    width: 100px;
}

.ready-icon {
    background-image: url(../img/SC-Ready-Icon.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 13px;
    width: 13px;
    display: inline-block;
}

.submissions-locked {
    opacity: 0.3;
}

.submissions-locked-ico {
    background-image: url(../img/SC-redLock.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 40px;
    width: 40px;
    margin-left: -15px;
    margin-top: -5px;
    display: block;
    opacity: 0.8;
}

.submissions-locked-ico.v2 {
    margin-top: auto;
    margin-left: auto;
}

.submissions-locked-ico.blue {
    background-image: url(../img/SC-blueLock.webp);
    margin-top: auto;
    margin-left: auto;
}

.submissions-locked-ico.green {
    background-image: url(../img/SC-greenLock.webp);
    margin-top: auto;
    margin-left: auto;
}

.drag-drop-area {
    background-image: url(../img/SC-diagonal-pattern2.webp);
    background-repeat: repeat;
    margin-right: 5px;
    margin-left: 5px;
}

.date-input {
    background-image: url(../img/SC-Ddown-Calendar-Icon.webp);
    background-repeat: no-repeat;
    background-position: right center;
}

.time-input {
    background-image: url(../img/SC-Ddown-Time-Icon.webp);
    background-repeat: no-repeat;
    background-position: right center;
}

select:hover {
    cursor: pointer;
}

.input-units-left {
    background-image: url(../img/SC-Units-Icon-Yellow.webp);
    background-repeat: no-repeat;
    background-position: 10px center;
    text-indent: 45px;
}

.input-dollar-left {
    background-image: url(../img/SC-input-dollar-icon.webp);
    background-repeat: no-repeat;
    background-position: 10px center;
    text-indent: 30px;
}

.input-camera-left {
    background-image: url(../img/ico_select_camera.png);
    background-repeat: no-repeat;
    background-position: 10px center;
    text-indent: 45px;
    background-size: auto 25px;
}

.invite-info,.copy-link,.link-text{
    width: 100%;
    font-size: 18px;
    font-family: 'Lato', sans-serif;
    max-width: 500px;
    margin: 60px auto 20px auto;
    text-align: left;
}
.link-text{
    margin: auto;
    color: #BC951A;
    overflow: hidden;
}
.copy-link{
    background: #7fd049;
    margin: 20px auto;
    text-align: center;
    height: 47px;
    line-height: 45px;
    cursor: pointer;
}
.copy-link:hover{
    background: #65B62F;
}
.invite-info img{
    width: 40px;
    height: auto;
}
.invite-info span{
    padding-left: 15px;
}
.input-mic-left {
    background-image: url(../img/ico_select_microphone.png);
    background-repeat: no-repeat;
    background-position: 15px center;
    text-indent: 45px;
    background-size: auto 30px;
}
.input-speakers-left{
    background-image: url(../img/ico_select_speakers.png);
    background-repeat: no-repeat;
    background-position: 12px center;
    text-indent: 45px;
    background-size: auto 28px;
}
.ico_select_media{
    height: 100%;
    padding-top:8px;
    color: #2c2c2c;
    font-size: 18px;
    text-align: left;
   /* background-image: url(../img/ico_select_media.png);
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: auto 30px;*/
    text-indent: 45px;
    cursor: pointer;
}

.left-arrow-dark {
    background-image: url(../img/SC-Pages-arrow-Left.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    height: 15px;
    width: 15px;
    cursor: pointer;
    display: inline-block;
    margin-top: -3px;
}

.link-with-icon:hover .left-arrow-dark {
    background-image: url(../img/SC-Pages-arrow-Left-Over.webp);
}

.transaction-line-container {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #dbdbdb;
}

.plus-expand {
    background-image: url(../img/SC-plus-dark-big.webp);
    background-repeat: no-repeat;
    background-position: right center;
    width: 50px;
    height: 20px;
    display: inline-block;
    cursor: pointer;
}

.plus-expand:hover {
    background-image: url(../img/SC-plus-dark-big-OVER.webp);
}

.plus-expand.active {
    background-image: url(../img/SC-minus-dark-big.webp);
}

.plus-expand.active:hover {
    background-image: url(../img/SC-minus-dark-big-OVER.webp);
}

.plus-expand.disabled {
    background-image: url(../img/SC-plus-dark-big.webp);
    opacity: 0.1;
    cursor: default;
}

.transactions-details-container {
    background-color: #f7f7f7;
    padding: 20px;
    margin-top: 20px;
}

.lil-logo-star {
    background-image: url(../img/SC-StarOnly-logo.webp);
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
    display: inline-block;
    background-position: center center;
}

.lil-share-btn {
    background-image: url(../img/SC-Share-btn-Dark.webp);
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
    display: inline-block;
    background-position: center center;
    cursor: pointer;
}

.lil-share-btn:hover {
    background-image: url(../img/SC-Share-btn-Yellow.webp);
}

.share-btn {
    background-image: url(../img/SC-Share-btn-White.webp);
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    display: inline-block;
    background-position: center center;
    cursor: pointer;
    background-size: contain;
}

.share-btn.dark {
    background-image: url(../img/SC-Share-btn-Dark2.webp);
}

.share-btn:hover {
    background-image: url(../img/SC-Share-btn-Yellow2.webp);
}

.search-glass-btn {
    background-image: url(../img/SC-Search-btn-White.webp);
    background-position: center center;
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    width: 30px;
}

.search-glass-btn:hover {
    background-image: url(../img/SC-Search-btn-Yellow.webp);
}

.search-glass-btn.dark {
    background-image: url(../img/SC-Search-btn-Dark.webp);
}

.down-arrow {
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: inline-block;
    background-image: url(../img/SC-arrow-Down-White.webp);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: 0.2s;
    -ms-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
}

.down-arrow:hover {
    background-image: url(../img/SC-arrow-Down-Yellow.webp);
}

.username-header:hover .event-attendees {
    background-image: url(../img/SC-Ico-Attendees-Yellow.webp);
}

.username-header {
    background-color: #2c2c2c;
}

.vip-icon {
    background-image: url(../img/vip-event-icon.webp);
    background-repeat: no-repeat;
    height: 18px;
    width: 70px;
    display: inline-block;
    border-radius: 3px;
}

.fav-icon {
    background-image: url(../img/SC-StarOnly-logo-grey.webp);
    background-repeat: no-repeat;
    height: 25px;
    width: 25px;
    display: inline-block;
    cursor: pointer;
    background-size: contain;
}

.fav-icon:hover {
    background-image: url(../img/SC-StarOnly-logo.webp);
}

.fav-icon.yellow {
    background-image: url(../img/SC-StarOnly-logo.webp);
}

.request-event {
    background-image: url(../img/SC-request-event.webp);
    background-repeat: no-repeat;
    height: 35px;
    width: 36px;
    display: inline-block;
    cursor: pointer;
}

.request-event.dark {
    background-image: url(../img/SC-request-event-dark.webp);
}

.request-event:hover {
    background-image: url(../img/SC-request-event-over.webp);
}

.request-event.active {
    background-image: url(../img/SC-request-event-active.webp);
}

.google-play-icon {
    background-image: url(../img/SC-GooglePlay-ico.webp);
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    height: 43px;
    width: 46px;
}

.apple-icon {
    background-image: url(../img/SC-Apple-ico.webp);
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    height: 43px;
    width: 46px;
}

.events-menu {
    background-color: #FFFFFF;
    z-index: 4;
    position: absolute;
    left: -225px;
    right: 0;
    display: none;
    top: 43px;
    -webkit-box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.50);
    box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.50);
}

.row.events-menu {
    width: 300%;
    max-width: 1366px;
    background-color: #f2f2f2;
}

.header-btn.events-btn {
    padding-right: 0;
    padding-left: 0;
}

.header-btn.events-btn:hover {
    background-color: #f2f2f2;
    color: #2c2c2c;
}

.header-btn.events-btn .events-btn-txt {
    padding-right: 15px;
    padding-left: 15px;
}

.header-btn.events-btn:hover .events-btn-txt {
    color: #2c2c2c;
}

.header-btn.events-btn:hover .events-menu {
    display: block;
}

.events-menu .pic-block.small .front-info {
    color: #FFFFFF;
    line-height: 20px;
}

.events-menu .pic-block.small .front-info .name {
    margin-left: 15px;
}

.events-menu .pic-block.small .pic .front-info .info {
    margin-left: 15px;
    margin-top: 15px;
    margin-right: 10px;
}

.events-menu .cover {
    background: rgba(0, 0, 0, 0.8);
}


.search-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    transition: all 0.3s ease-in-out;
    left: 85%;
    z-index: 3;
}

.search-wrapper.active {
    left: 55%;
    right: inherit;
}

.search-wrapper .input-holder {
    height: 70px;
    width: 70px;
    background-color: #2c2c2c;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.search-wrapper.active .input-holder {
    width: 600px;
    background: rgba(255, 255, 255, 1);
    transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}

.search-wrapper .input-holder .search-input {
    width: 100%;
    height: 50px;
    padding: 0 70px 0 20px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    box-sizing: border-box;
    border: none;
    outline: none;
    font-family: "Open Sans", Arial, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    transform: translate(0, 60px);
    transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition-delay: 0.3s;
}

.search-wrapper.active .input-holder .search-input {
    opacity: 1;
    transform: translate(0, 10px);
}

.search-wrapper .input-holder .search-icon {
    width: 70px;
    height: 70px;
    border: none;
    background: #2c2c2c;
    padding: 0;
    outline: none;
    position: relative;
    z-index: 2;
    float: right;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.search-wrapper.active .input-holder .search-icon {
    width: 50px;
    height: 50px;
    margin: 10px 50px 10px 10px;
    background-color: #FFFFFF;
}

.search-wrapper .input-holder .search-icon span {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
    background-image: url(../img/SC-Search-btn-White.webp);
    background-repeat: no-repeat;
}

.search-wrapper .input-holder .search-icon:hover span, .search-wrapper.active .input-holder .search-icon:hover span {
    background-image: url(../img/SC-Search-btn-Yellow.webp);
}

.search-wrapper.active .input-holder .search-icon span {
    background-image: url(../img/SC-Search-btn-Dark.webp);
}

.search-wrapper .close {
    position: absolute;
    z-index: 1;
    top: 9px;
    right: 10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    text-align: center;
    vertical-align: middle;
    background-position: center center;
    background-image: url(../img/close-btn-dark.webp);
    background-repeat: no-repeat;
    opacity: 0;

}

.search-wrapper.active .close {
    transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    z-index: 2;
    transition-delay: 0.4s;
    opacity: 1;
}

.search-wrapper .close:hover, .search-wrapper.active .close:hover {
    background-image: url(../img/close-btn-dark_over.webp);
}

.search-content {
    background-color: #FFFFFF;
    position: absolute;
    right: 0;
    left: 0;
    top: 70px;
    display: none;
    padding: 10px;
    -webkit-box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.50);
    box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.50);
}

.search-wrapper.active .search-content {
    display: block;
}

.picture-thumb-small {
    height: 95px;
    width: 95px;
    line-height: 90px;
    text-align: center;
    vertical-align: middle;
    background-color: #000000;
}

.picture-thumb-small img {
    vertical-align: middle;
}

.search-content .search-item {
    padding: 10px;
    cursor: pointer;
}

.search-content .search-item:hover {
    background-color: #eeeeee;
}

.down-arrow.header-ddown {
    height: 67px;
    width: 47px;
    margin-left: -10px;
    -webkit-transition: 0s;
    -ms-transition: 0s;
    -moz-transition: 0s;
    transition: 0s;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.down-arrow.header-ddown:hover {
    background-image: url(../img/SC-arrow-Down-Dark.webp);
    background-color: #f2f2f2;
}

.header-ddown-content {
    position: absolute;
    top: 67px;
    background-color: #f2f2f2;
    right: 0;
    min-width: 250px;
    z-index: 2;
    padding: 20px;
    cursor: default;
    display: none;
    -webkit-box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.50);
    box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.50);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #a7a7a7;
}

.header-ddown:hover .header-ddown-content {
    height: auto;
    display: block;
}

.fan-signup-tab {
    text-align: center;
    vertical-align: middle;
    padding-top: 13px;
    padding-bottom: 12px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFFFFF;
    min-width: 170px;
    float: left;
    cursor: pointer;
}

.fan-signup-tab:hover {
    background: rgba(255, 255, 255, 0.1);
}

.fan-signup-tab.active {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #FFFFFF;
    cursor: default;
    padding-top: 12px;
}

.thumb-container {
    width: 100%;
    max-width: 250px;
    display: inline-block;
    margin: 30px 5px 10px;
    vertical-align: top;
    text-align: left;
    overflow: hidden;
}

.thumb-container .pic, .presenter-events.pic {
    width: 100%;
    max-width: 250px;
    background-color: #000000;
    max-height: 250px;
    text-align: center;
    line-height: 245px;
    overflow: hidden;
}

.thumb-container .pic img, .presenter-events.pic img {
    vertical-align: middle;
}

.presenter-events.pic {
    background-color: transparent;
}

.event-detail-bg {
    background-image: url(../img/event-detail-bg.webp);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
}

.event-detail-bg-light {
    background-image: url(../img/event-detail-bg2.webp);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
}

.small-thumb-pic {
    width: 110px;
    height: 110px;
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    background-color: #000000;
    text-align: center;
    line-height: 103px;
    border: 1px solid #000000;
    overflow: hidden;
}

.small-thumb-pic img {
    vertical-align: middle;
}

.custom-checkbox {
    display: inline-block;
    background-color: #ffffff;
    outline: 1px solid #e7c028;
    outline-offset: 1px;
    height: 12px;
    width: 12px;
    margin-right: 10px;
    -webkit-transition: 0.2s;
    -ms-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
}

.custom-checkbox.active {
    background-color: #e7c028;
}

.selected-filters-container {
    display: none;
}

.row.buy-line {
    background-color: #000000;
    border: 1px solid #434343;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    margin-top: 10px;
    max-width: 500px;
    margin-bottom: 10px;
}

.buy-line .graph {
    background-color: #FFFFFF;
    height: 45px;
    width: 3px;
    margin-top: 5px;
    margin-left: 10px;
}

.buy-line .units-txt {
    margin-left: 20px;
}

.buy-line.first .graph {
    background-color: #FD8228;
}

.buy-line.second .graph {
    background-color: #408AE1;
}

.buy-line.third .graph {
    background-color: #D92D8A;
}

.buy-line.fourth .graph {
    background-color: #FDD535;
}

.buy-line.fifth .graph {
    background-color: #BC62F5;
}
.buy-line.six .graph {
    background-color: #8EBC42;
}
.row.buy-line.active {
    padding-right: 20px;
    padding-left: 20px;
    max-width: 540px;
}

.buy-line.first.active {
    background-color: #FD8228;
}

.buy-line.second.active {
    background-color: #408AE1;
}

.buy-line.third.active {
    background-color: #D92D8A;
}

.buy-line.fourth.active {
    background-color: #FDD535;
}

.buy-line.fifth.active {
    background-color: #BC62F5;
}
.buy-line.six.active {
    background-color: #8EBC42;
}
.buy-line.first .promo {
    color: #FD8228;
}

.buy-line.second .promo {
    color: #408AE1;
}

.buy-line.third .promo {
    color: #D92D8A;
}

.buy-line.fourth .promo {
    color: #FDD535;
}

.buy-line.fifth .promo {
    color: #BC62F5;
}
.buy-line.six .promo {
    color: #8EBC42;
}
.buy-line.first.active .promo {
    color: #ffffff;
}

.buy-line.second.active .promo {
    color: #ffffff;
}

.buy-line.third.active .promo {
    color: #ffffff;
}

.buy-line.fourth.active .promo {
    color: #ffffff;
}

.buy-line.fifth.active .promo {
    color: #ffffff;
}
.buy-line.six.active .promo {
    color: #ffffff;
}

.buy-line.active .graph {
    background-color: transparent;
    background-image: url(../img/SC-YesMark-Icon.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 24px;
    width: 23px;
    background-size: contain;
    margin-left: 0;
}

.buy-line.active .units-txt {
    margin-left: 10px;
}

.video-question-big {
    width: 100%;
    height: 240px;
    cursor: pointer;
    background-image: url(../img/video-question-play-bg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    box-sizing: border-box;
}
.question-text{
    cursor: pointer;
    background-image: url(../img/ico_play_first_time.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px 60px;
    box-sizing: border-box;
    /*height: 200px;*/
}

.question-text:hover{
    background-image: url(../img/ico_play_first_time_under.png);
}

.question-text .text{
    /*text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;*/
}
.input-range {
    -webkit-appearance: none;
    /*width: 4px;*/
    /*height: 140px;*/
    border-radius: 2px;
    background: #ccc;
    outline: none;
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */

    height: 4px;
    width: 140px;
    transform: rotate(270deg);
    border-radius: 8px;
    background: -webkit-linear-gradient(#FBC90A, #FBC90A) no-repeat, #91908E;
    background-size: 100% 100%;
    -webkit-appearance: none;
    position: absolute;
    left: -65px;
    top: 100px;

}
.input-range::-webkit-slider-thumb{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    -webkit-appearance: none;
    background: #FBC90A;
}
 /*Firefox Overrides*/
::-moz-range-track {
   background: #ccc;
   border: 0;
}
input::-moz-focus-inner {
    border: 0;
}
/*input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 300px;
    border-radius: 10px;
}*/
/*input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 10px; !*将轨道设为圆角的*!
    background: #ee2828;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    top: -2px;
    background: #fff;
}*/

.video-question-big.loading {
    background-image: url(../img/video-question-play-bg.webp);
}

.video-question-big.stop {
    background-image: url(../img/video-question-stop-bg.webp);
}
.question-text.stop {
    background-image: url(../img/ico_pause.png);
}
.stop.question-text:hover {
    background-image: url(../img/ico_pause_under.png);
}
.question-text.again {
    background-image: url(../img/ico_play_again.png);
}
.again.question-text:hover {
    background-image: url(../img/ico_play_again_under.png);
}
.video-question-big.pause {
    background-image: url(../img/video-question-stop-bg.webp);
}

.video-question-big.resume {
    background-image: url(../img/video-question-play-bg.webp);
}

.video-question-big:hover {
    background-image: url(../img/video-question-play-bg-over.webp);
}

.video-question-big.loading:hover {
    background-image: url(../img/video-question-stop-bg-over.webp);
}

.video-question-big.stop:hover {
    background-image: url(../img/video-question-stop-bg-over.webp);
}

.video-question-big.pause:hover {
    background-image: url(../img/video-question-stop-bg-over.webp);
}

.video-question-big.resume:hover {
    background-image: url(../img/video-question-play-bg-over.webp);
}

/* AGAIN */
.video-question-big.again {
    background-image: url(../img/video-question-play-bg-again.webp);
}

.video-question-big.loading.again {
    background-image: url(../img/video-question-play-bg-again.webp);
}

.video-question-big.stop.again {
    background-image: url(../img/video-question-stop-bg-again.webp);
}

.video-question-big.pause.again {
    background-image: url(../img/video-question-stop-bg-again.webp);
}

.video-question-big.resume.again {
    background-image: url(../img/video-question-play-bg-again.webp);
}

.video-question-big:hover.again {
    background-image: url(../img/video-question-play-bg-again-over.webp);
}

.video-question-big.loading.again:hover {
    background-image: url(../img/video-question-stop-bg-again-over.webp);
}

.video-question-big.stop.again:hover {
    background-image: url(../img/video-question-stop-bg-again-over.webp);
}

.video-question-big.pause.again:hover {
    background-image: url(../img/video-question-stop-bg-again-over.webp);
}

.video-question-big.resume.again:hover {
    background-image: url(../img/video-question-play-bg-again-over.webp);
}

/* END AGAIN */

.video-question-small {
    width: 180px;
    height: 100px;
    cursor: pointer;
    background-image: url(../img/video-question-play-bg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    box-sizing: border-box;
    margin-top: 5px;
}

.video-question-small:hover {
    background-image: url(../img/video-question-play-bg-over.webp);
}

.video-question-small-not-play {
    width: 180px;
    height: 100px;
    cursor: default;
    background-image: url(../img/video-question-play-bg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    box-sizing: border-box;
    margin-top: 5px;
}

.txt-max-250 {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 245px;
}

.admin-search-btn {
    height: 50px;
    width: 50px;
    margin-left: -5px;
}

.promoter-search-btn {
    height: 50px;
    width: 50px;
    margin-left: -5px;
}

.recorder-volume {
    max-width: 100px;
}

.faq-line {
    background-image: url(../img/SC-plus-dark-big.webp);
    background-repeat: no-repeat;
    background-position: right top;
    padding-right: 25px;
    cursor: pointer;
}

.faq-line.active {
    background-image: url(../img/SC-minus-dark-big.webp);
}

.faq-line .answer {
    display: none;
}

.faq-line.active .answer {
    display: block;
}

.copyright-over-photo {
    position: absolute;
    bottom: 0;
    left: 50%;
    text-shadow: 2px 1px 1px rgba(0, 0, 0, 1);
    opacity: 0.55;
    color: #ffffff;
    margin-left: -75px;
    width: 150px;
    text-align: center;
}

.quick-guide-menu {
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.80);
    color: #000000;
    text-align: left;
    padding: 20px 25px;
    background-image: url(../img/SC-arrow-Down-Dark.webp);
    background-repeat: no-repeat;
    background-position: 95% center;
    cursor: pointer;
}

.quick-guide-menu.opened {
    background-color: rgba(255, 255, 255, 1);
}

.quick-guide-menu-content {
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 1);
    color: #000000;
    text-align: left;
    display: none;
}

.quick-guide-menu-content .item {
    background-color: #ffffff;
    color: #000000;
    text-align: left;
    padding: 10px 25px;
    cursor: pointer;
}

.guide-large-pic {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.guide-small-pic {
    width: 48%;
    text-align: center;
    vertical-align: middle;
}


.pic-block.event .front {
    position: static;
}

.event .pic {
    cursor: default;
    background-color: #000000;
}

.pic-block.big {
    background-color: #000000;
}

.pic-block.big .pic {
    width: 100%;
    height: 510px;
    background-color: #000000;
    display: inline-block;
    vertical-align: top; /*not required*/
    border: 1px solid black; /*not required*/
    position: relative;
}

.pic-block .pic img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.event .pic img {
    cursor: pointer;
}

/*********** Gallery FLIPPER ************************/
.pic-block {
    display: inline-block;
    margin: 10px 5px;
    position: relative;
    overflow: hidden;
}

.pic {
    cursor: pointer;
    position: relative;
    background-color: #000000;
    padding-bottom: 2px;
}

.pic-block.small .pic {
    width: 250px;
    height: 250px;
    overflow: hidden;
}

.pic-block .pic img {
    max-width: 100%;
    max-height: 100%;
}

.front-info {
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    bottom: 0;
    width: 100%;
    -webkit-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    transition: 0.4s;
    height: 26%;
    overflow: hidden;
}

.front-info-more {
    width: 100%;
    height: 70%;
    padding-right: 15px;
    cursor: pointer;
}

.pic-block.big .front-info {
    height: 19%;
}
img.more-info{
    margin-right:17px;
    width: 30px;
    height: 30px;
    background: #EBEBEB;
    border-radius: 15px;
    padding: 5px;
    cursor: pointer;
    object-fit: contain;
}


.front-info .name {
    margin-left: 15px;
    margin-top: 10px;
}

.pic-block.small .front-info .name {
    margin-bottom: 0;
    display: inline-block;
    margin-left: 15px;
}

.online-dot {
    background-color: #696969;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    margin-left: 15px;
    display: inline-block;
    margin-top: 7px;
}

.online-dot.active {
    background-color: #e7c028;
}

.front-info .date {
    margin-left: 15px;
    margin-bottom: 10px;
}

.front-info .occupations {
    margin-left: 40px;
    margin-bottom: 10px;
}

.front-info .occupations-home {
    margin-left: 44px;
    margin-bottom: 20px;
}

.pic-block.small .pic:hover .front-info {
    background: rgba(0, 0, 0, 0.8);
    -webkit-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    transition: 0.4s;
    height: 100%;
}

.pic-block.event.small .pic:hover .front-info {
    background: rgba(0, 0, 0, 0.8);
    height: 100%;
}

.pic-block.small .pic .front-info .info {
    border-radius: 100%;
    margin-left: 15px;
    display: none;
}

.pic-block.small .pic:hover .front-info .info {
    display: block;
}

.flip-container {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000px;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    cursor: pointer;
}

/* for IE */
.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* END: for IE */


.flipper {
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.4s;
    transform-style: preserve-3d;
    position: relative;
    top: 0;
    left: 0;
    width: 510px;
    height: 510px;
    -o-transition: all 0.4s ease-in-out;
}

.pic-block .front, .pic-block .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.4s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.4s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.4s;
    -o-transform-style: preserve-3d;
    -ms-transition: 0.4s;
    -ms-transform-style: preserve-3d;
    transition: 0.4s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    width: 510px;
    height: 510px;
}

.pic-block .front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    background-position: center center;
    z-index: 2;
}

.pic-block .back {
    background: #ffffff;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(-180deg);
    color: #2c2c2c;
    padding-left: 50px;
    padding-top: 25px;
    padding-right: 20px;
}

/*********** END Gallery FLIPPER ************************/

.box1 .watermark {
    position: absolute;
    left: 0.5rem;
    width: 25% !important;
    height: auto;
    top: 0.5rem;
}
.box2 .watermark,.box3 .watermark,.box4 .watermark{
    position: absolute;
    left: 0.5rem;
    width: 50% !important;
    height: auto;
    top: 0.5rem;
}
.live-indicator {
    color: #fff;
    /*background-color: #dc3545;*/
    /*background-color: #075F07;*/
    background-color: #3C4043;
    /*border-radius: 10rem;*/
    border-radius: 0.75rem;
    display: inline-block;
    /*padding: .25em .8em;*/
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    position: absolute;
    /*margin-bottom: 85px;*/
    /*bottom: 0;*/
    margin: 0px;
    bottom: 0.5rem;
    left: 0.5rem;
    display: flex;
    align-items: center;
    height: 1.5rem;
}
.video_info:nth-child(2) .live-indicator,.video_info:nth-child(4) .live-indicator,.video_info:nth-child(3).box3 .live-indicator{
    left: unset;
    right: 0.5rem;
}
.live-indicator.bg-green{
    /*background-color:#9D780E;*/
    /*padding-left: 5px;*/
    /*padding-right: 15px;*/
    /*vertical-align: middle;*/
}
.live-indicator img {
    width: auto;
    height: 100%;
}
.live-indicator span{
    font-size: 14px;
    padding-left: 6px;
    padding-right: 14px;
}
.desktop-absolute {
    position: absolute;
}

.show-on-mobile {
    display: none;
}

.question-section {
    margin-top: 80px;
}

.input-password-eyeball {
    cursor: pointer;
    position: absolute;
    right: 20px;
    margin-top: 16px;
    color: #2b2b2b
}

@media only screen and (max-width: 76.5625em) {
    .hide-on-mobile {
        display: inline-block;
    }
}

@media only screen and (max-width: 64em) {

    .input-password-eyeball {
        margin-top: 10px;
    }

    .question-section {
        margin-top: 0;
    }

    .desktop-absolute {
        position: static;
    }

    .presenter-register-steps-close {
        position: absolute;
        right: 15px;
    }

    .pic-block.big .front-info {
        height: 25%;
    }

    .mobile-center {
        text-align: center;
    }

    /************ HEADER ***************/
    .show-on-mobile {
        display: inline-block;
    }

    .hide-on-mobile {
        display: none;
    }
    .ddown-container{
        right: 0px;
        top: 20px !important;
    }

    .mobile-end-call {
        all: unset;
        margin: 10px 20px 0 0 !important;
        position: absolute;
        top: 0;
        right: 0;
    }

    .acc-info-icon {
        height: 50px;
        width: 50px;
    }

    .contact-details-icon {
        height: 50px;
        width: 50px;
    }

    .confirmation-icon {
        height: 50px;
        width: 50px;
    }

    .event-attendees,
    .event-earnings {
        width: 40px;
        height: 40px
    }

    .mobile-hide-text {
        display: none;
    }

    .mobile-flex {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mobile-reset-margin-top {
        margin: 3px;
    }

    .mobile-vertical-align {
        vertical-align: center;
    }

    .mobile-remaining-time-txt {
        margin: 0;
    }

    .mobile-time-icon {
        width: 30px;
        height: 30px;
    }

    .remaining-time-container {
        margin-top: 0;
    }

    .mobile-share-btn {
        margin-left: 20px;
        margin-top: 0;
    }

    .mobile-icons-margin {
        margin: 10px 0 10px 0;
    }

    .mobile-number-margin {
        margin-left: 5px;
    }

    .mobile-logo {
        width: 150px;
    }

    /******** Video *********/
    #encoder {
        padding: 0 !important;
    }

    .mobile-video {
        margin-top: 15px;
    }

    .mobile-reset-margin {
        margin-right: 0;
    }

    /* QUESTIONS */
    .mobile-no-question-section {
        margin-top: 0;
    }

    .mobile-question-text-margin {
        margin-top: 0;
    }

    .mobile-question-text-2-margin {
        margin-top: 5px;
    }

    .mobile-video-question {
        min-width: 200px;
        max-width: 500px;
        height: 240px;
        background-size: cover;
        margin-right: auto;
        margin-left: auto;
    }

    .mobile-qq-ico,
    .mobile-est-time-ico,
    .mobile-stop-q-ico {
        background-size: contain;
        width: 30px;
        height: 30px;
    }

    .mobile-bottom-question-icons {
        margin-top: 10px;
    }

    .mobile-popup-qv {
        width: 400px;
    }

    /*SMALL & MEDIUM*/
    .marginTopMediumDown-15 {
        margin-top: 15px;
    }

    .marginBottomMediumDown-10 {
        margin-bottom: 10px;
    }

    .marginLeftSmallUp-0 {
        margin-left: 0 !important;
    }

    .clearfix-SmallUp {
        clear: both !important;
        display: block !important;
    }

    .font-14 {
        font-size: 14px;
    }

    .font-15 {
        font-size: 14px;
    }

    .font-16 {
        font-size: 14px;
    }

    .font-17 {
        font-size: 15px;
    }

    .font-18 {
        font-size: 15px;
    }

    .font-20 {
        font-size: 16px;
    }

    .font-25 {
        font-size: 16px;
    }

    .font-28 {
        font-size: 17px;
    }

    .font-30 {
        font-size: 18px;
    }

    .font-35 {
        font-size: 17px;
        line-height: 20px;
    }

    .font-40 {
        font-size: 18px;
    }

    .font-45 {
        font-size: 18px;
        line-height: 24px;
    }

    .font-50 {
        font-size: 20px;
        line-height: 24px;
    }

    .black-cover {
        padding: 10px;
    }

    .submit-btn {
        font-size: 14px;
    }

    .logo {
        height: 61px;
    }

    .input-txt {
        font-size: 16px;
        height: 40px;
    }

    .ddown {
        font-size: 16px;
        height: 40px;
    }

    .login-bg {
        padding-right: 0;
        padding-left: 0;
    }

    .index-block .icon {
        height: 50px;
    }

    .header-container {
        padding-left: 10px;
        padding-right: 10px;
        height: auto;
        min-height: 100px;
    }

    .header-btn {
        font-size: 12px;
    }

    .page-container {
        padding-right: 0;
        padding-left: 0;
    }

    .account-btn {
        margin-top: 20px;
        float: left;
        margin-right: 0;
        margin-left: 0;
    }

    .account-btn.noMargin {
        margin-top: 0;
    }

    .left-menu-btn {
        display: inline-block;
        width: auto;
    }

    .promo-bg {
        padding-left: inherit;
    }

    .actual-page {
        padding-left: 0;
    }

    .nav-tabs-container .tab {
        line-height: 60px;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        cursor: pointer;
        background-color: #FFFFFF;
        color: #7c7c7c;
        font-weight: 300;
    }

    .event-label {
        font-size: 10px;
        line-height: 15px;
        background-size: 15%;
    }

    .event-label.draft {
        background-position: 2px center;
        padding-left: 15px;
    }

    .photo-big {
        margin-right: 0;
        margin-left: 0;
    }

    .input-txt.fan-landing {
        min-width: 100%;
    }

    .photo-big, .photo-small {
        height: 100%;
        width: 100%;
    }

    .pic-block.big .pic {
        width: 100%;
        height: 250px;
    }

    .row.buy-line {
        padding: 3px 0;
    }

    .buy-line .graph {
        margin-top: 0;
        height: 35px;
    }

    .buy-line.active .graph {
        height: 15px;
        width: 15px;
        margin-left: 5px;
    }

    .row.buy-line.active {
        padding-right: 0;
        padding-left: 0;
        max-width: 540px;
    }

    .small .front-info .fav-icon {
        height: 15px;
        width: 15px;
        margin-top: -10px;
        display: none;
    }

    .small .front-info .share-btn {
        height: 15px;
        width: 15px;
        margin-top: -10px;
        display: none;
    }

    .big .front-info .fav-icon {
        margin-top: -20px;
    }

    .big .front-info .share-btn {
        margin-top: -20px;
    }

    .events-menu .pic-block.small .front-info .name {
        margin-top: 0;
    }

    .header-btn.notifications {
        display: none;
    }

    .account-left-ico, .event-questions-answered-ico {
        width: 25px;
        height: 25px;
    }

    .admin-search-btn {
        height: 40px;
        width: 40px;
    }


    /******************************Gallery Flipper*/
    .flipper {
        width: 100%;
        height: 100%;
    }

    .pic-block .front {
        width: 100%;
        height: 100%;
        position: static;
    }

    .front-info .name {
        margin-top: 5px;
    }

    .pic-block .back {
        width: 100%;
        height: 100%;
        padding: 10px;
    }

    .front-info .date {
        font-size: 10px;
    }

    .front-info .occupations {
        font-size: 10px;
    }

    /*****************************END Gallery Flipper*/
}

@media only screen and (max-width: 40em) {

    .question-section {
        margin-top: 0;
    }

    .live-indicator {
        height: 1rem;
        /*margin-bottom: 50px;*/
    }
    /*.watermark{
        height: 1rem;
    }*/
    .live-indicator span{
        font-size: 10px;
        padding-left: 3px;
        padding-right: 7px;
    }
    /* Header */
    .header-container {
        padding-top: 20px;
    }

    .mobile-logo {
        width: 100px;
    }

    .event-attendees,
    .event-earnings {
        width: 30px;
        height: 30px
    }

    .mobile-time-icon {
        width: 25px;
        height: 25px;
    }

    .mobile-reset-margin-top,
    .start-time-countdown {
        font-size: 13px;
    }

    .mobile-end-call-txt {
        margin-left: 5px;
        font-size: 12px;
    }

    .mobile-go-live-btn {
        font-size: 12px;
    }

    /* QUESTIONS */

    .hide-on-mobile-small {
        display: none;
    }

    .mobile-question-text-padding {
        padding-top: 5px;
        padding-bottom: 0;
    }

    .mobile-video-question {
        height: 240px;
        margin-top: 15px;
        background-size: cover;
        margin-right: auto;
        margin-left: auto;
    }

    .mobile-question-text-margin {
        margin-top: 0;
    }

    .mobile-question-number-text {
        font-size: 14px;
    }

    .mobile-question-text-2-margin {
        margin-top: 0;
        font-size: 16px;
    }

    .mobile-next-question-btn,.mobile-next-sponsor-btn {
        font-size: 12px;
    }

    .mobile-popup-qv {
        width: 100%;
        height: 100%;
    }

    /*SMALL ONLY*/
    .big .front-info .fav-icon {
        margin-top: -40px;
    }

    .big .front-info .share-btn {
        margin-top: -40px;
    }

    .pic-block.big {
        width: 250px;
        height: 250px;
    }

    .presenter-events.pic {
        max-height: 50px;
    }

    .presenter-events.pic img {
        vertical-align: top;
    }

    .marginBottomSmall-10 {
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 25em) {
    .question-section {
        margin-top: 0;
    }

    .live-indicator {
        height: 1rem;
        /*margin-bottom: 50px;*/
    }
    /*.watermark{
        height: 1rem;
    }*/
    .live-indicator span{
        font-size: 10px;
        padding-left: 3px;
        padding-right: 7px;
    }
    /************ HEADER ***************/
    .header-container {
        padding-left: 0;
        padding-right: 0;
    }

    .header-container {
        padding-top: 20px;
    }

    .mobile-end-call {
        margin: 5px 10px 0 0 !important;
    }

    .mobile-time-info-btn {
        width: 25px;
        height: 25px;
        margin-left: 15px;
    }

    .mobile-header-icons-margin {
        margin-left: 15px;
    }

    .mobile-share-btn {
        margin-left: 15px;
        margin-top: 0;
    }

    .event-attendees,
    .event-earnings {
        width: 30px;
        height: 30px
    }

    .mobile-time-icon {
        width: 22px;
        height: 22px;
    }

    .mobile-icons-margin {
        margin: 0 0 5px 0;
        padding: 5px;
    }

    /* Question */

    .mobile-video-question {
        height: 240px;
        margin-top: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    .mobile-questions-icons-txt {
        font-size: 10px;
    }

    .mobile-question-icons-padding {
        padding: 0 9px;
    }
}


@media only screen and (min-width: 40.0625em) and (max-width: 64em) {
    /*MEDIUM ONLY*/
    /******************************Gallery Flipper*/
    .flipper {
        width: 320px;
        height: 320px;
    }

    .front, .back, .event .front {
        width: 320px;
        height: 320px;
    }

    .pic-block.small {
        margin-top: 12px;
    }

    .pic-block.small .pic {
        width: 154px;
        height: 154px;
    }

    .front-info {
        height: 30%;
    }

    .front-info .name {
        font-size: 18px;
    }

    .front-info .date {
        font-size: 16px;
    }

    .front-info .occupations {
        font-size: 16px;
    }

    .pic-block.small .front-info .name {
        font-size: 16px;
        margin-left: 5px;
    }

    .pic-block.small .front-info .date {
        font-size: 12px;
    }

    .pic-block.small .front-info .occupations {
        font-size: 12px;
    }

    .back {
        padding-left: 20px;
        padding-top: 20px;
        padding-right: 10px;
    }

    .back .name {
        font-size: 20px;
        margin-top: 20px;
    }

    .back .date {
        font-size: 14px;
    }

    .back .description {
        font-size: 14px;
        margin-top: 15px;
    }

    .back .click {
        font-size: 14px;
        margin-top: 15px;
    }

    .txt1 {
        font-size: 20px;
    }

    .txt2 {
        font-size: 16px;
    }

    .marginTopMedium-15 {
        margin-top: 15px;
    }

    .marginTopMedium-10 {
        margin-top: 10px;
    }

    /******************************END Gallery Flipper*/
}


@media only screen and (min-width: 40.0625em) {
    /*MEDIUM UP*/
    .valign-middle {
        display: table;
    }

    .valign-middle .columns {
        display: table-cell;
        vertical-align: middle;
    }

    .valign-middle .columns,
    .valign-middle [class*="column"] + [class*="column"]:last-child {
        float: none;
    }
}


@media only screen and (min-width: 64.0625em) {
    /*LARGE UP*/
    .large-up-width-250 {
        width: 250px;
    }
}

.event-video-bar .button.audio-off {
    background-image: url(../img/video-bar-muteOFF.webp);
    margin-left: 20px;
}

.event-video-bar .button.audio-off.active {
    background-image: url(../img/video-bar-muteON.webp);
}

.event-video-bar .button.audio-off.presenter {
    background-image: url(../img/video-bar-muteOFF-presenter.webp);
}

.event-video-bar .button.audio-off.presenter.active {
    background-image: url(../img/video-bar-muteON-presenter.webp);
}

.event-video-bar .button.widescreen {
    float: right;
    background-image: url(../img/video-bar-widescreenON.webp);
    margin-right: 20px;
}

.event-video-bar .button.widescreen.active {
    background-image: url(../img/video-bar-widescreenOFF.webp);
}


.event-video-bar {
    position: static;
}

.event-video-bar {
    background-color: #000000;
    height: 40px;
}

.event-video-bar .button {
    background-color: transparent;
    float: left;
    background-repeat: no-repeat;
    background-position: center center;
    width: 24px;
    height: 40px;
    opacity: 0.6;
    position: relative;
    padding: 0;
    margin: 0;
}

.event-video-bar .no-show {
    display: none;
}

.event-video-bar .button .tip {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    font-size: 12px;
    color: #666666;
    background-color: #E5E5E5;
    padding: 0;
    min-width: 100px;
    line-height: 25px;
    font-weight: 400;
    border-radius: 5px;
}

.event-video-bar .button .tip.long {

    /*min-width: 500px; PDK */
    min-width: 530px;
}

.event-video-bar .button:hover .tip {
    display: block;
}

.event-video-bar .button.widescreen {
    float: right;
    background-image: url(../img/video-bar-widescreenON.webp);
    margin-right: 20px;
}

.event-video-bar .button.pause {
    background-image: url(../img/video-bar-pause.webp);
}

.event-video-bar .button.play {
    background-image: url(../img/video-bar-play.webp);
}

.event-video-bar .button.end-event {
    background-image: url(../img/video-bar-end.webp);
    width: 55px;
    margin-left: 20px;
}

.event-video-bar .button.start-event {
    background-image: url(../img/video-bar-start.webp);
    width: 55px;
    margin-left: 20px;
}

.event-video-bar .button.start-event-disabled {
    background-image: url(../img/video-bar-start-disabled.webp);
    width: 55px;
    margin-left: 20px;
}

.event-video-bar .button.widescreen.active {
    background-image: url(../img/video-bar-widescreenOFF.webp);
}

.event-video-bar .button.audio-off {
    background-image: url(../img/video-bar-muteOFF.webp);
    margin-left: 20px;
}

.event-video-bar .button.audio-off.active {
    background-image: url(../img/video-bar-muteON.webp);
}

.event-video-bar .button.audio-off.presenter {
    background-image: url(../img/video-bar-muteOFF-presenter.webp);
}

.event-video-bar .button.audio-off.presenter.active {
    background-image: url(../img/video-bar-muteON-presenter.webp);
}

.event-video-bar .button:hover {
    background-color: transparent;
    opacity: 1;
}

.event-video-bar .live-txt {
    font-size: 12px;
    color: #ff6868;
    font-weight: 400;
    padding-left: 10px;
    line-height: 35px;
}

.event-video-bar .live-txt.paused {
    color: #ffffff;
    opacity: 0.6;
}

.sc-black {
    background-color: #000000;
    position: relative;
}

.video-brodcast-element .row.event-video-bar {
    margin-top: -50px;
}

.aspect-ratio-broadcaster {
    background-color: #FF9900;
}

@media only screen and (max-width: 40em) {
    /*SMALL*/
    .right-for-small-only {
        float: right;
    }

    .aspect-ratio-broadcaster {
        min-width: auto;
        min-height: auto;
        border: 1px solid #000000;
    }

    .aspect-ratio-broadcaster-user-LargeScreen {
        min-width: auto;
        min-height: auto;
        border: 1px solid #000000;
    }
}

@media only screen and (min-width: 40.0625em) {
    /*MEDIUM*/
    .aspect-ratio-broadcaster {
        min-width: 100%;
        min-height: auto;
        border: 1px solid #000000;
        padding: 0;
    }

    .aspect-ratio-broadcaster-user-LargeScreen {
        min-width: 100%;
        min-height: auto;
        border: 1px solid #000000;
        padding: 0;
    }
}

@media only screen and (min-width: 64.0625em) {
    /*LARGE*/
    .aspect-ratio-broadcaster {
        min-width: 100%;
        min-height: auto;
        border: 1px solid #000000;
        padding: 0;
    }

    .aspect-ratio-broadcaster-user-LargeScreen {
        min-width: 100%;
        min-height: auto;
        border: 1px solid #000000;
        padding: 0;
    }
}

.flex-video {
    height: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    padding-bottom: 72%;
    padding-top: 1.5625rem;
    position: relative;
}

.flex-video.recording {
    margin-bottom: 0;
    padding-bottom: 70%;
}

.flex-video.widescreen {
    padding-bottom: 56.34%
}

.flex-video.vimeo {
    padding-top: 0
}

.flex-video iframe, .flex-video object, .flex-video embed, .flex-video video {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0
}

.vc-volumne {
    width: 300px;
}

.vc-meter {
    border: 1px solid #FFFFFF;
}

.vu-meter-container {
    padding: 1px;
    width: 100%;
    max-width: 220px;
    border: 1px solid #e2e2e2;
    background-color: #FFFFFF;
    overflow: hidden;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.volume-slider-txt {
    position: absolute;
    top: -5px;
}


.range-slider {
    border: 1px solid #DDDDDD;
    position: relative;
    -ms-touch-action: none;
    touch-action: none;
    display: block;
    height: 1rem;
    width: 100%;
    max-width: 220px;
    float: none;
    margin: 1.25rem auto;
    background: #FAFAFA;
}


.range-slider.disabled, .range-slider[disabled] {
    background: #FAFAFA;
    cursor: not-allowed;
    opacity: 0.7;
}

.range-slider.disabled .range-slider-handle, .range-slider[disabled] .range-slider-handle {
    background: #008CBA;
    cursor: default;
    opacity: 0.7;
}

.range-slider.disabled .range-slider-handle:hover, .range-slider[disabled] .range-slider-handle:hover {
    background: #007ba4;
}

.range-slider-active-segment {
    background: #e5e5e5;
    border-bottom-left-radius: inherit;
    border-top-left-radius: inherit;
    display: inline-block;
    height: 0.875rem;
    width: 100%;
    position: absolute;
    left: 0;
}

.range-slider-handle {
    border: 1px solid;
    cursor: pointer;
    display: inline-block;
    height: 1.375rem;
    position: absolute;
    top: -0.3125rem;
    left: 0;
    width: 2rem;
    z-index: 1;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    background: #d4b31d;
}

.range-slider-handle:hover, .sc-volume .range-slider .range-slider-handle:hover {
    background: #fad21c
}

.event-video-bar .live-txt {
    font-size: 12px;
    color: #ff6868;
    font-weight: 400;
    padding-left: 10px;
    line-height: 35px;
}

.event-video-bar .live-txt.paused {
    color: #ffffff;
    opacity: 0.6;
}

.green-dot-live {
    font-size: 22px;
    color: #92f233;
}

.green-dot-live.red {
    font-size: 20px;
    color: #ff0000;
}


.webcam-record-btn {
    background-image: url(../img/Starchat_Website_Desktop_btn_Record.webp);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    height: 54px;
    width: 54px;
    cursor: pointer;
}


.reveal-modal.landing {
    background-color: #d4b31d;
    margin-top: 15%;
    max-width: 400px;
    padding-right: 20px;
    padding-left: 20px;
}

.reveal-modal.landing.grey {
    background-color: #6a6a6a;
}

.reveal-modal.landing.grey .title {
    background-color: #6a6a6a;
}

.reveal-modal.landing .title {
    padding-left: 0;
}

.reveal-modal.landing input[type=checkbox] {
    height: 15px;
    width: 15px;
    float: left;
    margin-top: 4px;
}

.landing-forgot-pass {
    color: #FFFFFF;
    float: right;
    cursor: pointer;
}

.landing-forgot-pass:hover {
    color: #000000;
}

.landing-input-eror {
    color: #ffffff;
    background-color: #ff5850;
    padding: 7px;
    border-radius: 3px;
    display: none;
}

.reveal-modal.landing .modal-login-btn {
    font-size: 15px;
    color: #474747;
    background-color: #fafafa;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#fafafa));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #fafafa, #fafafa);
    /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(top, #fafafa, #fafafa);
    /* FF3.6+ */
    background-image: -ms-linear-gradient(top, #fafafa, #fafafa);
    /* IE10 */
    background-image: -o-linear-gradient(top, #fafafa, #fafafa);
    /* Opera 11.10+ */
    background-image: linear-gradient(to bottom, #fafafa, #fafafa);
    text-align: center;
    vertical-align: middle;
    height: 35px;
    width: 105px;
    cursor: pointer;
    margin-right: auto;
    margin-left: auto;
    -webkit-box-shadow: -1px 6px 5px -6px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: -1px 6px 5px -6px rgba(0, 0, 0, 0.43);
    box-shadow: -1px 6px 5px -6px rgba(0, 0, 0, 0.43);
    float: none;
    font-weight: 200;
    display: block;
    line-height: 35px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    padding: 0;
}

.reveal-modal.landing .modal-login-btn:hover {
    background-color: #ececec;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#ececec));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #ececec, #ececec);
    /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(top, #ececec, #ececec);
    /* FF3.6+ */
    background-image: -ms-linear-gradient(top, #ececec, #ececec);
    /* IE10 */
    background-image: -o-linear-gradient(top, #ececec, #ececec);
    /* Opera 11.10+ */
    background-image: linear-gradient(to bottom, #ececec, #ececec);
}

.reveal-modal.landing .modal-login-btn.long {
    width: 150px;
}

.register-link {
    color: #695809;
    cursor: pointer
}

.register-link:hover {
    color: #000000;
}

.reveal-modal.landing input[type=text], .reveal-modal.landing input[type=password] {
    height: 45px;
    font-size: 16px;
    color: #868686;
    background-color: #FFFFFF;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    margin-top: 10px;
    font-weight: 200;
}


.reveal-modal {
    padding-bottom: 20px;
}

.modal-record-question {
    background-color: #ffffff;
    border: 3px solid #d4b31d;
    max-width: 600px;
    font-size: 14px;
}

.reveal-modal .title {
    background-color: #d4b31d;
    color: #ffffff;
    font-size: 24px;
    line-height: 60px;
    padding-left: 20px;
    font-weight: 200;
}

.reveal-modal .payment {
    background-color: rgba(255, 255, 255, 0);
    color: #ffffff;
    font-size: 14px;
    line-height: 60px;
    padding-left: 20px;
    font-weight: 200;
}

.reveal-modal a.close-reveal-modal {
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
}

.reveal-modal .close-reveal-modal:hover {
    color: #000000;
}

.volume-slider-txt {
    position: absolute;
    top: -5px;
}

.reveal-modal .range-slider .range-slider-handle, .sc-volume .range-slider .range-slider-handle {
    background: #d4b31d;
}

.reveal-modal .range-slider .range-slider-handle:hover, .sc-volume .range-slider .range-slider-handle:hover {
    background: #fad21c
}

.range-slider-active-segment .range-slider-active-segment, .range-slider-active-segment {
    background: #acacac;
}

/*
.record-video-step2.recording .seconds-pre-roll {
	display: none;
}
.record-video-step2.pre-roll .seconds-recording {
	display: none;
}
*/
.webcam {
    border: 3px solid #000000;
}

.webcam-stopping {
    display: none;
}

.webcam-recording {
    border: 3px solid #ff1a1a;
}

.webcam-preroll {
    border: 3px solid #d4b31d;
}

.record-video-step2.recording . {
    border: 3px solid #ff1a1a;
}

.record-video-step2.pre-roll . {
    border: 3px solid #d4b31d;
}

/* PDK */
.stop-video-btn {
    background-image: url(../img/Starchat_Website_Desktop_btn_StopRecording.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 54px;
    width: 54px;
    cursor: pointer;
}

.webcam-stop-btn {
    background-image: url(../img/Starchat_Website_Desktop_btn_StopRecording.webp);
    background-repeat: no-repeat;
    background-position: center center;
    /*display: none; PDK*/
    height: 54px;
    width: 54px;
    cursor: pointer;
}

.webcam-play-btn {
    background-image: url(../img/Starchat_Website_Desktop_btn_PlayRecording.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 54px;
    width: 54px;
    cursor: pointer;
}

.webcam-record-btn:hover {
    background-image: url(../img/Starchat_Website_Desktop_btn_Record_mouseover.webp);
}

/*.record-video-step2.recording .webcam-stop-btn:hover {*/
.webcam-stop-btn:hover {
    background-image: url(../img/Starchat_Website_Desktop_btn_StopRecording_mouseover.webp);
}

.webcam-play-btn:hover {
    background-image: url(../img/Starchat_Website_Desktop_btn_PlayRecording_mouseover.webp);
}

/*
.record-video-step2 {
	display: none;
}
.record-video-step3 {
	display: none;
}
.record-video-step4 {
	display: none;
}
*/
.record-countdown {
    font-size: 15px;
    color: #f80e0e;
    display: block;
    height: 50px;
    width: 50px;
    position: absolute;
    left: 15px;
    top: 15px;
    text-align: center;
    line-height: 15px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}

.record-countdown span {
    font-size: 26px;
    font-weight: 800;
}

img, .photo-big, .photo-small {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.locked-account-ico {
    background-image: url(../img/SC-Ico-Round-Loked.webp);
    background-repeat: no-repeat;
    background-position: center center;
    height: 50px;
    width: 50px;
}

.load-btn, .submit-btn.load-btn:hover, load-btn:hover {
    background-image: url(../img/loading-buffering.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    cursor: default;
    -webkit-transition: 0s;
    -ms-transition: 0s;
    -moz-transition: 0s;
    transition: 0s;
    background-size: 25px 25px;
}
.submit-btn.blue{
    background-color: #0e8ee9;
    color: white;
}
.submit-btn.blue:hover{
    background-color: #333333;
    color: white;
}
#playerElement {
    width: 800px;
    height: 600px;
    padding: 0;
}

/* Images preload */
div#preloaded-images {
    position: absolute;
    overflow: hidden;
    left: -9999px;
    top: -9999px;
    height: 1px;
    width: 1px;
}

#player-video {
    width: 100% !important;
    height: auto !important;
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: 10px;
    position: relative;
    outline: none;
}

#publisher-video {
  /*  width: 1px;
    height: 1px;
    margin-left: -10px;*/
    position: absolute;
}

.flip-horizontal {
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1); /* WebKit */
    -moz-transform: scaleX(-1);    /* Mozilla*/
    -ms-transform: scaleX(-1);     /* IE */
    -o-transform: scaleX(-1);      /* Opera */
}

#play-video-question.full_screen_video,#play-video-media-a.full_screen_video,#play-video-media-b.full_screen_video,#publisher-video-question.full_screen_video{
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform:none;
    position: absolute;
}
/* PIP video elements: width 1/3, height 1/3 of the parent container.
   Parent #publish-question-container is JS-forced to 4:3 (CANVAS_W:CANVAS_H = 1080:808
   ≈ 4:3) by encoder.blade.php updateCss(). Therefore 1/3 × 1/3 of a 4:3 container
   gives a 4:3 PIP at 1/3 canvas width × 1/4 canvas height — matching the compositor
   PIP (PIP_W=360, PIP_H=270 on a 1080×808 canvas). Explicit height (instead of
   relying on aspect-ratio + height:auto) is robust against the <video> intrinsic
   ratio quirk for replaced elements. aspect-ratio: 4/3 retained as defense.
   Anchors preserved. CSS owns PIP size end-to-end; updateCss() no longer sets
   width inline. */
#play-video-question, #play-video-media-a, #play-video-media-b, #publisher-video-question {
    aspect-ratio: 4 / 3;
}
.join_user_3 #play-video-question,.join_user_4 #play-video-question,.join_user_3 #play-video-media-a,.join_user_4 #play-video-media-a,.join_user_3 #play-video-media-b,.join_user_4 #play-video-media-b,.join_user_3 #publisher-video-question,.join_user_4 #publisher-video-question{
    width: calc(100% / 3);
    height: calc(100% / 3);
    /*mix-blend-mode: screen;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.join_user_1 #play-video-question,.join_user_1 #play-video-media-a,.join_user_1 #play-video-media-b,.join_user_1 #publisher-video-question{
    width: calc(100% / 3);
    height: calc(100% / 3);
    /*mix-blend-mode: screen;*/
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.join_user_2 #play-video-question,.join_user_2 #play-video-media-a,.join_user_2 #play-video-media-b,.join_user_2 #publisher-video-question{
    width: calc(100% / 3);
    height: calc(100% / 3);
    /*mix-blend-mode: screen;*/
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0%);
}
/* Subscriber name+flag bar (.play-question-user-info): sized to content with
   nowrap so a long username does not wrap when the PIP video is calc(100%/3)
   of canvas. Anchors mirror the matching #play-video-question position per
   host count. */
/* ⭐ FIX A (Event 2647) — THE ROW MUST NEVER FALL BACK TO `position: static`.
   `.play-question-user-info` had NO base rule: it received `position: absolute`
   (and its content sizing) ONLY from the four `.join_user_N` rules below. The
   container's count is written from THREE unclamped sources —
   `join_user_{{$__tileCount}}` in the Blade, `join_user_ + children().length`
   in updateCss(), and `join_user_ + player_list.length` in live.blade.php — and
   the stylesheet contains ZERO `join_user_5` rules. A hard refresh mid-Event is
   exactly when self may not yet be in user_list, producing a 5th tile.

   When no `.join_user_N` rule matches, every offset is computed but INERT and
   the row renders at the container's top-left as a FULL-WIDTH band, above the
   video — which is what the Chairman photographed after Pause → refresh →
   Resume. Measured in the lab: join_user_4 gives `absolute` at x10/y567
   (lower-left, correct); join_user_5 gives `static` at x0/y0 with width 816.

   ⛔ DELIBERATELY NO top/right/bottom/left HERE. Adding an anchor would fight
   the `.join_user_1` rule (which anchors `right`) and stretch the box. This
   rule supplies ONLY what was missing, so all four covered cases stay
   byte-identical and the MAIN rule below can still place it. */
.play-question-user-info {
    position: absolute;
    width: auto;
    height: auto;
    white-space: nowrap;
    /* ⭐ THE INVARIANT (Event 2647, second pass). The row is BOTTOM-ANCHORED here,
       independent of host count and independent of any JS class. Measured: the only
       state that reproduces the Chairman's screenshot -- absolute, content-sized, at
       the container's top-left -- is "no matching join_user_N rule AND no
       content-owns-main", where every anchor came from a rule that did not match and
       the row fell back to its static position. Anchoring at the base makes that
       state impossible: there is no longer a configuration in which the row has no
       vertical anchor. */
    top: auto;
    bottom: 10px;
    left: 10px;
}

.join_user_1 .play-question-user-info,
.join_user_2 .play-question-user-info,
.join_user_3 .play-question-user-info,
.join_user_4 .play-question-user-info {
    width: auto;
    height: auto;
    white-space: nowrap;
    position: absolute;
}
/* ONE-HOST EXCEPTION PRESERVED: this rule anchors RIGHT. `left: auto` neutralises the
   base rule's default left anchor so the box is not stretched between the two. */
.join_user_1 .play-question-user-info { bottom: 10px; right: 10px; left: auto; }
.join_user_2 .play-question-user-info { bottom: 10px; left: 50%; transform: translate(-50%, 0%); }
/* 3/4-HOST PIP EXCEPTION PRESERVED: this rule anchors TOP. `bottom: auto` neutralises the
   base rule's bottom anchor so the box is not stretched vertically. */
.join_user_3 .play-question-user-info,.join_user_4 .play-question-user-info { top: 50%; bottom: auto; left: 50%; transform: translate(-50%, -60%); }

/* ⭐ VQ ATTRIBUTION ON MAIN (Event 2646).
   The Flag + Username row is declared BEFORE every content <video> inside
   #publish-question-container and carries no z-index, so the videos paint over
   it. In PIP that is invisible: the video is a third of the canvas and the row
   is offset clear of it, which is why the row has always looked correct there.
   Full-screen content covers the whole canvas, so the row was painted over
   completely — "present in PIP, absent on MAIN", exactly as observed.

   Two scoped rules, and NOTHING outside the MAIN case changes:
     * the row is lifted above the content video, and
     * it moves to the LOWER-LEFT of the canvas, matching the approved Android
       and iOS MAIN placement.
   The PIP rules above are untouched, so the approved PIP appearance stays
   byte-identical.

   `isolation: isolate` on the container is what makes the lift SAFE: it scopes
   this z-index inside the content layer, so the row can never climb above the
   Host container — which in the Hide-Host-PIP UNCHECKED state is deliberately
   the 35% secondary painted ABOVE content, and must stay there. */
#publish-question-container {
    isolation: isolate;
}
/* ⭐⭐ THE MAIN-STATE PREDICATE IS THE PRESENTATION ELEMENT ITSELF (Chairman, 2026-09-11).
   It was `#encoder_video.content-owns-main`, a JS-published mirror of this same fact. ⛔ THAT
   MIRROR CAN FLICKER OFF WHILE THE VQ IS STILL VISIBLY ON MAIN, so scoping to it can only ever
   be a partial fix: the row would snap back to the `.join_user_N` anchor and to the legacy
   inline size for as long as the class was absent.

   WHY THE MIRROR FLICKERS, and why this predicate cannot:
     * The class is written by applyHostSecondaryLayout() from a MutationObserver callback --
       a SNAPSHOT taken at callback time, which is a different instant from paint. The co-host
       transition mutates in TWO steps (add `full_screen_video`, then remove `.hide`), so the
       intermediate recomputation reads false and the class is removed and re-added.
     * The mirror also folds in the two MEDIA slots, so it additionally toggles for content
       that is not a Video Question at all.
   This selector reads the VQ element's OWN classes, and the style engine evaluates it in the
   SAME style recalculation that lays the VQ element out. The row and the VQ therefore cannot
   disagree by construction -- there is no callback, no snapshot and no second instant.

   ⭐ This is the compound already promoted as the "VQ owns MAIN" signal and corroborated live
   by Media Core within one second on every edge across Events 2638 and 2639. Both halves are
   required: `.hide`-absent alone is true from page load, and `full_screen_video` alone can be
   STALE because the hide paths add `.hide` without clearing it.
   ⛔ NO host-count patch, NO new JS class, and Media and Text are excluded by construction --
   the media slots are different elements and the text branch drives the canvas while re-adding
   `.hide` to #play-video-question.

   ⚠️ `:has()` is required (CSS cannot ask about a LATER sibling, and the row is declared before
   both video elements). Where `:has()` is unsupported the whole rule is dropped and the page
   behaves exactly as it does in production today -- a degradation to the current state, never
   worse.

   VQ ATTRIBUTION ON MAIN (Event 2646). The Flag + Username row is declared BEFORE every content
   <video> inside #publish-question-container and carries no z-index, so the videos paint over
   it. In PIP that is invisible: the video is a third of the canvas and the row is offset clear
   of it, which is why the row has always looked correct there. Full-screen content covers the
   whole canvas, so the row was painted over completely -- "present in PIP, absent on MAIN".
   The row is lifted above the content video and moved to the LOWER-LEFT of the canvas, matching
   the approved Android and iOS MAIN placement. `isolation: isolate` on the container is what
   makes the lift SAFE: it scopes this z-index inside the content layer, so the row can never
   climb above the Host container, which in the Hide-Host-PIP UNCHECKED state is deliberately the
   35% secondary painted ABOVE content and must stay there. */
#publish-question-container:has(> #publisher-video-question.full_screen_video:not(.hide)) .play-question-user-info,
#publish-question-container:has(> #play-video-question.full_screen_video:not(.hide)) .play-question-user-info {
    z-index: 4;
    top: auto;
    right: auto;
    bottom: 10px;
    left: 10px;
    transform: none;
    /* ⭐ THE ROW IS INLINE-SIZED BY LEGACY JS, AND INLINE BEATS EVERY ANCHOR ABOVE
       (Event 2651, Chairman-reported: "it WAS at the bottom left, but not for long...
       the entire row jumps with it").

       THREE writers set inline width/height on this row, all with the same pair
       `w_v` / `h_v + 40`:
         * encoder.blade.php co-host branch  -- on EVERY `play` of #play-video-question
         * encoder.blade.php owner branch    -- on EVERY `play` of #publisher-video-question
         * public/js/webrtcLib/question/Pip.js -- on canvas resize
       They exist to make the box OVERLAY THE PIP VIDEO, with the label drawn at the
       box's top edge. That is why PIP has always looked correct and why the earlier
       two fixes did not hold: both moved the ANCHOR, neither touched the BOX SIZE.

       ⚠️ On MAIN the video IS the canvas, so the box becomes 816x652 -- TALLER than the
       612 canvas. Bottom-anchored and over-tall, its top lands at y = -50, i.e. 50px
       ABOVE the canvas, and the label renders at that top edge. Measured, not inferred.

       ⛔ `!important` IS REQUIRED AND IS THE CORRECT INSTRUMENT HERE: an author
       `!important` declaration is the only thing that outranks the style attribute, so
       this neutralises all three writers at once without editing live JS in three
       places. Scoped to actual VQ MAIN ownership, so the PIP overlay geometry the legacy
       sizing exists for is untouched -- proven byte-identical across every host count. */
    width: auto !important;
    height: auto !important;
}

img.flag{
    width: auto;
    height: 28px;
    /* Browser publisher parity (2026-04-26): directional drop-shadow below-right
       (replaces uniform glow). Uses filter:drop-shadow so the shadow traces the
       flag's transparent edges, not the rectangular bounding box. */
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.85));
}
#play-video-question-text{
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    position: absolute;
}
span.user-name{
    /* Browser publisher parity (2026-04-26): single down-right text-shadow.
       Replaces opposing 2px/-2px pair which read as a uniform halo. */
    text-shadow: 2px 2px 3px rgba(0,0,0,0.85);
    color: white;
    margin-left: 10px;
    font-size: 28px;
}
#publisher-canvas {
    background-color: black;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 10px;
}
#publish-toggle.loading {
    background-image: url(../img/loading-buffering.gif);
    background-size: cover;
    height: 22px;
    width: 22px;
    color: transparent;
}

#error-messages {
    color: #f12e2e;
    position: relative;
}

#stream-devices-loading {
    margin-top: 25px;
    width: 30px;
    height: 30px;
}

.control-button {
    background: #3c4043;
    border: 0;
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    cursor: pointer;
    border-radius: 30px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.control-button.green {
    background-color: #65b62f;
    /*background-image: url(../img/ic_go-live_animated.gif);*/
    width: auto;
    border-radius: 30px;
    padding-left: 10px;
    padding-right: 10px;
}
.control-button.green.anim {
    animation: animation 1.5s infinite;
}
@keyframes animation {
    0% {
        background-color: #65b62f;
    }
    49% {
        background-color: #65b62f;
    }
    50%{
        background-color: #db4040;
    }
    99%{
        background-color: #db4040;
    }
    100% {
        background-color: #65b62f;
    }
}

.control-button.pause {
    width: auto;
    border-radius: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

.control-button.orange {
    background-color: #E8C020;
}
.control-button.gray {
    background-color: #464646;
}
.control-button.red {
    background-color: #db4040;
    width: auto;
    border-radius: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

.mute-toggle-icon {
    height: 23px;
    color: green;
}

#encoder {
    padding-right: 50px;
}

.mouse-pointer {
    cursor: pointer;
}

.popup-terms-privacy-content {
    height: 60%;
    background: rgba(0, 0, 0, 0);
    color: white;
    border: 0;
}

.bank-checked {
    height: 27px;
    width: 27px;
}

textarea {
    resize: none;
}

.small-12 .intl-tel-input {
    display: block !important;
}

textarea::-webkit-scrollbar {
    width: 5px;
    cursor: all-scroll;
}

textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0);
}

textarea::-webkit-scrollbar-thumb {
    background-color: #e7c028;
    outline: 1px solid #e7c028;
}

body::-webkit-scrollbar {
    width: 7px;
    cursor: all-scroll;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0);
}

body::-webkit-scrollbar-thumb {
    background-color: #e7c028;
    outline: 1px solid #e7c028;
}

div::-webkit-scrollbar {
    width: 5px;
    cursor: all-scroll;
}

div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 9px white;
}

div::-webkit-scrollbar-thumb {
    background-color: #e7c028;
    outline: 1px solid #e7c028;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-text {
    cursor: text;
}

.identity-confirmed-icon {
    background-image: url(../img/verified-identity-blue2.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

.identity-confirmed-icon-big {
    background-image: url(../img/verified-identity-blue2.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 25px 25px;
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-left: 10px;
}

.checkbox-container {
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.checkbox-container.media{
    position: relative;
}
.checkbox-container input {
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 13px;
    height: 15px;
    width: 15px;
    background-color: white;
    border: 1px solid #e7c028;

}
.checkmark.center{
    top: 50%;
    transform: translateY(-50%);
}
.checkbox-container.media .checkmark{
    top: 11px;
}
.checkbox-container:hover input ~ .checkmark {
    background-color: #e7c028;
    border: 1px solid white;
}

.checkbox-container:hover input:checked ~ .checkmark {
    background-color: white;
    border: 1px solid #e7c028;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: #e7c028;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    width: 13px;
    height: 13px;
    background-color: #e7c028;
    border: 1px solid white;
}

.radio-container {
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-checkmark {
    position: absolute;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: white;
    border-radius: 50%;
    border: 1px solid #e7c028;
}

.radio-container:hover input ~ .radio-checkmark {
    background: #e7c028;
}

.radio-container input:checked ~ .radio-checkmark {
    background-color: #e7c028;
}

.radio-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.radio-container input:checked ~ .radio-checkmark:after {
    display: block;
}

.radio-container .radio-checkmark:after {
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

.no-border {
    border: none;
}

.img-square {
    object-fit: cover;
}

.corp-contact-position {
    font-style: italic;
}

.valign-top {
    vertical-align: top;
}

.clips {
    cursor: pointer;
}

.yt-logo-btn {
    background-image: url(../img/original/yt_logo_dark.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100px 23px;
    display: inline-block;
    width: 100px;
    height: 25px;
    margin-right: 15px;
}
.row-th{
    background-color: #333333;
    color: white;
}
.row-th span,.row-th div{
    cursor: pointer;
}
.row-th.asc,.row-th.desc{
    color: #e7c028;
}
.row-th.asc div{
    margin-left: 5px;
    margin-top: -2px;
    width: 0;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #e7c028;
    display: inline-flex;
}
.row-th.desc div{
    margin-left: 5px;
    margin-top: -2px;
    width: 0;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #e7c028;
    display: inline-flex;
}
.custom-table th,.custom-table td{
    min-width: 80px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.p-relative{
    position: relative;
}
.video-row{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.video-item{
    text-align: center;
    width: 24%;
    margin-left: 1%;
}
.video-content{
    width: 100%;
    padding-top: 75%;
    position: relative;
}

.video-item video{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}
.info-row{
    display: flex;
}
.info-item{
    flex: 1;
}

/* ========================================
   StarChats Filter & Sort Enhancements
   ======================================== */

/* Filter group headings */
.filter-group-heading {
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

/* Filter group spacing */
.filter-group + .filter-group {
    margin-top: 25px;
}

/* Mobile filter button */
.filter-mobile-btn {
    display: inline-block;
    padding: 10px 30px;
    border: 2px solid #e7c028;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    position: relative;
}
.filter-mobile-btn:hover {
    background-color: #e7c028;
    color: #fff;
}

/* Active filter count badge */
.filter-active-count {
    display: inline-block;
    background: #e7c028;
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
    vertical-align: middle;
}

/* Mobile filter drawer overlay */
.filter-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
}

/* Mobile filter drawer */
.filter-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9999;
    max-height: 80vh;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}
.filter-drawer.filter-drawer-open {
    transform: translateY(0);
}

.filter-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.filter-drawer-close {
    font-size: 28px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0 5px;
}
.filter-drawer-close:hover {
    color: #333;
}

.filter-drawer-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 120px);
}

.filter-drawer-footer {
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.filter-drawer-apply {
    background: #e7c028;
    color: #fff;
    padding: 8px 24px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}
.filter-drawer-apply:hover {
    background: #d4ac1c;
}

/* Loading state transition for AJAX grid updates */
#event-grid-container {
    transition: opacity 0.2s ease;
}

/* ════════════════════════════════════════════════════════════════════════
   Browser Publisher Parity (2026-04-26)
   Brings browser publisher canvas onto feature parity with iOS / Android
   publishers. Five additions, all scoped to encoder.blade.php targets.
   ════════════════════════════════════════════════════════════════════════ */

/* (Chip A) Canvas border — default red (pre-live), override green when
   .canvas-live is applied. Default-red architecture is defensive: even if
   any code path strips other classes, the red border remains as the floor
   state. Only the LIVE state needs an explicit override. */
#publish-video-container {
    box-sizing: border-box;
    border: 4px solid #ff3b30;            /* default red — pre-live */

    /* ⭐ SELF-TILE CHROME MUST NOT PAINT OVER CONTENT (Event 2644).
       #view-toggle-btn and #view-mode-label are `position:absolute; z-index:50`
       inside the local-self tile. Their only positioned ancestor is
       `.publisher-canvas-div { position: relative }`, which does NOT create a
       stacking context — so that z-index:50 escaped all the way out and beat
       the sibling #publish-question-container, which has z-index auto.

       With 3 or 4 Hosts that is a guaranteed collision, not a chance one: the
       PIP is anchored dead-centre (`.join_user_3/4` = top/left 50%, translate
       -50%), and a bottom-row tile's `top: 8px` chrome lands exactly there. On
       Event 2644 the "Audience View" label sat on top of the Video Question
       PIP — measured in the lab at 112 × 21 px of overlap, with
       elementFromPoint returning the LABEL rather than the PIP.

       `isolation: isolate` scopes that z-index inside the Host container. It
       creates a stacking context and CHANGES NO GEOMETRY: label and button
       rects are byte-identical before and after, and the button stays
       hit-reachable because the content layer is pointer-events:none anyway.

       Candidate #4's two states are untouched and were re-proven with this
       rule in place: `hosts-secondary` still paints the Hosts (chrome included)
       ABOVE content, because it carries its own transform + z-index:3; and
       `hosts-below-content` still traps the chrome under content. It is the
       same medicine that rule already used, applied to the base state where
       the collision actually happens. */
    isolation: isolate;
}
#publish-video-container.canvas-live {
    border-color: #8EC53E;                /* Android publisher parity (drawable/background_live_green.xml) */
}

/* (Chip D) PIP locator — 4 red corner brackets + placeholder text drawn at
   the PIP video's anchor (join_user_N rules). Visibility is controlled by
   .pip-hidden-live on #publish-question-container, set in JS by
   setCanvasLiveState alongside the canvas-live class on the sibling
   container. The two surfaces are kept in lockstep via JS, not via brittle
   CSS sibling-selector coupling. */
.pip-locator {
    position: absolute;
    pointer-events: none;
    aspect-ratio: 4 / 3;
}
.join_user_1 .pip-locator,
.join_user_2 .pip-locator,
.join_user_3 .pip-locator,
.join_user_4 .pip-locator {
    width: calc(100% / 3);
    height: calc(100% / 3);
}
.join_user_1 .pip-locator { bottom: 10px; right: 10px; }
.join_user_2 .pip-locator { bottom: 10px; left: 50%; transform: translate(-50%, 0%); }
.join_user_3 .pip-locator,
.join_user_4 .pip-locator { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.pip-corner {
    position: absolute;
    width: 20px;                          /* 20sdp arm length */
    height: 20px;
    border-color: #ff3b30;                /* red — grouped with pre-live border */
    border-style: solid;
}
.pip-corner-tl { top: 0;     left: 0;     border-width: 4px 0 0 4px; }
.pip-corner-tr { top: 0;     right: 0;    border-width: 4px 4px 0 0; }
.pip-corner-bl { bottom: 0;  left: 0;     border-width: 0 0 4px 4px; }
.pip-corner-br { bottom: 0;  right: 0;    border-width: 0 4px 4px 0; }

.pip-placeholder-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background: rgba(0, 0, 0, 0.55);      /* matches .view-mode-label backer */
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

/* PIP locator hidden once the host is live. Class is toggled on
   #publish-question-container (the locator's container) by setCanvasLiveState,
   in lockstep with .canvas-live on #publish-video-container. Decoupled from
   DOM order so it survives any future restructuring. */
#publish-question-container.pip-hidden-live .pip-locator {
    display: none;
}

/* When local preview is in Mirrored mode, swap the 1-host PIP locator anchor
   (bottom-right → bottom-left) so the markers indicate where PIP appears
   relative to the mirrored view of the host. The 2/3/4-host positions are
   centered (no left/right distinction) and don't need swapping. The audience
   compositor still places PIP at the canonical position regardless. */
#encoder_video.preview-mirrored .join_user_1 .pip-locator {
    right: auto;
    left: 10px;
}

/* (Chip B) View toggle button — top-CENTER of local-self tile, mobile icon
   (iOS flip_camera@2x.png copied to public/img/flip_camera.png). Same icon
   used in both modes — the .view-mode-label below is the state indicator. */
.view-toggle-btn {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 36px;
    height: 36px;
    border: 0;
    background-color: transparent;
    background-image: url(../img/flip_camera.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    padding: 0;
}

/* (Chip B item 4) Audience / Mirrored View label — top-right corner of
   local-self tile, matching mobile placement (Android golive XML
   tv_screen_toast layout_constraint{End,Top}_to{End,Top}Of=parent). Label
   text is driven by ::before pseudo content so a single CSS state on
   #encoder_video.preview-mirrored controls everything (button icon, label
   text, video flip override, PIP locator side) — single source of truth. */
.view-mode-label {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 50;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
}
.view-mode-label::before {
    content: "Audience View";
}
#encoder_video.preview-mirrored .view-mode-label::before {
    content: "Mirrored View";
}

/* Default Audience View override. Pip.js's renderFrame loop forcefully adds
   .flip-horizontal to #publisher-video on every tick (Pip.js:142). Rather
   than modify Pip.js, we override the resulting transform when in audience
   mode (no .preview-mirrored class on #encoder_video). The override has
   higher specificity than the .flip-horizontal class rule. The captureStream
   from #publisher-canvas reads via drawImage which ignores CSS transforms —
   the upload remains audience-correct in both modes regardless. */
#encoder_video:not(.preview-mirrored) #publisher-video.flip-horizontal {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}

/* View-mode toast (2026-04-27, corrected) — inside-canvas overlay on
   Audience↔Mirror toggle. Mirrors iOS Common.showToast() output at
   StreamingViewController.swift:5314. Single static element;
   showViewModeToast() updates text + cancels prior timer.
   Position is BELOW the top-center flip-camera button (button bottom edge
   at 44px) so the toast can't collide with the camera toggle / view label. */
.view-mode-toast {
    position: absolute;
    top: 56px;                       /* clears 36px button + 8px margin + 12px buffer */
    left: 50%;
    z-index: 1000;
    width: 90%;
    max-width: 760px;
    min-height: 88px;
    box-sizing: border-box;
    background: rgba(12, 12, 10, 0.94);
    color: #fff;
    border-radius: 44px;             /* large pill / capsule */
    padding: 18px 28px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    font-family: 'lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    display: none;                   /* hidden until shown */
    align-items: center;
    gap: 18px;
    pointer-events: none;
    transform: translate(-50%, -16px);
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.view-mode-toast.visible {
    transform: translate(-50%, 0);
    opacity: 1;
}
.view-mode-toast-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: contain;
    display: block;
    /* Defensive: if the image ever fails to load, hide the alt text so the
       toast layout doesn't show a "StarCam" string in place of the icon.
       The image itself is sized by width/height; alt text rendering is
       suppressed via font-size 0 + transparent color. */
    font-size: 0;
    color: transparent;
    overflow: hidden;
}
.view-mode-toast-text {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 900px) {
    .view-mode-toast {
        top: 56px;
        font-size: 16px;
        padding: 12px 20px;
        border-radius: 36px;
        gap: 14px;
        min-height: 68px;
    }
    .view-mode-toast-icon {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   HOST SECONDARY PRESENTATION + STACKING POLICY (candidate #4, 2026-09-09)

   Supersedes the 2026-09-09 width/height attempt, which was PROVEN to lose the
   cascade: updateCss() writes INLINE `width`/`height` in px on
   #publish-video-container (encoder.blade.php, `w*2` x `w*3/2` from
   #encoder_video.width()/2) and re-runs on every roster change AND on
   window.onresize. A non-!important `width: 35%` can never win against that.
   Measured live on Event 2638: inline `height: 623.25px; width: 831px`.
   Its `position: absolute` DID apply, which is why the container was seen
   full-size and anchored bottom-right rather than reduced.

   MECHANISM: scale the whole Host presentation instead of resizing it.
   - transform is NEVER written by updateCss(), so there is no cascade fight
     and no !important anywhere in this block;
   - transform does not affect layout, so the container keeps its full layout
     box and #encoder_video keeps its height. (A percentage height collapsed
     that parent 825px -> 308px in the artifact lab, because the parent's height
     is driven by this same in-flow child. Nothing here can do that.)
   - the .box{N} 1/2/3/4 Host layouts inside are untouched and keep computing
     against the full box;
   - hit geometry follows the transform, so pointer ownership tracks the
     visible Host presentation;
   - removing the class restores the exact prior presentation, with no
     hide, rebuild or teardown of any Host layout.

   GEOMETRY reproduces the approved mobile publishers exactly. The container is
   already 4:3 (`w*2` x `w*3/2`), so a uniform scale(0.35) yields 35% width and
   35% height at 4:3 -- identical to Android
   set.constrainPercentWidth/Height(0.35f) and to iOS
   `sw = fullCanvas.width / 10 * 3.5; sh = sw / 4 * 3`. The 5px translate is the
   mobile 5dp/5pt inset; it is applied AFTER the scale, so it is 5 real pixels
   and does not shrink with the presentation.

   NOTE ON SCALING: the entire subtree scales, so Host nameplates and the
   publisher controls shrink with the presentation. That is deliberate in this
   candidate -- no counter-scaling machinery -- so the simple whole-container
   result can be judged on pixels first.

   position: relative is REQUIRED, not decorative: z-index applies only to
   positioned elements. transform alone creates a stacking context but still
   paints beneath the later, absolutely-positioned content container, which
   would leave the secondary Host invisible.                                  */
#publish-video-container.hosts-secondary {
    transform: translate(-5px, -5px) scale(0.35);
    transform-origin: 100% 100%;
    position: relative;
    z-index: 3;
}

/* CHECKED + content owns MAIN. The historic natural occlusion is PRESERVED:
   no transform, no resize, no reposition -- the Host container is left exactly
   as it is and the full-screen content simply covers it, which is the
   behaviour that already worked.

   The ONE thing that behaviour never handled is Host child chrome that lifts
   itself out of the container: #view-toggle-btn is `position: absolute;
   z-index: 50; pointer-events: auto`, so it painted AND hit-tested above
   full-screen content regardless of the container's size. isolation: isolate
   creates a stacking context on the container, which scopes that z-index
   inside it, so the chrome can no longer escape above the content. It changes
   no geometry whatsoever.

   isolation alone fixes PAINT order but not HIT ownership on the co-host path:
   #publish-question-container is inline `pointer-events: none`, and
   #play-video-question does not override it, so the whole content layer is
   click-through and every Host surface underneath -- chrome included -- stays
   hit-reachable no matter what the stacking says. Measured on Event 2638: with
   the VQ covering the full canvas, every probe still resolved to a Host
   element. `pointer-events: none` on the container makes the occluded Host
   layer non-interactive for exactly as long as content owns MAIN, so visual
   ownership and pointer ownership agree. It is removed with the class, so
   normal Host interaction returns the instant content releases MAIN.         */
#publish-video-container.hosts-below-content {
    isolation: isolate;
    pointer-events: none;
}