#calendar-wrapper {
    width: auto; /* Изменяем ширину на автоматическую */
    max-width: 800px; /* Устанавливаем максимальную ширину */
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

#calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

#calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* Изменяем количество столбцов на 5 */
    grid-gap: 10px; /* Увеличиваем промежуток между ячейками */
}

.calendar-day {
    border: 1px solid #3A3A3A;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    position: relative;
    margin-right: 12px;
    margin-bottom: 12px;
	cursor: pointer;
	text-align: center;
    padding: 10px;
}

.calendar-day.event {
     background-color: var(--light, #ccc) var(--dark, #3a3a3a);
}



#event-popup {
	background-color: #232323;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    z-index: 9999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    display: table;
    height: -webkit-fill-available;
}

#event-popup.hidden {
    display: none;
}

#close-popup {
    float: right;
    cursor: pointer;
    color: #ccc; /* Применяем цвет текста из общих стилей */
}

#close-popup:hover {
    color: #fff; /* Изменяем цвет текста при наведении */
}


/*СТИЛИ ТЕКСТА АНОНСА
.event-details {
    margin-top: 5px;
}*/

.event-name {
    font-size: 12px;
    color: #fff;
}

.event-city {
    font-size: 12px;
    color: #ffc800;

}



/* Стили для мобильных устройств */
@media only screen and (max-width: 600px) {
    #calendar-wrapper {
        width: 90%; /* Уменьшаем ширину календаря */
        max-width: none; /* Отменяем максимальную ширину */
    }

    #calendar-grid {
        grid-template-columns: repeat(2, 1fr); /* Уменьшаем количество столбцов календаря на маленьких экранах */
    }

    .calendar-day {
        
        display: none; /* Скрыть все ячейки календаря по умолчанию на мобильных устройствах */
    }
	.calendar-day.event {
        display: block; /* Показать только ячейки с событиями */
		width: auto;

    }
}



.day-of-week {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #666;
}

#overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 2999;
    opacity: 0.5;
	background: #3a3f44;
    opacity: .7 !important;
	display: none;
}

.saturday .day-of-week  {
    color: #ff6565; /* Например, установим красный цвет для текста */
}

.sunday .day-of-week {
    color: #ff6565;
}

.event-additional-info {
    position: relative;
}

/*КНОПКИ*/

.arrow-left-2,
.arrow-right-2,
.arrow-top-2,
.arrow-bottom-2 {
    width: 40px;
    height: 40px;
}
.arrow-left-2 path,
.arrow-right-2 path,
.arrow-top-2 path,
.arrow-bottom-2 path {
        stroke-width: 0.5;
    stroke: #ffc800;
    transition: fill 0.5s ease-out;
    cursor: pointer;
}
.arrow-left-2 {
    transform: rotate(180deg);
}
.arrow-top-2 {
    transform: rotate(270deg);
}
.arrow-bottom-2 {
    transform: rotate(90deg);
}
.arrow-left-2 path:hover,
.arrow-right-2 path:hover,
.arrow-top-2 path:hover,
.arrow-bottom-2 path:hover {
    fill: #ffc800;
}



/* Стили для всплывающей подсказки */
.tooltip {
	font-size: 16px;
    visibility: hidden;
    width: auto;
    max-width: 200px; /* Максимальная ширина подсказки */
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    border-radius: 8px; /* Увеличиваем радиус скругления углов */
    padding: 8px 16px; /* Увеличиваем отступы */
    position: fixed; /* Позиционируем относительно экрана */
    z-index: 9999; /* Устанавливаем высокий индекс для того, чтобы подсказка была поверх других элементов */
    pointer-events: none; /* Позволяем курсору проходить через подсказку */
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s; /* Добавляем плавные анимации */
    transform: translate(-50%, -50%) scale(0.8); /* Изначально уменьшаем размер подсказки */
}


/* Скрыть подсказку на мобильных устройствах */
@media screen and (max-width: 600px) {
    .tooltip, {
        display: none;
    }

	.dobavit-plus {
        display: none !important;
    }

#btn-feedback.btn {
	white-space: normal !important;
    padding: 10px !important;
    height: 60px !important;
    width: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    transition: font-size 0.3s !important;
}
.dobavit-sobitie {
	text-align: center !important;
    line-height: 1.5;
}
}

@media screen and (min-width: 600px) {
	.dobavit-sobitie {
        display: none !important;
    }
}