/* Shared header, player, Cast controls and store badges for every migrated country.
   Edit and upload only www/css/header.css for header styling changes. */
/* Initial shared rules from index.css; maintain header styles in this file. */
@media screen {
#search-box {
	bottom: 26px;
}
}

/* Initial shared rules from global.css; maintain header styles in this file. */
@media screen {
#search-box {
	position:absolute;
	bottom: 16px;
	right: 10px;
	height:16px;
	width: 150px;
}
.input-field {
	width:100%;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 0px;
	padding:5px;
}
.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}
#header {
	min-width:840px;
	width:100%;
	margin:0px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:1px solid #cccccc;
	border-bottom: 2px solid #999;
	background: #336699; /* Old browsers */
	background: -moz-linear-gradient(top,  #336699 35%, #003366 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,#336699), color-stop(99%,#003366)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #336699 35%,#003366 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #336699 35%,#003366 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #336699 35%,#003366 99%); /* IE10+ */
	background: linear-gradient(to bottom,  #336699 35%,#003366 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#336699', endColorstr='#003366',GradientType=0 ); /* IE6-9 */
}
#header_wrapper {
	width:840px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}
#header_app {
	position:absolute;
	top:40px;
	right:70px;
}
#header_social {
	position:absolute;
	top:15px;
	right:5px;
}
#header_cast_ready {
	position:absolute;
	left:30px;
	top:90px;
}
#header_cast {
	position:absolute;
	top:127px;
	right:165px;
}
#header_plusone {
	position:absolute;
	top:90px;
	right:10px;
}
#header_table {
	width:840px;
	margin-left: auto;
	margin-right: auto;
	/*background:#009;*/
}
#header_logo {
	position:relative;
	text-align:left;
}
#header_logo img {
	width:331px;
	height:50px;
}
#header_logo_text {
	position:absolute;
	left:0px;
	top:50px;
	
	font-size:11px;
	font-style:inherit;
	margin:0px;
	color:#EEE;
}
#header_advertise {
	text-align:right;
}
#header_player_container {
	position:relative;
	width:410px;
	height:70px;
	margin-top: 10px;
	padding:5px;
	padding-left:10px;
	padding-right:10px;
	border:2px solid #FFF;
	background: #d8d8d8; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q4ZDhkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #d8d8d8 0%, #aaaaaa 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#aaaaaa)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d8d8d8 0%,#aaaaaa 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d8d8d8 0%,#aaaaaa 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d8d8d8 0%,#aaaaaa 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #d8d8d8 0%,#aaaaaa 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#aaaaaa',GradientType=0 ); /* IE6-8 */
}
#header_player_logo {
	position:absolute;
	top:5px;
	left:10px;
	width:96px;
	height:66px;
	border: 1px solid #036;
	/*background:#096;*/
}
#header_span {
	position:absolute;
	top:15px;
	left:0px;
}
#header_player {
	position:absolute;
	top:8px;
	right:10px;
	/*background:#63C;*/
}
.header_mediaplayer {
	width:300px;
	height:62px;
}
#volumeSlider {
	position:absolute;
	left: 130px;
	top:25px;
	height:10px;
	width:150px;
}
#playPause {
	cursor: pointer;
}
#header_links {
	width:100%;
	margin:0px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:1px solid #cccccc;
	border-bottom: 2px solid #999;
	background: #336699; /* Old browsers */
	background: -moz-linear-gradient(top,  #336699 35%, #003366 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,#336699), color-stop(99%,#003366)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #336699 35%,#003366 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #336699 35%,#003366 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #336699 35%,#003366 99%); /* IE10+ */
	background: linear-gradient(to bottom,  #336699 35%,#003366 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#336699', endColorstr='#003366',GradientType=0 ); /* IE6-9 */
}
#header_contact {
	width:100%;
	margin:0px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:1px solid #cccccc;
	border-bottom: 2px solid #999;
	background: #336699; /* Old browsers */
	background: -moz-linear-gradient(top,  #336699 35%, #003366 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,#336699), color-stop(99%,#003366)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #336699 35%,#003366 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #336699 35%,#003366 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #336699 35%,#003366 99%); /* IE10+ */
	background: linear-gradient(to bottom,  #336699 35%,#003366 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#336699', endColorstr='#003366',GradientType=0 ); /* IE6-9 */
}
.img_app {
	border:0;
}
a.social_button {
	border:0;
	margin-right: 5px;
	opacity: .8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
}
a.social_button:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}
#nowplaying {
	text-align:center;
}
.fb,
.youtube { display: inline-block; background: url('https://www.radioonline.fm/images/other/sprite-other.png?v=1') no-repeat; background-image: image-set(url('https://www.radioonline.fm/images/other/sprite-other.webp?v=93a17ddde589') type('image/webp'), url('https://www.radioonline.fm/images/other/sprite-other.png?v=1') type('image/png')); overflow: hidden; text-indent: -9999px; text-align: left; }
.fb { background-position: -1px -215px; width: 40px; height: 40px; }
.youtube { background-position: -42px -256px; width: 40px; height: 40px; }
}

