:root {
  --red-color:#c90019;
  --dark-red:#3d0008;
  --darkblue-color:#001721;
  --dark-color:#1f2225;
  --dark-green:#004e28;
  --green:#46f89e;
  --orange:#ff8400;
  --dark-orange:#402100;
  --aqua:#00baff;
  --dark-aqua: #003447;
}
#content-webplayer {max-width: 450px;margin: 0 auto;}
figure,p {margin: 0;padding: 0;}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {display: block;}
html{font-family: sans-serif;line-height: 1.15;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
button, html [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
[type='submit'], [type='button'] {appearance: none;}
button, select{text-transform:none;}
button, input{overflow:visible;}
button, input, optgroup, select, textarea{font:inherit;margin:0;}
img#main-logo {height: 55px;width: 131px;}
.grid-container{padding-right: 0.75rem;padding-left: 0.75rem;max-width: 82.5rem;margin: 0 auto;}
.webplayer-popup {margin: 17px 0 32px;position: relative;}
.webplayer-popup .player-box-top{display:flex;flex-flow:row;width:100%;align-items:center;}
.webplayer-popup .play {float: left;}
.streamplayer-button {background: none;border: none;-webkit-appearance: none;padding: 0;cursor: pointer;}
.streamplayer-info-state.stopped .pause{opacity: 0;}
.streamplayer-info-state path{transition: opacity .3s;opacity: 1;}
.streamplayer-info-state.stopped .play{opacity: 1;}
.streamplayer-info-state.playing .play, .streamplayer-info-state.loading .play {opacity: 0;}
.webplayer-popup h2{border-bottom: 2px solid #cb0000;padding: 0px 0px 4px; margin: 0 0 7px;}
.webplayer-popup .stream .range .icon-volume-up-2 {float: left;margin-top: 0px;font-size: 21px;}
.webplayer-popup .stream {display:flex;margin: 7px 15px 0;flex-direction: column;}
.webplayer-popup .stream .range {margin-bottom: 0px;display:flex;align-items:center;}
.webplayer-popup .stream .station-wrapper {color: #ccc;display: inline-block;margin-top: 3px;}
.webplayer-popup .stream .station-wrapper span.onair {display: block;font-weight: 700;}
.webplayer-popup .stream .station-wrapper .dj-name {font-weight: 800;font-size: 1.3em;color: #fff;}
.content a {text-decoration: none;font-size: 1.14em;color: #fff;}
.dj-image img{border-radius: 50%;width:90px;height:90px;border-style: none;object-fit: cover;}
.channel_dj {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 120%;
    background-position: bottom;
    left: 0px;
    top: 0px;
	overflow:hidden;border-radius: 7px;
}
.channel_dj::before {
    content: "";
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(20px) brightness(0.6);
    backdrop-filter: blur(20px) brightness(0.6);
    pointer-events: none;
}
.webplayer-popup h2, .webplayer-popup .player-box-top, .webplayer-popup .pozdrohtml{
    position: relative;
    z-index: 2;
}
.module-webplayer-stream-select h3 {font-size: 1.6em;color: #fff;}
.text-upper{text-transform: uppercase;}
.webplayer-streams-wrapper{justify-content: space-between;}
.grid-x{display:grid;grid-template-columns: 1fr 1fr;align-items:center;justify-items:center;column-gap: 5px;row-gap: 5px;}
.webplayer-streams-wrapper>.stream-link.active{box-shadow:inset 0 0 0 2px #fff;background: #000000;}
.webplayer-streams-wrapper>.stream-link:hover{background:#444;}
.webplayer-streams-wrapper>.stream-link {color:#fff;width:100%;font-size:1.2em;font-weight:700;padding:10px;box-sizing:border-box;transition:background-color 300ms;border: 1px solid #fff;}
.popup-button{display:block;position:relative;border:2px solid #fff;text-align:left;padding: 10px 12px 9px;margin-top:20px;width:100%;font-family:inherit;font-size:1.5em;text-transform:uppercase;font-weight:bold;color: #fff;cursor:pointer;background:transparent no-repeat right center;}
.popup-button>.icon-svg{display: inline-block;position: absolute;top: 0;right: 10px;bottom: 0;margin: auto;}
.slucha{text-align: center;z-index: 2;position: absolute;top: 14px;right: 18px;}
.listeners {display: inline;font-size: 1.2em;font-weight: 800;}

.navbar .przyciski{
    border: 0px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.przyciski {border-top: 2px solid #cb0000;padding: 8px 0px 0px 0;margin: 5px 0px 0px 0px;display: flex;align-items: center;justify-content: center;}
.przyciski a{display:grid;grid-template-rows: 1fr 1fr;grid-template-columns: 0.1fr 1fr;background:#000;border:1px solid #aaa;padding:4px 5px;margin:0px 4px;align-items:center;border-radius:6px; &:hover{background:#222;}}
.przyciski i:before{font-size:25px;margin:0px 5px -2px 0px;}
.przyciski i{grid-row-start: 1;grid-column-start: 1;grid-row-end: 3;grid-column-end: 2;}
.przyciski p.small{white-space: nowrap;grid-row-start:1;grid-column-start:2;grid-row-end:2;grid-column-end:3;font:normal 12px/15px Lato, Arial;}
.przyciski p{grid-row-start:2;grid-column-start:2;grid-row-end:3;grid-column-end:3;font: bold 14px/15px Lato, Arial;}
input[type=range] {
	-webkit-appearance: none !important;
    padding: 0;
    margin-left: 4px;
    margin-right: 0;
    display: block;
    background-color: #696969;
    transition: background-color .35s;
    border-radius: 3px;
    height: 7px;
    width: 90px;
    &::-webkit-range-track {
		width: 90px;height: 7px;background-color: #000;transition: background-color .35s;
    }
    &::-webkit-slider-thumb {-webkit-appearance:none;border: #000 solid 2px;background-color: #cb0000;height:20px;width:20px;border-radius: 50%;transition: border-color .35s;margin-top: 0px;
    }
    &:focus {outline: none;}
    &::-moz-range-track {
	   	width: 90px;
	    height: 7px;
	    background-color: #000;
	    transition: background-color.35s;
	    border: none;
	    border-radius: 3px;
    }
    &::-moz-range-thumb {-webkit-appearance: none;border: #000 solid 2px;background-color: #cb0000;height:20px;width:20px;border-radius: 50%;transition: border-color .35s
    }
    &::-moz-focus-outer {border: none;}
    &::-moz-focusring {color:#cb0000;text-shadow: 0 0 0 #000;}
    &.color {
	     &::-ms-thumb {
				background-color: #000 !important;
			}
			&::-webkit-slider-thumb {
				background-color: #000 !important;
			}
			&::-moz-range-thumb {
				background-color: #000 !important;
			}
  }
}
@media screen and (max-width:600px) {
.przyciski a,.przyciski p, .przyciski p.small{font-size:0.9em}
.przyciski i:before {font-size:22px;}
}
@media screen and (max-width:370px) {
.dj-image img {
    width: 70px;
    height: 70px;
}
}