:root {
  --text-color: #ffffff8c;
  --shade-text-color: #06b9eb;
  --brand-color: #06b9eb8c;
  --hue: 223;
  --off-hue: 3;
  --on-hue1: 123;
  --on-hue2: 168;
  --fg: hsl(var(--hue), 10%, 90%);
  --primary: hsl(var(--hue), 90%, 50%);
  --trans-dur: 0.6s;
  --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
  --bs-card-spacer-y: 0rem;
  --bs-card-spacer-x: 0rem;
  --bs-nav-link-hover-color: #06b9eb;
}


body {
  /* background-repeat: no-repeat;
    background-size: cover; */
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100vh;
  color: #202020;
  letter-spacing: .1em;
  background-color: #000000;
  box-shadow: none;

  &.modal-active {
    overflow: hidden;
  }
}

footer {
  flex-shrink: 0;
  background: none;
  color: var(--brand-color);
  text-align: center;
  padding: 5px 0;
  font-family: monospace;
}


/* Style background ********************************************************************************************************/

.boom-bg {
  background-image: url(../img/bg_boom.gif);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.default-bg {
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 100px;
  background-image: url(../img/bg.jpg);
  background-repeat: round;
  background-size: cover;
}

.superadmin-bg {
  padding: 5px;
}

.admin-bg {
  box-sizing: border-box;
  padding: 0;
  background-image: radial-gradient(#01040cf2, #01040cfc), url(../img/admin-bg.webp) !important;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1.5rem;
  color: aqua;
  text-shadow: 0 0 1ex aqua, 0 0 2px rgba(255, 255, 255, 0.8);
}

.for-all-bg {
  background-image: url(../img/bg.gif);
  background-blend-mode: multiply;
  background-color: currentColor;
}

.new-year-bg {
  background-image: url(../img/bg_new_year.gif);
  background-size: cover;
  background-position: 100% 100%;
}

.rock-bg {
  background-image: url(../img/bg_rock.gif);
  background-blend-mode: soft-light;
  background-size: cover;
  background-color: currentcolor;
  background-position: 100% 30%;
}

.jazz-bg {
  background-image: url(../img/bg_jazz.gif);
  background-blend-mode: color-dodge;
  background-color: transparent;
}

.preload-bg {
  background-image: none;
  background-repeat: round;
  background-size: cover;
  padding: 0%;
}

.timer-bg {
  background-image: url(../img/preload.gif);
  background-repeat: no-repeat;
  background-size: contain;

  background-color: black;
}

.login-out-bg {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: black;
  background-position: center;
  box-shadow: inset 0px 300px 20px 3px #000000, inset -20px -300px 20px 3px #000000;
}

.preload {
  display: none;
  min-width: 100%;
  height: 100vh;
  background-image: url(../img/preload.gif);
  background-repeat: no-repeat;
  background-position: center;
  transition: width 0.7s cubic-bezier(0.4, 0, 1, 1);
}

.timer {
  display: none;
  min-width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin-top: 20%;
}

.p-timer {
  text-align: center;
  font-family: monospace;
  font-size: 1rem;
  color: #1eb2a7;
  text-shadow: 0px 0px 5px #f8f8f882;
}

.countdown {
  text-align: center;
  color: #1eb2a7;
  text-shadow: 0px 0px 5px #f8f8f882;
  font-family: monospace;
}

.uk-countdown-hours::after,
.uk-countdown-minutes::after {
  content: ":";
}


.logo-text {
  color: #06b9eb;
  font-size: medium;
  font-family: monospace;
  text-shadow: 0 0 5px #cce6ed;
  transition: 0.5s;
}

.logo-img {
  transition: 0.5s;
}

#modal-download {
  overscroll-behavior: contain;
  width: 50%;
  height: 50%;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.list-downloads {
  overflow: hidden !important;
}



/* Style background end ********************************************************************************************************/


.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6,
.uk-heading-2xlarge,
.uk-heading-large,
.uk-heading-medium,
.uk-heading-small,
.uk-heading-xlarge,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #06b9eb8c;
  text-shadow: 0px 0px 5px #666;
  font-family: monospace;
}

.main {
  width: 100%;
  height: 95%;
  padding: 1%;
  overflow-y: scroll;
  overflow-x: hidden;
  opacity: 1;
  transition: width 0.3s ease;
}


.login-window {
  font-family: monospace;
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #0000008c;
  background-size: cover;
  display: none;
}

.header {
  position: fixed;
  background-color: rgba(0, 0, 0, 0);
  margin-bottom: 2%;
  height: 65px;
  /* background-color: #000000c7;
    box-shadow: 0 0 5px 1px var(--brand-color); */
}

/* .footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: right;
}
 */
.button-footer {
  margin-bottom: 0;
}

.separ-line {
  border-color: #6c757d;
  box-shadow: 0 0 3px 1px #6c757d;
  width: 0%;
  transition: width 0.3s ease;
}

.new-reliases-name {
  text-align: justify;
  margin-top: 5%;
}

.deepshadow {
  font-family: monospace;
  font-size: small;
  text-transform: capitalize;
  color: var(--brand-color);
  text-align: justify;
}

.deepshadow-filter {
  font-family: monospace;
  font-size: xx-small;
  text-transform: capitalize;
  color: var(--brand-color);
  text-align: center;
  text-shadow: 0 0 5px var(--shade-text-color);
}

p {
  font-size: medium;
  color: var(--brand-color);
}




.progress {
  height: 5px;
  border-radius: 2px;
  /* margin-top: 25px; */
  margin-bottom: 5px;
  cursor: pointer;
  background-color: #000;
  /* background-image: url(/src/img/bg_profile.gif); */
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 5px 0 var(--shade-text-color);
}

.progress-bar {
  background-color: var(--shade-text-color);
  width: 0%;
  transition: width 0.3s ease;
}

.playlist-filter-list {
  width: 100px;
  /* Регулируй размер изображения по своему усмотрению */
  height: auto;
  /* Сохраняем пропорции изображения */
  margin-right: 10px;
}

.playlist-poster {
  width: 50px;
  /* Регулируй размер изображения по своему усмотрению */
  height: auto;
  /* Сохраняем пропорции изображения */
  margin-right: 10px;
  /* Расстояние между изображением и текстом */
}

.playlist-poster:hover {
  box-shadow: 0 0 5px 1px var(--shade-text-color);
}

.uk-modal-dialog {
  background-color: #000000ba;
  transition: width 0.8s ease;
  text-align: center;
  border-style: groove;
  border-width: 1px;
  border-color: black;
  margin: auto;
  top: 20%;
}

.uk-modal-title {
  font-family: monospace;
  color: cyan;
}

.value-volume {
  font-family: monospace;
  color: cyan;
}

.p-title-control {
  text-align: center;
  color: var(--brand-color);
  text-shadow: 0px 0px 5px var(--brand-color);
  font-family: monospace;
}

.fa-backward,
.fa-play,
.fa-forward {
  color: var(--brand-color) !important;
  text-shadow: 2px 2px 1px black;
}

.fa-bars,
.fa-chevron-up,
.fa-chevron-down,
.fa-plus,
.fa-pause,
.fa-volume-high,
.fa-heart,
.fa-volume-low {
  color: var(--brand-color) !important;
  text-shadow: 2px 2px 1px black;
}

.fa-backward:hover,
.fa-play:hover,
.fa-forward:hover,
.fa-pause,
.fa-bars:hover,
.fa-heart:hover,
.fa-plus:hover {
  color: var(--shade-text-color) !important;
  text-shadow: 0px 0px 5px var(--shade-text-color), 2px 2px 1px #000000;
  cursor: pointer;
}

.xmark-costum {
  cursor: pointer;
  color: #000;
  text-shadow: 1px 1px 1px #76ffe3, -1px -1px 1px #1dccb8;
}

.card-body {
  background-color: transparent;
  border-radius: 0;
  border: none;
}

.navbar-brand,
.fa-fade {
  color: var(--brand-color);
}

.navbar-brand:focus,
.navbar-brand:hover {
  color: var(--shade-text-color);
  cursor: pointer;
}

.navbar-toggler {
  border: none;
  margin-top: 0;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus,
.navbar-toggler-icon:active,
.navbar-toggler-icon {
  outline: none;
  box-shadow: none;
}


.logo {
  color: #1DCCB8;
  text-shadow: 2px 2px 5px #1DCCB8, -2px -2px 5px #1DCCB8;
}

.offcanvas {
  background: none;
}

.fa-solid {
  cursor: pointer;
}

.text-bg-dark {
  background-color: #0000 !important;
}

.offcanvas-header {
  background-color: #000 !important;
  height: 60px;
  border-left-style: outset;
  border-left-width: 1px;
  border-left-color: var(--brand-color);
}

.nav-link {
  color: var(--brand-color);
  font-family: monospace;

}

.nav-item:hover,
.nav-item:focus,
.nav-item:active {
  background: none;
  color: #1DCCB8;
  text-shadow: 0px 0px 2px #1DCCB8, 0px 0px 2px #1DCCB8bf;
}

.btn-close {
  color: var(--brand-color) !important;
}

.offcanvas.offcanvas-end {
  border-left: var(--bs-offcanvas-border-width) solid var(--brand-color);
}

.nav-link:focus,
.nav-link:hover {
  color: var(--shade-text-color);
  text-shadow: 0 0 3px var(--shade-text-color);
  text-decoration: underline;
}

.btn-close:active,
.btn-close:focus {
  outline: none;
  box-shadow: none;
}

.offcanvas-body {
  background-color: #000000a6;
  border-left-style: outset;
  border-left-width: 1px;
  border-left-color: #666;
}

.menu-footer {
  position: fixed;
  height: 85px;
  bottom: 0;
  padding: 20px;
  width: -webkit-fill-available;
  background-color: black;
}

.googleplay {
  text-align: left;
  font-size: 20px;
  color: #1DCCB8;
}

.appstore {
  text-align: right;
  font-size: 20px;
  color: #1DCCB8;
}


/* blocks */

.profile,
.my_playlist {
  display: none;
  margin-top: 0px;
  /* _________________________________________________________CHANGE SLIDER (30px)__________________________________________________________  */
  color: var(--brand-color);
  font-size: 1rem;
  transition: 0.5s;
  height: 100%;
}

.home {
  display: none;
  margin-top: 0px;
  /* _________________________________________________________CHANGE SLIDER (30px)__________________________________________________________  */
  color: var(--brand-color);
  font-size: 1rem;
  transition: 0.5s;
  height: 100%;
  overflow: auto;
}


.favorite-menu {
  display: none;
}



.select-all-checkbox {
  color: darkgray;
  font-family: monospace;
  font-size: 0.6rem;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: #00000000;
  background-clip: padding-box;
  border: none;
  outline: 0;
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
  border: none;
}

.modal-body {
  text-align: center;
  position: relative;
  flex: 1 1 auto;
  margin-top: 50%;
}



/*CONTROL*/

.play-fav-icon {
  color: #06b9eb8c !important;
}

.delete-fav-icon {
  color: #dc3545a6 !important;
}

.play-fav-icon,
.delete-fav-icon {
  padding: 3px !important;
  border-style: ridge;
  border-width: 1px;
  border-color: #06b9eb8c;
  border-radius: 5px;
  width: 50px;
  height: 25px;
  text-align: center;
}

.play-fav-icon:hover {
  color: #00c7ff !important;
  text-shadow: 0px 0px 4px #00c7ff;
  box-shadow: 0 0 5px 0 var(--shade-text-color);
}

.delete-fav-icon:hover {
  color: #ff0019 !important;
  text-shadow: 0px 0px 4px #ff0000;
  box-shadow: 0 0 5px 0 #ff0000;
  border-color: #ff0000;
}

.wrapper>div {
  padding-right: 10px;
}

.uk-tooltip {
  /* Твои настройки стилей здесь */
  background-color: #000000b8;
  /* Пример цвета фона */
  color: var(--shade-text-color);
  /* Пример цвета текста */
  width: max-content;
  text-shadow: 0 0 5px var(--shade-text-color);
  font-size: x-small;
  font-family: monospace;
}



ul {
  list-style: none;
}

ul>li {
  padding: 5px;
}

ul>li:hover {
  background: none;
}

.song-play-now {
  background: #545454;
}

hr {
  border-color: #888888;
  margin: 0;
  box-shadow: 0;
}

progress {
  width: 100%;
  height: 6px;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
  box-shadow: 0px 0px 1px 1px #1DCCB8, 0px 0px 1px 1px #1DCCB8;
}


.center {
  /* border: 1px solid green; */
  vertical-align: middle;
  display: table-cell;
  display: inline-block;
  padding: 10px;
}

.hidden {
  display: none;
}

.controll-btn {
  cursor: pointer;
}

.wrapper {
  display: grid;
  grid-template-columns: 10% 30% 40% 20%;
  /* grid-template-rows: 30px 30px; */
  align-items: left;
}

.head-btn {
  text-align: center;
}

.title-player-page {
  font-size: xx-large;
}

#player-page-bg {
  height: 30vh;
}



.uk-subnav {
  margin-left: 0 !important;
}

.uk-subnav>* {
  padding: 0;
  background: transparent;
  margin-right: 2%;
}

.uk-subnav-pill>*>:first-child {
  padding: 5px 10px;
  background: #0000ff00;
  color: #06b9ebeb;
  font-family: monospace;
  border-style: solid;
  border-width: thin;
  border-radius: 5px;
  border-color: #00aaff;
  text-transform: lowercase;
}

.uk-subnav-pill>.uk-active>a {
  background-color: #000000;
  color: cyan;
  box-shadow: 0 0 5px 1px cyan;
}

.uk-subnav-pill>*>a:active {
  background-color: #000000;
  color: cyan;
}

a:hover {
  text-decoration: none;
}

.uk-subnav-pill>*>a:hover {
  background-color: #000000;
  color: var(--shade-text-color);
  box-shadow: 0 0 5px 1px var(--shade-text-color);
  border-color: var(--shade-text-color);
  text-shadow: 0 0 3px var(--shade-text-color);
}

.posters-filter {
  height: 10vh;
}

.uk-background-primary {
  background-color: #06090ccc;
}

.uk-h4 {
  color: #000;
  text-shadow: 0px 0px 3px cyan, 0px 2px 2px cyan;
  font-family: monospace;
}

.category-title {
  font-family: system-ui;
  display: flow-root;
  padding: 0;
}



.slide-new-reliases {
  margin-bottom: 40px;
}

.filter-category {
  transition: 0.5s;
}

.filter-styles {
  background-position: 100% 100%;
}

.filter-styles:hover {
  background-position: 100% 100%;
  box-shadow: 0 0 5px 2px cyan, inset 0 0 2px 1px cyan;
}

.playlist_info {
  height: 80vh;
  transition: width 0.3s;
  opacity: 0.6;
  height: 100%;
}

.player_page {
  display: block;
  width: 100%;
  transition: width 0.3s ease;
}

.uk-description-list {
  text-align: center;
  width: 100%;
}

#playlist-page-name-pl {
  font-family: monospace;
  font-size: xx-large;
  color: var(--shade-text-color);
  text-shadow: 0px 0px 3px var(--shade-text-color);
  margin-bottom: 0;
}

