h1, h2, div, input, select {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background-color: #313335;
    font-family: Consolas, monospace;
    overflow: hidden;
}

#info_bar {
    position: fixed;
    left: 0;
    height: 28px;
    width: 100%;
    top: calc(100% - 28px);
    line-height: 28px;
    color: #6897BB;
    margin-left: 15px;
}

#headline {
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    line-height: 50px;
    background-color: #3C3F41;
    border-bottom: 1px solid #515658;
    color: #A9B7C6;
    font-size: 25px;
    text-align: center;
    z-index: 1001;
}

#headline h1 {
    /*width: 50%;*/
    /*margin: 0 auto;*/
    font-size: 24px;
}

.version {
    margin: 15px;
    font-size: 23px;
    color: #6A8759;
}

#playlist {
    position: fixed;
    top: 82px;
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 15px;
    width: 510px;
    background-color: #3C3F41;
    height: calc(100% - 110px);
    border-bottom: 1px solid #515658;
    z-index: 2;
}

#playlist table {
    margin: 5px 0;
    width: 100%;
}

#playlist table tr td:first-child {
    text-align: right;
    padding: 0 5px;
    border-right: 1px solid #3C3F41;
    vertical-align: super;
}

#playlist tr {
    cursor: pointer;
}

#playlist tr:hover {
    background-color: #45494A;
}

#playlist td.direct_link span {
    color: #515658;

}

#playlist td.heart {
    padding-right: 18px;
    color: #515658;
}

#playlist td.heart.favorite {
    color: #E25555;
}

#playlist .mdt {
    font-size: 12px;
    vertical-align: super;
    /*margin-left: 10px;*/
}

.now_playing {
    background-color: rgba(152, 118, 170, 0.3) !important;
}

#playlist_bar {
    position: fixed;
    top: 51px;
    height: 30px;
    width: 510px;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #3C3F41;
    border-bottom: 1px solid #515658;
    z-index: 2;
}

#playlist_bar input {
    width: 50%;
    height: 23px;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 3px 10px;
    background-color: #515658;
    outline: none;
    border: none;
    color: #E6E6E6;
}

#player {
    position: fixed;
    top: 51px;
    height: calc(100% - 79px);
    left: 510px;
    width: 100%;
    background-color: #2B2B2B;
    border-bottom: 1px solid #515658;
}

.container {
    width: calc(100% - 510px);
}

.center {
    text-align: center;
}

#song_info {
    margin: 0 auto 10px;
    color: #A9B7C6;
    font-size: 18px;
    width: 640px;
    table-layout: fixed;
}

#song_info td.soft {
    font-size: 15px;
    text-align: center;
}

#song_info td.track_number {
    width: 60px;
}

#song_info td.song {
    overflow: hidden;
    white-space: nowrap;
}

#song_info td.direct_link, #song_info td.heart, #song_info td.share_fb, #song_info td.share_twitter {
    width: 28px;
    height: 100%;
}

#song_info td.share_fb img, #song_info td.share_twitter img {
    vertical-align: middle;
    width: 18px;
    height: 18px;
}

#song_info td.heart, #song_info td.direct_link span {
    cursor: pointer;
}

#song_info td.heart.favorite {
    color: #E25555;
}

#song_info td.heart {
    color: #515658;
}

.heart-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.heart-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    display: block;
}

#song_info .heart-icon {
    width: 18px;
    height: 18px;
}

.copied_to_cb {
    position: absolute;
    padding: 5px;
    background-color: #3C3F41;
    border: 1px solid #515658;
    border-radius: 5px;
    color: #A9B7C6;
    z-index: 3;
    opacity: 1;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    transition: opacity 2s linear;
}

#metadata_info {
    color: #A9B7C6;
    font-size: 17px;
}

#message {
    border-bottom: 1px dotted #A9B7C6;
    /*margin-left: 10px;*/
}

#controls {
    /*margin-top: 5px;*/
    transform: scale(0.88);
}

#controls > div {
    display: inline-block;
}

/* Prevent Chrome/Android tap highlight overlay on transport controls. */
#button,
#button_prev,
#button_next {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Shuffle toggle uses the label as tap target, so suppress tap overlay there too. */
#more_controls .shuffler .switch,
#shuffle + .switch-label,
#shuffle + .switch-label span,
#shuffle + .switch-label::before,
#shuffle + .switch-label::after,
#shuffle + .switch-label span::before,
#shuffle + .switch-label span::after {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#more_controls {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

#more_controls  strong {
    color: #A9B7C6;
    font-size: 18px;
}

#more_controls  .switch {
    display: inline-block;
    color: #d1d1d1;
    font-size: 25px;
    cursor: pointer;
    text-shadow: 1px 1px 2px black, 0 0 3px #d1d1d1;
}

.shuffler {
    display: inline-flex;
    align-items: center;
    gap: 26px;
}

