* {
	box-sizing: border-box;
}
body {
	font-family: Arial, sans-serif;
	padding: 20px;
	font-size: 18px;
}
table {
	width: 100%;
	border-collapse: collapse;
}
.table-responsive {
	overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
th, td {
	padding: 10px;
	border: 1px solid #ccc;
	text-align: left;
}
.page-header-container {
	text-align: center;
}
.page-main-header {
	font-size: 2em;
	margin-bottom: .5em;
}
.page-second-header {
	font-size: 1.33rem;
	margin-bottom: 2em;
}

input[type="number"] {
	border: none;
	border-bottom: 1px solid #ddd;
	padding: .2em 4px .15rem 4px;
	outline: none;
	font-size: 1rem;
}

.page-buttons {
	margin-bottom: 2rem;
	justify-content: center;
	display: flex;
	flex: 0 0 calc((100% - 6px) / 2);
	gap: 6px;
}

/* .page-buttons__files {
	margin-right: auto;
} */

.progress {
	width: 100%;
	background-color: #f3f3f3;
}
.progress-bar {
	width: 0;
	height: 20px;
	background-color: #4caf50;
}

.hidden {
	display: none;
}
.w-100 {
	width: 100%;
}

.file-list {
	list-style-type: none;
	padding: 0;
	margin: 0 0 20px 0;
}
.file-list li {
	padding: 5px 0;
}

#pauseNotification {
	position: fixed;
	top: 50%;
	/* bottom: 50%; */
	left: 50%;
	right: 50%;
	min-width: min(500px, 90vw);
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 1rem 1rem 2rem 1rem;
	font-size: 2rem;
	text-align: center;
	border-radius: 10px;
	border: 1px solid rgb(204, 204, 204);
}
#pauseNotification .btn {
	width: 100%;
	font-size: 1.5rem;
}
.btn {
	padding: 0.5rem 1rem .55rem 1rem;
	border-radius: 10px;
	border: none;
	background: #373737;
	color: #fff;
	transition: opacity 250ms linear;
	cursor: pointer;
}
.btn-gray {
	background: #ddd;
	color: #373737;
}
.btn:hover {
	opacity: 0.8;
}

.btn-delete {
	background-color: #fff;
	border: 1px solid #ddd;
	color: #373737;
	font-weight: bold;
	font-size: 20px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	text-align: center;
	line-height: 4px;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin-right: 8px;
}
.btn-delete:hover {
	background-color: #ff7a7a; /* Темнее при наведении */
}
.btn-delete:focus {
	outline: none; /* Убираем обводку при фокусе */
}

.page-buttons-group {
	/* margin-right: auto; */
	padding: 2rem 1rem;
	border: 1px solid #373737;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-content: space-around;
	justify-content: space-between;
}

.page-buttons-group__text {
	margin-bottom: .5em;
	max-width: 400px;
	line-height: 1.4;
}

/* ПОЛЗУНОК */
/* Стили для всего ползунка */
input[type="range"] {
  -webkit-appearance: none; /* Убираем стандартный стиль для WebKit браузеров */
  /* width: 100%;  */
  height: 16px; /* Высота дорожки */
  background: #ddd; /* Цвет дорожки */
  border-radius: 8px; /* Скругляем края дорожки */
  outline: none; /* Убираем обводку */
  opacity: 0.7; /* Прозрачность */
  transition: opacity 0.2s; /* Плавный переход прозрачности */
	cursor: pointer;
	vertical-align: bottom;
}
input[type="range"]:hover {
  opacity: 1; /* Ползунок становится непрозрачным при наведении */
}
/* Стили для ползунка (кружка) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Убираем стандартный стиль для WebKit браузеров */
  appearance: none;
  width: 16px; /* Ширина кружка ползунка */
  height: 16px; /* Высота кружка ползунка */
  border-radius: 50%; /* Делаем ползунок круглым */
  background: #5b5b5b; /* Цвет ползунка */
  cursor: pointer; /* Курсор меняется на указатель */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Тень для объема */
  transition: opacity 0.2s ease;
	opacity: 0.8;
}
input[type="range"]::-webkit-slider-thumb:hover {
  opacity: 1;
}

/* Стили для Firefox */
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #5b5b5b;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s ease;
	opacity: 0.8;
}
input[type="range"]::-moz-range-thumb:hover {
  opacity: 1;
}
/* Стили для дорожки в Firefox */
input[type="range"]::-moz-range-track {
  /* width: 100%; */
  height: 16px;
  background: #ddd;
  border-radius: 8px;
	vertical-align: bottom;
}
/* Стили для дорожки в WebKit браузерах */
input[type="range"]::-webkit-slider-runnable-track {
  /* width: 100%; */
  height: 16px;
  background: #ddd;
  border-radius: 8px;
	vertical-align: bottom;
}

#statusTable {
	max-width: 1000px;
	display: flex;
  flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0 10px;
	margin: 0 auto;
}
#statusTable input[type="text"] {
	border: none;
	border-bottom: 1px solid #ddd;
	font-size: 1rem;
	padding: .2em 5px .25em 5px;
	outline: none;
	width: 100%;
	border-radius: 4px;
	/* margin-left: 30px; */
	/* width: calc(100% - 30px - 10px); */
}
#statusTable .btn-delete {
	position: absolute;
	right: 0;
	top: 8px;
}

.file-item {
	padding: 1rem 10px;
	margin-bottom: .5rem;
	border: 1px solid #ddd;
	border-radius: 10px;
	position: relative;
	flex: 0 0 calc((100% - 30px) / 4); /* Каждый элемент займет треть ширины контейнера */
  box-sizing: border-box; /* Учитывает отступы и границы в ширине элемента */
}

.file-item__image {
	height: 100px;
	background: #ddd;
	margin: -1.1em -10px;
	text-align: center;
	padding: 20px;
	display: flex;
	border-radius: 10px;
	align-content: center;
	justify-content: center;
	align-items: center;
	margin-bottom: .6rem;
	overflow: hidden;
}
.file-item__image img {
	width: calc(100% + 40px);
}

.file-item__download-btn {
	margin-top: .9rem;
}

.page-text {
	max-width: 35rem;
	line-height: 166%;
	margin: 0 auto;
}

.page-download-all-btn-container {
	display: flex;
	align-items: center;
	justify-content: center;
}
.page-download-all-btn-container .btn {
	padding: 1.5rem 2rem 1.4rem 2rem;
	font-size: 1.1rem;
}
.page-download-all-btn-container:has(.btn:not(.hidden)) {
	margin-bottom: 2rem;
}


.page-menu ul {
	list-style: none;
	display: flex;
	gap: 0 20px;
	padding: 0;
	justify-content: center;
	margin-bottom: 10px;
	margin-top: 0;
}
.page-menu ul li.active {
	opacity: .7;
	font-weight: bold;
}
.page-menu ul li a {
	text-decoration: none;
	color: #373737;
}


@media screen and (max-width: 600px) {
	.page-buttons {
		flex: 0 0 100%;
		flex-wrap: wrap;
	}
	.page-buttons > div {
		width: 100%;
	}
	.page-buttons-group__text {
		margin-bottom: 1.1rem;
	}

	.file-item {
		flex: 0 0 calc((100% - 10px) / 2);
		max-width: calc((100% - 10px) / 2);
	}

	.page-buttons__settings input {
		width: 100%;
		margin-top: .5rem;
		margin-bottom: 1rem;
	}

	#qualityValue {
		display: none;
	}
	

}