body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #2e3440; /* Темный фон */
    color: #d8dee9; /* Светлый текст */
}

.container {
    display: flex;
}

.left-menu {
    width: 250px;
    background-color: #3b4252; /* Темный фон для левого меню */
    padding: 15px;
}

.left-menu a {
    display: block;
    padding: 5px;
    color: #d8dee9; /* Светлый текст */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.left-menu a:hover {
    background-color: #434c5e; /* Более светлый фон при наведении */
}

.top-menu {
    background-color: #4c566a; /* Темный фон для верхнего меню */
    padding: 15px;
    color: #d8dee9; /* Светлый текст для контраста */
    text-align: right;

}

.content {
    flex-grow: 1;
    padding: 20px;
}

.company {
    margin-bottom: 20px;
}

.project-info {
    padding: 10px;
}

.project-info:nth-child(even) {
    background-color: #3b4252; /* Темный фон для четных строк */
}

.project-info:nth-child(odd) {
    background-color: #434c5e; /* Темный фон для нечетных строк */
}
.inline-header {
    display: inline;
}

.inline-header a:hover {
    color: #88c0d0; /* Цвет ссылки при наведении (голубой) */

}

.inline-header a {
    color: #586174; /* Цвет ссылки по умолчанию */
    text-decoration: none; /* Убираем подчеркивание */
}

.button-container {
    display: flex;
    gap: 10px; /* Отступ между кнопками */
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.top-menu-table table{
    width: 100%; /* Задает ширину таблицы */
    border-collapse: collapse; /* Убирает двойные границы между ячейками */

}

.top-menu-table th, td {
    border: 0px solid black; /* Добавляет границы ячеек */
    text-align: left; /* Выравнивание текста по левому краю */
    padding: 8px; /* Добавляет отступы внутри ячеек */

}
.top-menu-table th a:hover {
    color: #88c0d0; /* Цвет ссылки при наведении (голубой) */
}
.top-menu-table th a {
    color: inherit; /* Унаследовать цвет от родительского элемента */
    text-decoration: none; /* Убрать подчеркивание */
}

.top-menu-table th:nth-child(1),
.top-menu-table td:nth-child(1) {
    width: 30%; /* Ширина первого столбца */
}
.top-menu-table th:nth-child(2),
.top-menu-table td:nth-child(2) {
    width: 20%; /* Ширина первого столбца */
}
.top-menu-table th:nth-child(3),
.top-menu-table td:nth-child(3) {
    width: 60%; /* Ширина первого столбца */
}

.top-menu-table th:nth-child(4),
.top-menu-table td:nth-child(4) {
    width: 80%; /* Ширина первого столбца */
}

.top-menu-table tr {
    height: 50px; /* Задает высоту строк (по желанию) */
}
/* Стиль таблички---------------------------------------------------------------------------------------- */
table.styled-table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

table.styled-table th {
    background-color: #677288; /* Темный фон для строки заголовка */
    color: white; /* Цвет текста заголовка */
    text-align: left; /* Выравнивание текста заголовка */
    padding: 10px; /* Увеличенный отступ для заголовков */
    border-bottom: 2px solid #ffffff; /* Нижняя граница для заголовков */
    border: 1px solid #dddddd;
}

table.styled-table td {
    border: 1px solid #dddddd;
    text-align: left; /* Выравнивание текста ячеек */
    padding: 10px; /* Отступ для ячеек */
}

/* Стили для ссылок в ячейках таблицы */
table.styled-table td a {
    color: inherit; /* Унаследовать цвет от родительского элемента */
    text-decoration: none; /* Убрать подчеркивание */
}

table.styled-table td a:hover {
    color: #88c0d0; /* Цвет ссылки при наведении (голубой) */
}

table.styled-table tr:nth-child(even) {
    background-color: #3b4252; /* Темный фон для четных строк */
}

table.styled-table tr:nth-child(odd) {
    background-color: #434c5e; /* Темный фон для нечетных строк */
}

/* Стиль таблички---------------------------------------------------------------------------------------- */
.centered-th {
        text-align: center;
        vertical-align: bottom; /* Выровнять по нижнему краю */
    }


}
/* Задаем размеры для каждого столбца */
table.styled-table th:nth-child(1),
table.styled-table td:nth-child(1) {
    width: 20%; /* Ширина первого столбца */
}

table.styled-table th:nth-child(2),
table.styled-table td:nth-child(2) {
    width: 20%; /* Ширина второго столбца */
}

table.styled-table th:nth-child(3),
table.styled-table td:nth-child(3) {
    width: 20%; /* Ширина третьего столбца */

}