.volumer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.volume_control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #A9B7C6;
    font-size: 14px;
    text-shadow: none;
}

#volume {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    border: 4px solid rgba(58, 58, 58, 0.1);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) inset;
    height: 34px;
    width: 170px;
    margin: 0;
    outline: none;
    box-sizing: content-box;
}

#volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: -webkit-linear-gradient(#4f4f4f, #2b2b2b);
    background: linear-gradient(#4f4f4f, #2b2b2b);
    border-radius: 30px;
    border: 1px solid #1a1a1a;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
    height: 38px;
    width: 44px;
    cursor: pointer;
    position: relative;
    top: -2px; /* adjust for box-sizing difference */
}

#volume::-moz-range-thumb {
    background: -moz-linear-gradient(#4f4f4f, #2b2b2b);
    background: linear-gradient(#4f4f4f, #2b2b2b);
    border-radius: 30px;
    border: 1px solid #1a1a1a;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
    height: 38px;
    width: 44px;
    cursor: pointer;
    position: relative;
}

/* Custom knob styles --------------------------------------------------- */
.volume_knob_container {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* keep input interactable but visually hidden so JS still works */
input#volume.volume_knob_input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 20;
    margin: 0;
    background: transparent;
    border: none;
}

/* disable pointer events on the invisible range so the visual knob can receive
   direct pointer interactions. The range will still be updated programmatically
   so keyboard access remains available (it can be focused by tab). */
input#volume.volume_knob_input {
    pointer-events: none;
}

/* hide native thumbs/tracks visually for webkit/browsers */
input#volume.volume_knob_input::-webkit-slider-runnable-track {
    background: transparent;
}
input#volume.volume_knob_input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    box-shadow: none;
}
input#volume.volume_knob_input::-moz-range-thumb {
    background: transparent;
    border: none;
}

.volume_knob {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* allow pointer interaction on the visual knob and keep it above the
       invisible input so user can grab and rotate it directly */
    pointer-events: auto;
    z-index: 30;
    cursor: grab;
}

.volume_knob:active {
    cursor: grabbing;
}

/* Prevent default touch gestures (scroll/pinch) while interacting with the knob
   and avoid text/image selection during drag on mobile devices. */
.volume_knob_container,
.volume_knob_outer,
.volume_knob_inner {
    touch-action: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.volume_control_wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.volume_knob_container {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.volume_knob_outer {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #252525;
    box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.volume_knob_outer:active {
    cursor: grabbing;
}

.volume_knob_bezel {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #151515;
    box-shadow: 1px 1px 0px #5d5d5d;
}

.volume_knob_inner {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-image: linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -o-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -moz-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -webkit-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -ms-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 5px 10px 5px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: box-shadow 0.15s ease;
}

.volume_knob_outer:active .volume_knob_inner {
    box-shadow: inset 0px 2px 0px #a8a8a8;
}

.volume_knob_indicator {
    position: absolute;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    top: 2px;
    background: linear-gradient(to right, #555555, #cccccc, #555555);
    box-shadow: 0 0 4px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.2);
    transform-origin: center 21px;
    transform: rotate(-135deg);
    transition: transform 0.12s linear;
    cursor: grab;
}

.volume_knob_outer:active .volume_knob_indicator {
    cursor: grabbing;
    box-shadow: 0 0 6px rgba(0,0,0,1), inset 0 1px 2px rgba(255,255,255,0.3);
}


.volume_percentage {
    display: inline-block;
    color: #A9B7C6;
    font-size: 12px;
    min-width: 35px;
    text-align: center;
}

#volume_value {
    display: inline-block;
    color: #FFC66D;
    min-width: 45px;
    text-align: left;
    margin-left: 4px;
}

.rg {
    color: #CC7832;
}

.dash {
    color: #515658;
}

.soft {
    color: #FFC66D;
}

.track_number {
    color: #6A8759;
}

.time {
    color: #6897BB;
}

.magenta {
    color: #9876AA;
}

#tabs {
    /*margin-top: 35px;*/
    font-size: 14px;
}

#browser {
    display: none;
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    width: 350px;
    height: 400px;
    color: #ffffff;
    text-align: center;
}

#browser a {
    color: #9876AA;
}

#player #spectrum {
    height: 0;
}

#player.playing #spectrum {
    height: 200px;
}

#spectrum {
    transition: height .5s linear;
}

/*dev bar*/

#dev_bar {
	z-index: 2;
    position: fixed;
    top: 300px;
    right: -600px;
    width: 600px;
    margin-top: 10px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

#dev_bar h1 {
    font-size: 120%;
}

#text {
    width: 600px;
    border: 1px solid #515658;
    background-color: #3C3F41;
    padding: 10px;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.3);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