#playlist-page-description-count,
#playlist-page-description-created {
  font-family: monospace;
  font-size: small;
  color: var(--brand-color);
  margin: 0;
}

a.uk-link-muted {
  font-family: monospace;
  font-size: small;
  text-transform: capitalize;
  color: var(--text-color);
  text-shadow: 0px 0px 3px var(--shade-text-color);
}

.uk-list {
  width: 100%;
  height: 35vh;
  font-size: initial;
  font-family: monospace;
  overflow-x: hidden;
  overflow-y: scroll;
}

.list-songs-my-playlist {
  height: 100%;
}

.uk-list>* {
  color: #06b9eb8c;
  font-family: monospace;
}

.favorite-list-songs:hover {
  text-shadow: 0 0 0 var(--shade-text-color);
}

.pl-btn {
  text-transform: unset;
  cursor: pointer;
  border-style: ridge;
  border-width: 2px;
  border-radius: 5px;
  display: inline;
  margin: 0 auto;
  line-height: 15px;
  font-family: monospace;
  letter-spacing: unset;
  font-size: .75rem;
  background-color: rgba(0, 0, 0, 0);
  color: var(--brand-color);
  border-color: var(--brand-color);
}

.pl-btn:hover {
  background-color: black;
  color: var(--shade-text-color);
  border-color: var(--shade-text-color);
  box-shadow: 0px 0px 5px 1px var(--shade-text-color);
}

