/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/plugins/radio/css/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 38px !important;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  color:#2196F3; 
}

#play_circle_outline,#pause_circle_outline,#volume_on,#volume_off,#progress_click{
	cursor: pointer;
}
.icons,.volume_up{
	height:40px;
}
.radio_osnova,.radio_korpus{
	width:300px;
	margin:0 auto;
	text-align:center;
       
}

.radio_korpus{
        display:flex;
	overflow:hidden;
	align-items:center;
        justify-content: flex-start !important; 
	height:60px;	
        display: flex;
        align-items: center;
        padding: 0 0 0 5px;
        gap: 4px;
	border-radius:10px;
	background: rgba(219,219,219,1);
	background: -moz-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(211,215,222,1) 50%, rgba(204,204,204,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(219,219,219,1)), color-stop(50%, rgba(211,215,222,1)), color-stop(100%, rgba(204,204,204,1)));
	background: -webkit-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(211,215,222,1) 50%, rgba(204,204,204,1) 100%);
	background: -o-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(211,215,222,1) 50%, rgba(204,204,204,1) 100%);
	background: -ms-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(211,215,222,1) 50%, rgba(204,204,204,1) 100%);
	background: linear-gradient(to bottom, rgba(219,219,219,1) 0%, rgba(211,215,222,1) 50%, rgba(204,204,204,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#cccccc', GradientType=0 );	
}

.timer{
	color:#607D8B;	
	font-family: Arial, sans-serif !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px !important;
    line-height: 1;
    letter-spacing: 1px; 
    white-space: nowrap;
}
.timer .time_h,
.timer .time_m,
.timer .time_s {
     font-family: Arial, sans-serif !important; 
    font-size: 26px !important;
    font-weight: 700; 
    display: inline-block;
    text-align: center;
}

.timer .blick span {
    display: inline-block;
    vertical-align: middle;
    transform: translateY(1px);
    font-size: 18px;
}

#radio_player{
	
}
.radio_korpus *{
	font-size:inherit;	
}
.blick{
	margin-bottom:8px;
}
.volume_zone,.progress{
	border-radius:3px;
      
}
#progress_click,.volume_zone,.progress{
	height:8px;
}
.volume_zone{
	background:#fff;
	position:relative;
	z-index:1;
	margin-left:3px;       
}
.volume_zone,#progress_click{
	width:80px;
}
.progress{
	position:absolute;
	background:#009688;
	z-index:2;
}
#progress_click{
	position:absolute;
	z-index:3;	
}
#volume_reg{
	cursor:pointer;
	position:absolute;
	width:20px;
	height:20px;
	background:#e8eb1e;
	z-index:4;
	border-radius:10px;
	top:-6px;
	left:-10px;
	border:3px solid;
	border-color:#009688;
}

body, .main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
}


/*"Animation" */
.logo-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
  margin: 15px auto;
  overflow: hidden;
}

.logo {
  width: 150px;
  height: auto;
  z-index: 3;
}

.ring {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.7;
  z-index: 1;
  box-shadow: 0 0 6px rgba(0, 150, 255, 0.3);
}

.ring1 {
  width: 170px;
  height: 170px;
  border: 2px solid rgba(0, 150, 255, 0.9);
  animation: pulse1 20s infinite ease-in-out;
  animation-delay:0s;
  box-shadow: 0 0 12px rgba(0, 150, 255, 0.6);
}

.ring2 {
  width: 180px;
  height: 180px;
  border: 2px solid rgba(255, 100, 150, 0.8);
  animation: pulse2 30s infinite ease-in-out;
  animation-delay: 2.5s;
  box-shadow: 0 0 12px rgba(255, 100, 150, 0.5);
}

.ring3 {
  width: 170px;
  height: 170px;
  border: 2px solid rgba(22, 227, 156, 0.9); /* усилил */
  animation: pulse3 40s infinite ease-in-out;
  animation-delay:5s;
  box-shadow: 0 0 12px rgba(100, 255, 200, 0.5);
}

@keyframes pulse1 {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.2; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
}

@keyframes pulse2 {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.35); opacity: 0.2; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
}

@keyframes pulse3 {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.2; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
}