#btn {
    position: absolute;
    top: 10px;
    left: -37px;
    font-size: 36px;
    width: 37px;
    border: 1px solid #515658;
    border-right: 1px solid #3C3F41;
    text-align: center;
    background-color: #3C3F41;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    color: #FFFFFF;
}

#dev_bar:hover {
    right: -29px;
}

/*zero clipboard */
.direct_link.zeroclipboard-is-hover {
    background-color: transparent;
    cursor: pointer;
}

.direct_link.zeroclipboard-is-active {
    background-color: transparent;
    cursor: pointer;
}

/*baron scroll*/
.scroller {
    overflow-y: scroll;
    height: 100%;
    -webkit-overflow-scrolling: touch; /* uncomment to accelerate scrolling on iOS */
}

.scroller::-webkit-scrollbar {
    /* Preventing webkit cross-direction scrolling bug */
    width: 0;
}

/*.scroller__track {*/
/*display: none; /!* Invisible by default *!/*/
/*position: absolute;*/
/*right: 4px;*/
/*top: 10px;*/
/*bottom: 4px;*/
/*width: 10px;*/
/*background: rgba(0, 0, 0, .1);*/
/*}*/
/*.baron .scroller__track {*/
/*display: block; /!* Visible when scrolling is possible *!/*/
/*}*/
.scroller__bar {
    /* The bar. You should define width, right position and background */
    position: absolute;
    z-index: 1;
    right: 0;
    width: 10px;
    background: #515658;
    border-radius: 2px;
}

/*select*/
/*http://cssdeck.com/labs/styling-select-box-with-css3*/
#playlist_bar select {
    width: 100%;
    height: 23px;
    box-sizing: border-box;
    padding: 3px 10px;
    margin: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 7px;
    border-radius: 10px;
    background-color: #515658;
    color: #A9B7C6;
    border: none;
    outline: none;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    #playlist_bar select {
        padding-right: 18px
    }
}

#playlist_bar label {
    position: relative;
    display: block;
    width: 50%;
}

#playlist_bar label:after {
    content: '<>';
    font: 11px "Consolas", monospace;
    color: #A9B7C6;
    -webkit-transform: translateY(-50%) rotate(90deg);
    -moz-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
    right: 10px;
    top: 50%;
    padding: 0 0 2px;
    border-bottom: 1px solid #ddd;
    position: absolute;
    pointer-events: none;
}

/*label:before {*/
/*content:'';*/
/*right:6px; top:0px;*/
/*width:10px; height:20px;*/
/*background-color: #515658;*/
/*position:absolute;*/
/*pointer-events:none;*/
/*display:block;*/
/*}*/

/* play button http://cssdeck.com/labs/amazing-play-button-in-css3 */
#container_button {
    background-color: #252525;
    width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-top: 0px;
    border-radius: 149px;
    -webkit-box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
    -moz-box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
    box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
}

#hole {
    background-color: #151515;
    width: 230px;
    height: 230px;
    margin-left: auto;
    margin-right: auto;
    top: 37px;
    position: relative;
    -webkit-border-radius: 115px;
    -moz-border-radius: 115px;
    border-radius: 115px;
    -webkit-box-shadow: 1px 1px 0px #5d5d5d;
    -moz-box-shadow: 1px 1px 0px #5d5d5d;
    box-shadow: 1px 1px 0px #5d5d5d;
}

#button {
    width: 220px;
    height: 220px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    cursor: pointer;
    top: -4px;;
    position: relative;
    background-image: linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -o-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -moz-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -webkit-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -ms-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    -webkit-border-radius: 110px;
    -moz-border-radius: 110px;
    border-radius: 110px;
    -webkit-box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
    -moz-box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
    box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
}

#button.playing {
    top: 5px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: inset 0px 2px 0px #a8a8a8;
}

#triangle {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: -27px;
    top: -50px;
    position: relative;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 80px solid #9876AA;
    z-index: 2;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button:hover #triangle {
    border-left: 80px solid #b68acc
}

#button.playing #triangle {
    border-left: 80px solid #e94545
}

#lighter_triangle {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: -27px;
    top: -48px;
    position: absolute;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 80px solid #c099d2;
    z-index: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button:hover #lighter_triangle {
    border-left: 80px solid #c297d6
}

#button.playing #lighter_triangle {
    border-left: 80px solid #f78b8b
}

#darker_triangle {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: -28px;
    top: -53px;
    position: absolute;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 80px solid #856e96;
    z-index: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button:hover #darker_triangle {
    border-left: 80px solid #746285
}

#button.playing #darker_triangle {
    border-left: 80px solid #c51d1d
}

/*           next-button                     */
/*********************************************/
#container_button_next {
    background-color: #252525;
    width: 200px;
    height: 200px;
    display: inline-block;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*margin-bottom: 0px;*/
    /*margin-top: 0px;*/
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
    -moz-box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
    box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
}

