/* Сброс отступов и границ */
* {
  /*  margin: 0;*/
  /*  padding: 0;*/
    box-sizing: border-box;
}

/* Основные стили для тела страницы */
body {
    font-family: 'Roboto', sans-serif; /* Устанавливаем шрифт Roboto для всей страницы */
    background-color: #f8f9fa; /* Светлый фон */
}

/* Общий стиль для контейнеров */
.container {
    width: 100%; /* Устанавливаем ширину контейнера на 80% */
    margin: 20px auto; /* Центрируем контейнер */
    padding: 15px; /* Отступы */
    background-color: #fff; /* Белый фон */
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* Тень */
}

#todaydate {
    color: #FFFFFF; /*#4caf50 #343E40  #FFFFFF - белый  #992904*/
    background-color: #4caf50;
    font-weight: 500;
    padding-left: 5px;
}

/* Стиль контейнера для поиска и кнопок */
#search-container, #button-container {
    width: 100%; /* Устанавливаем ширину на 80% */
    margin: 20px auto; /* Центрируем контейнеры */
    display: flex; /* Используем Flexbox */
    align-items: center; /* Центрирование по вертикали */
    justify-content: space-between; /* Равномерное распределение кнопок */
	position: relative; /* Добавляем это свойство */
}

/* Стиль поля ввода */
#suggest {
    flex-grow: 1; /* Поле ввода занимает оставшееся пространство */
    padding: 10px 15px; /* Увеличенные отступы */
	padding-right: 30px; /* Увеличиваем правый отступ, чтобы текст не накладывался на крестик */
    border: 1px solid #ccc; /* Светло-серая граница */
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s; /* Плавный переход */
    outline: none; /* Убираем контур при фокусе */
    height: 40px; /* Фиксированная высота поля ввода */
}

/* При фокусе на поле ввода */
#suggest:focus {
    border-color: #4caf50; /* Цвет рамки при фокусе */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* Тень вокруг поля ввода */
}

/* Стиль крестика для очистки поля ввода */
#clear-suggest {
	position: absolute; /* Позволяет позиционировать крестик внутри контейнера */
	 right: 10px; /* Отступ от правого края */
	
    display: none; /* Скрыть крестик по умолчанию */
    cursor: pointer; /* Курсор на крестике */
    font-size: 18px; /* Размер шрифта */
    color: #ff3333; /* Цвет крестика */
    margin-left: 10px; /* Отступ слева от крестика */
    height: 40px; /* Фиксированная высота крестика */
    line-height: 40px; /* Вертикальное центрирование крестика */
}

/* Переход цвета крестика при наведении */
#clear-suggest:hover {
    color: #c00; /* Темнее при наведении */
}

/* Стиль кнопок */
#button, #findMe {
    flex: 0 1 250px; /* Устанавливаем минимальную ширину кнопок */
    margin: 0 5px; /* Уменьшаем отступ между кнопками */
    padding: 5px; /* Увеличенный внутренний отступ для кнопок */
    border: none; /* Убираем рамку */
    border-radius: 5px; /* Скругленные углы кнопок */
    background-color: #4caf50; /* Зеленый цвет кнопок */
    color: white; /* Цвет текста кнопок */
  /*  font-family: 'Montserrat', sans-serif; /* Устанавливаем шрифт Montserrat для кнопок */
    font-size: 16px; /* Размер шрифта */
    cursor: pointer; /* Курсор при наведении */
    transition: background-color 0.3s, transform 0.3s; /* Переходы для кнопок */
    height: 40px; /* Фиксированная высота кнопки */
}

/* Цвет кнопок при наведении */
#button:hover,
#findMe:hover {
    background-color: #388e3c; /* Темный зелёный цвет при наведении */
    transform: scale(1.05); /* Небольшое увеличение при наведении */
}

/* Стиль карты */
#map {
    width: 100%; /* Устанавливаем ширину карты на 80% */
    height: 300px; /* Высота карты */
    margin: 20px auto; /* Центрируем карту */
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Тень */
}

/* Общие стили для контейнеров */
#infoContainer {
    width: 100%; /* Устанавливаем ширину контейнера на 80% */
    background-color: #f9f9f9; /* Светлый фон */
    border-radius: 8px; /* Закругленные углы */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень */
    padding: 20px; /* Отступы внутри контейнера */
    margin: 20px auto; /* Центрирование контейнера */
    display: flex; /* Использовать Flexbox */
    flex-direction: column; /* Вертикальное расположение элементов */
    align-items: center; /* Горизонтальное выравнивание по центру */
    justify-content: center; /* Вертикальное выравнивание по центру */
    min-height: 200px; /* Минимальная высота контейнера для центрирования элементов */
}

