/* Общие стили */
body {
    font-family: 'Poppins', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, #6a11cb, #2575fc);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #333;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.container {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
    width: 400px;
    padding: 30px;
    text-align: center;
    animation: slideIn 0.5s ease-in-out;
}

/* Заголовок */
h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

/* Tabs */
.tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.tab-button {
    flex: 1;
    padding: 12px 20px; /* Добавляем больше отступов внутри кнопок */
    border: none;
    background-color: #f0f0f0; /* Светло-серый фон */
    color: #333; /* Цвет текста для лучшей видимости */
    font-weight: bold;
    font-size: 16px; /* Чуть крупнее текст */
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent; /* Линия под кнопкой */
    margin: 0 5px; /* Отступы между кнопками */
    border-radius: 5px 5px 0 0; /* Скругление верхних углов */
    text-transform: uppercase; /* Текст заглавными буквами */
}

.tab-button.active {
    background-color: #6a11cb; /* Фон для активной кнопки */
    color: #fff; /* Белый текст */
    border-bottom: 3px solid #2575fc; /* Линия для активной кнопки */
}

.tab-button:hover {
    background-color: #e0e0e0; /* Светлее при наведении */
    color: #6a11cb; /* Цвет текста меняется на фиолетовый */
}

/* Forms */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

label {
    text-align: left;
    font-weight: bold;
    font-size: 14px;
}

input {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
}

input:focus {
    border-color: #6a11cb;
    box-shadow: 0 0 5px rgba(106, 17, 203, 0.3);
}

