html{
    background : #121219;
}
@font-face {
    font-family: 'SF Mono';
    src: url("SFMono-Bold.ttf");
}
/* cyrillic */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1isq131nj-otFQ.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
*{
    font-family: 'SF Mono';
}
.player_ui{
    width: 90%;
    min-width: 340px;
    height: 580px;
    max-width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #080a11;
    border: 1px solid #ccf;
    background-size: cover;
    overflow: hidden;
    transition: 1s;

}
.player_audio{
    width: 60px;
    height: 250px;
    border-right: 1px solid #353555;
    border-bottom: 1px solid #353555;
    transform: translate(0px,-1px);
    background : #080a11;
    display: inline-block;
}

.player_controls_button{
    min-width: 32px;
    font-size: auto;
    height: 32px;
    display: inline-block;
    border: 1px solid #353535;
    overflow: hidden;
    color: #ccc;
    background: #0d0f15;
    border-radius: 10px;

    
}
.player_controls_button:hover{
    background: #2e4cd2; cursor: pointer;
}
.audio_track{
    background : #14192bca;
    width: 100%;
    height: 40px;
    
    border-bottom: 1px solid #111422;
    border-left: none;
    border-right: none;
    display: block;
    margin: auto;
    overflow: hidden;
    transform: translate(0px,0px);
}
.audio_tracks{
    width: 100%;
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-image: url("orig.jpeg");
    background-size: cover;
    transition: .1s;
    transform: translate(0px,-1px);
}
.audio_track:hover{
    background: #00ff80aa!important;
    cursor: pointer;
    border:1px solid #dcdceb;
    

}
.audio_tracks::-webkit-scrollbar{
    appearance: none;
    background: #14192b;
    border-left:1px solid #353555;
    border-bottom: none;
    border-right: none;
    border-top: none;

}
.audio_tracks::-webkit-scrollbar-thumb{
    appearance: none;
    background: #353555;
    border-left:1px solid #353555;
    border-bottom: none;
    border-right: none;
    border-top: none;
    border-radius: 30px;
}
.audio_track_name{
    transform: translate(30px,-1px);
    color: #ccc;
    font-family: 'SF Mono';
    font-size: 14px;
}
.audio_track:hover  .audio_track_name{
    color: #121219!important;
}
.player_audio_data{
    width: calc(100%);
    height: 150px;
    display: inline-block;
    border:1px solid #353555;
    border-left: none;
    background: #070707;


}
#input_slider{

    min-width: 32px;
    font-size: auto;
    height: 32px;

    overflow: hidden;
    background: transparent;
    border-radius: 40px;
    -webkit-appearance: none;
    border: none;
}
#input_slider::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    appearance: none;
    background: #0d0f15;
    width: 30px;
    height: 10px;
    border-radius: 40px;
    border: 1px solid #353555;
    overflow: hidden;
}
#input_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: #ccf; 
   
    cursor: pointer;
    box-shadow: -9999px 0 0 9991px #ccf; 
}
#input_slider::-moz-range-progress {
    background-color: #ccf;
    height: 7px;
    border: 1px solid #353555;
    border-right-width: 0; /* Чтобы не двоилась рамка у ползунка */
}

/* Очистка тени у ползунка Firefox (она больше не нужна) */
#input_slider::-moz-range-thumb {
    -moz-appearance: none;
    width: 11px;
    height: 11px;
    background: #ccf; 
    cursor: pointer;
    border: none; /* Убираем стандартную рамку Firefox */
    box-shadow: none; /* Убираем тень, так как работает range-progress */
}
#timeline{
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 98%;
    display: block;
    font-size: auto;
    height: 32px;
    margin: auto;
    transform: translate(10px,0px);
    overflow: hidden;
    background: transparent;
    
    border: none;
}
#timeline::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    appearance: none;
    background: #0d0f15;
    width: 300px;
    height: 7px;
    border: 1px solid #353555;
    overflow: hidden;
}
#timeline::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
    background: #ccf; 
    
    cursor: pointer;
    box-shadow: -9999px 0 0 9991px #ccf; 

}
/* Специальный элемент Firefox для закрашивания прогресса */
#timeline::-moz-range-progress {
    background-color: #ccf;
    height: 7px;
    border: 1px solid #353555;
    border-right-width: 0; /* Чтобы не двоилась рамка у ползунка */
}

/* Очистка тени у ползунка Firefox (она больше не нужна) */
#timeline::-moz-range-thumb {
    -moz-appearance: none;
    width: 11px;
    height: 11px;
    background: #ccf; 
    cursor: pointer;
    border: none; /* Убираем стандартную рамку Firefox */
    box-shadow: none; /* Убираем тень, так как работает range-progress */
}
.wellcome{
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 3;
    background: #14192bca;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}
.ptext{
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    color: #ffe6ec;

    padding: 10px 10px;
}
.image_0{
    width: auto;
    height: auto;
    max-width: 99%;
    max-height: 99%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.controls{
    width: 100%;
    height: 30px;
    border: 1px solid #353555;
}
.volume_anim{
    width: 160px;
    height: 30px;
    display: inline-block;
    border: 1px solid #353535;
    overflow: hidden;
    color: #ccc;
    background: #0d0f15;
    border-radius: 10px;
    transform: translate(20px,5px);
}
.timeline_data{
    margin-top: -20px;
    color: #ccf;
    font-size: 10px;
    transform: translate(10px,4px);
}
a{
    color: #fff;
    text-decoration: none;
    padding: 10px 10px;

}
a:hover{
    background: #2e4cd2;
}
._button_close{
    width: 90%;
    height: 40px;
    background: #2e4cd2;
    color: #fff;
    display: block;
    margin: auto;
    border: none;
    margin-bottom: -10px
}
.downloader{
    width: 150px;
    height: 30px;
    background: #2e4cd2;
    color: #fff;
    border: none;
    margin-left: 10px;
    margin-top: 10px;
    display: inline-block;
    
}
.build_version{
    display: inline-block;
    margin-left: 10px;
    margin-top: 10px;
    color: #ff0080;
}
.about{
    background: #12121990;
    backdrop-filter: blur(100px);
    color: #fff;
    border: 1px solid #ccf;
    position: absolute;
    top: 121px;
    z-index: 2;
    font-size: 10px;
    width: 75px;
    height: 30px;

}
.current_audio{
    width: 100%;
    height: 30px;
    position: absolute;
    top: 121px;
    background: #070709cc;
    backdrop-filter: blur(10px);
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border: 1px solid #121219;
}
.current_audio_text{
    color: #fff;
    font-family: 'SF Mono';
    font-size: 12px;
    text-align: center;
    transform: translateY(-4px);
}
.aboutwindow{
    width: 100%;
    height: 100%;
    background: #070709aa;
    backdrop-filter: blur(5px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
    animation: fade 1s ;
    display: none;
}
.aboutwindow_text{
    color: #fff;
    font-size: 60px;
    font-style: italic;
    margin: 20px;
    text-align: center;
    transform: translateY(200px);
    text-shadow: 0px 0px 10px #fff;
}
@keyframes fade {
    from{
      opacity: 0;
    }
    to{
        opacity: 1;
    }
}
.aboutwindow_close{
    color: #fff;
    margin: 20px;
    transform: translateY(200px);
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    height: 60px;
    background: #2e4cd2;
    border-radius: 60px;
    transition: .1s;
    border: none;
   
}