#dailyPrayerContainer {
    width: 100%; /* Устанавливаем ширину контейнера на 80% */
    background-color: #f9f9f9; /* Светлый фон */
    border-radius: 8px; /* Закругленные углы */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень */
    padding: 20px; /* Отступы внутри контейнера */
    margin: 20px auto; /* Центрирование контейнера */
    display: flex; /* Использовать Flexbox */
    flex-direction: column; /* Вертикальное расположение элементов */
    align-items: center; /* Горизонтальное выравнивание по центру */
    justify-content: center; /* Вертикальное выравнивание по центру */
    min-height: 200px; /* Минимальная высота контейнера для центрирования элементов */
}

#monthlyPrayerContainer {
    width: 100%; /* Устанавливаем ширину контейнера на 80% */
    background-color: #f9f9f9; /* Светлый фон */
    border-radius: 8px; /* Закругленные углы */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень */
    padding: 20px; /* Отступы внутри контейнера */
    margin: 20px auto; /* Центрирование контейнера */
    display: flex; /* Использовать Flexbox */
    flex-direction: column; /* Вертикальное расположение элементов */
    align-items: center; /* Горизонтальное выравнивание по центру */
    justify-content: center; /* Вертикальное выравнивание по центру */
    min-height: 200px; /* Минимальная высота контейнера для центрирования элементов */
}
#infoContainer table {
    width: 60%;
    border-collapse: collapse;
}

#infoContainer th, #infoContainer td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

#infoContainer th {
    background-color: #f2f2f2;
}




/* Заголовки в контейнерах */
h1, h2, h3, h4 {
   /* font-family: 'Montserrat', sans-serif; /* Устанавливаем шрифт Montserrat для заголовков */
    margin: 10px 0; /* Отступы между заголовками */
	font-size: 1.2em;
}



/* Стили для таблиц */
#dailyPrayerTable {
    
	width: 60%;
}

#monthTable {
    border-collapse: collapse; /* Убираем расстояние между ячейками */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Добавление тени */
	font-family: 'Roboto', sans-serif; /* Используйте шрифт Roboto для таблицы */
   /* font-size: 14px; /* Размер шрифта */
}

#monthTableBody tbody tr:nth-child(even) {
    background-color: #e9f5e9; /* Светло-зеленый цвет для четных строк */
	
}

#monthTableBody tbody tr:nth-child(odd) {
    background-color: #ffffff; /* Белый цвет для нечетных строк */
}

#monthTable tbody tr:hover {
    background-color: #c8e6c9; /* Светло-зеленый цвет при наведении */
}

/* Стили для ячеек таблицы */
#dailyPrayerTable th, #dailyPrayerTable td {
    padding: 10px; /* Отступы в ячейках */
    text-align: center; /* Центрирование текста */
    border: 1px solid #ddd; /* Светло-серая граница */
}

#monthTable th, #monthTable td {
    padding: 10px; /* Отступы в ячейках */
    text-align: center; /* Центрирование текста */
    border: 1px solid #4caf50; /* Зеленая граница */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Легкая тень */
	font-weight: normal;
}

#timetable {
    /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Добавление тени */
    width: 100%;
	border-collapse: collapse; /* Убираем расстояние между ячейками */
}

/* Стили для ячеек таблицы */
#monthTable .title-row {
    background-color: #4caf50; /* Зеленый цвет для заголовков */
    color: white; /* Белый цвет текста для контраста */
	font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Устанавливаем более тонкий шрифт */
    font-size: 18 px;
}

#monthTable .address-row {
    background-color: #faf8f8; /* Светло-голубой фон для адреса */
	font-family: 'Roboto', sans-serif;
    font-size: 16px; /* Размер шрифта */
    text-align: center; /* Центрируем текст */
    font-weight: 200; /* Устанавливаем более тонкий шрифт */
}

#monthTable .header-row {
    background-color: #c8e6c9; /* Светло-зеленый фон для заголовков столбцов */
    text-align: center; /* Центрируем текст */
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	font-size: 16px;
}

.dayheader-row {
    background-color: #4caf50; /* Цвет фона для первой строки */
    color: white; /* Цвет текста для первой строки */
    font-size: 18px; /* Размер шрифта для первой строки */
    font-weight: 400;
}


#copyright {
    font-size: 12px;
    color: #888;
    text-align: center;
    margin: 20px auto;
}