/* Кнопки */
button {
    background: linear-gradient(to right, #6a11cb, #2575fc);
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

button:hover {
    transform: translateY(-3px);
    box-shadow: 0px 4px 10px rgba(106, 17, 203, 0.5);
}

button:active {
    transform: translateY(1px);
}

/* Таб-контент */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

/* Анимации */
@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.admin-dashboard {
	max-width: 1400px;
	margin: 50px auto;
	background: #f9f9f9;
	height:660px;
	border-radius: 15px;
	padding: 20px;
	box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
}
.admin-dashboard>.admin-general-tabs-menu {
	margin-bottom:20px;
	gap:16px;
	display: flex;
	align-items: center;
	flex-direction: row-reverse
}
/* Специфический стиль для кнопок в admin-general-tabs-menu */
.admin-general-tabs-menu > button {
    padding: 10px 25px; /* Отступы внутри кнопок */
    font-size: 16px; /* Размер текста */
    font-weight: bold; /* Полужирный текст */
    color: #2575fc; /* Синий текст для гармонии */
    background: transparent; /* Прозрачный фон */
    border: 2px solid #2575fc; /* Синяя рамка */
    border-radius: 50px; /* Полностью закругленные углы */
    cursor: pointer; /* Указатель курсора при наведении */
    transition: all 0.3s ease; /* Плавные эффекты */
    text-transform: uppercase; /* Заглавные буквы */
    position: relative; /* Для создания уникального эффекта */
    overflow: hidden; /* Скрыть анимацию за пределами кнопки */
}

.admin-general-tabs-menu > input {
    padding: 10px 25px; /* Отступы внутри кнопок */
    font-size: 12px; /* Размер текста */
    font-weight: bold; /* Полужирный текст */
    color: #000; /* Синий текст для гармонии */
    background: transparent; /* Прозрачный фон */
    border: 2px solid #2575fc; /* Синяя рамка */
    border-radius: 50px; /* Полностью закругленные углы */
    transition: all 0.3s ease; /* Плавные эффекты */
    text-transform: uppercase; /* Заглавные буквы */
    position: relative; /* Для создания уникального эффекта */
    height:18px;
	width:120px
}
.admin-general-tabs-menu>input::placeholder {color:#959595}

/* Стиль для активной кнопки */
.admin-general-tabs-menu > button.active {
    color: #ffffff; /* Белый текст */
    background: linear-gradient(to right, #6a11cb, #2575fc);
}

/* Эффект наведения */
.admin-general-tabs-menu > button:hover {
    transform: translateY(-3px); /* Поднятие кнопки */
    box-shadow: 0px 5px 15px rgba(37, 117, 252, 0.4); /* Тень под кнопкой */
}

/* Эффект нажатия */
.admin-general-tabs-menu > button:active {
    transform: translateY(2px); /* Кнопка слегка опускается */
    box-shadow: 0px 2px 10px rgba(37, 117, 252, 0.2); /* Уменьшенная тень */
}

.admin-dashboard>.admin-general-tabs {
	display: none;
	max-width: 1400px;
	gap: 20px;
}

.form-container {
	background: #ffffff;
	border-radius: 15px;
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
	padding: 20px 30px 30px 30px;
	width: 268px;
}

.content-container {
	background: #ffffff;
	border-radius: 15px;
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
	padding: 20px 30px 30px 30px;
	width: 900px;
}

.content-container {
	flex: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.user-list {
	height: 335px; /* Ограничение высоты */
	overflow-y: auto; /* Прокрутка при переполнении */
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px;
	box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.1);
	transition: height 0.3s
}

.user-item {
	padding: 10px 20px;
	border-bottom: 1px solid #eee;
}

.user-item:last-child {
	border-bottom: none;
}

.stats-container {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 20px;
	animation: fadeIn 0.5s forwards;
}

.stat-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #f0f4f8; /* Светло-серый фон */
	color: #333; /* Тёмный текст */
	padding: 16px 20px;
	border-radius: 12px;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border-top: 4px solid #4CAF50; /* Зелёный акцент */
}

.stat-item:nth-child(2) {
	border-top-color: #9c9c9c;
}

.stat-item:nth-child(3) {
	border-top-color: #FF9800;
}

.stat-item:nth-child(4) {
	border-top-color: #2196F3;
}

.stat-item:nth-child(5) {
	border-top-color: #ea4ced;
}

.stat-item:nth-child(6) {
	border-top-color: #F44336;
}

.stat-item:hover {
	transform: translateY(-5px); /* Поднятие */
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); /* Увеличенная тень */
	background-color: #ffffff; /* Белый фон */
	cursor: pointer;
}
.stat-item.active {
	transform: translateY(-5px); /* Поднятие */
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); /* Увеличенная тень */
	background-color: #ffffff; /* Белый фон */
	cursor: pointer;
}

.stat-item h4 {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.8;
}

.stat-item p {
	font-size: 36px;
	font-weight: bold;
	margin: 0;
	color: #4CAF50; /* Текст в зелёном стиле */
}

.stat-item:nth-child(2) p {
	color: #9c9c9c;
}
.stat-item:nth-child(3) p {
	color: #FF9800;
}
.stat-item:nth-child(4) p {
	color: #2196F3;
}
.stat-item:nth-child(5) p {
	color: #ea4ced;
}
.stat-item:nth-child(6) p {
	color: #F44336;
}

button.logout-button {
	background: linear-gradient(to right, #f44336, #e53935); /* Градиент красного */
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 5px;
	font-weight: bold;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.3s ease;
	width: 100%; /* Растянуть на всю ширину */
	box-shadow: 0px 4px 10px rgba(244, 67, 54, 0.2); /* Легкая красная тень */
}

button.logout-button:hover {
	background: linear-gradient(to right, #e53935, #d32f2f); /* Более темный красный */
	box-shadow: 0px 6px 15px rgba(244, 67, 54, 0.4); /* Увеличенная тень */
	transform: translateY(-2px);
}

button.logout-button:active {
	transform: translateY(1px);
	box-shadow: 0px 3px 8px rgba(244, 67, 54, 0.3); /* Слегка уменьшенная тень при нажатии */
}

.user-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid #eee;
}

.user-actions {
	display: flex;
	align-items: center;
	gap: 45px;
}

/* Стили для блока user-stats */
.user-stats {
	display: flex;
	gap: 10px; /* Расстояние между кружками */
	align-items: center; /* Центрирование элементов */
}

/* Стили для отдельных кружков */
.user-stat-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px; /* Диаметр кружка */
	height: 50px; /* Диаметр кружка */
	background: #f0f4f8; /* Светло-серый фон */
	color: #333; /* Основной цвет текста */
	border-radius: 50%; /* Круглая форма */
	font-weight: bold;
	font-size: 14px;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-top 0.3s ease;
}

/* Индивидуальные цвета кружков */
.user-stat-item.green {
	border-top: 4px solid #4CAF50;
	color: #4CAF50;
}

.user-stat-item.orange {
	border-top: 4px solid #FF9800;
	color: #FF9800;
}

.user-stat-item.blue {
	border-top: 4px solid #2196F3;
	color: #2196F3;
}

.user-stat-item.gray {
	border-top: 4px solid #9c9c9c;
	color: #9c9c9c;
}

.user-stat-item.fucsy {
	border-top: 4px solid #ea4ced;
	color: #ea4ced;
}

.user-stat-item.red {
	border-top: 4px solid #F44336;
	color: #F44336;
}

/* Эффект наведения */
.user-stat-item:hover {
	transform: translateY(-5px); /* Поднятие кружка */
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); /* Увеличенная тень */
	cursor: pointer;
	background-color: #ffffff; /* Белый фон при наведении */
}


