/*CSS DIMA XP V3.42 WITH SLONIK TV PLAYER API V3.4 and Slonik FM Player API V2.3*/
/*Каркас сайта*/

/* ИЗОЛЯЦИЯ ПРАВИЛ BOX-SIZING (только для плеера) */
.slonik-fm, 
.slonik-fm *, 
.slonik-fm *:before, 
.slonik-fm *:after {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

/* ГЛАВНЫЙ КОНТЕЙНЕР ПЛЕЕРА */
.slonik-fm.player-box { 
    width: 320px; 
    margin: px auto; 
    padding: 15px; 
    background: #222 !important; 
    border: 1px solid #444 !important;
    box-shadow: 0 0 20px #000 !important; 
    border-radius: 8px !important;
    line-height: normal !important; /* Сброс межстрочного интервала сайта */
}

/* ЛОГОТИП */
.slonik-fm .logo-container { 
    text-align: center !important; 
    margin-bottom: 15px !important; 
    line-height: 0 !important; 
}
.slonik-fm .main-logo { 
    width: 100% !important; 
    height: auto !important; 
    border-radius: 4px !important; 
    border: 1px solid #333 !important; 
    display: block !important;
}

/* ЭКРАН */
.slonik-fm .screen { 
    background: #050505 !important; 
    color: #00ffcc !important; 
    padding: 10px !important; 
    border: 1px solid #00ffcc !important; 
    margin-bottom: 15px !important;
    box-shadow: inset 0 0 10px #004433 !important;
    overflow: hidden !important;
    text-align: left !important;
}
.slonik-fm .screen-info { 
    font-family: "Lucida Console", "Courier New", monospace !important; 
    font-size: 11px !important; 
    margin-top: 5px !important; 
}

/* ВИЗУАЛИЗАТОР */
.slonik-fm .viz-container { 
    height: 20px !important; 
    overflow: hidden !important; 
    white-space: nowrap !important; 
    border-bottom: 1px solid #111 !important;
    margin-bottom: 5px !important;
    font-size: 0 !important;
}
.slonik-fm .bar { 
    display: inline-block !important; 
    width: 5px !important; 
    margin-right: 1px !important; 
    background: #00ffcc !important; 
    vertical-align: bottom !important; 
}

/* КНОПКИ УПРАВЛЕНИЯ */
.slonik-fm .controls { 
    text-align: center !important; 
    margin: 15px 0 !important;
    letter-spacing: -1em !important; /* Схлопывание пробелов для FF6 */
}

.slonik-fm .glow-btn { 
    display: inline-block !important;
    letter-spacing: normal !important; 
    background: #333 !important; 
    border: 1px solid #00ffcc !important; 
    color: #00ffcc !important;
    padding: 7px 10px !important; 
    margin: 2px !important; 
    cursor: pointer !important; 
    font-size: 11px !important; 
    font-weight: bold !important; 
    border-radius: 3px !important; 
    vertical-align: middle !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    -webkit-transition: all 0.2s !important;
    -moz-transition: all 0.2s !important;
    transition: all 0.2s !important;
}

/* Хак для Firefox 6 */
@-moz-document url-prefix() {
    .slonik-fm .glow-btn {
        padding: 7px 6px !important;
        font-size: 10px !important;
    }
}

.slonik-fm .glow-btn:hover { 
    background: #00ffcc !important; 
    color: #000 !important; 
    box-shadow: 0 0 10px #00ffcc !important; 
}

.slonik-fm .glow-btn:active { 
    -webkit-transform: scale(0.95) !important;
    -moz-transform: scale(0.95) !important;
    transform: scale(0.95) !important; 
}

/* ПОЛЗУНКИ (СЛАЙДЕРЫ) */
.slonik-fm .slider-section { 
    padding: 10px 5px !important; 
    color: #eee !important;
}
.slonik-fm .bar-bg { 
    width: 100% !important; 
    height: 6px !important; 
    background: #333 !important; 
    position: relative !important; 
    border-radius: 3px !important; 
    cursor: pointer !important; 
    border: 1px solid #444 !important;
}
.slonik-fm .handle { 
    width: 14px !important; 
    height: 14px !important; 
    background: #00ffcc !important; 
    position: absolute !important; 
    top: -5px !important; 
    border-radius: 50% !important;
    box-shadow: 0 0 8px #00ffcc !important; 
    z-index: 50 !important;
}

/* Громкость */
.slonik-fm .volume-box { font-size: 10px !important; color: #666 !important; }
.slonik-fm .vol-bar-width { 
    width: 160px !important; 
    display: inline-block !important; 
    vertical-align: middle !important; 
    margin-left: 10px !important; 
}

/* ПЛЕЙЛИСТ */
.slonik-fm #playlist-view { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 15px 0 0 0 !important; 
    background: #111 !important; 
    height: 110px !important; 
    overflow-y: auto !important; 
    border: 1px solid #333 !important;
}
.slonik-fm #playlist-view li { 
    padding: 8px 10px !important; 
    border-bottom: 1px solid #222 !important; 
    font-size: 11px !important; 
    color: #888 !important; 
    cursor: pointer !important;
    margin: 0 !important;
}
.slonik-fm #playlist-view li:hover { 
    color: #00ffcc !important; 
    background: #1a1a1a !important; 
}
.slonik-fm #playlist-view li.active { 
    color: #fff !important; 
    background: #004433 !important; 
    border-left: 4px solid #00ffcc !important; 
}

