html, body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            height: 100%;
            display: flex;
            flex-direction: column;
			
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
        }
	*{		
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		outline:none!important;
	}
        .videoas {
            display: flex;
            flex-direction: column;
            flex: 1;
			
            height: 100%;
        }
		.marginControl{
			margin:0px 4px;
		}
		.fullscreen #playlist_as{
			display:none;
		}
        #video_as {
            flex: 3;
            width: 100%;
            position: relative;
        }
		#playlist_as {
            flex: 1;
            /*background: #222;*/
            color: #fff;
            display: flex;
            flex-direction: column; 
            height: 100%;
			
			/*overflow: hidden;*/
        }
		#ListMimorry,#ListMimorry *{
			box-sizing: border-box;		
			text-align:center;
		}
		#ListMimorry ul,#ListDub ul{
			list-style:none;
			margin:0px;
			padding:0px; 
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		#ListDub{
			padding:10px;
			position:relative;
			width:100%;
			color:#fff;
			background:#4a0074;
			box-sizing: border-box;
			border-top: 1px solid #a0a0a0;
			border-left: 1px solid #a0a0a0;
			border-right: 1px solid #a0a0a0;
		}
		#ListDub ul{
			margin-left:10px;
			width:150px;
			margin-top:-5px;
			display:inline-block;
			position:absolute;
			z-index:2;
		}
		#ListDub ul:hover:after{
			top:0px;
			transform:rotate(180deg) scale(2,1.8);
			color:#fff;
		}
		#ListDub ul:after{
			content:"^";
			display:block;
			position:absolute;
			right:10px;
			top:10px;
			font-weight:bold;
			color:#000;
			transform:rotate(0deg) scale(2);
		}
		#ListDub ul:hover li:hover{
			background:#4a0074;
			color:#fff;
			cursor:pointer;
		}
		#ListDub ul li.active,#ListDub ul:hover li{
			display:block;
		}
		#ListDub ul li{
			display:none;
			padding:5px;
			color:#000;
			background:#FED000;
		}
		#ListMimorry li.active,#ListMimorry li:hover{
			background:#FED000;
			color:#000;
			transition: background 0.5s, color 0.25s;
		}
		#ListMimorry li{
			cursor:pointer;
			color:#fff;
			background:#4a0074;
			list-style:none;
			display:inline-block;
			width:50%;
			text-align:center;
			padding:10px 5px;
			border: 1px solid #a0a0a0;
		}
		#ListVideos{			
			overflow-y: auto;
			
		}
		.vid{
			height:150px;
			width:100%;
			overflow:hidden;
			position:relative;
			background:#4a0074;
			cursor:pointer;
		}
		.vid:hover img{
			opacity:0.7;
		}
		.vid img{
			width: 100%;
			/*max-height: 100%;*/
			height: 100%;
			transition: opacity 0.5s;
			object-fit: cover;
		}
		.vid.active{
			background:#FED000;
		}
		.vid.active img{
			opacity:0.3;		
		}
		.vid span{
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			color:#fff;
			font-size:20px;
			background:rgba(0,0,0,0.4);
			padding:3px;
		}
		#video_as{
			position:relative;
		}
		.vid li{
			display:inline-block;
			margin-left:8px;
			vertical-align: middle;
		}
		.vid ul{
			
			list-style:none;
			margin:0px;
			padding:0px; 
			list-style-type: none;
			margin: 0;
			padding: 0;
			position:absolute;
			right:10px;
			bottom:5px;
		}
		.vid ul li i{
			text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.97);
		}
		.vid i.viewing{
			background:url('/test/player2/icon-ok.png?a=2') no-repeat center center / cover;
			width:15px;
			height:15px;
			display:inline-block;
			vertical-align: middle;
		}
		.vid i.other_hd:after{			
			content:"HD";
			vertical-align: middle;
			color:#fff;
			display:inline-block;
		}
		.vid i.other_2:after{		
			content:"#2";
			color:#fff;
			vertical-align: middle;
			display:inline-block;			
		}
		#player, #player video,#player_other, #player_other iframe{
			display:block;
			width:100%;
			height:100%;
			margin:0;
			padding:0;
			border:0;
		}
        .video-container {
            width: 100%;
			height:100%;
            text-align: center;
			position:relative;
        }
        video,iframe {
            width: 100%;
			height:100%;
			/*min-height:200px;*/
        }
        .slider {
            width: 100px;
        }
		
		.middle-controll {
			width: 100%;
			height: 100%;
			position: absolute;
			display: flex;
			top: 0px;
			left: 0px;
		}

		.middle-controll > div {
			height: 100%;
			display: flex;
			justify-content: center;   /* по центру горизонталь */
			align-items: center;        /* по центру вертикаль */
		}


		.center-ctl {
			width: 60%;
		}

		.right-ctl {border-radius: 50% 0px 0px 50%;}
		.left-ctl {border-radius: 0px 50% 50% 0px;}
		.right-ctl,.left-ctl {
			width: 20%;
			cursor:pointer;
			background: rgba(0, 0, 0, 0);
			transition: background 0.3s ease;
		}
		.right-ctl.active{
			background: rgba(0, 0, 0, 0.2);
			border-radius: 50% 0px 0px 50%;
		}
		.left-ctl.active{
			background: rgba(0, 0, 0, 0.2);
			border-radius: 0px 50% 50% 0px;
		}
		.left-ctl span,.right-ctl span{
			display:none;
			cursor:pointer;
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
		}
		.left-ctl.active span,.right-ctl.active span{
			display:inline-block;
		}
		.rewind-mirrored {
			transform: scaleX(-1); /* зеркальное отражение */
			display: inline-block; /* нужно, чтобы transform работал корректно */
		}
		
        @media (max-width: 768px) {
            #video_as {
                flex: 1 1 33%;
                height: 33%;
            }

            #playlist_as {
                flex: 1 1 67%;
                height: 67%;
            }
        }

        @media (min-width: 768px) {
            .videoas {
                flex-direction: row;
            }

            #video_as {
                flex: 5;
                height: 100%;
            }

            #playlist_as {
                flex: 2;
                max-width: 300px;
                height: auto;
                overflow-y: auto;
            }

            video {
                height: auto;
            }
        }
		
		/* Стили контролера */
		
		