#hole_next {
    background-color: #151515;
    width: 140px;
    height: 140px;
    margin-left: auto;
    margin-right: auto;
    top: 35px;
    position: relative;
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    -webkit-box-shadow: 1px 1px 0px #5d5d5d;
    -moz-box-shadow: 1px 1px 0px #5d5d5d;
    box-shadow: 1px 1px 0px #5d5d5d;
}

#button_next {
    width: 130px;
    height: 130px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    cursor: pointer;
    top: -4px;
    position: relative;
    background-image: linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -o-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -moz-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -webkit-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -ms-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    -webkit-border-radius: 65px;
    -moz-border-radius: 65px;
    border-radius: 65px;
    -webkit-box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
    -moz-box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
    box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
}

#button_next:active {
    top: 5px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: inset 0px 2px 0px #a8a8a8;
}

#triangle_next {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: -23px;
    top: -15px;
    position: relative;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 20px solid #22a9db;
    z-index: 2;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button_next:hover #triangle_next {
    border-left: 20px solid #45bde9
}

#button_next:active #triangle_next {
    border-left: 20px solid #e94545
}

#lighter_triangle_next {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: -23px;
    top: -16px;
    position: absolute;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 20px solid #43c0ee;
    z-index: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button_next:hover #lighter_triangle_next {
    border-left: 20px solid #8bdaf7
}

#button_next:active #lighter_triangle_next {
    border-left: 20px solid #f78b8b
}

#darker_triangle_next {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: -24px;
    top: -17px;
    position: absolute;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 20px solid #0a7da7;
    z-index: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button_next:hover #darker_triangle_next {
    border-left: 20px solid #1d98c5
}

#button_next:active #darker_triangle_next {
    border-left: 20px solid #c51d1d
}

/* */

#triangle_next_2 {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: 10px;
    top: -15px;
    position: absolute;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 20px solid #22a9db;
    z-index: 2;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button_next:hover #triangle_next_2 {
    border-left: 20px solid #45bde9
}

#button_next:active #triangle_next_2 {
    border-left: 20px solid #e94545
}

#lighter_triangle_next_2 {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: 10px;
    top: -16px;
    position: absolute;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 20px solid #43c0ee;
    z-index: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button_next:hover #lighter_triangle_next_2 {
    border-left: 20px solid #8bdaf7
}

#button_next:active #lighter_triangle_next_2 {
    border-left: 20px solid #f78b8b
}

#darker_triangle_next_2 {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: 9px;
    top: -17px;
    position: absolute;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 20px solid #0a7da7;
    z-index: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button_next:hover #darker_triangle_next_2 {
    border-left: 20px solid #1d98c5
}

#button_next:active #darker_triangle_next_2 {
    border-left: 20px solid #c51d1d
}

/*           prev-button                     */
/*********************************************/
#container_button_prev {
    background-color: #252525;
    width: 200px;
    height: 200px;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*margin-bottom: 0px;*/
    /*margin-top: 0px;*/
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
    -moz-box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
    box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
}

#hole_prev {
    background-color: #151515;
    width: 140px;
    height: 140px;
    margin-left: auto;
    margin-right: auto;
    top: 35px;
    position: relative;
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    -webkit-box-shadow: 1px 1px 0px #5d5d5d;
    -moz-box-shadow: 1px 1px 0px #5d5d5d;
    box-shadow: 1px 1px 0px #5d5d5d;
}

#button_prev {
    width: 130px;
    height: 130px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    cursor: pointer;
    top: -4px;
    position: relative;
    background-image: linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -o-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -moz-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -webkit-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    background-image: -ms-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
    -webkit-border-radius: 65px;
    -moz-border-radius: 65px;
    border-radius: 65px;
    -webkit-box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
    -moz-box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
    box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
}

#button_prev:active {
    top: 5px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: inset 0px 2px 0px #a8a8a8;
}

#triangle_prev {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: -26px;
    top: -15px;
    position: relative;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 20px solid #22a9db;
    z-index: 2;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button_prev:hover #triangle_prev {
    border-right: 20px solid #45bde9
}

#button_prev:active #triangle_prev {
    border-right: 20px solid #e94545
}

#lighter_triangle_prev {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: -26px;
    top: -16px;
    position: absolute;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 20px solid #43c0ee;
    z-index: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button_prev:hover #lighter_triangle_prev {
    border-right: 20px solid #8bdaf7
}

#button_prev:active #lighter_triangle_prev {
    border-right: 20px solid #f78b8b
}

#darker_triangle_prev {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: -27px;
    top: -17px;
    position: absolute;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 20px solid #0a7da7;
    z-index: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button_prev:hover #darker_triangle_prev {
    border-right: 20px solid #1d98c5
}

#button_prev:active #darker_triangle_prev {
    border-right: 20px solid #c51d1d
}

