#loadingIconError{
			display: none;
			width:100%;
			height:100%;
			top:0;
			color:#fff;
			  background: url('../image/warVid.png') repeat;
			 position: absolute;
			 overflow:hidden; 
			 border-radius: 0px;
			 z-index:999;
		}
#loadingIcon{
	z-index:999;
			display: block;
			width:100%;
			height:100%;
			top:0;
			  background-color: rgba(20, 20, 20, 0.5);
			 position: absolute;
			 overflow:hidden; 
			 border-radius: 0px;
		}
#loadingContent {
            position: relative;
            top: 42%;
            left: 47%;
           width:30%;
		   border-radius: 0px;
        }
		#loadingContentError {
            position: relative;
            top: 24%;
		   width:40%;top: 37%; left: 30%;text-align:center;
        }
		#loadingContent img{width:18%; }
		.video-container {
    z-index: 2;
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.video-container:-webkit-full-screen,
.video-container:-moz-full-screen,
.video-container:-ms-fullscreen,
.video-container:fullscreen {
    aspect-ratio: auto;
}

.video-container:-webkit-full-screen video,
.video-container:-moz-full-screen video,
.video-container:-ms-fullscreen video,
.video-container:fullscreen video {
    object-fit: cover;
}
#similit {
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    border-radius: 0;
    overflow: hidden;
}

#akami {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
}
#akamiView {
    z-index: 2;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
}

video {
    width: 100%;
    height: 100%; 
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 12px;
}

.controls {
    position: absolute;
    bottom: 0;
    left: 0;
	z-index:9999;
    right: 0;
    background: linear-gradient(to top, rgba(10, 10, 10, 1), rgba(0, 0, 0, 0));
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    transition: opacity 0.3s;
    width: auto; 
}

.controls > * {
    max-width: 100%;
    box-sizing: border-box;
}


        .video-container:hover .controls {
            opacity: 1;
        }
 #bufferingProgress {
            width: 0px;
			border-radius: 9999px;
            height: 100%;
            background: #ADADAD;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .progress-bar {
            width: 100%;
            height: 5px;
           background: #e2e2e2;
            position: relative;
            cursor: pointer;
            margin-bottom: 10px;
        }

        #progress {
            width: 0px;
            height: 100%;
            background: #42C0FB;
            position: absolute;
            z-index: 2;
        }

        .controls-bottom {
            display: flex;
            align-items: center;
			color:#fff;
            justify-content: space-between;
        }

        .controls-bottom button {
            background: none;
            border: none;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            margin: 0 5px;
        }


        .time {
            font-size: 16px;
            margin: 0 10px;
        }
.icon-button:focus {
            outline: none;
        }
         .inputRange {
            appearance: none;
            height: 5px;
            width: 70%;
            border-radius: 9999px;
            background: linear-gradient(90deg, #ffffff 100%, #ADADAD 100%);
            cursor: pointer;
			position:relative;
			top:-2px;
        }

        .inputRange::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            border-radius: 9999px;
            background: #ffffff;
            box-shadow: none;
        }

        .inputRange::-moz-range-thumb {
            width: 14px; 
            height: 14px;
            border-radius: 9999px;
            background: #ffffff;
            box-shadow: none;
        }

        .fullscreen-btn {
            margin-left: auto;
        }
        
@media (max-width: 768px) {


	.container-video{
		width:100%;
	}
	.video-container {
	position: fixed;
	top:54px;
	left:0px;
	border:0px;
	border-radius: 0px!important;
}

video { 
    
    border-radius: 0px!important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}
#loadingContent {
		   border-radius: 0px;
        }
		#loadingContentError {
		   width:60%;
		   left:21%;
        }
		#loadingContentError h4{
		   color:#ebebeb;
		   font-size:12px;
        }
		.controls {
    border-radius: 0px;
}
}