.action-buttons {
	display: flex;
	gap: 10px; /* Расстояние между кнопками */
}

.action-button {
	padding: 10px 15px; /* Увеличенные отступы для удобства */
	border: none;
	border-radius: 8px; /* Более выраженное скругление */
	font-size: 14px; /* Увеличенный размер текста для лучшей читабельности */
	font-weight: bold;
	cursor: pointer;
	color: white; /* Белый цвет текста */
	transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Плавные эффекты */
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Начальная лёгкая тень */
}

/* Зелёная кнопка "Добавить отклик" */
.action-button.edit {
	background: linear-gradient(to right, #4CAF50, #45a049); /* Градиент зелёного цвета */
}

.action-button.edit:hover {
	background: linear-gradient(to right, #45a049, #3e8e41); /* Более тёмный градиент при наведении */
	box-shadow: 0px 6px 15px rgba(76, 175, 80, 0.4); /* Зелёная тень */
	transform: translateY(-3px); /* Поднятие кнопки */
}

.action-button.edit:active {
	transform: translateY(1px); /* Эффект нажатия */
	box-shadow: 0px 3px 8px rgba(76, 175, 80, 0.3); /* Меньшая тень */
}

/* Красная кнопка "Удалить пользователя" */
.action-button.delete {
	background: linear-gradient(to right, #f44336, #e53935); /* Градиент красного цвета */
}

.action-button.delete:hover {
	background: linear-gradient(to right, #e53935, #d32f2f); /* Более тёмный градиент при наведении */
	box-shadow: 0px 6px 15px rgba(244, 67, 54, 0.4); /* Красная тень */
	transform: translateY(-3px); /* Поднятие кнопки */
}

.action-button.delete:active {
	transform: translateY(1px); /* Эффект нажатия */
	box-shadow: 0px 3px 8px rgba(244, 67, 54, 0.3); /* Меньшая тень */
}

/* Затемнение фона */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	justify-content: center;
	align-items: center;
	justify-content:center;
	z-index: 999;
}

/* Контент модального окна */
.modal-content {
	background: #ffffff;
	border-radius: 15px;
	box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
	padding: 30px;
	width: 400px;
	animation: slideIn 0.3s ease-in-out;
	text-align: left;
}

/* Заголовок модального окна */
.modal-content h2 {
	font-size: 18px;
	margin-bottom: 20px;
	color: #333;
}

/* Поля формы */
.modal-content label {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 5px;
	display: block;
	text-align: left;
}

.modal-content input[type="file"] {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 14px;
	margin-bottom: 15px;
	outline: none;
}

/* Кнопки */
.modal-actions {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.button {
	background: linear-gradient(to right, #6a11cb, #2575fc);
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 5px;
	font-weight: bold;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.3s ease;
}

.button:hover {
	transform: translateY(-3px);
	box-shadow: 0px 4px 10px rgba(106, 17, 203, 0.5);
}

.button:active {
	transform: translateY(1px);
}

.button-secondary {
	background: #f0f0f0;
	color: #333;
}

.button-secondary:hover {
	background: #e0e0e0;
}

/* Скрываем стандартное поле input */
.file-input-container input[type="file"] {
	display: none;
}

/* Стили для кастомного выбора файла */
.file-input-label {
	display: inline-block;
	background-color: #f0f0f0; /* Светло-серый фон */
	color: #333; /* Тёмно-серый текст */
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	text-align: center;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
	border: 1px solid #ddd; /* Тонкая серая рамка */
}

.file-input-label:hover {
	background-color: #e0e0e0; /* Чуть более тёмный серый при наведении */
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); /* Больше тени */
}

.file-input-label:active {
	background-color: #d6d6d6; /* Более тёмный серый при клике */
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15); /* Уменьшенная тень */
}

/* Стили текста "Выберите файл" */
#file-name {
	font-size: 14px;
	font-weight: normal;
	color: #555; /* Чуть более тёмный текст */
}


.task-list {
    list-style: none;
    padding: 0;
    margin: 10px;
}

/* Элемент задачи */
.task-item {
    margin-bottom: 15px;
}

/* Карточка задачи */
.task-card {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Равномерное распределение содержимого */
    background: #f0f4f8; /* Светло-серый фон */
    border: 1px solid #e3e6f0; /* Светлая рамка */
    border-radius: 12px; /* Закруглённые углы */
    padding: 0 20px; /* Внутренний отступ */
    margin-bottom: 15px; /* Отступ между карточками */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
    font-family: 'Arial', sans-serif;
}

/* Заголовок задачи */
.task-title {
    font-size: 16px;
    font-weight: 400;
    color: #1f2937;
	width:390px;
}

/* Текст задачи */
.task-card p {
    margin: 4px 0;
    font-size: 14px;
    color: #4b5563;
}

/* Стиль, если задач нет */
.no-tasks {
    font-size: 16px;
    color: #4a4a4a;
    text-align: center;
    margin-top: 12px;
}




.task-buttons {
	display:flex;
	align-items:center;
	gap:16px;
	margin-left:auto
}

/* Общие стили для кнопок */
.task-buttons .btn {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff; /* Белый текст */
    padding: 12px 16px;
    border-radius: 12px;
	white-space:nowrap;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    border: none; /* Убираем границы */
    cursor: pointer;
}

/* Тестовое (Оранжевый) */
.btn-test {
    background: #FF9800; /* Оранжевый фон */
}

.btn-test:hover {
    background: #F57C00; /* Тёмно-оранжевый при наведении */
    box-shadow: 0px 4px 15px rgba(245, 124, 0, 0.3); /* Тень */
}

/* Собеседование (Синий) */
.btn-interview {
    background: #2196F3; /* Синий фон */
}

.btn-interview:hover {
    background: #1976D2; /* Тёмно-синий при наведении */
    box-shadow: 0px 4px 15px rgba(25, 118, 210, 0.3); /* Тень */
}

/* Недозвон (Серый) */
.btn-missed {
    background: #9c9c9c; /* Серый фон */
}

.btn-missed:hover {
    background: #7d7d7d; /* Тёмно-серый при наведении */
    box-shadow: 0px 4px 15px rgba(125, 125, 125, 0.3); /* Тень */
}

/* Недозвон (Серый) */
.btn-offer {
    background: #ea4ced; /* Серый фон */
}

.btn-offer:hover {
    background: #ea4ced; /* Тёмно-серый при наведении */
    box-shadow: 0px 4px 15px rgba(193, 60, 200, 0.6); /* Глубокая, насыщенная тень */
}

/* Отказ (Красный) */
.btn-reject {
    background: #F44336; /* Красный фон */
}

.btn-reject:hover {
    background: #D32F2F; /* Тёмно-красный при наведении */
    box-shadow: 0px 4px 15px rgba(211, 47, 47, 0.3); /* Тень */
}

.btn-reject2 {
    background: #4CAF50;
}

.btn-reject2:hover {
    background: #3a923d;
    box-shadow: 0px 2px 10px #4caf50;
}

/* Эффект при наведении на все кнопки */
.task-buttons .btn:hover {
    transform: translateY(-3px);
}






/* Стили для модального окна */
.modalf {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #6a11cb, #2575fc);
    align-items: center;
    justify-content: center;
}

/* Контент модального окна */
.modalf-content {
    position: relative;
    width: 86%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Кнопка закрытия */
.modalf-close {
    position: absolute;
    top: 0;
    right: -70px;
    font-size: 68px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}

/* Встроенный PDF-проигрыватель */
#pdfViewer {
    width: 100%;
    height: 100%;
    border: none;
}


























/* Убираем иконку календаря и времени */
input[type="datetime-local"].no-icon::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* Стилизация поля */
input[type="datetime-local"].no-icon {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: border 0.3s ease;
}

/* Поле при фокусе */
input[type="datetime-local"].no-icon:focus {
    border-color: #2196F3;
    outline: none;
}

/* Модальное окно */
.custom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease-in-out;
	z-index:999
}

/* Анимация модального окна */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Содержимое модального окна */
.custom-modal-content {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px 30px;
    width: 500px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    animation: slideIn 0.4s ease-in-out;
}

/* Заголовок */
.custom-modal-title {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

/* Кнопка закрытия */
.custom-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 34px;
    cursor: pointer;
    color: #aaa;
    transition: color 0.3s ease;
}

.custom-close:hover {
    color: #e53935;
}

/* Поля формы */
.custom-form-group {
    margin-bottom: 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.custom-form-group p {
    margin-bottom: 6px;
    font-weight: 400;
    color: #828282;
    font-size: 16px;
}

.custom-form-group select,
.custom-form-group input[type="datetime-local"] {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border 0.3s ease;
}

.custom-form-group select:focus,
.custom-form-group input[type="datetime-local"]:focus {
    border-color: #2196F3;
    outline: none;
}

/* Подвал модального окна */
.custom-modal-footer {
    margin-top: 20px;
    display: flex;
    flex-direction:column
}












/* Модальное окно отмены */
#cancelModal .custom-modal-content {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px 30px;
    width: 500px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: slideIn 0.4s ease-in-out;
}

/* Поле для ввода комментария */
.custom-form-group textarea {
    padding: 10px;
	margin-top:4px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    resize: none;
    transition: border 0.3s ease;
}

.custom-form-group textarea:focus {
    border-color: #2196F3;
    outline: none;
}

/* Кнопка действия */
.btn-cancel-action {
    background: #f44336;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel-action:hover {
    background: #c62828;
    box-shadow: 0px 4px 15px rgba(198, 40, 40, 0.3);
    transform: translateY(-2px);
}

























/* Контейнер для поля ввода */
.input-container {
    position: relative;
    width: 328px;
    margin-top:10px;
}

/* Поле ввода */
.input-container input {
    width: 296px;
    padding: 12px 16px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
	color:#858585;
    background: #f0f4f8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.input-container input::placeholder {color:#858585;}

/* Метка (Placeholder) */
.input-container label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #888;
    font-size: 14px;
    pointer-events: none;
    background: #f0f4f8;
    padding: 0 4px;
    transition: 0.3s ease;
}

/* Эффект при фокусе */
.input-container input:focus {
    border-color: #4a90e2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Сдвиг метки вверх при фокусе или наличии текста */
.input-container input:focus ~ label,
.input-container input:not(:placeholder-shown) ~ label {
    top: 0;
	left: 13px;
    font-size: 12px;
    color: #4a90e2;
}

/* Общие стили для Telegram-кнопки */
.tg-button-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Стили кнопки */
.tg-connect-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffffff; /* Белый фон */
	color: #000000; /* Черный текст */
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	padding: 10px 20px;
	border: 1px solid #000000; /* Черный бордюр */
	border-radius: 5px;
	transition: all 0.3s ease-in-out;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень */
	height: 18px;
}

/* Иконка Telegram */
.tg-connect-btn .tg-icon {
	margin-right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tg-connect-btn .tg-icon svg {
	width: 20px;
	height: 20px;
	fill: #000000; /* Черная иконка */
	transition: fill 0.3s ease-in-out;
}

/* Эффект при наведении */
.tg-connect-btn:hover {
	background: #f9fafc; /* Светло-серый фон при наведении */
	border-color: #000000; /* Черный бордюр сохраняется */
	color: #000000; /* Черный текст */
	transform: translateY(-2px); /* Легкий подъем кнопки */
	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); /* Увеличенная тень */
}

.tg-connect-btn:hover .tg-icon svg {
	fill: #000000; /* Иконка остается черной */
}

/* Эффект при нажатии */
.tg-connect-btn:active {
	transform: translateY(1px); /* Эффект нажатия */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Уменьшенная тень */
}

p.go-to-tg {
    font-size: 16px; /* Размер шрифта */
    font-weight: 600; /* Полужирный */
    color: #fff; /* Белый текст */
    background: radial-gradient(circle at top left, #0088cc, #005f99); /* Градиентный фон */
    padding: 10px 10px 10px 8px; /* Внутренние отступы */
    border-radius: 12px; /* Скругленные углы */
    text-align: center; /* Выравнивание по центру */
    display: inline-flex; /* Гибкий контейнер */
    align-items: center; /* Центрирование по вертикали */
    gap: 10px; /* Расстояние между иконкой и текстом */
    text-decoration: none; /* Убираем подчеркивание */
    cursor: pointer; /* Курсор руки */
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.2); /* Внутренняя и внешняя тень */
    position: relative; /* Для анимации */
    overflow: hidden; /* Чтобы анимация не выходила за пределы */
}

.go-to-tg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    transition: all 0.5s ease;
    z-index: 0;
}

