/* Стили кнопки удаления */
.delete-icon {
    cursor: pointer; /* Указатель мыши изменится на руку */
    transition: transform 0.25s ease-in-out, fill 0.25s ease-in-out; /* Анимация увеличения и смены цвета */
}

.delete-icon:hover {
    transform: scale(1.2); /* Увеличение размера при наведении */
    fill: #ff5722; /* Смена цвета на оранжевый */
}

/*Другое */
.likes_num{
    text-align: center; background-image: url(img/heart.png); background-size: 50px; 
    width: 50px; height: 50px; line-height: 25px;
}
.likes-container{
    margin-bottom: 15px; display: flex; flex-wrap: nowrap; justify-content: space-between;
}
.music-links{
    margin-top: 10px;
}
.song-details{
    /*height: 120px;*/
}
.card-body{
    border-radius: 0.5rem;
}
.album_cover{
    border-radius: 0.5rem 0.5rem 0rem 0rem;
    width: 100%;
}
.card-internal-container{
    border-radius: 0.5rem;
}
.card-container {
    min-width:320px; 
    max-width: 1560px;
    margin: 3px 3px;
}
.py-4{
    padding-top: 2px !important;
}
@media (max-width: 671px) {
  .card-container  {
    padding: 0px 0px !important;
    
  }
}

#content-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-basis: 0;
  flex-grow: 1;
  margin-top: 0.5rem;
}

.load-more {
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  margin: 1rem;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
}
 
.load-more:hover {
  background-color: #0056b3;
}

.close_pop{
    border: none;
    border-radius: 10px;
    padding: 10px 25px;
    margin: 0px 10px;
    background: rgba(138,43,226, 0.8);
    color: white;
}
.close_pop:hover{
    background: rgba(138,43,226, 0.95);
}
pre {
     white-space: pre-wrap;       /* css-3 */
     white-space: -moz-pre-wrap;  /* Mozilla, с 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ поддерживается в IE, Safari, и Firefox 3.1.*/
     width: 99%;
}
.modalbackground {
    margin: 0; /* убираем отступы */
    padding: 0; /* убираем отступы */
    position: fixed; /* фиксируем положение */
    top:0; /* растягиваем блок по всему экрану */
    bottom:0;
    left:0;
    right:0;
    background: rgba(0,0,0,0.5); /* полупрозрачный цвет фона */
    z-index:100; /* выводим фон поверх всех слоев на странице браузера */
    opacity:0; /* Делаем невидимым */
    pointer-events: none; /* элемент невидим для событий мыши */
    }
    
/* при отображении модального окно - именно здесь начинается магия */
.modalbackground:target {
        opacity: 1; /* делаем окно видимым */ 
        pointer-events: auto; /* элемент видим для событий мыши */
    }
    
/* ширина диалогового окна и его отступы от экрана */
.modalwindow {
        width: 100%;
        max-width: 610px;
        margin: 30px auto;
        padding: 2%;
        background: #fff;
        border-radius: 3px;
    }
    
/* настройка заголовка */
.modalwindow h3 {
    padding: 0;
    margin: 0;
    }
    
/* оформление сообщение */
.modalwindow p {
    padding: 0;
    margin: 4% 0 8% 0;
    }
    
/* вид кнопки ЗАКРЫТЬ */
.modalwindow a {
    display: block;
    color: #fff;
    background: #369;
    padding: 1%;
    margin: 0 auto;
    width: 50%;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    }
    
    /* вид кнопки ЗАКРЫТЬ при наведении на нее мыши */
.modalwindow a:hover {
    background: #47a;
}