.player-animation {
  height: 200px;
}

#poster-album-player {
  margin-left: 20%;
  box-shadow: 0px 5px 10px 0px #666;
}

#poster-album-player:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px 2px #6c757d;
}

.now-time-song,
.data-time-song {
  font-family: monospace;
  font-size: x-small;
  color: var(--shade-text-color) !important;
  text-shadow: 2px 2px 1px black;
}

.song-active {
  color: var(--shade-text-color) !important;
  text-shadow: 0px 0px 2px var(--shade-text-color) !important;
}


/*______________________________________________________________________________      <NAVBAR>      __________________________________________________________*/


.btn-player-head {
  margin-top: 0;
  padding: 5px;
  font-family: monospace;
  color: var(--brand-color);
  text-shadow: 0 0 5px var(--shade-text-color);
}

.btn-player-head:hover {
  cursor: pointer;
}

.client-name {
  width: 65%;
  font-family: monospace;
  font-size: large;
  color: #4e525399;
  text-shadow: 0 0 0px #6c757d;
}

.client-photo {
  border-radius: 0;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  box-shadow: 0 0 5px 2px #434748;
}

.client-photo>img {
  border-radius: 0;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  box-shadow: 0 0 5px 2px #434748;
}

.offcanvas-header>span {
  text-align: right;
  cursor: none;
}

