/* Path: ukniga_NEW/static/css/style.css */
@keyframes rainbow {
    0% {background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);}
    5% {background-image: linear-gradient(to left, indigo, blue, green, yellow, orange, red, violet);}
    10% {background-image: linear-gradient(to left, blue, green, yellow, orange, red, violet, indigo);}
    15% {background-image: linear-gradient(to left, green, yellow, orange, red, violet, indigo, blue);}
    20% {background-image: linear-gradient(to left, yellow, orange, red, violet, indigo, blue, green);}
    25% {background-image: linear-gradient(to left, orange, red, violet, indigo, blue, green, yellow);}
    30% {background-image: linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange);}
    35% {background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);}
    40% {background-image: linear-gradient(to left, indigo, blue, green, yellow, orange, red, violet);}
    45% {background-image: linear-gradient(to left, blue, green, yellow, orange, red, violet, indigo);}
    50% {background-image: linear-gradient(to left, green, yellow, orange, red, violet, indigo, blue);}
    55% {background-image: linear-gradient(to left, yellow, orange, red, violet, indigo, blue, green);}
    60% {background-image: linear-gradient(to left, orange, red, violet, indigo, blue, green, yellow);}
    65% {background-image: linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange);}
    70% {background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);}
    75% {background-image: linear-gradient(to left, indigo, blue, green, yellow, orange, red, violet);}
    80% {background-image: linear-gradient(to left, blue, green, yellow, orange, red, violet, indigo);}
    85% {background-image: linear-gradient(to left, green, yellow, orange, red, violet, indigo, blue);}
    90% {background-image: linear-gradient(to left, yellow, orange, red, violet, indigo, blue, green);}
    95% {background-image: linear-gradient(to left, orange, red, violet, indigo, blue, green, yellow);}
    100% {background-image: linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange);}
}

@keyframes verticalRainbow {
    0% {background-image: linear-gradient(to bottom, violet, skyblue, lightblue, cyan, turquoise);}
    5% {background-image: linear-gradient(to bottom, skyblue, lightblue, cyan, turquoise, violet);}
    10% {background-image: linear-gradient(to bottom, lightblue, cyan, turquoise, violet, skyblue);}
    15% {background-image: linear-gradient(to bottom, cyan, turquoise, violet, skyblue, lightblue);}
    20% {background-image: linear-gradient(to bottom, turquoise, violet, skyblue, lightblue, cyan);}
    25% {background-image: linear-gradient(to bottom, violet, skyblue, lightblue, cyan, turquoise);}
    30% {background-image: linear-gradient(to bottom, skyblue, lightblue, cyan, turquoise, violet);}
    35% {background-image: linear-gradient(to bottom, lightblue, cyan, turquoise, violet, skyblue);}
    40% {background-image: linear-gradient(to bottom, cyan, turquoise, violet, skyblue, lightblue);}
    45% {background-image: linear-gradient(to bottom, turquoise, violet, skyblue, lightblue, cyan);}
    50% {background-image: linear-gradient(to bottom, violet, skyblue, lightblue, cyan, turquoise);}
    55% {background-image: linear-gradient(to bottom, skyblue, lightblue, cyan, turquoise, violet);}
    60% {background-image: linear-gradient(to bottom, lightblue, cyan, turquoise, violet, skyblue);}
    65% {background-image: linear-gradient(to bottom, cyan, turquoise, violet, skyblue, lightblue);}
    70% {background-image: linear-gradient(to bottom, turquoise, violet, skyblue, lightblue, cyan);}
    75% {background-image: linear-gradient(to bottom, violet, skyblue, lightblue, cyan, turquoise);}
    80% {background-image: linear-gradient(to bottom, skyblue, lightblue, cyan, turquoise, violet);}
    85% {background-image: linear-gradient(to bottom, lightblue, cyan, turquoise, violet, skyblue);}
    90% {background-image: linear-gradient(to bottom, cyan, turquoise, violet, skyblue, lightblue);}
    95% {background-image: linear-gradient(to bottom, turquoise, violet, skyblue, lightblue, cyan);}
    100% {background-image: linear-gradient(to bottom, violet, skyblue, lightblue, cyan, turquoise);}
}

