.table-container {
	display: flex;
	justify-content: center; /* Горизонтальное центрирование */
}

.button-row {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px; /* Промежуток между кнопками */
}

.button-row form {
	margin-bottom: 10px; /* Отступ снизу у кнопок */
}

@media (max-width: 768px) {
	.button-row {
		flex-direction: column;
		align-items: center; /* Центрирование по горизонтали */
	}
	.button-row form {
		width: 100%;
		display: flex;
		justify-content: center;
	}
}
.table {
	width: auto;
	table-layout: fixed; /* Ставит фиксированную ширину колонок */
	background-color: Beige;
}

.table th, .table td {
	word-wrap: break-word;  /* IE 5.5-7 */
	overflow-wrap: break-word;  /* Renamed property in CSS3 draft spec */
	white-space: normal;

}
.table th {
  background-color: darkslateblue;
  color: white;
}
.btn-warning { 
  background-color: darkslateblue;
  border-color: darkslateblue;
}
.button-row :hover {
  background-color: #473d8b84;
  border-color: #473d8b84;
}

.word-wrap .btn-warning:hover {
	  background-color: rgba(71, 61, 139, 0.775); /* Цвет фона без изменения при наведении */

	  border-color: rgba(71, 61, 139, 0.775); /* Цвет границы */
  }

.btn.btn-warning:focus,
.btn.btn-warning:active {
background-color: rgba(71, 61, 139, 0.775); /* Установите тот же цвет, что и для исходного состояния */
border-color: rgba(71, 61, 139, 0.775)7;
box-shadow: none; /* Уберите тень при фокусе */
}

/*-----------------*/
.header a, a:hover {
  color: rgba(71, 61, 139, 0.775); /*заменили цвет шрифта заголовка "КиноМонстр*/
  text-decoration: none; /*убрали подчеркивание заголовка "КиноМонстр*/
}
.header a {
	color: white;
}

a {
    color: darkslateblue;
    text-decoration: none;
}

.btn-warning {
    background-color: darkslateblue;
    border-color: darkslateblue;
}

.btn-warning:hover {
	background-color: rgba(71, 61, 139, 0.775); /* Цвет фона без изменения при наведении */
	border-color: rgba(71, 61, 139, 0.775); /* Цвет границы */
}

.header h1 {
	letter-spacing: 3px; /*увеличили межстрочный интервал текста заголовка "КиноМонстр*/
	font-size: 300%; /*увеличили шрифт заголовка "КиноМонстр*/
}
/*заменили данные текста параграфа "Кино наша страсть"*/
.header p {
	color: white !important;
	font-size: 90%;  /*уменьшили шрифт текста  "Кино наша страсть*/
	letter-spacing: 3px; /*увеличили межстрочный интервал "Кино наша страсть*/
}
/*заменили цвет активной ссылки в навигации header "Главная"*/
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: darkslateblue; /*белый цвет шрифта ссылок ""Главная, Фильмы*/
    background-color: Beige;
}
/*заменили цвет шрифта ссылки в навигации header - "Фильмы, Сериалы"*/
.nav-pills>li>a {
    color: #fff; /*белый цвет шрифта*/
}
/*заменили цвет подсвечивающего фона  псевдоссылки в навигации header - "Фильмы, Сериалы"*/
.nav-pills>li>a:hover {
	background-color: Beige;
	color: darkslateblue;
}
/*увеличивая отступ, увеличиваем высоту черного header */
.navbar-inverse {
    padding: 1%;
    border-radius: 0; /*убрали скругление рамки черного header*/
    
}
/*изменить на красный фон и рамку header "*/

.navbar-inverse {
    background-color: darkslateblue;
    border-color: darkslateblue; 
}

/*стили в мобил. версии для ссылок в навигации header - "Фильмы, Сериалы" jQuery*/
@media (max-width: 768px) {
	.nav-pills>li {
		float: none; /*убираем float: left. получились вертик. ссылки в навигации header - "Фильмы, Сериалы"*/
	}
	.nav-pills {
		text-align: center; /*располагаем ссылки по центру в навигации header - "Фильмы, Сериалы"*/
	}

	.header h1 {
		font-size: 280%; /*делаем меньше шрифт текста Киномонстр*/
		letter-spacing: 5px; /*делаем меньше межбуквенный интервал  текста Киномонстр*/
	}
	.header {
		text-align: center; /*располагаем по центру текст Киномонстр*/
	}
}

.clear {
	clear: both; /*Отменяет обтекание элемента одновременно с правого и левого края*/
	height: 63px;
}
.wrapper {
	min-height: 100%; /*мин высота , чтобы foooter не поднимался при небольшом тексте в content*/
}
html, body {
	height: 100%; /*прижать footer к низу*/
}

.films_block {
	text-align: center; /*располагаем все наполнение  блока по центру*/
}
.films_block img {
	margin-bottom: 5%; /*внешний отступ сверху*/
	border-radius: 5px; /*радиус закругления угла рамки*/
	border: 5px solid #dad7d5; /*данные рамки*/
	width: 100%; /*для правильного масштабирования при изменении разрешения*/
}
.film_label {
	padding: 2%; /*внутренние отступы*/
	margin-bottom: 4%;
	font-size: 150%;
}
.margin-8 {
	margin-top: 8%; /*для создания отступа под 4-мя верхними img*/
}

.panel {
	border: none; /*убираем синий бордер в panel*/
}
.panel-body {
	background-color: Beige; /* #f9f9f9 заменили цвет фона блока под блоком поиск*/
}
.panel-info> .panel-heading {
	background-color: darkslateblue; /* #f0ad4e фон для блока поиск*/
	color: white; /*цвет всех шрифтов panel*/
	border-color: transparent;
}
.sidebar-header {
	font-size: 120%; /*увеличили шрифт слова поиск*/
	letter-spacing: 2%; /*увеличили межбуквенный интервал*/
}
.form-control {
	font-size: 14px; /*уменьшили шрифт /ваш запрос/*/
}
.input-lg {
	font-size: 14px; /*input-lg повторяет стиль form-control, можно убрать*/
}
.form-control {
	border-radius: 0px;
}

.list-group-item-warning {
	color: #8a6d3b;
	background-color: #f9f9f9;
}
.badge {
	background-color: #000000;
}

.info-block {
	font-size: 120%; /*увеличиваем размер шрифта на show Год. рейтинг. режиссер*/
}
.info-block .badge {
	font-size: 80%; /*увеличиваем размер цифр на show Год. рейтинг. режиссер*/
}
.info-block span {
    margin-right: 3%; /*увеличиваем размер отступов на show Год. рейтинг. режиссер*/
}
textarea.form-control {
	height: 200px;/*увеличили высоту textarea в show для отзывов*/
}
.table tbody>tr>td.vert-align {
	vertical-align: middle; /*мой класс vert-align-центрирует по вертикали записи рядов в таблице raiting*/
}



footer {
	color: white; /*цвет шрифта*/
	background-color:  darkslateblue; /*задаем цвет фона footer*/
	padding: 17px 0 18px 0; /*отступы внешние*/
	border-top: 1px solid #000; /*данные рамки сверху*/
}
footer a {
	color: #999; /*задаем цвет шрифта ссылки  footer*/
}
footer a:hover {
	color: #efefef; /*задаем цвет всплывающего фона ссылки  footer*/
}