/*______________________________________________________________________________       <HOME> _________________________________________________________________*/

.button-open-new-rel {
  cursor: pointer;
  color: var(--shade-text-color);

}

.subcategory-slider {
  display: none;
  border-top-style: ridge;
  border-top-width: 0.2px;
  border-top-color: var(--shade-text-color);
  border-bottom-style: ridge;
  border-bottom-width: 0.5px;
  border-bottom-color: var(--shade-text-color);
  background-color: #000;
}

.filter-slider>li {
  font-size: inherit;
  font-family: monospace;
  color: var(--brand-color);
  text-transform: capitalize;
  transition: 0.3s;
}

.filter-slider>li:hover {
  font-size: inherit;
  font-family: monospace;
  color: var(--shade-text-color);
  text-shadow: 0 0 5px var(--shade-text-color);
  text-transform: capitalize;
  transition: 0.3s;
}

.title-subcategory-slider-albums::before,
.subcategory-slider-title::before {
  content: "#";
}

.filter-body {
  transition: 0.3s;
  height: 80%;
}

.filter-menu {
  width: 100%;
  padding-bottom: 10px;
}

.blinking-cursor {
  display: inline-block;
  width: 10px;
  height: 20px;
  background-color: var(--shade-text-color);
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
    /* Курсор становится невидимым на половине времени анимации */
  }
}

.title-subcategory-slider-albums,
.subcategory-slider-title {
  font-family: monospace;
  font-size: x-large;
  color: #0dcaf0;
}

.albums-filter {
  display: none;
  overflow-y: auto;
  max-height: 50vh;
}

.download-pl-filter-cat,
.play-pl-filter-cat {
  font-family: monospace;
  color: var(--shade-text-color);
}

.download-pl-filter-cat:hover,
.play-pl-filter-cat:hover {
  color: var(--shade-text-color);
  text-shadow: var(--shade-text-color);
  animation: blink 1s infinite;
  cursor: pointer;
}

#name-pl-filter-cat {
  text-shadow: 0 0 10px #000;
  font-size: large;
  margin: 0;
}

#info-pl-filter-cat {
  margin-top: 0px;
  margin-left: 0%;
  font-size: x-small;
  font-family: -webkit-body;
  color: gray;
  margin-bottom: 5px;
}

.albums-filter-list {
  box-shadow: 0 5px 5px -3px var(--brand-color);
  padding: 5px;
}

.filter-menu>button {
  width: 25%;
  background-color: #06b9eb36;
  color: var(--shade-text-color);
  font-family: monospace;
}

.filter-menu>button:hover {

  border-style: ridge;
  border-width: 0.8px;
  border-color: var(--shade-text-color);
  color: var(--shade-text-color);
  background-color: #06b9eb73;
}

.filter-menu-active {
  text-shadow: 0 0 5px var(--shade-text-color);
  border-style: ridge;
  border-width: 0.8px;
  border-color: var(--shade-text-color);
  background-color: #06b9eb73 !important;
}


.filter-slider>li {
  padding: 4px;
  padding-right: 0px;
  margin-right: 10px;
  margin-left: 10px;
  width: max-content !important;
}


#subcategory-slider {
  border-top-style: ridge;
  border-top-width: 0.2px;
  border-top-color: var(--shade-text-color);
  border-bottom-style: ridge;
  border-bottom-width: 0.5px;
  border-bottom-color: var(--shade-text-color);
  background-color: #000;
}

#home-part-2 {
  height: 80%;
}

/*______________________________________________________________________________  <FAVOTRITE PAGE>   _______________________________________________________________________*/
.favorite-sub-menu {
  display: none;
  margin-top: 2%;
}

.order-playlist {
  display: none;
  margin-top: 2%;
}

.button-order-playlist {
  width: 100%;
  text-align: center;
  padding: 5px;
  font-family: monospace;
  color: var(--brand-color);
  text-shadow: 0 0 5px var(--shade-text-color);
  border-radius: 5px;
  box-shadow: 0 0 10px 1px var(--shade-text-color);
  cursor: pointer;
  animation: blink 3s infinite;
}

.btn-favorite-head,
.btn-favorite-head-sub {
  border: none;
  border-radius: 2px;
  box-shadow: inset 0 0 5px 2px #666;
  color: #6c757d;
  font-family: monospace;
  text-transform: lowercase;
  text-shadow: 0 0 1px var(--shade-text-color);
  background: none;
  margin-right: 2%;
}

.btn-favorite-head:hover,
.btn-favorite-head-sub:hover {
  border: none;
  color: #f8f9fa;
  text-shadow: 1px -1px 2px #545658, 2px -2px 2px #4a4e52, 1px 1px 3px #545658, 1px 1px 3px #545658;
  box-shadow: inset 0 0 5px 1px #f8f9fa;
}

.active-fav-head>a {
  background: black;
  cursor: pointer;
  box-shadow: 0 0 5px 0px cyan;
  color: cyan;
  border-color: cyan;
}

#favorite-list {
  display: none;
}

.fav-songs,
.fav-playlists {
  background: none;
  font-size: initial;
  font-family: monospace;
  color: azure;
  text-shadow: 1px -1px 1px #999;
  padding: 10px 30px;
  cursor: pointer;
  transition: width 0.3s;
}