@keyframes Rainbow {
    0% {background-image: linear-gradient(to left, violet, skyblue, lightblue, cyan, turquoise);}
    5% {background-image: linear-gradient(to left, skyblue, lightblue, cyan, turquoise, violet);}
    10% {background-image: linear-gradient(to left, lightblue, cyan, turquoise, violet, skyblue);}
    15% {background-image: linear-gradient(to left, cyan, turquoise, violet, skyblue, lightblue);}
    20% {background-image: linear-gradient(to left, turquoise, violet, skyblue, lightblue, cyan);}
    25% {background-image: linear-gradient(to left, violet, skyblue, lightblue, cyan, turquoise);}
    30% {background-image: linear-gradient(to left, skyblue, lightblue, cyan, turquoise, violet);}
    35% {background-image: linear-gradient(to left, lightblue, cyan, turquoise, violet, skyblue);}
    40% {background-image: linear-gradient(to left, cyan, turquoise, violet, skyblue, lightblue);}
    45% {background-image: linear-gradient(to left, turquoise, violet, skyblue, lightblue, cyan);}
    50% {background-image: linear-gradient(to left, violet, skyblue, lightblue, cyan, turquoise);}
    55% {background-image: linear-gradient(to left, skyblue, lightblue, cyan, turquoise, violet);}
    60% {background-image: linear-gradient(to left, lightblue, cyan, turquoise, violet, skyblue);}
    65% {background-image: linear-gradient(to left, cyan, turquoise, violet, skyblue, lightblue);}
    70% {background-image: linear-gradient(to left, turquoise, violet, skyblue, lightblue, cyan);}
    75% {background-image: linear-gradient(to left, violet, skyblue, lightblue, cyan, turquoise);}
    80% {background-image: linear-gradient(to left, skyblue, lightblue, cyan, turquoise, violet);}
    85% {background-image: linear-gradient(to left, lightblue, cyan, turquoise, violet, skyblue);}
    90% {background-image: linear-gradient(to left, cyan, turquoise, violet, skyblue, lightblue);}
    95% {background-image: linear-gradient(to left, turquoise, violet, skyblue, lightblue, cyan);}
    100% {background-image: linear-gradient(to left, violet, skyblue, lightblue, cyan, turquoise);}
}


body {
    background-color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    /* font-family: 'Fira Sans', sans-serif; */
    /* font-weight: 400; */
}

main {
    min-height: 3400px;
}

.custom-tooltip {
    --bs-tooltip-bg: blue;
    --bs-tooltip-color: white;
}

#scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 13px;
    left: 15px;
    cursor: pointer;
}

#card {
    transition: box-shadow 0.3s ease; /* Добавляем анимацию перехода для плавного эффекта */
}

#card:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); /* Добавляем тень при наведении */
}

#breadcrumbs {
    background-image: linear-gradient(45deg, #95efff2a, #ecbdff38);
    height: 40px;
    padding-top: 10px;
    margin-bottom: 25px;
    font-family: 'Play', sans-serif;
}


/* Медиазапрос для экранов с максимальной шириной 575px */
@media (max-width: 575px) {
    /* Изменение ширины элемента с id="search" */
    #search {
        width: 280px; /* Устанавливаем ширину 280px */
    }
}

/* Медиазапрос для экранов с максимальной шириной 576px */
@media (max-width: 576px) {
    /* Скрытие элемента с id="info-block" */
    #info-block {
        display: none; /* Скрываем элемент */
    }
}



/* Общие стили для элемента с id="menu-down" */
#menu-down {
    display: none; /* Изначально скрываем элемент */
    position: fixed; /* Фиксированная позиция */
    bottom: 5px; /* Отступ снизу 5px */
    z-index: 1020; /* Устанавливаем индекс z для определения слоя */
    transition: opacity 0.3s;
}

#menu-down.slide-out {
    transform: translateY(100%);
}

