html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
}

#youlayer {
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index:2;
    top:0;
}

#loadlayer {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index:3;
    top:0;
}

.nav-link {
    color:white;
}

.background {
    /* background: #7f7fd5; */
    /* fallback for old browsers */
    /* background: -webkit-linear-gradient(to right, #06064aaf, #3d4a61b0, #043c38b0); */
    /* Chrome 10-25, Safari 5.1-6 */
    /* background: linear-gradient(to right, #06064aaf, #3d4a61b0, #043c38b0); */
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-color: #1c1c1c; /* Dark background inspired by navbar/theatre feel */
    background-repeat: no-repeat;
    background-size: cover;
    /* backdrop-filter: blur(3px); /* Optional: remove or keep if desired with solid color */
    width: 100%;
    overscroll-behavior: contain;
}
.watermark {
    z-index:9999;
    position: absolute;
    color:rgba(105,105,105,1);
    font-size: 20px !important;
    top: 80%;
    right: 0%;
}

.ios-overlay {
    z-index:9999;
    position: absolute;
    color:rgba(105,105,105,1);
    font-size: 8px !important;
    pointer-events: none;
    word-spacing: 100px;
    top: -50%;
    height: 100%;
    line-height: 1500% !important;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
  }

.clpr-emre-2 {
    z-index:9999;
    position: absolute;
    top: -100%;
    left: -100%;
    color:rgba(255,255,255,0.05);
    font-size: 40px !important;
    pointer-events: none;
    word-spacing: 100px;
    height: 100%;
    line-height: 500% !important;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
  }

  /*.custom-video-controls {
    z-index: 2147483647;
  }*/

.clpr-emre {
    z-index:9999;

    /* background-color: rgba(205, 211, 220,0.5); */
    font-size:80px;
    position:absolute;
    width: 400px; word-break: break-all; word-wrap: break-word;
    right:20px;
}

.chatBody{
    height: 400px;
    overflow-y: auto
}

.backlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #333333; /* Initial lighter grey background */
    -webkit-transition: background 2s linear;
    -moz-transition: background 2s linear;
    -o-transition: background 2s linear;
    transition: background 2s linear;
}

.background-play {
    background: #000;
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: blur(3px);
    width: 100%;
    overscroll-behavior: contain;
    transition: background-color 1s linear;
}

input:focus {
    outline: none;
}

input:invalid {
    border: 2px solid red;
}

#reloadText {
    line-height: 2em;
}

/* Prevent scrolling on mobile */
.modal {
    overflow-y: hidden !important;
}

.sideview {
    padding-left: 0px !important;
    padding-right: 0px !important; 
}

.tab-content {
    height: 80vh;
}
@media screen and (max-width: 991px) {
    .row.h-100 {
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    .mainContainer {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }
    .sideview:not(.d-none) {
        display: flex !important;
        flex-direction: column;
        min-height: 0;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }
    .tab-content {
        flex-grow: 1;
        height: auto !important;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .tab-pane.active {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    .tabframe {
        flex-grow: 1;
        height: 100% !important;
    }
}