/* Base styles */
* {
    box-sizing: border-box;
}

/* Flex container for rows and columns */
.row {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on small screens */
    justify-content: space-between; /* Space columns evenly */
    /*max-width: 960px;  Maximum width of the content */
    margin: 0 auto; /* Center the row */
}

.column {
    flex: 1; /* Columns take up equal width */
    margin: 10px; /* Space between columns */
    text-align:center;
    color: black;
}

/* Styles for search results dropdown */
.search-results {
    position: absolute;
    width: calc(50% - 20px); /* Adjust width to match column width minus margin */
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    z-index: 10; /* Above other elements */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.city-result {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.city-result:hover {
    background-color: #f0f0f0;
}

/* Styles for displaying city information */
.city-info {
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    margin-top: 5px;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .column {
        /* On small screens, take full width */
        width: 100%;
        margin: 10px 0; /* Adjust margin for vertical stacking */
    }

    .search-results {
        width: calc(100% - 20px); /* Full width on small screens */
    }
}

/* Additional styles for time, date, and time-of-day elements */
#city1-time, #city2-time, #city1-date, #city2-date, #city1-time-of-day, #city2-time-of-day {
    display: block;
    margin-top: 5px;
    text-align:center;
    font-size: 25px;
    color: black;
}
.input-container {
  display: flex;
  justify-content: center; /* Горизонтальное выравнивание */
  align-items: center; /* Вертикальное выравнивание */
  height: 100px; /* Высота контейнера, можно настроить по необходимости */
}

input[type="time"] {
  /* Опциональные стили для input */
 /* margin: 10px;  Пример отступа */
  /* Другие стили */
}
@media (max-width: 768px) {
    .row {
        flex-direction: column; /* Change direction to column on smaller screens */
    }
}