/* Медиазапрос для экранов с максимальной шириной 1869px */
@media (max-width: 1199px) {
    /* Показываем элемент с id="menu-down" при ширине экрана меньше 1869px */
    #menu-down {
        display: block; /* Показываем элемент */
    }
}

#lft-menu-btn-close {
    position: absolute; /* Установите позиционирование элемента как абсолютное */
    bottom: 30px; /* Прикрепите элемент к нижнему краю */
    right: 30px; /* Прикрепите элемент к правому краю */
}

#lft-menu-body {
    position: absolute; /* Установите позиционирование элемента как абсолютное */
    top: 70px; /* Определите отступ от верхнего края */
}

#search {
    display: none; /* Изначально скрыть элемент */
}

@media (min-width: 393px) and (max-width: 1199px) {
    #search {
        display: flex; /* Показать элемент с использованием flex при ширине экрана от 393px до 1199px */
    }
}

#left-panel {
    position: absolute;
    top: 100px;
    left: 5px;
    z-index: 1020;
}

@media (max-width: 1586px) {
    #left-panel {
        display: none;
    }
}

/* Правая панель */
#right-panel {
    position: absolute; /* Установите позиционирование элемента как абсолютное */
    top: 100px; /* Прикрепите элемент к верхнему краю */
    right: 5px; /* Прикрепите элемент к правому краю */
    z-index: 1020; /* Устанавливаем индекс z для определения слоя */
}

/* @media (max-width: 1779px) {
    #right-panel {
        top: 400px; /* При ширине экрана меньше или равной 1779px, измените вертикальное положение элемента 
        right: auto; /* Уберите прикрепление справа 
        left: 10px; /* Прикрепите элемент к левому краю
    }
} */

@media (max-width: 1586px) {
    #right-panel {
        display: none;
    }
}

.list-group-item:hover {
    background-color: #f6f6f6; /* Цвет фона при наведении */
    color: #000; /* Цвет текста при наведении */
}

#main {
    margin-top: 100px; /* Отступ сверху 100px */
    margin-bottom: 100px; /* Отступ снизу 100px */
}



/* position dots in carousel */
.flickity-page-dots {
    bottom: 20px;
}

/* dots are lines */
.flickity-page-dots .dot {
    height: 4px;
    width: 40px;
    margin: 0;
    border-radius: 0;
}

  /* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
    background: white;
}

.card-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px; 
    height: 100%; 
    animation: verticalRainbow 80s cubic-bezier(0.25, 0.44, 0.37, 1.0) infinite;
}


.nav-link {
    font-size: 14px;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    position: relative;
    color: black;
    transition: color 0.5s ease;
}

/* ссылки меню */
li {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 300;  
}

.list-group-item:hover {
    background: linear-gradient(150deg, #f9dede42, #ffece23f, #fdf7f442);
}

.list-group-item {
    transition: background 0.5s ease;
}

.nav-link:hover {
    color: rgb(199, 0, 0);
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    width: 1px; /* ширина вашего прямоугольника */
    height: 100%; /* высота вашего прямоугольника (здесь высота равна высоте строки) */
    background-color: rgb(199, 0, 0); /* цвет прямоугольника */
    opacity: 0; /* начальная прозрачность, чтобы его не было видно */
    transition: opacity 0.3s ease; /* плавное изменение прозрачности */
}

.nav-link:hover::before {
    opacity: 1; /* прозрачность при наведении на ссылку */
}

/* Скрыть полосу прокрутки, но разрешить прокрутку */
.offcanvas-body {
    overflow: auto;
    -ms-overflow-style: none; /* IE и Edge */
    scrollbar-width: none; /* Firefox */
}
  
/* Скрыть полосу прокрутки в CR и сафари */
.offcanvas-body::-webkit-scrollbar {
    display: none;
}

#mob-right {
    display: none; /* Или другие значения видимости, которые вы используете */
}

@media screen and (max-width: 1399px) {
    #mob-right {
      display: block;
    }
}

#img-contact {
    height: 100vh; /* 100% высоты экрана */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#img-contact {
    height: 100%;
    object-fit: cover;
}