.favorite-list-item {
  display: flex;
  align-items: center;
  /* Выравниваем элементы по центру по вертикали */
}

.uk-modal-dialog {
  top: 0;
}

.modal-body-order-pl {
  width: 100%;
  height: 100%;
  background-color: #0c3c45c7;
  transition: width 0.8s ease;
  text-align: center;
  box-shadow: 0 0 10px 1px var(--shade-text-color);
  border-radius: 10px;
  border: none;
}


.favorite-content-title {
  margin-top: 0% !important;
}

.p-modal-order-playlist {
  color: var(--shade-text-color);
  font-family: monospace;
  font-size: medium;
}

.question-modal-order-pl {
  color: var(--brand-color);
  text-align: start;
  font-family: monospace;
  font-size: smaller;
  margin-bottom: 3px;
  margin-left: 5px;
}

.textarea-order-playlist {
  width: 70%;
  height: 100px;
  border: none;
  border-radius: 5px;
  background-color: #000;
  box-shadow: inset 0 0 5px 1px #0dcaf0;
  margin-left: 10px;
}

.textarea-order-playlist:focus {
  outline: 0;
  background-color: #000000;
  color: var(--shade-text-color);
  text-shadow: 0 0 5px var(--shade-text-color);
  box-shadow: inset 0 0 5px 1px var(--shade-text-color);
}

.modal-order-input-client-info {
  text-align: center;
  border: none;
  border-radius: 5px;
  background-color: #000;
  box-shadow: inset 0 0 5px 1px #0dcaf0;
  width: 90%;
  height: 30px;
}

.modal-order-input-client-info:focus {
  outline: 0;
  background-color: #000000;
  color: var(--shade-text-color);
  text-shadow: 0 0 5px var(--shade-text-color);
  box-shadow: inset 0 0 5px 1px var(--shade-text-color);
}

.uk-list-order-modal {
  text-align: left;
  background-color: black;
  border-radius: 5px;
  box-shadow: inset 0 0 5px 1px var(--shade-text-color), 0 0 5px 1px #000000;
  overscroll-behavior: contain;
  height: 80%;
}

.modal-order-general {
  padding: 70px 30px;
}

/*______________________________________________________________________________     <CONTACTS>     _______________________________________________________________________*/
.contacts {
  display: none;
}

.contacts-main {
  color: var(--shade-text-color);
  font-family: monospace;
}

.contacts-mail-phone>a {
  text-decoration: underline;
  color: var(--brand-color);
}

.contacts-mail-phone>a:hover {
  text-shadow: 0 0 5px var(--shade-text-color);
  color: var(--shade-text-color);
}

.contacts-support-select,
.textarea-support-select {
  width: 90%;
  text-transform: none;
  background-color: #5f9ea000;
  color: var(--shade-text-color);
  text-shadow: 0 0 5px #222;
  border-bottom-style: solid;
  border-left-style: hidden;
  border-right-style: hidden;
  border-top-style: hidden;
  border-bottom-color: var(--shade-text-color);
}

.contacts-support-select:focus-visible,
.textarea-support-select:focus-visible {
  outline: none;
}

.textarea-support-privat {
  margin-top: 5%;
  border-bottom-style: hidden;
  resize: none;
  padding-top: 4em;
  padding-bottom: 0;
  margin-bottom: 10px;
  overflow-y: auto;
  /* Добавление вертикального скролла, если контент не помещается */
  color: var(--shade-text-color);
}

.contacts-support-submit {
  background-color: #06b9eb4f;
  color: var(--shade-text-color);
  border: none;
  font-family: monospace;
  text-transform: lowercase;
  width: 90%;
}

.contacts-support-submit:hover {
  border-style: ridge;
  border-width: 0.2px;
  border-color: var(--shade-text-color);
  text-shadow: 0 0 5px var(--shade-text-color);
}

textarea::placeholder {
  color: var(--brand-color);
  font-style: monospace;
}

select option:first-child {
  color: darkgray;
}



/*______________________________________________________________________________     <CONTROL PANEL>     _______________________________________________________________________*/
.progress-panel {
  display: inline-grid;
  grid-template-columns: 15% 70% 15%;
  text-align: center;
  line-height: 6px;
  width: 100%;
  /* height: 10px; */
  /* border: 1px solid green; */
}

progress::-webkit-progress-value {
  background: #000;
}

progress::-moz-progress-bar {
  background: #000;
  border-radius: 6px;
}

progress::-webkit-progress-value {
  background: #000;
}

progress::-webkit-progress-bar {
  background: #000;
  border-radius: 6px;
}

.title-control,
.control-row {
  display: flex;
  transition: 0.3s;
}

.controll-panel {
  /* border: 1px solid white; */
  margin: 0 auto;
  width: 146px;
  height: 65px;
  padding: 0;
}

.volume-control-panel {
  /* Общие стили для ползунка */
  width: 100%;
  /* Ширина элемента */
  margin: 0;
  /* Убираем отступы по умолчанию */
}

/* Стили для трека (полосы, по которой двигается ползунок) */
.volume-control-panel::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  /* Высота трека */
  background: var(--brand-color);
  /* Цвет трека */
}

/* Стили для ползунка */
.volume-control-panel::-webkit-slider-thumb {
  width: 15px;
  /* Ширина ползунка */
  height: 15px;
  /* Высота ползунка */
  background: var(--brand-color);
  /* Цвет ползунка */
  border: 2px solid var(--shade-text-color);
  /* Обводка ползунка */
  border-radius: 50%;
  /* Круглая форма ползунка */
  cursor: pointer;
  /* Изменение курсора при наведении */
  -webkit-appearance: none;
  /* Убираем стандартный стиль для WebKit браузеров */
  margin-top: -6px;
  /* Коррекция положения ползунка */
}

/* Стили для трека при hover */
.volume-control-panel:hover::-webkit-slider-runnable-track {
  background: var(--shade-text-color);
  /* Изменяем цвет трека при hover */
}