/* */

#triangle_prev_2 {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: 7px;
    top: -15px;
    position: absolute;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 20px solid #22a9db;
    z-index: 2;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button_prev:hover #triangle_prev_2 {
    border-right: 20px solid #45bde9
}

#button_prev:active #triangle_prev_2 {
    border-right: 20px solid #e94545
}

#lighter_triangle_prev_2 {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: 7px;
    top: -16px;
    position: absolute;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 20px solid #43c0ee;
    z-index: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button_prev:hover #lighter_triangle_prev_2 {
    border-right: 20px solid #8bdaf7
}

#button_prev:active #lighter_triangle_prev_2 {
    border-right: 20px solid #f78b8b
}

#darker_triangle_prev_2 {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    margin-top: 50%;
    left: 6px;
    top: -17px;
    position: absolute;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 20px solid #0a7da7;
    z-index: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#button_prev:hover #darker_triangle_prev_2 {
    border-right: 20px solid #1d98c5
}

#button_prev:active #darker_triangle_prev_2 {
    border-right: 20px solid #c51d1d
}

/* switch */
.switch {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    border: 4px solid rgba(58, 58, 58, 0.1);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) inset;
    height: 42px;
    margin: 0 auto;
    /*margin-left: 800px;*/
    position: relative;
    width: 115px;
}

.switch-check {
    position: absolute;
    visibility: hidden;
}

.switch-label {
    cursor: pointer;
    display: block;
    height: 42px;
    text-indent: -9999px;
    width: 115px;
}

.switch-label:before {
    background: #fff;
    background: -moz-radial-gradient(45%, circle, rgb(255, 58, 58) 0%, rgb(255, 113, 113) 100%);
    background: -webkit-radial-gradient(45%, circle, rgb(255, 58, 58) 0%, rgb(255, 113, 113) 100%);
    background: -o-radial-gradient(45%, circle, rgb(255, 58, 58) 0%, rgb(255, 113, 113) 100%);
    border-radius: 10px;
    border: 1px solid #742323;
    box-shadow: 0 2px 5px rgba(255, 67, 48, 0.6), 0 0 5px rgba(255, 159, 109, 0.5) inset;
    content: "";
    display: block;
    height: 10px;
    left: -20%;
    position: absolute;
    top: 16px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    width: 10px;
    z-index: 12;
}

.switch-label:after {
    background: #fff;
    background: -moz-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
    background: -webkit-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
    background: -o-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
    border-radius: 10px;
    border: 1px solid #111;
    box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
    content: "";
    display: block;
    height: 10px;
    right: -20%;
    position: absolute;
    top: 16px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    width: 10px;
    z-index: 12;

}