/* МОДАЛКА */
.modal-overlay { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); 
    z-index: 999; 
}

.modal-content { 
    position: absolute; 
    top: 50%; left: 50%; 
    width: 260px; 
    padding: 20px; 
    text-align: center; 
    background: #222; 
    border: 2px solid #00ffcc; 
    box-shadow: 0 0 30px #00ffcc;
    margin-left: -130px; 
    margin-top: -100px; 
}

.modal-content h2 { color: #00ffcc; font-size: 16px; margin: 0 0 10px 0; }
.modal-content p { font-size: 11px; color: #ccc; }


/*SLONIK TV PLAYER API V3.4 BY DIMA XP*/

/* Изолированный сброс только для плеера и его детей */
.player-wrapper, 
.player-wrapper *, 
.player-wrapper *:before, 
.player-wrapper *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Настройки шрифта только для контейнера плеера */
.player-wrapper {
    width: 850px; 
    margin: 40px auto; 
    background: #222; 
    border: 1px solid #444; 
    position: relative; 
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: #fff;
    line-height: normal; /* Чтобы не наследовались межстрочные интервалы сайта */
}


.player-wrapper { width: 850px; margin: 30px auto; background: #222; border: 1px solid #444; border-radius: 10px; overflow: hidden; position: relative; }
.playlist-sidebar { float: left; width: 220px; height: 480px; background: #1a1a1a; border-right: 1px solid #333; overflow-y: auto; }
.video-area { float: left; width: 628px; height: 480px; background: #000; position: relative; }
#myVideo { width: 100%; height: 380px; display: block; background: #000; }


/* РЕЖИМ БЕЗ ПЛЕЙЛИСТА */
/* Скрываем сам список */
.player-wrapper.no-playlist .playlist-sidebar {
    display: none !important;
}

/* Растягиваем видео-зону на всю ширину (850px вместо 628px) */
.player-wrapper.no-playlist .video-area {
    width: 100% !important;
    float: none !important;
}

/* Фикс для кнопок: теперь места больше, можно чуть раздвинуть кнопки */
.player-wrapper.no-playlist .btns-center {
    width: 400px; /* Увеличиваем центральную часть для красоты */
}


/* ПАНЕЛЬ УПРАВЛЕНИЯ */
.controls-panel { height: 100px; background: #111; padding: 10px 15px; border-top: 1px solid #222; }

/* Ползунок перемотки (Этаж 1) */
.seek-row { height: 25px; width: 100%; display: block; clear: both; padding-top: 5px; }

/* Кнопки (Этаж 2) */
.buttons-row { height: 50px; width: 100%; margin-top: 10px; display: block; clear: both; }

.btns-left { float: left; width: 150px; text-align: left; }
.btns-center { float: left; width: 150px; text-align: center; line-height: 34px; }
.btns-right { float: right; width: 200px; text-align: right; }

/* Слайдеры */
.custom-slider { position: relative; height: 8px; background: #333; cursor: pointer; border-radius: 4px; width: 100%; }
.vol-slider { display: inline-block; width: 80px; vertical-align: middle; }
.slider-fill { position: absolute; top: 0; left: 0; height: 100%; background: #098a04; border-radius: 4px; transition: width 0.1s; }
.slider-handle { position: absolute; top: -4px; width: 16px; height: 16px; background: #fff; border-radius: 50%; margin-left: -8px; box-shadow: 0 2px 4px #000; z-index: 10; }

/* Кнопки */
.btn { background: #3a3a3a; border: none; color: #fff; padding: 8px 12px; cursor: pointer; border-radius: 5px; vertical-align: middle; transition: 0.2s; outline: none; }
.btn:hover { background: #575757; }
.btn-main { background: #098a04; width: 45px; font-weight: bold; }
.vol-label { font-size: 15px; color: #ffffff; margin-right: 5px; }

/* Плейлист контент */
.sidebar-header { padding: 15px; background: #333; font-weight: bold; border-bottom: 1px solid #444; font-size: 12px; color: #fff; }
#playlist { background: #292929; color: #fff; border-radius: 5px;}
#playlist li { padding: 15px; cursor: pointer; border-bottom: 1px solid #2a2a2a; color: #ccc; font-size: 13px; }
#playlist li.active { background: #087e04; color: #fff; border-radius: 5px;}

/* Модалка и Fullscreen */
.video-modal { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 100; padding: 40px; color: #fff; }
.close-modal { float: right; font-size: 30px; cursor: pointer; color: #098a04; }

.full-screen-active { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 99999 !important; background: #000; margin: 0 !important; }
.full-screen-active .playlist-sidebar { width: 20% !important; height: 100% !important; }
.full-screen-active .video-area { width: 80% !important; height: 100% !important; }
.full-screen-active #myVideo { height: calc(100% - 100px) !important; }

.buttons-row:after, .player-wrapper:after { content: ""; display: table; clear: both; }

/* Cтиль для кнопки Play */
.btn-play-highlight {
    background: #098a04 !important; /* Ярко-оранжевый */
    color: #000 !important;        /* Черная иконка для контраста */
    
    box-shadow: 0 0 1px #0bbb05;
}

.btn-play-highlight:hover {
    background: #0bbb05 !important; border-radius: 5px;
    transform: scale(1.10); /* Чуть большее увеличение при наведении */
}

.btn-play-highlight:active {
    background: #2cff25 !important;
    transform: scale(0.95);
}

/*Плейлист*/

/* Базовый стиль элемента плейлиста */
.player-wrapper #playlist li {
    display: block !important; /* Вместо list-item, чтобы не было места под точку */
    list-style: none !important;
    list-style-type: none !important;
    padding: 15px 15px 15px 20px;
    cursor: pointer;
    border-bottom: 1px solid #2a2a2a;
    color: #ccc;
    font-size: 13px;
    position: relative;
    transition: all 0.2s ease;
}

/* Эффект при наведении */
#playlist li:hover { 
    background: #333; 
    color: #fff;
    padding-left: 25px; /* Легкое смещение текста вправо */
}

/* Синяя полоска слева при наведении */
#playlist li:hover:before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 4px; height: 100%;
    background: #087e04;
}

/* Стиль для активного видео (уже играет) */
#playlist li.active { 
    background: #087e04 !important; 
    color: #fff !important; 
    font-weight: bold;
    padding-left: 20px; /* Возвращаем отступ */
}

/* Убираем полоску у активного, так как он и так весь синий */
#playlist li.active:before { display: none; }

/* Базовые настройки для иконок */
.player-wrapper i {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 14px;
    height: 14px;
}

/* PLAY - Классический треугольник */
.icon-play {
    width: 0 !important; height: 0 !important;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #000; /* Черный на оранжевом фоне */
    margin-left: 2px;
}

/* PAUSE - Две вертикальные черты */
.icon-pause:before, .icon-pause:after {
    content: "";
    position: absolute;
    top: 1px;
    width: 4px; height: 12px;
    background: #fff;
}
.icon-pause:before { left: 2px; }
.icon-pause:after { right: 2px; }

/* PREV (⏮) - Вертикальная черта + треугольник влево */
.icon-prev:before {
    content: "";
    position: absolute;
    left: 0; top: 1px;
    width: 2px; height: 12px;
    background: #fff;
}
.icon-prev:after {
    content: "";
    position: absolute;
    left: 3px; top: 1px;
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 9px solid #fff;
}

/* NEXT (⏭) - Треугольник вправо + вертикальная черта */
.icon-next:before {
    content: "";
    position: absolute;
    right: 3px; top: 1px;
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #fff;
}
.icon-next:after {
    content: "";
    position: absolute;
    right: 0; top: 1px;
    width: 2px; height: 12px;
    background: #fff;
}

/* FULLSCREEN (⛶) - Уголки рамки */
.icon-fs {
    border: 2px solid #fff;
    width: 14px !important;
    height: 12px !important;
}



/* Сайт DIMA XP */


/* Анимация кнопок на сайте */

@keyframes top-menu {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
		transform: scale(1);
	}

	100% {
		box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.35);
		transform: scale(1.1);
	}
}

@keyframes content {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
		transform: scale(1);
	}

	100% {
		box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.35);
		transform: scale(1.1);
	}
}
body {padding:0px; margin:0; background:lch(0% 0 0); font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:1100px; min-height:100px; margin:0 auto; padding:20px 20px 20px 20px; background: #0a0a0a;}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}

/*Шапка сайта*/
li.none-bg {background:none!important; }

/*Верхнее меню сайта*/
#top-menu { width:960px; height:84px 0 0 0; } 
.bg-1 {border-radius: 16px; border: 20px; 
outline-offset: 8px;  box-shadow:0 #1a1a1a; background:#1a1a1a; filter: blur(0px);
 width:1089px; height:60px;  background:#1a1a1a url();  padding:0 0 0 10px;}
.bg-2 {width:980px; height:7px; margin:0 auto;} 
.bg-1 ul {margin:0; padding:8px 0px 0px 10px; list-style:none;}
.bg-1 ul li {float:left; background: #1a1a1a; padding:0px 10px 0px 0px;}
.bg-1 ul li a {display:block; height:15px; padding:14px 24px 15px 24px; color:#c9c9c9; 
	text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {border-radius: 9px; border: 20px; 
outline-offset: 0px; box-shadow: 0px 0px 0px 6px #0f0e0e;  color:#ffffff; background:#0f0e0e; 
animation: top-menu 20ms ease-in 0s 1 normal forwards;} /*кнопки


/* Кнопка (Зеленая)*/
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color:  #03661e;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease;
  border: none; /* Если нужно убрать рамку */
}

/* Эффект при наведении */
.button:hover {
  background-color: #09922b;
}

/* Кнопка маленькая (Зеленая)*/
.button1 {
  display: inline-block;
  padding: 5px 20px;
  background-color:  #03661e;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease;
  border: none; /* Если нужно убрать рамку */
}

/* Эффект при наведении */
.button1:hover {
  background-color: #09922b;
}

/* Кнопка (Голубая) */
.button2 {
  display: inline-block;
  padding: 10px 20px;
  background-color:   #014fa3;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease;
  border: none; /* Если нужно убрать рамку */
}

/* Эффект при наведении */
.button2:hover {
  background-color: #016de0;
}

/* Кнопка маленькая (Оранжевая) */
.button3 {
  display: inline-block;
  padding: 5px 20px;
  background-color: #df8600;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease;
  border: none; /* Если нужно убрать рамку */
}

/* Эффект при наведении */
.button3:hover {
  background-color:   #ff9c00;
}

/* Кнопка маленькая (Красная) */
.button4 {
  display: inline-block;
  padding: 5px 20px;
  background-color: #b00303  ;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease;
  border: none; /* Если нужно убрать рамку */
}

/* Эффект при наведении */
.button4:hover {
  background-color: #b40202;
}

/* Кнопка (Оранжевая) */
.button5 {
  display: inline-block;
  padding: 10px 20px;
  background-color: #df8600;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease;
  border: none; /* Если нужно убрать рамку */
}

/* Эффект при наведении */
.button5:hover {
  background-color:   #ff9c00;
}

/* Кнопка (Красная) */
.button6 {
  display: inline-block;
  padding: 10px 20px;
  background-color: #b00303  ;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease;
  border: none; /* Если нужно убрать рамку */
}

/* Эффект при наведении */
.button6:hover {
  background-color: #b40202;
}

/* Кнопка маленькая (Голубая) */
.button7 {
  display: inline-block;
  padding: 5px 20px;
  background-color:   #014fa3;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease;
  border: none; /* Если нужно убрать рамку */
}

/* Эффект при наведении */
.button7:hover {
  background-color: #016de0;
}

/*Контент*/

#content {width:980px; padding:15px 0px 0 0; background-color: hsl(0, 0%, 4%);}
.right {color:#ffffff; float:right; width:680px; padding:0px 0 0 20px; text-align:justify;}
.right h1 {text-transform:uppercase; color:#fff; font-weight:normal; margin-top:0;}
.left {width:250px; float:left;}

/* Левое меню */

.left ul {border-radius: 16px; background:#1a1a1a;
outline-offset: 0px; box-shadow: 0px 0px 0px 0px #1a1a1a; margin: 0px; 
padding:12px 0px 12px 14px; box-sizing: border-box; width: 275px; 
background-clip: padding-box; list-style:none;}
.left ul li a {display:block; width:240px; color:#c0c0c0; 
	text-decoration:none; padding:10px 5px 10px 10px; box-sizing: border-box;}
.left ul li a:hover {border-radius: 7px; border: 0px;
outline-offset: 0px; box-shadow: 10px 0px 0px 10px #1d1c1c; 
background:#0f0e0e url() no-repeat 15px 8px; color:#ffffff; 
animation: content 20ms ease-in 0s 1 normal forwards;}
li.none-bg {background:none!important;}



/*Подвал*/

.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {width:1100px; text-transform:uppercase; color:#ffffff;  margin-top:50px; border-radius: 4px; box-shadow: 0 0 0 4px #1a1a1a;}
.yellow {width:1100px; height:3px; margin:0 auto; background:#1a1a1a;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:3px; padding:15px 0 0 0;}