.volume-control-panel:focus::-webkit-slider-runnable-track {
  background: var(--shade-text-color);
}

/* Стили для ползунка при hover */
.volume-control-panel:hover::-webkit-slider-thumb {
  background: var(--shade-text-color);
  /* Изменяем цвет ползунка при hover */
  border-color: var(--shade-text-color);
  /* Изменяем цвет обводки ползунка при hover */
}

.div-range-volume {
  padding-left: 0;
}

.prev-btn,
.next-btn {
  font-size: 25px;
  color: #000 !important;
  letter-spacing: .1em;
  text-shadow: -1px -1px 2px #1DCCB8, 1px 1px 2px #1DCCB8;
}

.play-btn,
.pause-btn {
  font-size: 30px;
  color: #000 !important;
  letter-spacing: .1em;
  text-shadow: -1px -1px 2px #1DCCB8, 1px 1px 2px #1DCCB8;
}

.play-btn:hover,
.pause-btn:hover,
.prev-btn:hover,
.next-btn:hover {
  color: #1DCCB8;
  text-shadow: 0px 0px 2px #1DCCB8, 0px 0px 2px #1DCCB8bf;
}




.a-button-footer {
  margin-right: 10px;
  border-style: solid;
  border-color: var(--brand-color);
  box-shadow: 0 0 5px var(--shade-text-color);
}

.a-button-footer:hover,
.a-button-footer:active {
  border-style: solid;
  border-color: var(--brand-color);
  box-shadow: inset 0 0 5px var(--shade-text-color);
}


/*______________________________________________________________________________  <ADMINISTRATOR>   _______________________________________________________________________*/

.administrator {
  display: none;
  height: 100%;
  overflow: hidden;
}

.admin {
  text-align: left;
  height: 100%;
}

.admin-back-btn {
  cursor: pointer;
}

.admin-back-btn:hover {
  animation: none;
  color: white;
}


.admin-center-menu {
  margin-top: 200px;
  text-align: center;
}

.admin-btn-menu {
  width: 100%;
  border: none;
  color: aqua;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1.5rem;
  text-shadow: 0 0 1ex aqua, 0 0 2px rgba(255, 255, 255, 0.8);
}

.with-before::before {
  content: "> ";
}

.table-add-client {
  display: none;
}


.admin-add-client-input {
  background-color: #00000000;
  border: none;
  color: var(--brand-color);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  outline: none;
  text-shadow: 0 0 1ex aqua, 0 0 2px rgba(255, 255, 255, 0.8);

}

.admin-control-panel {
  text-align: center;
  height: 100%;
}

.admin-pin-input {
  border: none;
  outline: none;
  background-color: black !important;
  text-align: center;
  color: aqua !important;
  text-shadow: 0 0 5px aqua;
  border: none;
  outline: none;
}

.clients-list-title {
  color: var(--brand-color);
  text-shadow: none;
}

.clients-list-title:hover {
  color: white;
  text-shadow: 0 0 5px var(--shade-text-color);
}

.clients-list-content {
  margin-left: 15px;
}

.search-all-clients {
  width: 50%;
  background-color: black;
  border: none;
  color: var(--shade-text-color);
  font-size: medium;
  font-family: monospace;
  box-shadow: inset 0 0 2px 0px var(--brand-color);
  border-radius: 4px;

}

.search-all-clients:focus {
  box-shadow: inset 0 0 2px 1px var(--shade-text-color);
}

.search-all-clients::placeholder {
  color: var(--brand-color);
  animation: blink 0.5s infinite;
}

.access-denied {
  border-style: double;
  border-color: #dc3545;
  height: 150px;
  padding: 30px;
  background-color: blueviolet;
  background-image: url(/src/img/bg-access-denied.gif);
  background-size: cover;
  background-blend-mode: hue;
  background-color: #000000e0;
}

.access-done {
  border-style: double;
  border-color: var(--shade-text-color);
  height: 150px;
  padding: 30px;
  background-image: url(/src/img/bg-access-done.gif);
  background-size: cover;
  background-blend-mode: darken;
  background-color: #000000a8;
}

.p-access-denied {
  color: #ff0000;
  text-shadow: 0 0 5px red;
  animation: blink 1s infinite;
  font-size: 1.3rem;
  font-family: monospace;
}

.p-access-done {
  color: var(--shade-text-color);
  text-shadow: 0 0 5px #000;
  animation: blink 1s infinite;
  font-size: 1.3rem;
  font-family: monospace;
}

breadcrumb>:last-child>span {
  color: var(--shade-text-color);
  text-shadow: none;
  text-decoration: underline;
}

.uk-breadcrumb>*>* {
  font-size: .875rem;
  color: #999;
  text-shadow: none;
  color: var(--brand-color);
}

.cp-header-part-1,
.cp-header-part-2 {
  background-color: rgb(0, 0, 0) !important;
  border-bottom-width: 3px;
  height: 100%;
  padding: 0;
  width: 100%;
  border-bottom-style: ridge;
  border-right-width: 3px;
  border-right-style: ridge;
  border-top: none;
  border-left: none;
}

.cp-menu {
  border: none;
  cursor: pointer;
  font-family: monospace;
  color: var(--brand-color);
  text-shadow: none;
  vertical-align: super;
  line-height: 20px;
}

.cp-menu:hover::before {
  content: "[ ";
}

.cp-menu:hover::after {
  content: " ]";
}

.cp-menu:hover {
  color: var(--shade-text-color);
}

.song-muzred:hover {
  color: var(--shade-text-color);
  text-shadow: 0 0 5px var(--shade-text-color);
}

.modal-close-default-muzred {
  width: 100%;
  height: 60%;
  border-style: double;
  border-color: var(--shade-text-color);
}

.muzred-modal-song {
  font-size: medium !important;
}