#card-about-d {
    background-color: #0c1e7c;
    color: #ffffff;
}

.gradient-custom-3 {
    /* fallback for old browsers */
    background: #84fab0;
    
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5));
    
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5))
}

.gradient-custom-4 {
    /* fallback for old browsers */
    background: #84fab0;
    
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1));
    
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1))
}


.btn-custom {
    position: relative;
    color: #000;
    font-weight: 400;
    border-width: 1px;
    border-image: linear-gradient(45deg, #95efff, #ecbdff);
    border-image-slice: 1;
    overflow: hidden; /* Для обрезки псевдоэлемента внутри кнопки */
    z-index: 0; /* Устанавливаем базовый z-index для текста */
}

.btn-custom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(45deg, #95efff, #ecbdff);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1; /* Устанавливаем z-index меньше, чем у текста */
}

.btn-custom:hover::before {
    opacity: 1;
}


hr {
    border: none;
    height: 1px;
    margin: 20px 0;
    /* animation: rainbow 7s linear infinite; */
    background: linear-gradient(115deg, #A100FF, #FFAE00, #00FFF2);
    background-size: 200% 100%;
    background-position: 0% 50%;
    animation: slideGradient 5s ease-in-out infinite alternate;
}

@keyframes slideGradient {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* блоки подписки и ЛК */
.podpiska {
    background: linear-gradient(135deg, #FFDFDF80, #F2FDD580, #D5FAFD80 );
    border-top-left-radius: 0; 
    border-top-right-radius: 0;
}

#login {
    background: linear-gradient(503deg, #a89de0, #fcbfe9);
}


h5 {
    font-family: 'Play', sans-serif;
    font-weight: 400;
}

h1 {
    font-family: 'Play', sans-serif;
    font-size: 30px;
}

.form-control-lg {
    font-size: 13px;
    font-family: 'Play', sans-serif;
}



#search1 {
    display: flex;
    align-items: center; /* Выравнивание элементов формы по центру */
    height: 30px;
}
  
#search1 input {
    flex-grow: 1; /* Input занимает доступное пространство */
    border: none; /* Убрать стандартную рамку */
    border-bottom: 1px solid rgb(173, 173, 173); /* Подчеркнутая линия снизу */
    height: 100%;
    padding: 0 10px; /* Небольшой отступ слева и справа */
    font-family: Play, sans-serif;
}

#search1 input::placeholder {
    color: rgb(173, 173, 173); /* Цвет текста плейсхолдера */
}

#search1 button {
    background: url('/static/search-zoom.png') no-repeat center; /* Иконка вместо кнопки */
    border: none;
    width: 35px; /* Ширина кнопки */
    height: 100%; /* Высота кнопки */
    cursor: pointer; /* Курсор в виде указателя */
    padding: 0; /* Убрать стандартные отступы */
}

.form-control {
    font-family: 'Play', sans-serif;
}

strong {
    font-weight: 600;
}

#container-logo {
    z-index: 1010;
}

#search-card:hover {
    /* Стили при наведении */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Изменение тени при наведении */
    transition: box-shadow 0.3s ease; /* Анимация перехода тени */
}

#search-card a, #search-card p, #search-card h5 {
    font-weight: normal;
    font-style: normal;
}

.card-container {
    scroll-behavior: smooth;
}

#index-card {
    height: 250px;
    overflow: auto; /* добавляем вертикальную прокрутку, если содержимое превышает высоту */
}

@media (max-width: 992px) { /* Максимальная ширина экрана для lg */
    #index-card {
        height: 250px; /* Изменяем высоту для экранов меньше lg */
    }
}












#cards-index {
    height: 300px;
    
}

#cards-index:hover {
    transform: scale(1.01); /* Увеличение масштаба на 10% */
    transition: transform 0.2s; /* Добавляем плавное затухание на изменение масштаба */
}


#body-full {
    position: relative;
    height: 100%;
    border-radius: 5px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    color: white;
    font-weight: bold;
}



/* Фото с оверфлоу на пол карточки */
#img-card-default {
    height: 200px;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}



/* Карточка без фото */
#center-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%; 
}