#monthControls {
    display: flex !important; /* Используем flexbox для выравнивания */
    justify-content: center !important; /* Центрируем кнопки по горизонтали */
    align-items: center !important; /* Центрируем кнопки по вертикали */
    margin-bottom: 10px !important; /* Отступ снизу для отделения от других элементов */
}

#monthControls button {
    margin: 10px 10px ; /* Отступ между кнопками */
   /* padding: 3px 30px !important; /* Внутренний отступ для кнопок */
   /* font-size: 16px !important; /* Размер шрифта */
    cursor: pointer !important; /* Курсор в виде руки при наведении */
}

#downloadBtn:hover {
    transform: scale(1.2) !important; /* Небольшое увеличение при наведении */
 
}

#downloadBtn {
    display: flex; /* Включаем Flexbox */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    background: none; /* Убираем стандартный фон */
    border: none; /* Убираем границу */
    cursor: pointer; /* Указатель при наведении */
    padding: 0px;
   
            
}


#downloadBtnpdf {
    display: flex; /* Включаем Flexbox */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    background: none; /* Убираем стандартный фон */
    border: none; /* Убираем границу */
    cursor: pointer; /* Указатель при наведении */
    padding: 0px;        
}

#downloadBtnpdf:hover {
    transform: scale(1.2) !important; /* Небольшое увеличение при наведении */
 
}



#downloadIconjpg {
            width: 40px; /* Ширина изображения */
            height: 40px; /* Высота изображения */
            
}	

#downloadIconpng  {
            width: 40px; /* Ширина изображения */
            height: 40px; /* Высота изображения */
}		


/* Цвет для строки сегодняшнего дня */
#today-row {
    background-color: #d4edda; /* Цвет для строки сегодняшнего дня */
}

/* Адаптивные стили */
@media (max-width: 768px) {
    .container,
    #search-container,
    #button-container,
    #infoContainer,
    #dailyPrayerContainer,
    #monthlyPrayerContainer {
        width: 100%; /* Увеличиваем ширину контейнеров на мобильных устройствах */
    }

    #suggest {
        font-size: 14px; /* Уменьшаем размер шрифта для мобильных устройств */
		padding-right: 30px; 
    }

    #button, #findMe {
        flex: 1; /* Кнопки занимают равное пространство */
        margin: 10px 0; /* Увеличиваем вертикальные отступы между кнопками */
        justify-content: space-between; /* Убедитесь, что это свойство применяется к flex-контейнеру */
    }

    #monthControls {
       /* flex-direction: column;  Кнопки вертикально на мобильных устройствах */
    }
}

@media (max-width: 480px) {
    h1, h2, h3, h4 {
        font-size: 22px !important; /* Уменьшаем размер заголовков */
		text-align: center;
    }
	#infoContainer table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14pt;
	}
	

    #suggest {
        padding: 8px 10px; /* Уменьшаем отступы в поле ввода */
		padding-right: 30px; 
    }

    #clear-suggest {
        font-size: 16px; /* Уменьшаем размер шрифта крестика */
    }

    #button, #findMe {
        font-size: 16px; /* Уменьшаем размер шрифта кнопок */
        height: 40px; /* Уменьшаем высоту кнопок */
         margin-left: 0px;
        justify-content: space-between; /* Убедитесь, что это свойство применяется к flex-контейнеру */
    }
    
    #findMe {
         margin-left: 10px;
    }
    
    
    
   
    
    #button {
        
		flex: 0 1 90px;;
     }
	 

    #map {
        height: 200px; /* Уменьшаем высоту карты на мобильных устройствах */
		width: 100%;
     }
	#search-container {
        
		width: 100%;
		margin: 0;
     }
	 
    
	#dailyPrayerTable {
  /*  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Добавление тени */
	width: 100%;
	font-size: 14pt;
	}
	
	#monthTable {
        width: 100%; /* Уменьшаем ширину таблицы до 90% на мобильных устройствах */
       /*  margin: 0 auto; Центруем таблицу */
       
    }

    #monthTable th, #monthTable td {
        font-size: 12px; /* Уменьшаем размер шрифта для мобильных устройств */
        padding: 4px; /* Уменьшаем отступы в ячейках */
    }
    .dayheader-row {
   font-size: 14pt;
   
    }
	#timetable td {
	    font-size: 14pt;
       
        
    }
    
    
    #downloadBtn {
    
    margin: 0px;
            
}


#downloadBtnpdf {
    
    margin: 0px;
            
}

}