/* Initial shared rules from player.css; maintain header styles in this file. */
#header_player .radio-media {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.radio-toggle {
    position: absolute;
    left: 60px;
    top: 2px;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    background: transparent url('https://www.radioonline.fm/images/other/sprite-other.png') -62px -154px no-repeat; background-image: image-set(url('https://www.radioonline.fm/images/other/sprite-other.webp?v=93a17ddde589') type('image/webp'), url('https://www.radioonline.fm/images/other/sprite-other.png') type('image/png'));
    cursor: pointer;
}
.radio-toggle.is-playing { background-position: -62px -93px; }
.radio-toggle:hover { background-position: -1px -154px; }
.radio-toggle.is-playing:hover { background-position: -1px -93px; }
.radio-toggle:focus-visible { outline: 3px solid #036; outline-offset: 2px; border-radius: 50%; }
.radio-toggle:disabled { opacity: .5; cursor: default; }
#header_player .radio-toggle.is-error {
    left: 0;
    top: 0;
    width: 100%;
    height: 36px;
    border-radius: 8px;
    background: #174e7d;
    color: #fff;
    font: bold 13px Arial, sans-serif;
}
#header_player .radio-toggle.is-error:hover { background: #103958; }
#header_player[data-player-state="error"] .radio-volume { display: none; }
#header_player[data-player-state="error"] .radio-status { left: 0; width: 100%; }
#header_player .radio-volume {
    --volume: 80%;
    position: absolute;
    left: 130px;
    top: 14px;
    width: 150px;
    height: 30px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    border-radius: 16px;
}
#header_player .radio-volume::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, #397dc3 0%, #397dc3 var(--volume), #e1e7ee var(--volume), #e1e7ee 100%);
    box-shadow: inset 0 1px 2px rgb(15 40 65 / 16%);
}
#header_player .radio-volume::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: #e1e7ee;
    box-shadow: inset 0 1px 2px rgb(15 40 65 / 16%);
}
#header_player .radio-volume::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: #397dc3;
}
#header_player .radio-volume::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 3px solid #397dc3;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgb(15 40 65 / 25%);
    transition: transform .15s ease, box-shadow .15s ease;
}
#header_player .radio-volume::-moz-range-thumb {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 3px solid #397dc3;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgb(15 40 65 / 25%);
    transition: transform .15s ease, box-shadow .15s ease;
}
#header_player .radio-volume:hover::-webkit-slider-thumb,
#header_player .radio-volume:active::-webkit-slider-thumb { transform: scale(1.1); box-shadow: 0 0 0 4px rgb(57 125 195 / 15%); }
#header_player .radio-volume:hover::-moz-range-thumb,
#header_player .radio-volume:active::-moz-range-thumb { transform: scale(1.1); box-shadow: 0 0 0 4px rgb(57 125 195 / 15%); }
#header_player .radio-volume:focus-visible { outline: 2px solid #397dc3; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
#header_player .radio-volume::-webkit-slider-thumb { transition: none; }
#header_player .radio-volume::-moz-range-thumb { transition: none; }
}
.radio-status {
    position: absolute;
    left: 130px;
    top: 41px;
    width: 170px;
    color: #17354f;
    font-size: 11px;
    line-height: 13px;
}
.radio-popup-link { position: absolute; left: 130px; top: 0; font-size: 12px; }