.go-to-tg:hover::before {
    top: -10%;
    left: -10%;
}

.go-to-tg:hover {
    background: radial-gradient(circle at bottom right, #00aaff, #0088cc);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

/* Текст всегда на переднем плане */
.go-to-tg span {
    position: relative;
    z-index: 1;
}

/* Иконка SVG */
.go-to-tg svg {
    width: 20px; /* Размер иконки */
    height: 20px; /* Размер иконки */
    fill: #ffffff; /* Цвет иконки */
    position: relative;
    z-index: 1;
    transition: transform 0.8s ease, opacity 0.8s ease;
}

/* Анимация при наведении */
.go-to-tg:hover svg {
    transform: translateY(-4px) rotate(-10deg); /* Самолётик чуть взлетает и наклоняется */
}

/* Улетание через JS */
.go-to-tg svg.fly-away {
    transform: translateY(-100px) translateX(20px) rotate(-45deg); /* Самолётик улетает вверх */
    opacity: 0; /* Прозрачность */
}

/* Возвращение снизу */
.go-to-tg svg.fly-back {
    transform: translateY(100px) translateX(-20px) rotate(0deg); /* Самолётик прилетает снизу */
    opacity: 0; /* Начинает с нулевой прозрачности */
    animation: flyBack 0.5s ease forwards; /* Анимация возвращения */
}

/* Анимация возвращения снизу */
@keyframes flyBack {
    0% {
        transform: translateY(100px) translateX(-20px) rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
}