html {background: linear-gradient(to top, #0a586e, #042a35) no-repeat center/cover fixed;}
body {font-size: 16px;line-height: 1.5;font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;color: #1c174d;min-width: 220px;}
h1, h2, h3, h4, h5, h6 {color: #0b475e;min-height: 20px;text-align: center;font-size: 22px;margin: 0 0 10px;}
a {color: #0d45ad;text-decoration: none;font-weight: 500;}
a:hover { opacity: .7; }
ul, ol { list-style: none; }
p { margin: 0 0 10px; }
*, *::before, *::after {padding: 0;margin: 0;box-sizing: border-box;}
.main{flex:1 1 auto;background-color:#fff;padding:0 15px;box-shadow:5px 0 10px 2px rgb(92 109 118)}
.wrapper{min-height:100%;display:flex;overflow:hidden;flex-direction:column}
.header {background: #FFF;box-shadow: 0 0 20px #006170;position:relative;width:100%;z-index:50}
.breadcrumbs {margin: 5px 10px;padding: 5px 10px;}
.breadcrumbs ul {list-style: none; margin: 0;padding: 0;display: flex;flex-wrap: wrap; gap: 6px;  font-size: 14px;}
.breadcrumbs li {display: flex;align-items: center;color: #666;}
.breadcrumbs li a {text-decoration: none;color: #0073e6;transition: color 0.2s;}
.breadcrumbs li a:hover {color: #005bb5;}
.breadcrumbs li:not(:last-child)::after {content: "›";margin-left: 6px;color: #999;}
.blockplayer {display: flex;justify-content: center;align-items: flex-start;margin: 10px 0;padding: 10px;gap: 10px;margin-bottom: 10px;margin-top: 5px;}
.banner3, .banner4 {background-color: #f1f9fa;width: 300px;height: 600px;text-align: center;border-radius: 8px;flex-shrink: 0;margin: 5px 10px 10px 10px;}
.banner-top {background-color: #f1f9fa;width: 728px;height: 100px;text-align: center;border-radius: 8px;margin: auto;}
.ukraine-container {margin-top: 5px;margin-bottom: 5px;color: white;padding: 5px;border-radius: 12px;max-width: 600px;margin: 0 auto;text-align: center;width: 600px;margin: 5px 10px 10px;}
.like-social {display: flex;gap: 15px;flex-wrap: wrap;color: #0b5164;align-items: baseline;justify-content: center;margin: 10px auto;min-height: 45px;width: 100%;height: auto;}
.click {display: flex;gap: 15px;flex-wrap: wrap;align-items: baseline;}
.save .filled {fill: red;display: none;}
.save.saved .filled {display: inline;}
.save .bordered {fill: white;stroke: red;stroke-width: 2.5;}
.save.saved .bordered {display: none;}
.btn{background-color: #FFF;cursor: pointer;font-size: 16px;padding: 3px 10px;}
.btn svg {height: 1.5em;vertical-align: text-top;}
.fav-btn {background: none;border: none;cursor: pointer;padding: 5px;}
.fav-btn svg {width: 24px;height: 24px;fill: #888;transition: fill 0.3s;}
.fav-btn.saved svg .filled {fill: red;}
.fav-btn:not(.saved) svg .filled {fill: transparent;}
.radio-list {display: flex;flex-wrap: wrap;margin: 5px;width: 100%;height: auto;}
.grid {display: flex;}
.station-logo {display: block;margin: 5px;width: 100%;height: auto;}
.player-container {margin: 5px;width: 100%;height: auto;}
#star-rating-block{margin: 0 auto;background: #003544;max-width: 300px;width: 100%;height: auto;justify-content: center;display: grid;margin-bottom: 5px;min-height: 86px;width: 100%;height: auto;}
#star-rating span {font-size: 28px;cursor: pointer;color: #ccc;user-select: none;min-height: 42px;}
#searchResultsContainer {display: flex; flex-wrap: wrap;justify-content: center;gap: 15px; padding: 10px 0;}
#searchResultsContainer img {width: 92px;height: 52px;object-fit: cover;}
img {border: 0;vertical-align: top;height: auto;}
.player-js {width: 150px;margin: 0 auto;margin-bottom: 10px;min-height: 160px;height: 160px;}
.container{display:flex;min-height:55px;margin:0 auto;padding:0 10px;align-items:center;box-shadow: 0 0 0px 0px rgb(92 109 118);background: linear-gradient(to top, #0a586e, #042a35);}
.logoheader{font-size: 28px;font-weight:600;color:#fff;display: flex;align-items: center;gap: 8px;}
.blue-part{color: #3da9fc;font-size: 50%;margin: 6px 0 0 0px;}
.headerH{text-align:center}
.headerH{font-size:200%;font-weight:500;color:#0b5164;margin:0px 0 10px;clear:both;padding: 5px 0px 5px 0px;}
.head{display:flex;flex:1 1 auto;justify-content:flex-end}
.menu-icon{display:flex;gap: 15px;}
.menu-list{text-decoration: none;color: #f4f4f4;font-size: 15px;font-weight: 500;padding: 8px 10px;border-radius: 8px;transition: all 0.2s ease-in-out;}
.menu-list:hover {background: #007c91;color: #fff;box-shadow: 0 2px 6px rgba(0,0,0,0.3);}
.icon-menu,.icon-menu-close{display:none}
.mainfm {margin:0 auto;display: block;flex: 1 1 auto;background-color: #fff;width: 1289px;}
.mainContent {background: #fff;max-width: 1289px;text-align: justify;margin: 0 auto;}
.contenttext{max-width: 950px;margin: 0 auto;padding: 25px 30px;background: #f9f9f9;font-size: 17px;color: #03222d;line-height: 1.7;border-radius: 14px;box-shadow: 3px 4px 15px rgba(0, 0, 0, 0.08);border-left: 6px solid #007c91;min-height: 40px;margin-top: 15px;margin-bottom: 15px;}
.text {padding: 10px;}
.search{max-width:95%;display:flex;margin:0 auto;white-space:nowrap;padding: 0px 30px 0px 0px;width: 800px;}
.searchInput{flex:0 0 95%;height:35px;padding:4px 12px;color: #072442;border-radius:5px 0 0 5px;background: #eaeaea;}
.form-search{flex: 0 0 10%;height: 35px;padding: 0 10px;color: #0f4984;border: none;border-radius: 0px 5px 5px 0;text-transform: uppercase;fill: white;background: linear-gradient(to top, #0a586e, #042a35);border: 1px solid #fff;}
input[type="text"]:focus{border-color:#66afe9;outline:0;box-shadow:0 0 8px rgb(102 175 233 / 60%);position:relative;z-index:1040}
input[type="submit"]{cursor:pointer}
.form-search:hover {background-color: transparent;color: #006170;text-shadow: 0 0 10px #006170, 0 0 20px #006170;border-color: #006170;}
.icon-menu span {background-color: #006170;display: block;width: 30px;height: 3px;margin: 5px 0;transition: 0.3s ease;}
.icon-menu:hover span {background-color: #fff;}
.modal {display: none;position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);overflow: auto;}
.modal-content {background-color: #d3d3d3;padding: 20px;border: 2px solid #006170;border-radius: 10px;margin: 15% auto;width: 90%;max-width: 600px;background: linear-gradient(135deg, #0e86c1, #042f48);}
.modal-content .link-title {color: #fff;}
.close {color: #fff;float: right;font-size: 28px;font-weight: bold;cursor: pointer;}
.close:hover,
.close:focus {color: #006170;cursor: pointer;}
.stations {display: none;margin-bottom: 32px;margin-top: 32px;max-width: 580px;padding: 10px;margin: 5px auto;list-style: none;min-height: 250px;}
.stations.active {display: block;opacity: 1;}
.stations li {text-align: center;}
.stations img {background: #fff;padding: 5px;border-radius: 10px;aspect-ratio: 100 / 70;}
.stations img:hover {border: 1px solid #005483;}
.skeleton {border: 1px solid #b4b5c7;background: #fff;padding: 5px;box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6), -2px -2px 6px rgba(255, 255, 255, 0.05);cursor: pointer;width: 120px;height: 72px;margin: 10px;border-radius: 10px;aspect-ratio: 100 / 70;}
.visually-hidden {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;}
.link-title {display: block;max-width: 118px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin: 0 auto;font-size: 14px;}
.footer {background: #0b1e2d;color: #d6d4d4;padding: 20px;}
.footer-container {display: grid;grid-template-columns: 1.2fr 1fr 1fr;gap: 40px;max-width: 1100px;margin: 0 auto;padding: 20px 0;}
.footer-brand {display: flex;flex-direction: column;gap: 15px;}
.footer-logo svg { display: block; }
.footer-description {font-size: 14px;line-height: 1.5;}
.footer-col h3 {font-size: 16px;margin-bottom: 15px;color: #fff;}
.footer-col ul,
.footer-col ol {list-style: none;padding: 0;margin: 0;text-align: center;}
.footer-col li { margin: 6px 0; }
.footer a {color: #d6d4d4;text-decoration: none;transition: color 0.3s;font-weight: 500;}
.footer a:hover { color: #ffd700; }
.footer-copy {text-align: center;border-top: 1px solid #222;padding-top: 15px;margin-top: 30px;font-size: 14px;}
.footer-copy a { color: #fff; font-weight: bold; }
.contact-container {max-width: 600px;margin: 50px auto;background: #fff;padding: 25px;border-radius: 10px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
form .form-group {margin-bottom: 15px;}
label {font-weight: bold;display: block;margin-bottom: 5px;color: #444;}
input[type="text"],
input[type="email"],
textarea {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 6px;box-sizing: border-box;font-size: 14px;}
textarea {resize: vertical;}
button {background: #007BFF;color: white;border: none;padding: 12px 20px;font-size: 16px;border-radius: 6px;cursor: pointer;transition: background 0.3s;}
button:hover {background: #0056b3;}
.message {text-align: center;margin-bottom: 15px;font-weight: bold;}
.message.error {color: red;}
.message.success {color: green;}
@media screen and (max-width: 1365px){.main{box-shadow:none}}
@media screen and (max-width:991.98px){.main{max-width:100%}}
@media screen and (max-width:767.98px){	
.menu-icon h2{color:#000}
.container{width:100%;position:relative;box-shadow: 0 0 0px 0px rgb(92 109 118);background: linear-gradient(to top, #0a586e, #042a35);}
.container::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;box-shadow: 0 0 0px 0px rgb(92 109 118);background: linear-gradient(to top, #0a586e, #042a35);}
.headerH{line-height: 20px;min-height: 40px;text-align: center;font-size: 22px;margin: 0 0 10px;padding: 10px;}
.search {padding: 0px 0px 10px 0px;width: 60%;}
.form-search {border: none;}
.menu-open{position: fixed;top: -100%;left: 0;width: 100%;height: 100%;overflow: auto;padding: 70px 5px 15px;transition: all 0.3s ease 0s;background: linear-gradient(135deg, #0e86c1, #042f48);}
.header:target{position: fixed}
.header:target .menu-open{top:0;}
.header:target .menu-open::before{content:'';position:fixed;top:0;left:0;width:100%;height:55px;background-color:#D5D8DB}
.menu-icon{flex-direction:column;justify-content:left;align-items:normal}
.menu-icon li{border: solid #d6dfe7;border-width: 0 0 1px;margin: 0 16px;padding: 8px 0;white-space: nowrap;}
.menu-list{white-space:nowrap}
.menu-list span {margin: 0px 0px 0px 10px;padding: 0px 10px;font-weight: 600;font-size: 14px;color: #fff;letter-spacing: 1px;}
.icon-menu,.icon-menu-close{display:flex;position:relative;flex:0 0 30px;height:12px;flex-direction:column;justify-content:space-between;margin:10px 0;z-index:5;width:30px;float:right}
.icon-menu::before,.icon-menu::after{content:'';background-color:#fff;height:1px}
.icon-menu span{height:1px;background-color:#fff}
.icon-menu-close{display:none}
.icon-menu-close::before,
.icon-menu-close::after{content:'';position:relative;top:50%;left:0;background-color:#fff;height:1px}
.icon-menu-close::before{transform:rotate(45deg)}
.icon-menu-close::after{transform:rotate(-45deg)}
.collapse {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip-path: inset(0 0 0 0);white-space: nowrap;border: 0;}
.header:target .icon-menu{display:none}
.header:target .icon-menu-close{display:flex;height:3px;justify-content:flex-end;margin:15px 0}
.logoheader{font-size:150%;position:relative;z-index:5;display:block;float:left;display: flex;align-items: center;gap: 8px;}
.logoheader span{display:inline}
.mainfm {width: 100%;}
.mainContent{max-width:100%;margin-right: 0;padding-right: 0;margin-top: 10px;}
.banner3, .banner4 {width:100%;height: 100px;margin: 5px auto;}
.banner-top {display: none;}
.blockplayer {display: block;}
#searchResultsContainer img {width: 71px;height: 40px;object-fit: cover;}
.skeleton {width: 98px;height: 60px;}
.link-title {max-width: 100px;font-size: 12px;}
.ukraine-container {width: 100%;min-height: 355px;margin: 0 auto;}
.footer {display: flex;padding: 10px 10px;overflow: hidden;flex-direction: column;margin-bottom: 10px;min-height: 35px;min-width: 320px;}
.footer-container {grid-template-columns: 1fr;gap: 20px;text-align: center;margin: 0 auto;padding: 20px 0 20px;}
.footer-brand {align-items: center;}
.footer-description {max-width: 400px;}
}