.video-container{
		font-family: Arial, sans-serif;
		color:#fff;
	}
	
    /* Центральная кнопка Play */
    .overlay-play-btn {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-size: 80px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      padding: 20px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
	  display:none;
	  z-index:100;
    }
    #player.paused .overlay-play-btn, #player.loading .overlay-play-btn {
      display: flex;
      opacity: 1;
      visibility: visible;
    }
	.loading .overlay-play-btn span{	
	  display:none;	
	}
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
	span.loading{	
	  display:none;
      opacity: 0;
      visibility: hidden;
	   animation: spin 3s linear infinite;
	}
	.loading span.loading{		
	  display:inline-block;
      opacity: 1;
      visibility: visible;
	}
    .overlay-play-btn:hover {
      background-color: rgba(0, 0, 0, 0.7);
    }
	
    /* Прогресс-бар */
    .progress-container {
      position: relative;
      height: 4px; 
      width: 100%;
      background: #737373;
      cursor: pointer;
	  margin-bottom:4px;
	  
    }
    .progress {
      position: absolute; 
      left: 0; 
      top: 0;
      height: 4px; 
      width: 0; 
      background: #f00; /* Красная полоса */
    }
    .progress_buf {
      position: absolute; 
      left: 0; 
      top: 0;
      height: 4px; 
      width: 0; 
      background: #c6c6c6; /* Красная полоса */
    }
	
	.drag-btn {
		position: absolute;
		top: 50%;
		transform: translate(0%, -50%);
		/*padding-left: 20px;
		padding-right: 20px;*/
	}
	.drag-btn:hover:before {
		/*background:red;*/
	}
	.drag-btn:before {
		content:" ";
		display:block;
		width: 16px;
		height: 16px;
		background-color: #ffffff;
		/*border: 2px solid #4caf50;*/
		border-radius: 50%;
		cursor: pointer;
		user-select: none;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}
	
	
    .controls {
      position: absolute; 
      bottom: 0; 
      left: 0; 
      right: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.0));
	}
	
    .controls-top {
      background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.0));
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0;
	}
    .controls,.controls-top{
      padding: 8px 4px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
	  box-sizing: border-box;		
	}
	/*
    #player .controls,
	#player .controls-top, #player *{
		cursor:none;
	}
    #player.hover .controls,
	#player.hover .controls-top,#player.hover *{
		cursor:unset;
	}*/
    #player.hover .controls,
	#player.hover .controls-top,
    #player.paused .controls,
    #player.paused .controls-top {
      opacity: 1;
      visibility: visible;
    }
    .control-bar {
      display: flex; 
      align-items: center; 
      justify-content: space-between;
      padding: 6px 8px;
    }
    .left-controls,
    .right-controls {
      display: flex; 
      align-items: center;
	  justify-content: flex-start;
    }
	#player.hover .control-btn{
		cursor: pointer;
	}
    .control-btn {
      background: none; 
      border: none; 
      color: #fff; 
      font-size: 24px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      margin-right: 8px;
      transition: color 0.2s;
	    flex: 0 0 auto; /* запретит кнопке растягиваться */
		width: auto;    /* ширина по содержимому */
	  padding-inline:4px;
    }
    .control-btn:hover {
      color: #ccc;
    }
    .material-icons {
      font-size: 24px; 
      line-height: 1;
    }
	
    .time-display {
      font-size: 14px; 
      color: #fff; 
      margin-right: 10px; 
      user-select: none;
    }
	.volume-container {
      display: flex; 
      align-items: center; 
      margin-right: 8px;
    }
    .volume-slider {
		position: relative;
		width: 80px; 
		margin-left: 4px; 
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		height: 3px;
		background: #737373;
		outline: none;
    }
	#volumeSlider:before {
		content: "";
		background: #fff;
		display: block;
		justify-content: center;
		position: absolute;
		height: 3px;
		left: 0px;
	}
    .volume-slider::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 12px; 
		height: 12px; 
		border-radius: 50%; 
		background: #fff; 
		cursor: pointer;
    }
	.nostated .controls,.nostated .controls-top{
		display:none;
	}
	.control-hq:hover{		
		background: #fed000;
		color: #000;
		text-align: center;
	}
	.control-hq{
		padding: 4px 8px;
		font-weight: bold;
		font-family: system-ui;
		font-style: normal;
		border-radius: 4px;
		background: #4a0074;
		border: 0px;
		color: #fff;
		font-size: 18px;
		cursor: pointer;
		text-align: center;
		text-transform: uppercase;
	}
	 .control-btn-q #mini-q-txt{   
			text-transform: uppercase;
			font-size: 8px;
			position: absolute;
			top: 18px;
			right: 0px;
			background: #fed000;
			display: block;
			border-radius: 4px;
			color: #000;
			padding: 3px;
			font-weight: bold;
	 }	 
	 .control-btn-q {    
		position: relative;
		display: inline-block;
		cursor: pointer;
		background-color: transparent;
		padding: 4px;
		border: none;
		border-radius: 5px;
		color: #fff;
		margin-right:5px;
    }

    .control-btn-q ul {
        position: absolute;
        bottom: 40px;
        right: 0;
        list-style: none;
        padding: 5px 0;
        margin: 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        display: none;
        z-index: 1000;
		color:#000;
    }

    .control-btn-q.active ul {
        display: block;
    }

    .control-btn-q ul li {
        padding: 5px 10px;
        cursor: pointer;
    }

    .control-btn-q ul li:hover {
        background-color: #f0f0f0;
    }

    .control-btn-q .material-icons {
        vertical-align: middle;
    }
	
	/* Базовые медиа-запросы для адаптации */
