body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #2c2c2c;
}

.container {
    position: relative;
    margin: 0 auto;
    padding: 20px;
    width: 1210px;
    margin-top: 200px;
    overflow: hidden; /* Обрезать изображение, если оно выходит за пределы */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ссылка на весь экран */
/* ✅ Фиксируем ссылку на весь экран */
.background-link {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Высота на весь экран */
    display: block;
    z-index: 10; /* Выше всех фоновых элементов */
}

/* ✅ Делаем фон ссылкой */
.background-img {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
}

/* ✅ Контейнер поднимаем выше, чтобы он не перекрывал ссылку */
.container {
    position: relative;
    z-index: 20; /* Контент поверх фона */
}




.banner {
    height: 70px;
    margin-bottom: 20px;
    background-color: #857681;
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    line-height: 70px;
    font-size: 1.2em;
    width: 480px;
    border-radius: 0px;
    box-shadow: 0px 0px 14px 0px rgb(63 148 243 / 50%);
}
.banner-rating_1 {
    height: 70px;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: #857681;
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    line-height: 70px;
    font-size: 1.2em;
    width: 480px;
    border-radius: 0px;
    box-shadow: 0px 0px 14px 0px rgb(63 148 243 / 50%);
}
.banner-rating_2 {
    height: 70px;
    margin-bottom: 20px;
    background-color: #857681;
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    line-height: 70px;
    font-size: 1.2em;
    width: 480px;
    border-radius: 0px;
    box-shadow: 0px 0px 14px 0px rgb(63 148 243 / 50%);
}
.banner_right {
    height: 440px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: #857681;
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    line-height: 70px;
    font-size: 1.2em;
    border-radius: 0px;
    width: 220px;
    box-shadow: 0px 0px 11px 5px rgb(63 148 243 / 50%);
}
.server_blocks {
    display: flex
;
    flex-direction: row;
    margin-right: 0px;
    /* margin-top: 260px; */
    justify-content: center;
    /* display: flex
; */
    /* justify-content: space-between; */
    flex-wrap: nowrap;
}
.right_menu {
    display: flex;
    width: 240px;
    margin-left: 10px;
    text-align: center;
    flex-direction: column;
    align-items: center;

}



.left-column, .right-column {
    width: 490px;
}

.block {
    margin-bottom: 10px;
    padding: 10px;
    box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2);
    background-color: #10090957;
    border-radius: 5px;
    width: 460px;
}

.block h2 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 10px;
    font-size: 1.2em;
    text-align: center;
    color: #fbfbfb;


}

.server-list {
    list-style-type: none;
    padding: 0;
}
.server-filter{
    /* box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2); */
    /* background-color: #e1e0e0; */
    border-radius: 5px;
    /* background-color: #10090942; */
    color: #fcfcfe;
}
.server-list li {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #dddddd33;
}

.server-name {
    font-weight: bold;
    color: #ecedef;
    width: 128px;
}
.server-promocode {
    display: inline-block;
    cursor: pointer;
}
.server-promocode-vis{
    width: 20px;
    margin-right: 5px;
}
.promocode {
    width: 20px;
    height: 20px;
    margin-right: 0px;
}
.promocode-tooltip {
    display: none; /* Скрываем по умолчанию */
    position: absolute;
    bottom: 100%; /* Позиционируем окно над элементом */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 10;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    white-space: normal; /* Разрешаем перенос текста */
}

.promocode-tooltip .promocode-header {
    color: orange; /* Заголовок оранжевого цвета */
    font-weight: bold; /* Сделаем текст жирным */
    margin-bottom: 5px; /* Отступ между заголовком и списком */
    font-size: 14px; /* Увеличим размер шрифта */
}

.promocode-tooltip ul {
    margin: 0;
    padding: 0;
    list-style-type: none; /* Убираем маркеры списка */
}

.promocode-tooltip li {
    margin: 0;
    padding: 2px 0; /* Немного отступа между строками */
    border-bottom: 0px solid #dddddd00;
}

.server-promocode:hover .promocode-tooltip {
    display: block; /* Показываем окно при наведении */
}
.server-status{
    width: 25px;
    font-size: 0.8em;
}
.server-rates{
    width: 35px;
    font-size: 0.9em;
    color: #ecedef;
}
.server-chronicles{
    width: 90px;
    margin-left: 8px;
    font-size: 1.1em;
    color: #ecedef;
}
.server-info {
    color: #666;
    font-size: 0.9em;
}

.server-date {
    font-size: 0.9em;
    color: #ffffff;
    width: 60px;
}
.server-date-trusday{
    font-size: 0.9em;
    color: #FFFF00;
    width: 60px;
    background-color: rgba(214, 214, 1, 0.23);
    border-radius: 5px;
    text-align: center;
    /* height: 20px; */
    padding: 3px;
}
.server-date-today{
    font-size: 0.9em;
    color: #48a45b;
    width: 60px;
    background-color: rgba(61, 137, 77, 0.16);
    border-radius: 5px;
    text-align: center;
    /* height: 20px; */
    padding: 3px;
}
.server-date-tomorrow{
    font-size: 0.9em;
    color: #FF0000;
    width: 60px;
    background-color: rgba(61, 137, 77, 0.16);
    border-radius: 5px;
    text-align: center;
    /* height: 20px; */
    padding: 3px;
}
.rating {
    margin-top: 0px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    color: #ba811e;
    margin-left: 10px;
    margin-right: 0px;
}

.star {
    width: 10px;
    height: 10px;
    margin-right: 0px;
}
.star-rating {
    width: 20px;
    height: 20px;
    margin-right: 0px;
}
.vip-image{
    width: 25px;
    height: 20px;
    margin-left: 3px;
}