.cp-head {
  width: 100%;
  height: 4%;
  border-bottom-style: ridge;
  border-bottom-width: 3px;
  border-bottom-color: var(--shade-text-color);
}


.cp-menu-body {
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: -webkit-center;
  background-color: transparent;
  border: none;
  margin-top: 100px;
}

.cp-control {
  width: 100%;
  height: 96%;
  padding: 0;
  text-align: -webkit-center;
  background-color: transparent;
  border: none;
  margin-top: 100px;
}

.cp-main {
  width: 100%;
  height: 75%;
  padding: 0;
  text-align: -webkit-center;
  background-color: black;
  border: none;
}


.cp-main-body {
  width: 100%;
  height: 70%;
  border-bottom-style: ridge;
  border-bottom-width: 3px;
  border-bottom-color: var(--shade-text-color);
}

.cp-main-logs {
  width: 100%;
  height: 30%;
  border: none;
  padding: 5px;
  text-align: start;
}

.logs-string {
  text-shadow: none;
  color: aqua;
  font-family: Andale Mono;
  font-size: 0.8rem;
  letter-spacing: initial;
  margin-bottom: 0px;
  margin-top: 5px;
}

.super {
  display: none;
  font-family: monospace;
  color: var(--brand-color);
  border-style: ridge;
  border-width: 2px;
  border-color: azure;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 5px 0 rgb(235, 247, 247);
}

.display-row-1 {
  height: 30%;
}

.display-row-2 {
  height: 30%;
  border-bottom-style: ridge;
  border-bottom-width: 3px;
  border-bottom-color: azure;
}

.display-row-3 {
  height: 40%;
}

.display-row-2-disk-body,
.display-row-2-memoryInfo-body,
.display-row-2-cpu-body {
  height: 100%;
  padding: 0;
}

.display-row-1-child {
  height: 100%;
  border: none;
  padding: 5px;
  text-align: start;
  background-color: black;
  color: var(--shade-text-color);
  text-shadow: 0 0 5px var(--shade-text-color) !important;
}

.display-row-1-control {
  padding: 0%;
  margin: 0%;

  border-bottom-style: ridge;
  border-bottom-width: 3px;
  border-bottom-color: azure;

  border-right-style: ridge;
  border-right-width: 3px;
  border-right-color: azure;
}

.display-row-1-logs {
  overflow: scroll;
  border-bottom-style: ridge;
  border-bottom-width: 3px;
  border-bottom-color: azure;
}

.display-row-2-disk,
.display-row-2-memoryInfo,
.display-row-3-users-online {
  border-right-style: ridge;
  border-right-width: 3px;
  border-right-color: azure;
}

.body-controls>button {
  border: none;
  background-color: transparent;
  color: var(--brand-color);
  padding: 0;
  margin-bottom: 0px !important;
}

.muzred-controls {
  display: none;
}

.muzred-info-panel {
  display: none;
  position: relative;
  height: 100%;
}

.btn-studio-menu {
  border: none;
  font-family: monospace;
  color: var(--brand-color) !important;
  text-transform: uppercase;
  margin-right: 5px;
}

.btn-studio-menu:hover {
  color: var(--shade-text-color) !important;
  text-shadow: 0 0 5px var(--shade-text-color);
}


.input-group-create-pl {
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: -webkit-center;
  background-color: transparent;
  border: none;
  margin-top: 100px;
}

.input-muzred-body-create-playlist {
  background-color: black;
  border: none;
  text-align: -webkit-center;
  color: var(--shade-text-color);
  border-bottom-style: ridge;
  border-bottom-color: var(--brand-color);
}

.select-muzred-body-create-playlist {
  background-color: black;
  border: none;
  border-radius: 0;
  text-align: -webkit-center;
  color: var(--brand-color);
}

.select-muzred-body-create-playlist:focus {
  outline: none;
  color: var(--shade-text-color);
  text-shadow: 0 0 5px var(--shade-text-color);
}

.input-muzred-body-create-playlist:focus {
  outline: none;
  background-color: black;
  color: var(--shade-text-color);
  text-shadow: 0 0 5px var(--shade-text-color);
}

.input-muzred-body-create-playlist::placeholder {
  color: var(--brand-color);
  font-size: small;
  text-align: -webkit-center;

}

.input-muzred-body-create-playlist-description {
  width: 60%;
  background-color: black;
  border: none;
  text-align: -webkit-center;
  color: var(--shade-text-color);
  border-bottom-style: ridge;
  border-bottom-color: var(--brand-color);
}

.input-muzred-body-create-playlist-description:focus {
  outline: none;
  background-color: black;
  color: var(--shade-text-color);
  text-shadow: 0 0 5px var(--shade-text-color);
}

.input-muzred-body-create-playlist-description::placeholder {
  color: var(--brand-color);
  font-size: small;
  text-align: -webkit-center;
}

.muzred-body-create-playlist {
  margin: 10px;
  padding: 10px;
}



.muzred-body {
  display: none;
  height: 70%;
}

.title-muzred-body {
  color: black;
  text-shadow: none;
  font-family: monospace;
  font-size: large;
  margin-bottom: 0px;
  margin-left: 0% !important;
  background-color: rgba(0, 255, 255, 0.28);
}


.js-upload {
  width: 100%;
  margin-top: 5%;
  cursor: pointer;
}

.muzred-body-list {
  overflow: scroll;
  height: 100%;
  padding: 25px;
  box-shadow: 0 5px 5px -4px #dfedf1 inset;

}

.muzred-info-panel-body-playlist {
  padding: 20px;
}

.muzred-info-panel-buttons-studio {
  position: absolute;
  bottom: 0;
}

.input-muzred-body-search {
  width: 100%;
  height: 30px;
  border: none !important;
  background-color: black;
  color: var(--brand-color) !important;
}