@media (max-width: 768px) {
    /* Размеры кнопок */
    .control-btn {
        font-size: 20px; /* Уменьшаем размер иконок */
        margin-right: 4px; /* Уменьшаем отступы */
    }

    /* Таймер */
    .time-display {
        font-size: 12px; /* Уменьшаем шрифт таймера */
        margin-right: 5px; /* Уменьшаем отступ */
    }

    /* Слайдер громкости */
    .volume-slider {
        width: 60px; /* Уменьшаем ширину */
    }

    /* Прогресс-бар */
    .progress-container {
        height: 8px; /* Делаем уже */
    }

    .progress, .progress_buf {
        height: 8px; /* Соответствует прогресс-бару */
    }
	.drag-btn:before {		
		width: 20px;
		height: 20px;
	}
    /* Управляющая панель */
    .control-bar {
    }
    .left-controls, .right-controls {
        flex-wrap: wrap; /* Элементы могут занимать несколько строк */
        justify-content: center;
    }
}

/* Адаптация для маленьких экранов (до 480px) */
@media (max-width: 480px) {
    /* Центральная кнопка Play */
    .overlay-play-btn {
        font-size: 60px; /* Уменьшаем размер кнопки */
        padding: 15px; /* Уменьшаем внутренние отступы */
    }

    /* Таймер */
    .time-display {
        display: none; /* Скрываем время для экономии места */
    }

    /* Слайдер громкости */
    .volume-slider {
        display: none; /* Скрываем блок громкости на очень маленьких экранах */
    }

    /* Кнопки управления */
    .control-btn {
        font-size: 18px; /* Ещё меньше */
        margin-right: 4px; /* Сокращаем отступы */
    }

    /* Прогресс-бар */
    .progress-container {
        height: 2px; /* Делаем совсем тонким */
    }

    .progress, .progress_buf {
        height: 2px;
    }

    /* Управляющая панель */
    .controls {
        padding: 4px; /* Уменьшаем внутренние отступы */
    }
}


/* */


#progressContainer.hover::before {
	display:block;
}
#progressContainer::before {
	display:none;
	content: var(--before-content, "123");
	left: var(--before-left, 10px);
	background: #fff;
    bottom: 14px;
    position: absolute;
    color: #000;
    padding: 4px;
    border-radius: 4px;
    font-size: .8em;
    font-family: "BebasBold", sans-serif;
}