.telegram {
    width: 25px;
    height: 25px;
    margin-right: 0px;
}
.vote-link {
    margin-right: 5px;
    display: inline-block;
    padding: 3px 3px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.vote-link:hover {
    background-color: rgba(69, 103, 142, 0.85);
}

.server_string{
    display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    font-size: 12px;
    /* margin-bottom: 3px; */
    border-radius: 5px;
    /* background: linear-gradient(179deg, #ffffffcc, #cec4be); */
    /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);*/
}
.star_string{
    display: flex;
}
.main-block{
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

/* Общие стили формы */
.form-rates {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

/* Стили для групп элементов */
.form-group {
    margin-bottom: 15px;
    border-radius: 5px;
    border-color: #ebe9e90f;
}
.head-block{
    display: flex;
    justify-content: center;
    flex-direction: row;
    box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2);
    background-color: rgba(55, 55, 55, 0.97);
    border-radius: 5px;
    padding: 10px;
}
label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    cursor: pointer;
}

input.form-control, input[type="date"] {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #393535;
    color: #e9e9e9;
    border-color: #ebe9e90f;
}
.flatpickr-calendar.inline {
    /* border-color: #000000; */
    border-color: #ebe9e90f !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: #000000 !important;

}

/* Стили для чекбоксов */
.checkbox-group {
    margin-left: 5px;
    font-size: 9px;
    text-align: left;
}

input.form-checkbox {
    margin-right: 10px;
}

label.form-label {
    margin-bottom: 5px;
    display: inline-block;
    font-size: 12px;
}

.top-menu{
    margin-bottom: 5px;
    display: flex;
    padding: 10px;
    height: 50px;
    align-content: center;
    border-radius: 5px;
    width: 1230px;
    box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2);
    background-color: rgba(55, 55, 55, 0.97);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Стили кнопок */
.form-actions {
    margin-top: 20px;
    text-align: center;
}