.switch-label span {
    background: -webkit-linear-gradient(#4f4f4f, #2b2b2b);
    background: -moz-linear-gradient(#4f4f4f, #2b2b2b);
    background: -o-linear-gradient(#4f4f4f, #2b2b2b);
    background: linear-gradient(#4f4f4f, #2b2b2b);
    border-radius: 30px;
    border: 1px solid #1a1a1a;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
    display: block;
    height: 38px;
    left: 1px;
    position: absolute;
    top: 1px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    width: 53px;
}

.switch-label span:before {
    background: #fff;
    background: -webkit-linear-gradient(left, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
    background: -moz-linear-gradient(left, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
    background: -o-linear-gradient(left, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
    background: linear-gradient(left, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
    border-radius: 30px 10px 10px 30px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2) inset;
    content: "";
    display: block;
    height: 33px;
    left: 2px;
    position: absolute;
    top: 2px;
    width: 21px;
}

.switch-label span:after {
    background: #fff;
    background: -webkit-linear-gradient(right, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
    background: -moz-linear-gradient(right, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
    background: -o-linear-gradient(right, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
    background: linear-gradient(right, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
    border-radius: 10px 30px 30px 10px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2) inset;
    content: "";
    display: block;
    height: 33px;
    position: absolute;
    right: 2px;
    top: 2px;
    width: 21px;
}

.switch-check:checked + .switch-label span {
    left: 59px;
}

.switch-check:checked + .switch-label:before {
    background: -moz-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
    background: -webkit-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
    background: -o-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
    border: 1px solid #111;
    box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
}

.switch-check:checked + .switch-label:after {
    background: -moz-radial-gradient(45%, circle, rgb(128, 215, 255) 0%, rgb(197, 237, 255) 100%);
    background: -webkit-radial-gradient(45%, circle, rgb(128, 215, 255) 0%, rgb(197, 237, 255) 100%);
    background: -o-radial-gradient(45%, circle, rgb(128, 215, 255) 0%, rgb(197, 237, 255) 100%);
    border: 1px solid #004562;
    box-shadow: 0 2px 5px rgba(81, 208, 255, 0.5), 0 0 5px rgba(210, 243, 255, 0.5) inset;
}

.top-bar {
    position: absolute;
    top: 2px;
    right: 12px;
    font-size: 28px;
}

.flag {
    vertical-align: middle;
    display: inline-block;
    height: 28px;
    width: 20px;
    background: url("../img/ua_1px.png") 0 50% repeat-x;
}

.fa-icon {
    width: 20px;
    height: 20px;
}

.fa-icon-18 {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

#news {
    max-height: 250px;
    overflow-y: auto;
    scrollbar-color: #515658 transparent;
    scrollbar-width: thin;
}

@media (max-width: 768px) {
    #headline {
        height: 44px;
        line-height: 44px;
        font-size: 18px;
    }

    #headline h1 {
        font-size: 17px;
        padding: 0 12px;
    }

    .version {
        margin: 8px;
        font-size: 17px;
    }

    .top-bar {
        top: 16px;
        right: 10px;
        font-size: 22px;
        line-height: 1;
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .top-bar-main .ext-link,
    .top-bar-main .ext-separator {
        display: none;
    }

    #playlist_bar {
        top: 45px;
        width: 100%;
        height: auto;
        min-height: 44px;
        box-sizing: border-box;
        padding: 6px 10px;
        display: flex;
        gap: 8px;
        align-items: center;
    }

    #playlist_bar input {
        margin-left: 0;
        width: auto;
        flex: 1 1 58%;
        box-sizing: border-box;
    }

    #playlist_bar label {
        display: block;
        width: auto;
        flex: 1 1 42%;
    }

    #playlist_bar select {
        width: 100%;
        height: 23px;
    }

    #playlist {
        top: 90px;
        width: 100%;
        height: auto;
        bottom: 352px;
    }

    #player {
        left: 0;
        top: auto;
        bottom: 28px;
        width: 100%;
        height: 324px;
    }

    .container {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
    }

    #song_info {
        width: 100%;
        font-size: 15px;
        margin: 6px auto 4px;
    }

    #song_info td.track_number {
        width: 45px;
    }

    #song_info td.soft {
        font-size: 13px;
    }

    #metadata_info {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #player #spectrum,
    #player.playing #spectrum {
        display: block;
        width: 100%;
        height: 26px !important;
        margin: 4px 0 2px;
        pointer-events: none;
    }

    #controls {
        margin-top: 6px;
        transform: none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
    }

    #controls > div {
        display: block;
        flex: 0 0 auto;
    }

    #container_button_prev,
    #container_button,
    #container_button_next {
        margin: 0;
    }
    #container_button {
        width: 180px;
        height: 180px;
        border-radius: 90px;
    }

    #hole {
        width: 136px;
        height: 136px;
        top: 22px;
        border-radius: 68px;
    }

    #button {
        width: 130px;
        height: 130px;
        border-radius: 65px;
        top: -3px;
    }

    #triangle {
        left: -17px;
        top: -30px;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-left: 48px solid #9876AA;
    }

    #button:hover #triangle,
    #button.playing #triangle {
        border-left-width: 48px;
    }

    #lighter_triangle {
        left: -17px;
        top: -29px;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-left: 48px solid #c099d2;
    }

    #button:hover #lighter_triangle,
    #button.playing #lighter_triangle {
        border-left-width: 48px;
    }

    #darker_triangle {
        left: -18px;
        top: -32px;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-left: 48px solid #856e96;
    }

    #button:hover #darker_triangle,
    #button.playing #darker_triangle {
        border-left-width: 48px;
    }

    #container_button_next,
    #container_button_prev {
        width: 120px;
        height: 120px;
        border-radius: 60px;
    }

    #hole_next,
    #hole_prev {
        width: 84px;
        height: 84px;
        top: 20px;
        border-radius: 42px;
    }

    #button_next,
    #button_prev {
        width: 78px;
        height: 78px;
        top: -3px;
        border-radius: 39px;
    }

    #triangle_next,
    #lighter_triangle_next,
    #darker_triangle_next,
    #triangle_prev,
    #lighter_triangle_prev,
    #darker_triangle_prev,
    #triangle_next_2,
    #lighter_triangle_next_2,
    #darker_triangle_next_2,
    #triangle_prev_2,
    #lighter_triangle_prev_2,
    #darker_triangle_prev_2 {
        border-top-width: 9px;
        border-bottom-width: 9px;
    }

    #triangle_next,
    #lighter_triangle_next,
    #darker_triangle_next {
        left: -15px;
    }

    #triangle_next,
    #triangle_prev,
    #triangle_next_2,
    #triangle_prev_2 {
        top: -10px;
    }

    #lighter_triangle_next,
    #lighter_triangle_prev,
    #lighter_triangle_next_2,
    #lighter_triangle_prev_2 {
        top: -11px;
    }

    #darker_triangle_next,
    #darker_triangle_prev,
    #darker_triangle_next_2,
    #darker_triangle_prev_2 {
        top: -12px;
    }

    #triangle_next,
    #triangle_next_2,
    #lighter_triangle_next,
    #lighter_triangle_next_2,
    #darker_triangle_next,
    #darker_triangle_next_2 {
        border-left-width: 13px;
    }

    #triangle_prev,
    #triangle_prev_2,
    #lighter_triangle_prev,
    #lighter_triangle_prev_2,
    #darker_triangle_prev,
    #darker_triangle_prev_2 {
        border-right-width: 13px;
    }

    #triangle_next_2,
    #lighter_triangle_next_2,
    #darker_triangle_next_2 {
        left: 4px;
    }

    #triangle_prev,
    #lighter_triangle_prev,
    #darker_triangle_prev {
        left: -16px;
    }

    #triangle_prev_2,
    #lighter_triangle_prev_2,
    #darker_triangle_prev_2 {
        left: 3px;
    }

    #more_controls {
        margin-top: -4px;
        /*padding-bottom: 6px;*/
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        flex-wrap: wrap;
    }

    .shuffler {
        gap: 14px;
    }

    #more_controls strong {
        font-size: 16px;
        line-height: 1;
        white-space: nowrap;
    }

    #more_controls > .switch {
        margin: 0;
        font-size: 0;
        text-shadow: none;
        cursor: default;
        display: inline-block;
    }

    #more_controls > .volumer {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
    }

    .volume_knob_container {
        width: 60px;
        height: 60px;
    }

    .volume_knob_outer {
        width: 60px;
        height: 60px;
    }

    .volume_knob_bezel {
        width: 48px;
        height: 48px;
    }

    .volume_knob_inner {
        width: 42px;
        height: 42px;
    }

    .volume_knob_input {
        display: none;
    }

    .switch {
        height: 34px;
        width: 95px;
    }

    .switch-label,
    .switch-label span {
        height: 34px;
        width: 95px;
    }

    .switch-label span {
        width: 44px;
    }

    .switch-label span:before,
    .switch-label span:after {
        height: 29px;
    }

    .switch-label:before,
    .switch-label:after {
        top: 12px;
    }

    .switch-label:before {
        left: -16%;
    }

    .switch-label:after {
        right: -16%;
    }

    .switch-check:checked + .switch-label span {
        left: 49px;
    }

    .switch-check:checked + .switch-label:before {
        background: -moz-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
        background: -webkit-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
        background: -o-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
        border: 1px solid #111;
        box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
    }

    .switch-check:checked + .switch-label:after {
        background: -moz-radial-gradient(45%, circle, rgb(128, 215, 255) 0%, rgb(197, 237, 255) 100%);
        background: -webkit-radial-gradient(45%, circle, rgb(128, 215, 255) 0%, rgb(197, 237, 255) 100%);
        background: -o-radial-gradient(45%, circle, rgb(128, 215, 255) 0%, rgb(197, 237, 255) 100%);
        border: 1px solid #004562;
        box-shadow: 0 2px 5px rgba(81, 208, 255, 0.5), 0 0 5px rgba(210, 243, 255, 0.5) inset;
    }

    #dev_bar {
        display: none;
    }

    #info_bar {
        margin-left: 8px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    #headline h1 {
        font-size: 18px;
    }

    .version {
        display: none;
    }

    .top-bar-main .bsky-link {
        display: none;
    }

    #playlist {
        height: auto;
        bottom: 322px;
    }

    #player {
        height: 294px;
    }

    .shuffler {
        gap: 14px;
    }

    #more_controls strong {
        font-size: 14px;
    }

    #more_controls > .volumer {
        font-size: 12px;
    }

    .volume_knob_container {
        width: 52px;
        height: 52px;
    }

    .volume_knob_outer {
        width: 52px;
        height: 52px;
    }

    .volume_knob_bezel {
        width: 42px;
        height: 42px;
    }

    .volume_knob_inner {
        width: 36px;
        height: 36px;
    }

    .volume_knob_indicator {
        height: 12px;
        top: 3px;
    }

    .switch {
        height: 32px;
        width: 88px;
    }

    .switch-label,
    .switch-label span {
        height: 32px;
        width: 88px;
    }

    .switch-label span {
        width: 40px;
    }

    .switch-label span:before,
    .switch-label span:after {
        height: 27px;
    }

    .switch-label:before,
    .switch-label:after {
        top: 11px;
    }

    .switch-label:before {
        left: -14%;
    }

    .switch-label:after {
        right: -14%;
    }

    .switch-check:checked + .switch-label span {
        left: 46px;
    }

    #song_info td.track_number {
        width: 34px;
    }

    #song_info td.direct_link,
    #song_info td.heart,
    #song_info td.share_twitter {
        width: 24px;
    }

    #container_button {
        width: 162px;
        height: 162px;
        border-radius: 81px;
    }

    #hole {
        width: 122px;
        height: 122px;
        top: 20px;
        border-radius: 61px;
    }

    #button {
        width: 116px;
        height: 116px;
        border-radius: 58px;
    }

    #triangle {
        border-top-width: 26px;
        border-bottom-width: 26px;
        border-left-width: 42px;
        left: -15px;
        top: -27px;
    }

    #button:hover #triangle,
    #button.playing #triangle {
        border-left-width: 48px;
    }

    #lighter_triangle {
        border-top-width: 26px;
        border-bottom-width: 26px;
        border-left-width: 42px;
        left: -15px;
        top: -26px;
    }

    #button:hover #lighter_triangle,
    #button.playing #lighter_triangle {
        border-left-width: 48px;
    }

    #darker_triangle {
        border-top-width: 26px;
        border-bottom-width: 26px;
        border-left-width: 42px;
        left: -16px;
        top: -28px;
    }

    #button:hover #darker_triangle,
    #button.playing #darker_triangle {
        border-left-width: 48px;
    }

    #container_button_next,
    #container_button_prev {
        width: 104px;
        height: 104px;
        border-radius: 52px;
    }

    #hole_next,
    #hole_prev {
        width: 72px;
        height: 72px;
        top: 17px;
        border-radius: 36px;
    }

    #button_next,
    #button_prev {
        width: 66px;
        height: 66px;
        border-radius: 33px;
    }
}