table.styled-table th:nth-child(4),
table.styled-table td:nth-child(4) {
    width: 20%; /* Ширина четвертого столбца */
}

table.styled-table th:nth-child(5),
table.styled-table td:nth-child(5) {
    width: 20%; /* Ширина пятого столбца */
}

/* Заголовки h2 с разными цветами */
.h2-blue {
    color: #88c0d0; /* Светло-голубой цвет */
}

.h2-green {
    color: #a3be8c; /* Зеленый цвет */
}

.h2-purple {
    color: #c598d9; /* Сиреневый цвет */
}
.h2-orange {
    color: #d0a688
}
/* Контейнер для формы */
.company {
    flex: 1;
    padding: 20px;
}

/* Стили для формы */
form {
    display: flex;
    gap: 1px;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: column;
}

/* Группа для метки и поля ввода */
.form-group {
    display: flex;
    flex-direction: column; /* Расположение метки и поля ввода одно под другим */
    margin-bottom: 15px; /* Отступ между группами полей */
}

/* Стили для полей ввода и текстовых областей */
input[type="text"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%; /* Задаем одинаковую ширину для всех полей ввода */
    max-width: 400px; /* Устанавливаем максимальную ширину */
    padding: 10px;
    border: 1px solid #4c566a; /* Цвет рамки */
    border-radius: 5px;
    background-color: #3b4252; /* Темный фон для полей ввода */
    color: #d8dee9; /* Светлый текст */
}

/* Стили для меток */
.form-label {
    margin-bottom: 5px; /* Отступ снизу для метки */
}
.form-input-disable {
    color: #d08770;
}
/* Стили для сообщений об ошибках */
.form-error {
    color: #d08770; /* Оранжевый цвет для сообщений об ошибках */
    margin-top: -10px;
    margin-bottom: 10px;
}
/* Стили для отключенных полей */
select[disabled], input[disabled], textarea[disabled] {
    background-color: #2e3440; /* Цвет фона для отключенного поля */
    color: #8a8f97; /* Цвет текста для отключенного поля */
    cursor: not-allowed; /* Курсор при наведении */
    opacity: 0.6; /* Прозрачность для бледного эффекта */
}

/* Стили для кнопки отправки */
button {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #5e81ac; /* Цвет кнопки */
    color: #ffffff; /* Белый текст на кнопке */
    cursor: pointer; /* Указатель при наведении */
    transition: background-color 0.3s;

}

button:hover {
    background-color: #4c566a; /* Более темный цвет при наведении */
}


.btn-like:hover {
    background-color: #574c6a; /* Более темный цвет при наведении */
}
.btn-like {
    font-size: 14px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #ac5e78; /* Цвет кнопки */
    color: #ffffff; /* Белый текст на кнопке */
    cursor: pointer; /* Указатель при наведении */
    transition: background-color 0.3s;
    text-decoration: none;
    width: auto; /* Автоматическая ширина в зависимости от текста */
    max-height: 18px;
    max-width: 65px;} /* Установите максимальную ширину *


/* Стиль таблички c инфой по документу---------------------------------------------------------------------------------------- */
.info-table table{
    width: 10%; /* Задает ширину таблицы */
    border-collapse: collapse; /* Убирает двойные границы между ячейками */

}
.info-menu-table th {
    background-color: #677288; /* Темный фон для строки заголовка */
    color: white; /* Цвет текста заголовка */
    text-align: left; /* Выравнивание текста заголовка */
    padding: 10px; /* Увеличенный отступ для заголовков */
    border-bottom: 2px solid #ffffff; /* Нижняя граница для заголовков */
    border: 1px solid #dddddd;
    border-collapse: collapse;
}

.info-menu-table td {
    border: 1px solid #dddddd;
    text-align: left; /* Выравнивание текста ячеек */
    padding: 10px; /* Отступ для ячеек */
    border-collapse: collapse;
}

}
.info-menu-table th a:hover {
    color: #88c0d0; /* Цвет ссылки при наведении (голубой) */
}
.info-menu-table th a {
    color: inherit; /* Унаследовать цвет от родительского элемента */
    text-decoration: none; /* Убрать подчеркивание */
}

.info-menu-table th:nth-child(1),
.info-menu-table td:nth-child(1) {
    width: 10%; /* Ширина первого столбца */

}
.info-menu-table th:nth-child(2),
.info-menu-table td:nth-child(2) {
    width: 20%; /* Ширина первого столбца */

/* Стиль таблички c инфой по документу конец---------------------------------------------------------------------------------------- */