body {
    font-family: 'Roboto', sans-serif;
    
    background-color: #f9f9f9;
  /*  margin: 20px auto; /* Центрируем содержимое 
    max-width: 1200px; /* Устанавливаем максимальную ширину для всего окна 
    padding: 20px; /* Добавляем отступы внутри контейнера 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Добавляем тень для визуального эффекта 
    border-radius: 8px; /* Скругляем углы контейнера 
    box-sizing: border-box; /* Убедитесь, что размеры учитывают отступы и границы */
}

#gregorianResult, #hijriResult {
    font-weight: 500;

}



.tabs {
    display: flex;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 20px;
    border-bottom: 2px solid #388e3c; /* Добавлена нижняя граница для вкладок */
    flex-wrap: wrap; /* Позволяет вкладкам переноситься на новую строку */
    
}

.tab {
    padding: 10px 20px;
    background: #e8f5e9;
    color: #00;
    margin-right: 5px;
    border: 1px solid #388e3c;
    border-bottom: none; /* Убираем нижнюю границу */
    border-radius: 4px 4px 0 0; /* Скругление верхних углов */
    transition: background 0.3s, color 0.3s; /* Плавный переход */
    position: relative; /* Для псевдоэлементов */
}

.form-group {
    margin-bottom: 15px; /* Расстояние между полями */
    flex: 1; /* Позволяет элементам занимать одинаковое пространство */
}

.form-group label {
    margin-bottom: 15px; /* Расстояние между полями */
    flex: 1; /* Позволяет элементам занимать одинаковое пространство */
    font-size: 16px;
}

.tab.active {
    background: #4caf50;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Тень для активной вкладки */
}

.tab:hover {
    background: #379237;
}

.tab:after {
    content: '';
    position: absolute;
    bottom: -2px; /* Положение тени */
    left: 0;
    right: 0;
    height: 2px; /* Высота линии под вкладкой */
    background: #388e3c; /* Цвет линии */
    transform: scaleX(0); /* Начальное состояние - скрыто */
    transition: transform 0.3s; /* Плавный переход */
}

.tab:hover:after {
    transform: scaleX(1); /* Показываем линию при наведении */
}

.tab-content {
    border: 1px solid #388e3c;
    padding: 10px 370px;
    background: white;
    border-radius: 0 0 4px 4px; /* Скругление нижних углов */
}

button {
    width: 100%; /* Устанавливаем ширину в 100% для равной длины */
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.3s;
    border-radius: 4px; /* Скругление углов кнопок */
    margin: 10px 0; /* Отступ сверху для кнопки */
    height: 40px; /* Устанавливаем фиксированную высоту */
}


button:hover {
    background-color: #2e7d32;
}

label {
    display: block; /* Отображение меток как блочных элементов */
    margin-bottom: 0px !important; /* Отступ снизу для меток */
    font-weight: bold; /* Сделать текст меток жирным */
}

select, input {
    width: 100%; /* Устанавливаем ширину в 100% для равной длины */
    padding: 10px; /* Увеличено для лучшего восприятия */
    border: 1px solid #388e3c;
    border-radius: 4px; /* Скругление углов */
    background-color: #f1f1f1; /* Светлый фон для полей */
    color: #333; /* Цвет текста */
    font-size: 16px; /* Увеличенный размер шрифта */
    transition: border-color 0.3s, background-color 0.3s; /* Плавный переход */
    box-sizing: border-box; /* Убедитесь, что размеры учитывают отступы и границы */
    margin-top: 0px !important;
}

.form-row {
    display: flex; /* Используем Flexbox для выравнивания */
    flex-direction: column; /* Элементы располагаются в столбик */
    margin-top: 10px; /* Отступ сверху для разделения от полей */
    width: 100%; /* Убедитесь, что .form-row занимает всю ширину */
}

select:hover, input:hover {
    border-color: #2e7d32; /* Изменение цвета рамки при наведении */
    background-color: #e8f5e9; /* Изменение фона при наведении */
}

select:focus, input:focus {
    outline: none; /* Убираем стандартный контур */
    border-color: #388e3c; /* Цвет рамки при фокусе */
    background-color: #fff; /* Белый фон при фокусе */
}

/* Адаптивные стили */
@media (max-width: 768px) {
    .tabs {
        flex-direction: column; /* Вкладки в колонку на маленьких экранах */
    }

    .tab {
        margin-right: 0; /* Убираем правый отступ */
        margin-bottom: 5px; /* Добавляем отступ снизу */
    }

    button {
        max-width: 100%; /* Кнопка займет всю ширину */
    }
    
    

    select, input {
        max-width: 100%; /* Поля займут всю ширину */
    }
}

@media (max-width: 480px) {
    body {
        margin: 0px; /* Уменьшаем отступы на маленьких экранах */
       
    }
    
    h1, h2, h3, h4 {
        font-size: 22px !important; /* Уменьшаем размер заголовков */
		text-align: center;
    }

    .tab {
        padding: 8px 16px; /* Уменьшаем отступы для вкладок */
    }

.tab-content {
        padding: 8px 15px; /* Уменьшаем отступы для вкладок */
    }

.tabs .tab, .tab-content label, .tab-content button, .tab-content p {
    font-size: 18px; /* Устанавливаем желаемый размер шрифта */
   
}

.tab-content label, .tab-content button,  {
    font-size: 18px; /* Устанавливаем желаемый размер шрифта */
    margin-bottom: 0px; /* Устанавливаем нижний отступ для label */
     margin-top: 0px;
   
}
.tab-content input, 
.tab-content select {
    font-size: 18px; /* Устанавливаем желаемый размер шрифта для полей */
    padding: 10px; /* Добавляем отступы для улучшения визуального восприятия */
    height: 50px;
    margin-top: 0; /* Убираем верхний отступ для полей */
    margin-bottom: 20px; 
}

    button {
        padding: 8px 12px; /* Уменьшаем отступы для кнопок */
        width: 100%; /* Кнопка занимает всю ширину */
        font-size: 18px;
        height: 40px;
    }

    select, input {
        padding: 8px; /* Уменьшаем отступы для полей ввода */
        font-size: 18px; /* Уменьшаем размер шрифта */
        width: 100%; /* Поля ввода занимают всю ширину */
    }

    .form-row {
        display: flex; /* Используем Flexbox для выравнивания */
        flex-direction: column; /* Элементы располагаются в столбик */
        margin-top: 0px; /* Отступ сверху для разделения от полей */
        width: 100%; /* Убедитесь, что .form-row занимает всю ширину */
    }
}