@media (min-width: 421px) and (max-width: 430px) {
    #headline h1 {
        padding-right: 42px;
    }

    #playlist_bar {
        padding: 6px 8px;
        gap: 6px;
    }

    #playlist_bar input {
        flex-basis: 56%;
    }

    #playlist_bar label {
        flex-basis: 44%;
    }

    #playlist {
        top: 90px;
        height: auto;
        bottom: 332px;
    }

    #player {
        height: 304px;
    }

    #controls {
        margin-top: 2px;
    }

    #more_controls {
        margin-top: -4px;
    }

    .shuffler {
        gap: 14px;
    }

    #more_controls strong {
        font-size: 14px;
    }
}

@media (max-width: 390px) {
    #headline {
        height: 40px;
        line-height: 40px;
    }

    #headline h1 {
        font-size: 15px;
        padding-left: 8px;
        padding-right: 8px;
    }

    #playlist_bar {
        top: 41px;
        min-height: 66px;
        flex-wrap: wrap;
        align-content: center;
    }

    #playlist_bar input,
    #playlist_bar label {
        flex: 1 1 100%;
    }

    #playlist {
        top: 108px;
        height: auto;
        bottom: 317px;
    }

    #player {
        height: 289px;
    }

    #song_info {
        margin-top: 3px;
        margin-bottom: 2px;
    }

    #metadata_info {
        font-size: 12px;
    }

    #container_button {
        width: 150px;
        height: 150px;
        border-radius: 75px;
    }

    #hole {
        width: 112px;
        height: 112px;
        border-radius: 56px;
        top: 19px;
    }

    #button {
        width: 106px;
        height: 106px;
        border-radius: 53px;
    }

    #triangle,
    #lighter_triangle,
    #darker_triangle {
        border-top-width: 24px;
        border-bottom-width: 24px;
        border-left-width: 38px;
        left: -14px;
    }

    #triangle {
        top: -24px;
    }

    #lighter_triangle {
        top: -23px;
    }

    #darker_triangle {
        top: -25px;
        left: -15px;
    }

    #container_button_next,
    #container_button_prev {
        width: 96px;
        height: 96px;
        border-radius: 48px;
    }

    #hole_next,
    #hole_prev {
        width: 66px;
        height: 66px;
        top: 15px;
        border-radius: 33px;
    }

    #button_next,
    #button_prev {
        width: 60px;
        height: 60px;
        border-radius: 30px;
    }
}

@media (max-width: 360px) {
    #playlist {
        height: auto;
        bottom: 310px;
    }

    #player {
        height: 282px;
    }

    #song_info td.song {
        font-size: 14px;
    }

    #song_info td.soft {
        font-size: 12px;
    }

    #container_button {
        width: 142px;
        height: 142px;
        border-radius: 71px;
    }

    #hole {
        width: 106px;
        height: 106px;
        border-radius: 53px;
    }

    #button {
        width: 100px;
        height: 100px;
        border-radius: 50px;
    }

    #triangle,
    #lighter_triangle,
    #darker_triangle {
        border-top-width: 22px;
        border-bottom-width: 22px;
        border-left-width: 35px;
        left: -13px;
    }

    #triangle {
        top: -22px;
    }

    #lighter_triangle {
        top: -21px;
    }

    #darker_triangle {
        top: -23px;
        left: -14px;
    }
}