.Header {
    height: 10%;
}

body {
    background-color: rgb(0, 0, 0);
    background-repeat: no-repeat;
    margin: 0;
    height: 100vh;
    
}

/* WebRTS */ 
.MediaBox {
    background-color: black;
    border-radius: 1%;
    margin: 0%;
    height: 100%;
    padding-left: 2%;

}

#millicasttitle {
    color: white;
}

.MainMediaBox {
    background-color: rgb(0, 0, 0);
    float: left;
    width: 70%;
    height: 90%;
    display: flex;

    border: 1px solid gray;
}

.MainMediaBox div {
    color: rgb(233, 233, 233);
    padding: 34%;

}

.SideMediaBox {
    width: 28%;
    height: 80%;
    float: right;
    margin-right: 1%;

    
}

.SidePlayer {
    background-color: rgb(0, 0, 0);
    height: 37%;
    margin-bottom: 1%;

    border: 1px solid gray;
}



/* HLS ------------------------*/

.MediaBoxHLS {
    background-color: black;
    border-radius: 1%;
    margin: 0%;
    height: 100%;
    overflow: hidden;
}

.MainHlsBox {
    background-color: rgb(0, 0, 0);
    height: 60%;
    width: 100%;
    margin: 0% 15% 0% 0%;
    float: left;
    box-sizing: border-box;
    

    border: 1px solid gray;
}

.button {
    height: 32%;
    margin-top: 32%;
}


.SideHlsBox{
    width: 25%;
    height: 90%;

    display: inline-block;
    
}


.SideHlsPlayer{
    background-color: rgb(0, 0, 0);
    height: 28%;
    width: 90%;
    display: flex;
    float: none;
} 

.SideHlsPlayer:hover {
    background-color: rgb(121, 117, 117);
}

.GlowBox {
    background-color: rgb(0, 0, 0);
    padding: 0%;
    width: 100%;
    height: 100%;
}

.Label {
    background-color: rgb(0, 0, 0);
    color: gray; 
    width: 90%; 
    text-align: center;

    border: 1px solid gray;
    box-sizing: border-box;
}

.PurchaseBox {
    float: left;
    width: 14%;
}

.Purchase {
    margin-bottom: 1%;
    background-color: rgb(0, 0, 0);
    font-weight: bold;
    color: rgb(67, 193, 78);
}

.Purchase:hover {
    background-color: rgb(45, 45, 45);
}

.select {
    background-color: rgb(0, 0, 0);
    color: white;
}

@supports (-webkit-touch-callout: none) {

    .MainMediaBox {
        height: 72%;
    }

    .SideHlsBox {
        height: 80%;
        margin-top: -7%;
    }

}


#Avideo::-webkit-media-controls-volume-slider {
display:none;
}

#Avideo::-webkit-media-controls-mute-button {
display:none;
}


#Avideo::-webkit-media-controls-toggle-closed-captions-button {
    -webkit-appearance: media-toggle-closed-captions-button;
    display: flex;
    flex: none;
    border: none;
    box-sizing: border-box;
    width: 100%; /* Set width to 100% */
    height: 100%; /* Set height to 100% */
    line-height: 1; /* Reset line-height */
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    position: absolute; /* Position absolutely within video box */
    top: 0;
    left: 0;
    background-color: transparent; /* Make background transparent */
    color: inherit;
}
#Bvideo::-webkit-media-controls-volume-slider {
display:none;
}

#Bvideo::-webkit-media-controls-mute-button {
display:none;
}

#Cvideo::-webkit-media-controls-volume-slider {
display:none;
}

#Cvideo::-webkit-media-controls-mute-button {
display:none;
}
#Dvideo::-webkit-media-controls-volume-slider {
display:none;
}

#Dvideo::-webkit-media-controls-mute-button {
display:none;
}

#HLSdemo {
    color:white;
}