/* Фильтр и остальные настройки на карточку фулскрин */
#filter {
    position: absolute;
    border-radius: 5px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0) 30%, white 100%); /* Градиент от прозрачного к белому */
}

/* Размещение филтра на фото */
.card-body > * {
    position: relative;
    z-index: 2; 
}

#fullscreen {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
    background-size: cover; /* Растягиваем изображение по размеру блока */
    background-position: center; /* Центрируем изображение */
}


/* Карточка без фото */
#card-half {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 185px;
}

@media (max-width: 550px) { /* Максимальная ширина экрана для lg */
    #card-half {
        height: 130px; /* Изменяем высоту для экранов меньше lg */
    }
}

#half-card-img {
    height: 150px;
    overflow: hidden;
}



/* Карточки на мобиле */
@media (max-width: 550px) {
    #half-card-img {
        height: 220px; 
    }
}

@media (max-width: 550px) {
    #cards-index {
        height: 320px;
    }
}

@media (max-width: 550px) {
    #img-card-default {
        height: 300px;
    }
}
/* Карточки на мобиле */




 /* Цвет текста ссылки и при наведении */
 #full-txt {
    font-size: 13px;
    color: rgb(94, 94, 94);
    text-decoration: none;
    transition: color 0.3s; /* добавляем затухание на изменение цвета в течение 0.3 секунды */
    font-family: 'Fira Sans', sans-serif;
    font-weight: 300; 
}
  
#full-txt:hover {
    color: red; 
}

/* Для даты на карточках */
.post-date {
    padding-top: 3px;
    font-size: 12px;
    color: rgb(0, 0, 0);
    text-shadow: 0 0 7px white;
}

.text-card {
    min-height:155px;
}

a {
    color: black;
    text-decoration: none;
    transition: color 0.3s; /* добавляем затухание на изменение цвета в течение 0.3 секунды */  
}

a:hover {
    color: red; 
}

.page-link {
    color: black; /* цвет ссылок */
    transition: color 0.3s ease; /* анимация для цвета */
}
  
.page-link:hover {
    color: red; /* цвет при наведении */
}

.rectangle::before {
    content: ''; /* необходимо для создания псевдоэлемента */
    display: block; /* позволяет псевдоэлементу быть блочным элементом */
    width: 1px; /* ширина прямоугольника */
    height: 100%; /* высота прямоугольника */
    background-color: rgb(0, 0, 0); /* цвет прямоугольника */
}

.custom-link {
    display: inline-block;
    padding: 4px 8px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Горизонтальная, вертикальная и радиус размытия */
    text-decoration: none; /* Убираем подчеркивание по умолчанию */
    color: black; /* Цвет текста */
    margin-bottom: 5px;
}
  