.input-muzred-body-search::placeholder {
  color: var(--brand-color) !important;
  font-size: small;
  text-align: -webkit-center;
  animation: infinite 1s linear alternate-reverse none running blink;

}

.input-muzred-body-search:focus {
  outline: none;
  background-color: black;
  color: var(--brand-color) !important;
  text-shadow: 0 0 5px var(--shade-text-color) !important;
}

.server-info-headers {
  color: var(--brand-color) !important;
  text-shadow: 0 0 5px var(--shade-text-color) !important;
  font-family: monospace;
  font-size: small;
  margin-bottom: 0px;
}

.display-row-2-disk-body {
  background-image: url(/src/img/server-info-disk-bg.gif);
  background-size: cover;
  background-blend-mode: darken;
  background-color: rgba(0, 0, 0, 0.78);
}

.display-row-2-memoryInfo-body {
  background-image: url(/src/img/server-info-memory-bg.gif);
  background-size: cover;
  background-blend-mode: darken;
  background-color: rgba(0, 0, 0, 0.78);
  background-position: center;
}

.display-row-2-cpu-body {
  background-image: url(/src/img/server-info-cpu-bg.gif);
  background-size: cover;
  background-blend-mode: darken;
  background-color: rgba(0, 0, 0, 0.802);
  background-position: center;
}

.progress-disk-used,
.progress-memory-used {
  width: 50%;
  border-radius: 0px;
  border-color: var(--shade-text-color);
  box-shadow: 0 0 5px var(--shade-text-color);
  background-color: transparent;
}

.disk-flex,
.cpu-flex,
.memory-flex {
  width: 100%;
  padding: 5%;
}


.progress-disk-used::-webkit-progress-value {
  background-color: var(--brand-color);
  /* Цвет заполненной части, например, красный */
}

/* Для поддержки в других браузерах */
.progress-disk-used::-moz-progress-bar {
  background-color: var(--brand-color);
  ;
}

.online {
  color: var(--brand-color);
  text-shadow: none;
  font-size: x-small;
  font-family: monospace;
}

.offline {
  color: rgb(244, 101, 101);
  text-shadow: none;
  font-size: x-small;
  font-family: monospace;
}

.body-controls>button:hover::before {
  content: "[ ";
}

.body-controls>button:hover::after {
  content: " ]";
}

.body-controls>button:hover {
  color: var(--shade-text-color);
}

/*______________________________________________________________________________   <BASE ELEMENTS>  _______________________________________________________________________*/





/*______________________________________________________________________________       <MOBILE>     _______________________________________________________________________*/
@media only screen and (min-width: 375px) and (orientation: portrait) {

  .administrator,
  .playlist_info,
  .main {
    margin-top: 15% !important;
  }

  .playlist-info-grid-1 {
    display: none;
  }

  .default-bg {
    padding: 4px;
  }

  .head-btn {
    margin-top: 5%;
  }

  .main {
    /* margin-top: 15% !important; */
    width: 100%;
    height: 85%;
  }

  .deepshadow {
    font-size: small;
  }

  .uk-flex {
    /* margin-top: 15%; */
  }

  .uk-grid {
    margin-left: 0px !important;
  }

  .title-player-page {
    text-shadow: 1px -1px 2px white;
    font-family: monospace;
    font-size: 1rem;
  }

  .playlist_info {
    overflow-y: scroll;
    overflow-x: hidden;
  }

  /*###########<NEW RELIASES MOB>#############*/
  .new-reliases-name {
    font-size: 0.5rem;
  }

  /*###########<FILTER MENU MOB>#############*/

}

/*______________________________________________________________________________   <PLAYLIST-INFO>  _______________________________________________________________________*/

.playlist-info-header {
  background-color: #0dcaf000;
  height: 20%;
  text-align: center;
}

.playlist-info-grid-1 {
  height: 90%;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: top !important;
  background-color: #cdd2db00 !important;
  border: none !important;
}

/*______________________________________________________________________________   <PLAYER>  _______________________________________________________________________*/


.uk-modal {
  padding: 0%;
}

.uk-modal-dialog {
  width: 100%;
  height: 100%;
  max-width: 100% !important;
  background-color: #000;
}

.list-songs-player {
  height: 60%;
}

.title-song-play {
  width: 70%;
  margin-left: 15%;
  text-align: center;
}

.title-song-play>span {
  color: var(--shade-text-color);
}

.head-player {
  height: 40%;
  background-image: url(/src/img/bg-display-song-play.gif);
  background-blend-mode: color;
  background-color: rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  background-position: center;
}

.song-modal-list-songs {
  font-size: medium;
}

.player-modal-list-songs {
  text-align: left;
  height: 100% !important;
}

.name-album-play {
  color: #00aaff;
  font-size: 1.8rem;
  margin-bottom: 0;
}

.count-songs-album-play {
  margin-top: 1px;
  font-family: monospace;
  font-size: x-small;
  text-shadow: 0 0 5px var(--shade-text-color);
}

.hide-player-btn {
  border: none;
  background-color: transparent;
}

/* Общие стили для слайдера */
.slider-volume {
  display: none;
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  background: rgba(128, 128, 128, 0);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* Стили для заполненной части слайдера */
.slider-volume::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: var(--shade-text-color);
}

/* Стили для ползунка слайдера */
.slider-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 5px;
  background: gray;
  cursor: pointer;
}

/* Стили при фокусе слайдера */
.slider-volume:focus {
  opacity: 1;
}



@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0)
  }
}

@-moz-keyframes scroll {
  0% {
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -moz-transform: translate(-100%, 0);
    transform: translate(-100%, 0)
  }
}

@keyframes scroll {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0)
  }
}

.marquee {
  border: none;
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  color: rgb(196, 197, 200);
  text-shadow: 1px 1px 2px #bedcf1;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  -webkit-animation: scroll 10s infinite linear;
  -moz-animation: scroll 10s infinite linear;
  animation: scroll 10s infinite linear;
}