.btn {
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary {
    background-color: #5f6061;
    color: white;
}

.btn-primary:hover {
    background-color: rgb(69, 103, 143);
}

.btn-secondary {
    background-color: #952929;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Поле для выбора даты */
input[type="date"] {
    cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer; /* чтобы курсор оставался указателем */
}
/* Уменьшаем размер самого календаря */
.flatpickr-calendar {
    width: 200px !important; /* Уменьшаем ширину календаря */
    font-size: 12px !important;
    border-color: #333333/* Уменьшаем шрифт в календаре */
}
.flatpickr-calendar.inline {
    display: block !important;
    position: relative !important;
    top: 2px;
    background-color: #393535 !important;
    color: white !important;
}
/* Уменьшаем размеры кнопок на календаре */
.flatpickr-next-month, .flatpickr-prev-month {
    font-size: 12px !important; /* Уменьшаем размер шрифта кнопок */
    padding: 5px !important; /* Уменьшаем padding для кнопок */
}

/* Уменьшаем высоту строк календаря */
.flatpickr-day {
    font-size: 12px !important; /* Размер шрифта для дней */
    height: 24px !important; /* Высота для каждого дня (уменьшаем) */
    line-height: 24px !important; /* Вертикальное выравнивание */
    width: 24px !important; /* Уменьшаем ширину дня */
    color: #f3ebeb !important;
}
.flatpickr-day:hover{
    background-color: #333333 !important;;
}
.flatpickr-day.prevMonthDay{
    color: rgb(225 223 223 / 30%) !important;
}
span.flatpickr-weekday{
    color: #f4f4f4 !important;
}
.flatpickr-months .flatpickr-month {
    color: #ecedef !important;
}
/* Уменьшаем размеры полей для ввода */
.flatpickr-input {
    font-size: 12px !important; /* Уменьшаем размер шрифта в поле ввода */
    padding: 5px !important; /* Уменьшаем padding в поле ввода */
}

/* Уменьшаем размеры контейнера */
.flatpickr-month {
    font-size: 12px !important;
}

/* Уменьшаем размеры дней в заголовке */
.flatpickr-weekday {
    font-size: 10px !important; /* Размер шрифта для дней недели */
    padding: 3px 0 !important;
    width: 20px !important; /* Уменьшаем ширину дней недели */
    text-align: center !important;
}

/* Уменьшаем отступы в календаре */
.flatpickr-days {
    width: 180px !important;
    padding: 5px 5px !important; /* Уменьшаем отступы между днями */
}
.flatpickr-current-month {
    font-size: 100% !important;
}
.dayContainer{
    min-width: 180px !important;
    max-width: 207.875px !important;
}

.auth_btn {
    padding: 5px 5px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.auth_btn-primary {
    background-color: #5f60615c;
    color: white;
    margin-left: 5px;
    margin-right: 5px;
}

.auth_btn-primary:hover {
    background-color: rgb(55, 55, 55);
}

.auth_btn-secondary {
    background-color: #cf232363;
    color: white;
}

.auth_btn-secondary:hover {
    background-color: #373737;
}
.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 2px; /* Внутренний отступ для эффекта */
    background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4, #ffdde1); /* Градиент */
    display: inline-block;
}
.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    border: 2px solid white; /* Белая рамка внутри */
}
.auth_block{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.auth_block_not_auth{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.url_server {
    text-decoration: none; /* Убираем подчеркивание */
    color: inherit; /* Наследуем цвет от родителя */
    width: 260px;
}


.cabinet-projects-container {
    width: 950px;
    margin: 20px auto;
    padding: 10px;
    /* background-color: #2a2a2a; */
    border-radius: 8px;
    /* box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);*/
}
.cabinet-projects-title, .cabinet-servers-title {
    color: #ffffff;
    text-align: center;
}
.cabinet-project-header{
    display: flex;
    flex-direction: column;
    padding: 2px;
    margin-bottom: -40px;
}
.cabinet-project-block {
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #3a3a3a;
    border-radius: 5px;
    /* background-color: #333; */
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
}
.cabinet-project-name {
    color: #ffcc00;
    width: 168px;
    margin-bottom: -21px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
}
.cabinet-project-description {
    font-size: 14px;
    color: wheat;
}
.cabinet-project-link {
    color: #66c2ff;
    text-decoration: none;
}
.cabinet-servers-container {
    margin-top: 15px;
}
.cabinet-server-details{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.cabinet-servers-list {
    list-style: none;
    padding: 0;
}
.cabinet-server-item {
    background-color: #444;
    margin-bottom: 10px;
    padding: 2px;
    border-radius: 5px;
}
.cabinet-server-name {
    font-weight: bold;
    color: #ffffff;
    width: 200px;
}
.cabinet-server-vip-status{
    width: 35px;
}
.cabinet-server-rates, .cabinet-server-chronicles, .cabinet-server-date, .cabinet-vote-count {
    color: #bbb;
    font-size: 14px;
}
.cabinet-server-rates{
    width: 50px;
}
.cabinet-server-chronicles{
    width: 150px;
}
.cabinet-server-date{
    width: 100px;
}
.cabinet-server-rating{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
}
.cabinet-star-rating img {
    width: 14px;
    height: 14px;
}
.cabinet-server-promocode-block {
    position: relative;
    width: 30px;
}
.cabinet-promocode-icon {
    width: 25px;
    height: 25px;
}
.cabinet-promocode-tooltip {
    display: none; /* Скрываем по умолчанию */
    position: absolute;
    bottom: 100%; /* Позиционируем окно над элементом */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 10;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    white-space: normal; /* Разрешаем перенос текста */
}
.cabinet-promocode-tooltip ul {
    margin: 0;
    padding: 0;
    list-style-type: none; /* Убираем маркеры списка */
}

.cabinet-promocode-tooltip li {
    margin: 0;
    padding: 2px 0; /* Немного отступа между строками */
    border-bottom: 0px solid #dddddd00;
}
.cabinet-promocode-tooltip .cabinet-promocode-header {
    color: orange; /* Заголовок оранжевого цвета */
    font-weight: bold; /* Сделаем текст жирным */
    margin-bottom: 5px; /* Отступ между заголовком и списком */
    font-size: 14px; /* Увеличим размер шрифта */
}

.cabinet-server-promocode-block:hover .cabinet-promocode-tooltip {
    display: block;
}
.cabinet-vote-link img {
    width: 20px;
    height: 20px;
}
.cabinet-no-projects-message, .cabinet-no-servers-message {
    text-align: center;
    color: #ff6666;
    font-weight: bold;
}
.server_blocks_cabinet {
    display: flex;
    width: 980px;
    flex-direction: row;
    margin-right: 0px;
    /* margin-top: 260px; */
    justify-content: center;
    /* display: flex
; */
    /* justify-content: space-between; */
    flex-wrap: nowrap;
}


.cabinet-project-apikey {
    display: flex;
    align-items: center;
    gap: 10px;
    color: wheat;
    font-size: 12px;
}

.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.copy-icon {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.copy-btn:hover .copy-icon {
    opacity: 1;
}
.cabinet-server-edit-link{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 200px;
    color: #cb9300;
}
.vip-icon{
    width: 30px;
}

.create-new-server {
    display: flex;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    flex-direction: column;
    align-items: center;
}

.create-new-server h3 {
    margin-bottom: 15px;
    color: #ffffff;
}
.create-new-server input {
    width: 200px;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    background-color: #2c2c2c;
    color: #ffffff;
}

.create-new-server-textarea {
    width: 200px;
    height: 100px;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    background-color: #2c2c2c;
    color: #ffffff;
}
.create-new-server select {
    width: 220px;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    background-color: #2c2c2c;
    color: #ffffff;
}

.create-new-server button {
    background-color:  #1e671c;
    color: #ffffff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 50%;
}
.create-new-server button:hover {
    background-color: #58c002;
}
.create-new-server-1{
    display: flex;
    flex-direction: row;
}
.create-new-server-2{
    display: flex;
    padding: 20px;
    flex-direction: column;
}
.create-new-server-3{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}
.create-new-server-3 label{
    color: white;
}
.server-form{
    display: flex;
    flex-direction: column;
    align-items: center;
}








.create-new-project {
    display: flex;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    flex-direction: column;
    align-items: center;
}

.create-new-project h3 {
    margin-bottom: 15px;
    color: #ffffff;
}
.create-new-project input, .create-new-project textarea {
    width: 200px;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    background-color: #2c2c2c;
    color: #ffffff;
}
.create-new-project textarea {
    height: 105px;
    width: 393px;
}
.create-new-project select {
    width: 220px;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    background-color: #2c2c2c;
    color: #ffffff;
}

.create-new-project button {
    background-color:  #1e671c;
    color: #ffffff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 70%;
}
.create-new-project button:hover {
    background-color: #58c002;
}
.create-new-project-1{
    display: flex;
    flex-direction: column;
}
.create-new-project-2{
    display: flex;
    margin-left: 20px;
    flex-direction: column;
}
.create-new-project-3{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 250px;
}
.create-new-project-3 label{
    color: white;
}
.project-form{
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-top: 10px;
}

/* Основной контейнер баннеров */
.banner-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    width: 900px;
    border-radius: 10px;
}

/* Стиль для каждого баннера */
.banner-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2a2a2a;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
}

.banner-item:hover {
    transform: scale(1.02);
}

/* Стиль для картинок баннеров */
.banner-img {
    max-height: 80px; /* Размер для обычных баннеров */
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease-in-out;
}

/* Специальный стиль для фонового баннера */
.banner-item.bg-banner .banner-img {
    max-width: 100%; /* Изображение не выйдет за границы контейнера */
    max-height: 300px; /* Ограничение по высоте */
    height: auto; /* Сохранение пропорций */
    object-fit: contain;
}

/* Блок управления баннером */
.banner-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* Кнопка включения/выключения */
.toggle-btn {
    background: #ff4444;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.toggle-btn:hover {
    background: #cc0000;
}

/* Статус баннера */
.status {
    font-size: 14px;
    color: #bbb;
}
.server_blocks_admin {
    display: flex;
    width: 980px;
    flex-direction: column;
    margin-right: 0px;
    justify-content: center;
    flex-wrap: nowrap;
}

.cabinet-promocode-textarea{
    width: 439px;
    height: 47px;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    background-color: #2c2c2c;
    color: #ffffff;
}

.name-block-filter-telegram {
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
    color: rgba(253, 253, 253, 0.63);
    text-shadow: 1px 0px 6px 2px #fe7c00;
    padding: 10px;
}
.name-block-filter-telegram {
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
    color: rgba(253, 253, 253, 0.63);
    text-shadow: 1px 0px 6px 2px #fe7c00;
    padding: 10px;
}
.name-block-filter-telegram-v {
    font-size: 12px;
    border-radius: 8px;
    text-align: left;
    color: rgba(253, 253, 253, 0.63);
    padding: 15px;
    width: 200px;


    background-color: rgb(24 17 27 / 43%);
}
.form-group-telegram {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
    margin-top: 13px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: space-evenly;
    margin-bottom: 10px;
}
.notifi-img{
    width: 40px;
    height: 40px;
}
.notifi-title{
    display: flex;
    align-items: center;
    height: 35px;
}

.custom-checkbox input[type="checkbox"] {
    display: none; /* Скрываем стандартный чекбокс */
}

.custom-checkbox .checkbox-container {
    width: 15px;
    height: 15px;
    background-color: #569ff775;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    margin-right: 5px;
    cursor: pointer;
}

.custom-checkbox .checkbox-container::after {
    content: '\2713';
    font-size: 16px;
    color: #ffffff;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-container::after {
    opacity: 1;
}
.input-group {
    display: flex;
    margin-bottom: 10px;
    width: 150px;
    flex-direction: column;
    align-items: center;
}

.input-label {
    display: block;
    color: #ebe9e9;
    font-size: 13px;
}

.input-field {
    width: 100%;
    padding: 3px;
    border: 1px solid rgb(47 45 59);
    border-radius: 5px;
    margin-bottom: 5px;
    background-color: rgb(0 0 0 / 0%);
    text-align: center;
    color: white;
}
.btn_filter-telegram {
    width: 122px;
    padding: 2px;
    border: 2px solid #fe7c00;
    border-radius: 5px;
    background-color: #333;
    color: rgba(253, 253, 253, 0.63);
    transition: all 0.3s ease;
}
.telegram-notification-tittle{
    color: rgb(213, 105, 1);
}
.btn_filter-telegram:hover {
    transform: scale(1.05);
    border: 1px solid #8f0d03;
}
.telegram-notification-main{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 240px;
    box-shadow: 0px 0px 11px 5px rgb(63 148 243 / 50%);
    border-radius: 8px;
}
.auth-index{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.lang-switcher{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-bottom: -5px;
}
.form-group-telegram-check-and-rate{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.checkbox-group-notification{
    margin-left: 0px;
    font-size: 13px;
    text-align: left;
    color: #ebe9e9;
}
/* Стили для всплывающего окна */
#overlay {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #0f0e17;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px -1px 14px 3px #fdac00;
    z-index: 1000;
    color: wheat;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
}

.content-okno {
    text-align: center;
}

.image-lang{
    width: 35px;
}


/* Стили для карточек проектов */
.project-card {

    border-radius: 5px;
    margin-bottom: 0px;
    width: 810px;
}
.project-header {
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.project-title {
    font-size: 1.1em;
    margin: 0;
    color: #afaeae;
    width: 300px;
    margin-left: 25px;
}
.project-desc {

    color: #afaeae;
    width: 500px;
    margin-left: 60px;
}


/* Стили для списка серверов */
.server-list-rating {
    list-style: none;
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    margin-left: -130px;
}
.server-item-rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: burlywood;
}



/* Кнопка фильтрации */
button {
    padding: 8px 15px;
    background-color: #555;
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-size: 1em;
}
button:hover {
    background-color: #666;
}

.server_blocks_rating {
    display: flex;
    flex-direction: column;
    margin-right: 0px;
    width: 980px;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
/* Стили для пагинации */
.pagination {
    text-align: center;
    margin-top: 20px;
}
.pagination ul {
    list-style: none;
    padding: 0;
    display: inline-block;
}
.pagination li {
    display: inline;
    margin: 0 5px;
}
.pagination a {
    text-decoration: none;
    color: #fff;
    background-color: #555;
    padding: 5px 10px;
    border-radius: 3px;
}
.pagination li.active a,
.pagination a:hover {
    background-color: #888;
}

.vip-image-rating{
    width: 25px;
    height: 20px;
    margin-left: 3px;
    margin-right: 5px;
}
.rates-rating{
    margin-right: 5px;
    color: #b5b4b4;
}
.chronicle-rating{
    margin: 5px;
    color: #b5b4b4;
}
.project-servers{
    margin-left: 5px;
    border-top: 1px solid #3d3d3d;
}
.rating-all{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* border: 1px solid #555; */
    /* border-bottom: 1px solid #555; */
    margin-bottom: 5px;
    box-shadow: 0px 1px 8px rgb(192 192 192 / 21%);
    border-radius: 5px;
}

.ranking-place {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 5px;
    margin-right: 10px;
    margin-left: 10px;
    background-color: #333;
    color: #fff;
    border: 2px solid #555;
    border-radius: 50%;
    font-size: 1.4em;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.first-place {
    background-color: gold;
    color: #000;
    border-color: #d4af37;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

.second-place {
    background-color: silver;
    color: #000;
    border-color: #c0c0c0;
    box-shadow: 0 0 8px rgba(192, 192, 192, 0.8);
}

.third-place {
    background-color: #cd7f32; /* бронзовый оттенок */
    color: #fff;
    border-color: #b87333;
    box-shadow: 0 0 8px rgba(205, 127, 50, 0.8);
}
.image-logo{
    width: 230px;
}
.top-logo{
    justify-content: flex-start;
    background-color: rgba(55, 55, 55, 0.7);
    border-radius: 5px;
    margin-bottom: 3px;
}

.top-menu-cabinet{
    margin-bottom: 10px;
    display: flex;
    padding: 10px;
    height: 150px;
    align-content: center;
    border-radius: 5px;
    width: 1230px;
    box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2);
    background-color: rgba(55, 55, 55, 0.97);
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

}

.right_menu-admin {
    display: flex;
    width: 240px;
    margin-left: 10px;
    text-align: left;
    flex-direction: column;
    align-items: center;

}
.right_menu-cabinet {
    display: flex;
    width: 240px;
    margin-left: 10px;
    text-align: left;
    flex-direction: column;
    align-items: center;

}
.all-info-block{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    width: 220px;
}
.info-item{
    display: flex;
    flex-direction: row;
    color: darkgoldenrod;
    justify-content: space-between;
}
.info-count{
    color: #0db10d;
}

.logo-and-lang{
    display: flex;
    width: 1248px;
    justify-content: space-between;
}


.head_menu_btn {
    padding: 14px 14px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.head_menu-primary {
    background-color: #5f60615c;
    color: white;
    margin-left: 5px;
    margin-right: 5px;
}

.head_menu-primary:hover {
    background-color: rgb(81, 118, 175);
}

.head_menu-secondary {
    background-color: #cf232363;
    color: white;
}

.head_menu-secondary:hover {
    background-color: #373737;
}

.admin_menu_btn {
    padding: 14px 14px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.admin_menu-primary {
    background-color: #5f60615c;
    color: white;
    margin-left: 5px;
    margin-right: 5px;
}

.admin_menu-primary:hover {
    background-color: rgb(81, 118, 175);
}

.admin_menu-secondary {
    background-color: #cf232363;
    color: white;
}

.admin_menu-secondary:hover {
    background-color: #373737;
}
.menu_admin{
    display: flex;
    justify-content: space-between;
}
.checkbox-group-rating-filter {
    margin-left: 5px;
    font-size: 9px;
    text-align: left;
    margin-bottom: 10px;
}
.rates-rating-filter{
    display: flex;
}
.input-field-rating{
    padding: 3px;
    width: 170px;
    border: 1px solid rgb(47 45 59);
    border-radius: 5px;
    margin-bottom: 5px;
    background-color: rgb(0 0 0 / 0%);
    text-align: center;
    color: white;
}
.input-field-rating-rates{
    width: 80px;
    padding: 3px;
    margin-right: 5px;
    border: 1px solid rgb(47 45 59);
    border-radius: 5px;
    margin-bottom: 5px;
    background-color: rgb(0 0 0 / 0%);
    text-align: center;
    color: white;
}
.form-group-rating{
    margin-bottom: 15px;
    border-radius: 5px;
    border-color: #ebe9e90f;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rates-notification{
    display: flex;
    width: 170px;
}
.btn_filter-telegram-unsubscribe {
    width: 122px;
    padding: 2px;
    border: 2px solid #cf2323;
    border-radius: 5px;
    background-color: #333;
    color: rgba(253, 253, 253, 0.63);
    margin-bottom: 5px;
}
.auth_btn-integration {
    background-color: #ff8200d6;
    border: 1px solid #0292a780;
    color: white;
    margin-left: 5px;
    margin-right: 5px;
    box-shadow: 0px 0px 11px 5px rgb(63 148 243 / 50%);
}
.footer {
    display: flex;
    margin-top: 10px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2);
    background-color: rgba(55, 55, 55, 0.69);
    border-radius: 5px;
    padding: 20px;
    width: 1210px;
    max-width: 100%;
    height: auto;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.footer h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0px;
}

.footer p {
    margin-bottom: 0px;
}

.footer .highlight {
    color: #569ff7;
    font-weight: bold;
    background-color: rgba(23, 71, 115, 0);
}
/* Сбрасываем стили у fieldset, если нужно */
.chronicle-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

/* Контейнер для кнопок */
.chronicle-buttons-group {
    display: flex;
    margin-top: 5px;
    gap: 1rem; /* Расстояние между кнопками */
    flex-wrap: wrap; /* Чтобы кнопки переносились при узком экране */
}

/* Стили самих кнопок */
.chronicle-button {
    background-color: #2b2b2b;
    color: #fff;
    width: 92px;
    border: 1px solid rgb(73 116 165 / 62%);
    /* padding: 0.75rem 1.5rem; */
    border-radius: 4px;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Эффект при наведении */
.chronicle-button:hover {
    background-color: #3a3a3a; /* Немного светлее при ховере */
}

/* Опционально - при клике (active) можно добавить эффект затемнения */
.chronicle-button:active {
    background-color: #555;
}

/* Опционально - фокус (если нужен outline) */
.chronicle-button:focus {
    outline: 1px solid #444;
}
.contacts-block {
    background-color: #1f1f1f57;  /* Тёмный фон */
    padding: 2rem;
    border-radius: 8px;
    color: #f0f0f0;            /* Светлый текст */
    max-width: 1000px;         /* Примерная ширина (по желанию) */
    margin: 0 auto;            /* Центрируем */
}

/* Ссылка на Телеграм */
.contacts-telegram-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: #ffd700;            /* Золотистый */
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s;
}
.contacts-telegram-link:hover {
    color: #ff9900;            /* При наведении чуть меняем цвет */
}

/* Текст о платных услугах */
.contacts-intro {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Сетка для карточек услуг */
.contacts-services-grid {
    display: flex;
    flex-wrap: wrap;   /* Позволяет переносить карточки на новую строку */
    gap: 1rem;         /* Расстояние между карточками */
}

/* Карточка одной услуги */
.contacts-service-card {
    background-color: #2c2c2c;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    padding: 1.5rem;
    flex: 1 1 250px;   /* Ширина карточки подстраивается под контейнер */
    max-width: 360px;  /* Максимальная ширина */
}

/* Заголовок услуги */
.contacts-service-title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    color: #e7c471;
}

/* Цена/описание услуги */
.contacts-service-price {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}
.banner-occupied {
    padding: 3px 5px;
    border-radius: 5px;
    color: #FF0000;
    background-color: rgba(61, 137, 77, 0.16);
}

/* Стили для "Свободно" */
.banner-free {
    color: #48a45b;
    background-color: rgba(61, 137, 77, 0.16);
    padding: 3px 5px;
    border-radius: 5px;
}


.label-filter-rating{
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 12px;
}
.sort-buttons {
    margin: 1rem 0;
    text-align: center;
    margin-top: -5px;
    display: flex;
    justify-content: flex-end;
}
.sort-button {
    display: inline-block;
    background-color: #444;
    font-size: 11px;
    color: #fff;
    border: 1px solid rgb(77 170 252 / 25%);
    padding: 5px 12px;
    text-decoration: none;
    border-radius: 5px;
    margin: 0 5px;
    transition: background-color 0.3s;

}
.sort-button:hover {
    background-color: #666;
}
/* Мобильные устройства (макс. 480px) */
@media only screen and (max-width: 769px) {
    .main-block {
        width: 98%;
    }

    .project-title {
        font-size: 0.9em;
        margin: 0;
        color: #afaeae;
        width: 300px;
        margin-left: 1px;
    }
    .cabinet-server-edit-link {
        font-size: 10px;
    }
    .cabinet-server-rating {
        display: none;
    }
    .cabinet-promocode-textarea {
        width: 75%;
    }
    .create-new-server-1 {
        display: flex;
        flex-direction: column;
    }
    .cabinet-server-rates, .cabinet-server-chronicles, .cabinet-server-date, .cabinet-vote-count {
        color: #bbb;
        font-size: 10px;
    }
    .cabinet-server-name {
        font-weight: bold;
        color: #ffffff;
        width: 200px;
        font-size: 10px;
    }
    .cabinet-project-header {
        display: flex;
        flex-direction: column;
        padding: 2px;
        margin-bottom: -10px;
        align-items: center;
    }
    .create-new-project textarea {
        height: 105px;
        width: 100%;
    }
    .create-new-project-2 {
        display: flex;
        margin-left: 0px;
        flex-direction: column;
        align-items: center;
    }
    .create-new-server, .create-new-project {
        width: 90%;
        padding: 3px;
    }
    .project-form {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 10px;
    }
    .right_menu-cabinet {
        display: flex
    ;
        width: 90%;
        margin-left: 10px;
        text-align: left;
        flex-direction: column;
        align-items: center;
    }
    .contacts-services-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        flex-direction: column;
        width: 95%;
    }
    .server_blocks_cabinet {
        width: 90%;
    }
    .project-desc {
        color: #afaeae;
        width: 60%;
        margin-left: 10px;
        font-size: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ranking-place {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        margin-bottom: 5px;
        /* margin-right: 10px; */
        /* margin-left: 10px; */
        background-color: #333;
        color: #fff;
        border: 2px solid #555;
        border-radius: 50%;
        font-size: 0.8em;
        font-weight: bold;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    }
    .first-place {
        background-color: gold;
        color: #000;
        border-color: #d4af37;
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    }
    .second-place {
        background-color: silver;
        color: #000;
        border-color: #c0c0c0;
        box-shadow: 0 0 8px rgba(192, 192, 192, 0.8);
    }
    .star-rating {
        width: 10px;
        height: 10px;
        margin-right: 0px;
    }
    .third-place {
        background-color: #cd7f32;
        color: #fff;
        border-color: #b87333;
        box-shadow: 0 0 8px rgba(205, 127, 50, 0.8);
    }
    .server-list-rating {
        list-style: none;
        display: flex;
        flex-direction: row;
        padding: 0;
        margin: 0;
        margin-left: -130px;
        align-items: center;
        font-size: 10px;
    }
    .project-card {
        border-radius: 5px;
        margin-bottom: 0px;
        width: 80%;
    }
    .cookie-consent-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        background-color: #222;
        color: #f0f0f0;
        padding: 5px;
        text-align: center;
        z-index: 1000;
        box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.5);
    }
    .server_blocks {
        display: flex;
        flex-direction: column;
        margin-right: 0px;
        /* margin-top: 260px; */
        justify-content: center;
        /* display: flex
    ; */
        /* justify-content: space-between; */
        flex-wrap: nowrap;
        align-items: center;
        width: 460px;
        width: 420px;
    }
    .head-block {
        display: flex;
        justify-content: center;
        flex-direction: column-reverse;
        box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2);
        background-color: rgba(55, 55, 55, 0.97);
        border-radius: 5px;
        padding: 2px;
        align-items: center;
        width: 100%;
    }
    .server-chronicles {
        width: 70px;
        margin-left: 8px;
        font-size: 1.0em;
        color: #ecedef;
    }

    .server_string {
        font-size: 11px;
    }

    .rating {
        margin-top: 0px;
        margin-bottom: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 60px;
        color: #ba811e;
        margin-left: 2px;
        margin-right: 0px;
    }
    .url_server {
        text-decoration: none;
        color: inherit;
        width: 108px;
    }
    .block {
        margin-bottom: 10px;
        padding: 3px;
        box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2);
        background-color: #10090957;
        border-radius: 5px;
        width: 420px;
    }
    .footer {
        display: flex;
        margin-top: 10px;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2);
        background-color: rgba(55, 55, 55, 0.69);
        border-radius: 5px;
        padding: 5px;
        width: 95%;
        max-width: 100%;
        height: auto;
        color: #fff;
        font-size: 14px;
        line-height: 1.5;
        text-align: center;
    }
    .footer p {
        margin-bottom: 0px;
        margin-top: 0px;
    }

    body {
        font-size: 14px;
    }
    .container {
        width: 100%;
        padding: 0px;
        border: none;
        box-shadow: none;
    }
    .top-menu{
        height: 110px;
    }
    .auth_btn {
        padding: 5px 5px;
        font-size: 12px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .right_menu {
        margin-left: 0px;
        width: 100%;
        margin-bottom: -40px;
    }

    .chronicle-buttons-group {
        display: flex;
        margin-top: 5px;
        margin-bottom: 20px;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .server-filter h3{
        height: 0px;
    }
    .form-rates {
        padding: 10px;
    }
    .telegram-notification-main {
        display: flex
    ;
        flex-direction: column;
        align-items: center;
        width: 90%;
        box-shadow: 0px 0px 11px 5px rgb(63 148 243 / 50%);
        border-radius: 8px;
        margin-top: 10px;
    }
    .lang-switcher {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        margin-bottom: -10px;
    }
    .head-menu{
        display: flex;
        flex-direction: row;
    }
    .logo-and-lang{
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
    }
    .head_menu_btn {
        padding: 9px 5px;
        font-size: 11px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .top-menu, .cabinet-projects-container, .server_blocks_rating {
        width: 100%;

        flex-direction: column;
    }
    .banner {
        width: 420px;
        height: 70px;
        font-size: 1em;
        line-height: normal;
    }
    .banner_right {
        width: 100%;
        height: auto;
        font-size: 1em;
        line-height: normal;
    }
    .banner-rating_2 {
        margin-top: 30px;
        width: 205px;
        height: 35px;
        font-size: 1em;
        line-height: normal;
    }
    .banner-rating_1 {
        margin-top: 30px;
        width: 205px;
        margin-right: 5px;
        height: 35px;
        margin-left: 5px;
        font-size: 1em;
        line-height: normal;
    }
    .cookie-consent-content {
        max-width: 1160px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .left-column, .right-column {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .create-new-server, .create-new-project {
        width: 100%;
    }
    .sort-buttons {
        justify-content: center;
    }
    .cabinet-projects-container, .top-menu-cabinet {
        width: 100%;
    }
}



/* Ноутбуки и маленькие десктопы (769px - 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1286px) {
    .container {
        width: 100%;
    }
    .top-menu, .logo-and-lang {
        width: 100%;
    }
    .cabinet-projects-container {
        width: 100%;
    }
    .server_blocks {
        display: flex;
        flex-direction: column;
        margin-right: 0px;
        /* margin-top: 260px; */
        justify-content: center;
        /* display: flex
    ; */
        /* justify-content: space-between; */
        flex-wrap: nowrap;
        align-items: center;
        width: 460px;
    }
    .head-block {
        display: flex;
        justify-content: center;
        flex-direction: row;
        box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2);
        background-color: rgba(55, 55, 55, 0.97);
        border-radius: 5px;
        padding: 10px;
        align-items: flex-start;
    }
    .head-block {
        display: flex;
        justify-content: center;
        flex-direction: column-reverse;
        box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2);
        background-color: rgba(55, 55, 55, 0.97);
        border-radius: 5px;
        padding: 10px;
        align-items: center;
    }
    .server-chronicles {
        width: 70px;
        margin-left: 8px;
        font-size: 1.0em;
        color: #ecedef;
    }
    .rating {
        margin-top: 0px;
        margin-bottom: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 60px;
        color: #ba811e;
        margin-left: 2px;
        margin-right: 0px;
    }
    .url_server {
        text-decoration: none;
        color: inherit;
        width: 108px;
    }
    .block {
        margin-bottom: 10px;
        padding: 10px;
        box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2);
        background-color: #10090957;
        border-radius: 5px;
        width: 420px;
    }
    .footer {
        display: flex;
        margin-top: 10px;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        box-shadow: -1px 4px 12px 0px rgba(0, 0, 0, 0.2);
        background-color: rgba(55, 55, 55, 0.69);
        border-radius: 5px;
        padding: 20px;
        width: 680px;
        max-width: 100%;
        height: auto;
        color: #fff;
        font-size: 14px;
        line-height: 1.5;
        text-align: center;
    }
    .footer p {
        margin-bottom: 0px;
        margin-top: 0px;
    }

    body {
        font-size: 14px;
    }
    .container {
        width: 100%;
        padding: 10px;
        border: none;
        box-shadow: none;
    }
    .top-menu{
        height: 110px;
    }
    .auth_btn {
        padding: 5px 5px;
        font-size: 12px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .right_menu {
        margin-left: 0px;
        width: 240px;
        margin-bottom: -40px;
    }

    .chronicle-buttons-group {
        display: flex;
        margin-top: 5px;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .server-filter h3{
        height: 0px;
    }
    .form-rates {
        padding: 20px;
    }
    .lang-switcher {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        margin-bottom: -30px;
    }
    .head-menu{
        display: flex;
        flex-direction: row;
    }
    .logo-and-lang{
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 720px;
    }
    .head_menu_btn {
        padding: 9px 5px;
        font-size: 12px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .top-menu, .cabinet-projects-container, .server_blocks_rating {
        width: 700px;

        flex-direction: column;
    }
    .banner{
        width: 440px;
        height: 50px;
    }
    .banner_right {
        width: 220px;
        height: 440px;
        font-size: 1em;
        line-height: normal;
    }
    .left-column, .right-column {
        width: 100%;
    }
    .create-new-server, .create-new-project {
        width: 100%;
    }
    .sort-buttons {
        justify-content: center;
    }
    .cabinet-projects-container, .top-menu-cabinet {
        width: 100%;
    }
}

/* Десктопы (1025px и выше)
@media only screen and (min-width: 1025px) {
    .container {
        width: 1210px;
        margin-top: 200px;
    }
    .top-menu {
        width: 1230px;
    }
    .logo-and-lang {
        width: 1248px;
    }
    .cabinet-projects-container {
        width: 950px;
    }
}

 */



.ranking-place-server {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-bottom: 5px;
    margin-right: 0px;
    margin-left: 3px;
    background-color: #333;
    color: #fff;
    border: 2px solid #555;
    border-radius: 50%;
    font-size: 1.3em;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.first-place-server {
    background-color: gold;
    color: #000;
    border-color: #d4af37;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

.second-place-server {
    background-color: silver;
    color: #000;
    border-color: #c0c0c0;
    box-shadow: 0 0 8px rgba(192, 192, 192, 0.8);
}

.third-place-server {
    background-color: #cd7f32; /* бронзовый оттенок */
    color: #fff;
    border-color: #b87333;
    box-shadow: 0 0 8px rgba(205, 127, 50, 0.8);
}
.name-rating{
    margin-left: 5px;

}




 .hamburger {
     display: none;
     flex-direction: column;
     cursor: pointer;
 }
.hamburger div {
    width: 30px;
    height: 3px;
    background-color: #3079d1;
    margin: 4px 0;
}
.mobile-menu {
    display: none;
    background-color: #fff;
    padding: 10px;
}
/* Скрываем десктопное меню и показываем гамбургер на мобильных устройствах */
@media (max-width: 768px) {
    .desktop-menu {
        display: none;
    }
    .hamburger {
        display: flex;
    }
    .mobile-menu.active {
        background-color: #393a3c;
        padding: 10px;
        height: 100px;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
        width: 100%;
    }
}


/* Переопределения для светлой темы */
body.light-theme {
    background-color: #f5f5f5;
    color: #333;
}
body.light-theme .top-menu {
    background-color: rgb(227 226 226 / 95%);
}
body.light-theme .head-block {
    background-color: rgb(227 226 226 / 95%);
}
body.light-theme .block {
    background-color: rgb(173 172 172 / 31%);
}
body.light-theme .server-name  {
    color: rgba(0, 0, 0, 0.78);
}
body.light-theme .server-rates  {
    color: rgba(0, 0, 0, 0.78);
}
body.light-theme .server-chronicles  {
    color: rgba(0, 0, 0, 0.78);
}
body.light-theme .server-date  {
    color: rgba(0, 0, 0, 0.78);
}
body.light-theme .block h2  {
    color: rgba(0, 0, 0, 0.78);
}
body.light-theme .footer {
    background-color: rgb(227 226 226 / 95%);
}
body.light-theme .footer h2  {
    color: rgba(0, 0, 0, 0.78);
}
body.light-theme .footer p  {
    color: rgba(0, 0, 0, 0.78);
}
body.light-theme .server-filter  {
    color: rgba(0, 0, 0, 0.78);
}
body.light-theme .checkbox-group-notification  {
    color: rgba(0, 0, 0, 0.78);
}
body.light-theme .input-label  {
    color: rgba(0, 0, 0, 0.78);
}

body.light-theme .banner {
    background-color: #ddd;
    color: #333;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
/* Пример переопределения для кнопок и других элементов */
.theme-toggle-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 10px 15px;
    background-color: #555;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 100;
}
body.light-theme .theme-toggle-btn {
    background-color: #ccc;
    color: #333;
}
/* Здесь можно добавить и остальные переопределения для элементов, где нужно инвертировать цвета */

.delete-button {
    background: none;
    border: none;
    color: red;
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
}

.delete-button:hover {
    color: darkred;
}