.custom-link:hover {
    color: #ffffff;
    background: linear-gradient(45deg, #95efff, #ecbdff); /* Цвет фона при наведении */
    transition: background 0.3s ease; /* Анимация для фона */
}

.container::-webkit-scrollbar {
    width: 5px; /* Ширина полосы прокрутки */
  }
  
.container::-webkit-scrollbar-thumb {
    background-color: #888; /* Цвет полосы прокрутки */
    border-radius: 5px; /* Радиус скругления углов */
}
  
.container::-webkit-scrollbar-track {
    background: linear-gradient(45deg, #95efff, #ecbdff);
}

#brc-container {
    z-index: 1010; /* Устанавливаем индекс z для определения слоя */ 
}

.ya-share2__container_size_m .ya-share2__badge .ya-share2__icon  {
    background-color: #9eb1cd;
    margin-left: 0;
}

.highlight {
    background-color: yellow;
}

.icon-tg {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/static/telegram_icon.svg');
    background-size: cover;
    transition: background-image 0.5s ease;
    vertical-align: middle; /* Выравнивание по середине относительно соседних элементов */
}

.icon-tg:hover {
    background-image:url('/static/telegram_icon.png');
}

.icon-vk {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/static/vk_icon.svg');
    background-size: cover;
    transition: background-image 0.5s ease;
    vertical-align: middle; /* Выравнивание по середине относительно соседних элементов */
}

.icon-vk:hover {
    background-image:url('/static/vk_icon.png');
}

.icon-mail {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/static/mail.svg');
    background-size: cover;
    transition: background-image 0.5s ease;
    vertical-align: middle; /* Выравнивание по середине относительно соседних элементов */
}

.icon-mail:hover {
    background-image:url('/static/mail.png');
}

.icon-arh {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/static/archive-1.svg');
    background-size: cover;
    transition: background-image 0.5s ease;
    vertical-align: middle; /* Выравнивание по середине относительно соседних элементов */
}

.icon-arh:hover {
    background-image:url('/static/archive-1.png');
}

.icon-lk {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/static/person.svg');
    background-size: cover;
    transition: background-image 0.5s ease;
    vertical-align: middle; /* Выравнивание по середине относительно соседних элементов */
}

.icon-lk:hover {
    background-image:url('/static/person.png');
}

.icon-dol {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/static/dollar.svg');
    background-size: cover;
    transition: background-image 0.5s ease;
    vertical-align: middle; /* Выравнивание по середине относительно соседних элементов */
}

.icon-dol:hover {
    background-image:url('/static/dollar.png');
}

#sec-social {
    /* Основные стили */
    transition: box-shadow 0.5s ease; /* Анимация перехода тени применяется всегда */
}

#sec-social:hover {
    /* Стили при наведении */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Изменение тени при наведении */
    transition: box-shadow 0.5s ease; /* Анимация перехода тени */
}

b {
    font-weight: 600;
}

#post-inside-section a {
  text-decoration: underline;
}

/* Стили для рекламных постов */
.ad-txt {
    position: relative;
    /* max-height: 150px; */
    overflow: hidden;
}

/* Градиентное затемнение снизу */
.ad-txt::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 12em; /* высота затемнения */
    width: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%);
    pointer-events: none;
}

.paid-label {
    display: inline-block;
    padding: 0.5em 1em;
    font-weight: lighter;
    color: rgb(0, 0, 0);
    /* background-image: url('https://i.gifer.com/2qnW.gif'); */
    background-image: url("/static/sheep.gif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* border-radius: 8px; */
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.5); */
    animation: pulse 2s infinite alternate;
}

.paid-ico {
    display: inline-block;
    padding: 0.5em 1em;
    height: 30px;
    font-weight: lighter;
    color: rgb(255, 255, 255);
    /* background-image: url('https://i.gifer.com/KsY6.gif'); */
    background-image: url("/static/dd.gif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* border-radius: 8px; */
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    animation: pulse 2s infinite alternate;
}

@keyframes pulse {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}

.paid-bg {
    display: flex;
    justify-content: center;  /* Горизонтальное выравнивание */
    align-items: flex-end;
    

    background: linear-gradient(-45deg, rgba(255, 166, 0, 0.486), rgba(238, 130, 238, 0.479), rgba(64, 224, 208, 0.521), rgba(255, 166, 0, 0.5));
    background-size: 600% 600%;
    animation: gradientAnimation 50s ease infinite;

    height: 60px; /* Пример, можно заменить на нужную высоту */
    width: 100%;   /* Пример, можно заменить на нужную ширину */
}

@keyframes gradientAnimation {
0% {
    background-position: 0% 50%;
}
50% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}

/* Медиазапрос для экранов с максимальной шириной 575px */
@media (max-width: 575px) {
    /* Изменение ширины элемента с id="search" */
    .paid-bg {
        height: 100px; /* Устанавливаем ширину 280px */
        align-items: center;
        font-size: 12px;
        padding: 10px;
    }
}

.f {
    margin-top: 30px;
    background: linear-gradient(115deg, #a89de0, #fcbfe9);
}

.txt-con-ft {
    color: #000000;
}

.glass-bg {
    background: linear-gradient(135deg, #FFDFDF80, #F2FDD580, #D5FAFD80); /* полупрозрачный градиент */
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5); /* лёгкая белая рамка */
}

#left-menu {
    border-radius: 7px;
}