/* Initial shared rules from responsive.css; maintain header styles in this file. */
html { scroll-padding-top: 230px; }
#header { min-width: 0; }
#header { z-index: 30; padding: 10px 0 6px; }
#header_wrapper {
    width: calc(100% - 24px);
    max-width: 900px;
    box-sizing: border-box;
}
#header_wrapper { display: grid; gap: 8px; }
.header-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-width: 0; }
#header_logo { min-width: 0; }
#header_logo img { display: block; max-width: 100%; height: auto; }
#header_logo_text { position: static; margin-top: 2px; }
#header_social { position: static; display: flex; align-items: center; flex-shrink: 0; }
.header-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    align-items: center;
    gap: 10px;
}
#header_cast,
#search-box { position: static; }
#header_cast { width: 32px; height: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
#header_cast a,
#header_cast > button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 44px; min-width: 32px; flex-shrink: 0; padding: 0; border: 0; margin: 0; line-height: 0; }
#header_cast img { width: 32px; height: 32px; max-width: 32px; flex-shrink: 0; object-fit: contain; }
#header_cast a { position: relative; }
#header_cast .cast-connecting-waves { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; color: #fff; pointer-events: none; }
#header_cast[data-cast-state="connecting"] img { opacity: 0; }
#header_cast[data-cast-state="connecting"] .cast-connecting-waves { display: block; }
#header_cast .cast-frame { opacity: .7; }
#header_cast .cast-signal { opacity: .2; animation: cast-signal-wave 1.5s ease-in-out infinite; }
#header_cast .cast-signal-2 { animation-delay: .2s; }
#header_cast .cast-signal-3 { animation-delay: .4s; }
@keyframes cast-signal-wave { 0%, 30% { opacity: 1; } 65%, 100% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
#header_cast .cast-signal { animation: none; opacity: .8; }
}
#search-box { width: auto; height: auto; min-width: 0; }
#search-box .input-field { box-sizing: border-box; width: 100%; min-height: 44px; border-radius: 8px; padding: 10px 12px; font-size: 16px; }
#search-box .input-field:focus-visible { outline: 3px solid #9dc7f1; outline-offset: 2px; }
#nowplaying { height: auto; min-width: 0; }
#nowplaying h1 { line-height: 1.4; overflow-wrap: anywhere; }
#header_player_container {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 86px;
    margin: 0;
    padding: 8px;
}
#header_player_logo { position: relative; inset: auto; width: 96px; height: 66px; }
#header_player_logo img { display: block; width: 96px; height: 66px; object-fit: contain; }
#header_span { left: 4px; right: 4px; top: 14px; font-size: 12px; }
#header_player { position: relative; inset: auto; min-width: 0; width: 100%; height: 66px; }
#header_player .radio-toggle { left: 0; }
#header_player .radio-volume { left: 72px; width: calc(100% - 72px); }
#header_player .radio-status { left: 72px; width: calc(100% - 72px); }
#header_player .radio-popup-link { left: 72px; }
#header_player #cast_volume { position: absolute; left: 62px; top: 24px; width: calc(100% - 66px) !important; }
@media (max-width: 760px) {
html { scroll-padding-top: 260px; }
#header { padding-top: max(8px, env(safe-area-inset-top)); }
#header_wrapper { gap: 8px; }
#header_logo { max-width: 100%; }
#header_logo img { width: 260px; }
#header_logo_text,
#header_social { display: none; }
.header-main { grid-template-columns: minmax(0, 1fr); gap: 8px; }
#header_cast { width: 44px; }
#header_cast a,
#header_cast > button { width: 44px; min-width: 44px; }
#search-box { width: 100%; }
#nowplaying h1 { font-size: 12px; }
}
@media (max-width: 760px) and (max-height: 500px) {
html { scroll-padding-top: 175px; }
#header_logo { display: none; }
.header-top { display: none; }
#nowplaying { display: none; }
.header-main { grid-template-columns: minmax(0, 1fr); }
#search-box { grid-column: 1 / -1; }
}
.google-play-link { display: inline-flex; flex-shrink: 0; line-height: 0; }
.google-play-badge { display: block; width: auto; height: 60px; }
#header_social .google-play-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#header_player_container { max-width: 434px; justify-self: end; }
#header_player_container #header_cast { position: static; width: 44px; height: 44px; }
#header_player_container #header_cast a,
#header_player_container #header_cast > button { width: 44px; min-width: 44px; }
@media (max-width: 760px) {
#header_player_container { max-width: none; justify-self: stretch; }
}
@media (max-width: 760px) {
#header_player_container { grid-template-columns: 72px 60px minmax(36px, 1fr) 44px; gap: 4px 6px; }
#header_player_logo { grid-column: 1; grid-row: 1; width: 72px; height: 50px; }
#header_player_logo img { width: 72px; height: 50px; }
#header_player { display: contents; }
#header_player .radio-toggle { position: relative; inset: auto; grid-column: 2; grid-row: 1; }
#header_player .radio-volume { position: relative; inset: auto; grid-column: 3; grid-row: 1; width: 100%; }
#header_player .radio-status { position: relative; inset: auto; grid-column: 1 / -1; grid-row: 2; width: auto; min-height: 13px; text-align: center; }
#header_player_container #header_cast { grid-column: 4; grid-row: 1; }
#header_player .radio-popup-link { position: relative; inset: auto; grid-column: 2 / 4; grid-row: 2; justify-self: center; }
#header_player[data-player-state="external"] .radio-status { grid-row: 3; }
#header_player .radio-toggle.is-error { grid-column: 2 / 4; }
}