@charset "utf-8";
:root {
		--font: "Sofia Sans", -apple-system, system-ui, "sans-serif";
		--white: #fff;
		--black: #000;
		--lime: #ACF601;
		--green: #77AA00;
		--red: #EE3636;
		--stroke: #3B3B3B;
		--gray: rgba(0, 0, 0, 0.5);
		--side: 20px;
}
@media only screen and (min-width: 1024px) {
		:root {
				--side: 40px;
		}
}
@media only screen and (min-width: 1280px) {
		:root {
				--side: 64px;
		}
}
@media only screen and (min-width: 1440px) {
		:root {
				--side: calc((100vw - 1312px) / 2);
		}
}
html, body {
		height: 100%;
		box-sizing: border-box;
		text-rendering: optimizeLegibility !important;
		-webkit-font-smoothing: antialiased;
		font-optical-sizing: auto;
		scroll-behavior: smooth;
}
body {
		margin: 0;
		padding: 0;
		background: var(--white);
		font: normal 14px/20px var(--font);
		color: var(--black);
		-webkit-text-size-adjust: none;
		display: flex;
		flex-direction: column;
}
* {
		text-wrap: balance;
}
*, *:before, *:after {
		box-sizing: border-box;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
form, fieldset {
		margin: 0;
		padding: 0;
		border: 0;
}
input, select, textarea, button {
		font: normal 14px/20px var(--font);
		outline: none;
		text-align: left;
}
input[type="text"], input[type="password"], input[type="email"], input[type="color"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"], textarea, select {
		-webkit-appearance: none;
		border-radius: 0;
		box-shadow: none;
		border: 1px solid var(--stroke);
		background: var(--white);
		margin: 0;
		padding: 15px;
		width: 100%;
		display: block;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
		opacity: 1;
		color: var(--gray);
}
input::-moz-placeholder, textarea::-moz-placeholder {
		opacity: 1;
		color: var(--gray);
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
		opacity: 1;
		color: var(--gray);
}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
		opacity: 0.5 !important;
}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
		opacity: 0.5 !important;
}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
		opacity: 0.5 !important;
}
input::-ms-clear {
		display: none;
}
button::-moz-focus-inner {
		border: 0;
}
textarea {
		resize: none;
}
video {
		-webkit-mask-image: -webkit-radial-gradient(white, black);
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
}
header, nav, section, article, aside, footer, menu, time, figure, figcaption, main {
		display: block;
}
img, svg, picture {
		border: 0;
		outline: none;
		vertical-align: top;
}
svg {
		fill: currentColor;
}
a {
		color: inherit;
		text-decoration: underline;
		outline: none;
		cursor: pointer;
}
a[href^=tel] {
		color: inherit !important;
		cursor: inherit;
		text-decoration: none !important;
}
strong {
		font-weight: bold;
}
.btn {
		-webkit-appearance: none;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 100%;
		gap: 8px;
		color: var(--white);
		background: var(--black);
		cursor: pointer;
		user-select: none;
		box-shadow: none;
		outline: none;
		border: 0;
		font: bold 14px/20px var(--font);
		text-transform: uppercase;
		text-decoration: none;
		padding: 0 48px;
		height: 52px;
		border-radius: 26px;
}
@media only screen and (max-width: 639px) {
		.btn {
				padding: 0 24px;
		}
}
.btn img, .btn svg {
		flex: 0 0 auto;
		height: 24px;
		width: auto;
}
.label {
		font-weight: bold;
		font-size: 12px;
		line-height: 16px;
		text-transform: uppercase;
		margin: 32px 0 8px 0;
}
.label.red {
		color: var(--red);
}
.mainwrap {
		flex: 0 0 auto;
		width: 100%;
		min-height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
}
.mainwrap > * {
		flex: 0 0 auto;
		width: 100%;
		position: relative;
}
.line-bg {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		overflow: hidden;
		pointer-events: none;
}
.line-bg:before {
		content: '';
		position: absolute;
		top: 0;
		left: calc(var(--side) + 80px);
		width: 110px;
		height: 200%;
		background: var(--lime);
		transform-origin: 50% 0;
		transform: rotate(30deg);
}
.login {
		width: 100%;
		max-width: calc(330px + var(--side) * 2);
		margin: auto;
		padding: min(var(--side), 64px) var(--side);
}
.login .logo {
		width: 120px;
		height: auto;
		margin: 0 auto 65px auto;
		max-width: 100%;
		display: block;
}
.login .submit {
		margin-top: 65px;
		text-align: center;
}
.login .submit .btn {
		font-size: 16px;
}
.header {
		position: sticky;
		z-index: 100;
		top: 0;
		background: var(--white);
		border-bottom: 5px solid var(--lime);
		height: 80px;
		display: flex;
		align-items: center;
		padding: 0 var(--side);
		gap: 16px;
		box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
}
.header .logo {
		width: 64px;
		height: 64px;
}
.header .btn {
		width: auto;
}
.header .username {
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: right;
		font-size: 16px;
}
.table-actions {
		padding: 16px var(--side);
		display: flex;
		align-items: center;
		gap: 16px;
}
.table-actions .input {
		flex: 1;
}
.table-actions .input input {
		background: url("../img/icons/search.svg") no-repeat 0 50%/24px auto;
		padding-left: 40px;
		border: 0;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}
.table-actions .input input:placeholder-shown {
		max-width: 150px;
}
.table-actions .btn {
		width: auto;
}
@media only screen and (max-width: 639px) {
		.table-actions {
				flex-direction: column;
				align-items: stretch;
		}
		.table-actions .input, .table-actions .btn {
				flex: 0 0 auto;
				width: 100%;
		}
}
.table {
		padding: 0 var(--side);
		flex: 1 0 auto;
}
.table table {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		width: 100%;
}
.table th, .table td {
		border: 0;
		padding: 0;
		text-align: left;
		vertical-align: middle;
}
.table .actions {
		display: flex;
		align-items: center;
		gap: 8px;
}
.table .actions label {
		flex: 0 0 auto;
		cursor: pointer;
		user-select: none;
		border-radius: 18px;
		position: relative;
}
.table .actions label input {
		position: absolute;
		transform: scale(0);
		opacity: 0;
}
.table .actions label span {
		display: block;
		border-style: solid;
		border-width: 2px;
		width: 56px;
		height: 36px;
		border-radius: 18px;
		background-color: var(--white);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: auto 24px;
		white-space: nowrap;
		overflow: hidden;
		text-align: left;
		text-indent: -100vw;
		position: relative;
		transition: background 0.4s ease;
}
.table .actions label span:before, .table .actions label span:after {
		content: '';
		position: absolute;
		width: 24px;
		height: 24px;
		top: 50%;
		left: 50%;
		margin: -12px;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 50% 50%;
}
.table .actions label span:after {
		opacity: 0;
		transition: opacity 0.4s ease;
}
.table .actions label input:checked ~ span:after {
		opacity: 1;
}
.table .actions label span.green {
		border-color: var(--green);
}
.table .actions label span.green:before {
		background-image: url("../img/icons/thumb-up.svg");
}
.table .actions label span.green:after {
		background-image: url("../img/icons/thumb-up-white.svg");
}
.table .actions label span.red {
		border-color: var(--red);
}
.table .actions label span.red:before {
		background-image: url("../img/icons/thumb-down.svg");
}
.table .actions label span.red:after {
		background-image: url("../img/icons/thumb-down-white.svg");
}
.table .actions label input:checked ~ span.green {
		background-color: var(--green);
}
.table .actions label input:checked ~ span.red {
		background-color: var(--red);
}
.table .tel {
		white-space: nowrap;
		padding-left: 20px;
		background: url("../img/icons/tel.svg") no-repeat 0 50%/auto 12px;
}
.table .sort {
		cursor: pointer;
		text-decoration: none;
		color: inherit;
		white-space: nowrap;
		display: inline-flex;
		vertical-align: top;
		align-items: center;
		line-height: 24px;
		margin: -2px 0;
}
.table .sort img, .table .sort svg {
		flex: 0 0 auto;
		height: 24px;
		width: auto;
}
.table .sort svg {
		fill: var(--gray);
}
.table .text {
		word-wrap: break-word;
}
@media only screen and (min-width: 1280px) {
		.table {
				padding: 0 calc(var(--side) - 2px);
		}
		.table table {
				border-spacing: 2px;
		}
		.table th {
				font-weight: bold;
				font-size: 12px;
				line-height: 10px;
				text-transform: uppercase;
				padding: 4px 8px;
				height: 30px;
				border-bottom: 2px solid var(--black);
				white-space: nowrap;
		}
		.table td {
				border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
				text-align: left;
				vertical-align: middle;
				height: 50px;
				padding: 4px 8px;
				transition: background 0.4s ease;
				min-width: 65px;
				word-wrap: break-word;
				word-break: break-all;
		}
		.table td:has(.text) {
				width: 20%;
		}
		.table td:first-child {
				min-width: 80px;
		}
		@media (pointer:fine) {
				.table tr:hover td {
						background-color: rgba(0, 0, 0, 0.05);
				}
		}
		.table tr:has(.input-green:checked) td {
				background-color: #ACF60126;
		}
		.table tr:has(.input-red:checked) td {
				background-color: #EE36361A;
		}
		.table .label {
				display: none;
		}
		.table .td-min {
				width: 1px;
				white-space: nowrap;
				word-break: keep-all;
		}
}
@media only screen and (max-width: 1279px) {
		.table thead {
				display: none;
		}
		.table table, .table tbody, .table tr, .table td {
				display: block;
		}
		.table tr {
				display: grid;
				align-items: flex-start;
				grid-template-columns: repeat(1, 100%);
				border-bottom: 2px solid rgba(0, 0, 0, 0.2);
				padding: 8px 0;
				transition: background 0.4s ease;
				margin-bottom: 2px;
		}
		@media only screen and (min-width: 360px) and (max-width: 589px) {
				.table tr {
						grid-template-columns: repeat(2, 50%);
				}
		}
		@media only screen and (min-width: 590px) and (max-width: 739px) {
				.table tr {
						grid-template-columns: repeat(3, 33.333%);
				}
		}
		@media only screen and (min-width: 740px) and (max-width: 889px) {
				.table tr {
						grid-template-columns: repeat(4, 25%);
				}
		}
		@media only screen and (min-width: 890px) and (max-width: 1039px) {
				.table tr {
						grid-template-columns: repeat(5, 20%);
				}
		}
		@media only screen and (min-width: 1040px) {
				.table tr {
						grid-template-columns: repeat(6, 16.666%);
				}
		}
		@media (pointer:fine) {
				.table tr:hover {
						background-color: rgba(0, 0, 0, 0.05);
				}
		}
		.table tr:has(.input-green:checked) {
				background-color: #ACF60126;
		}
		.table tr:has(.input-red:checked) {
				background-color: #EE36361A;
		}
		.table td {
				order: 3;
				padding: 8px;
		}
		.table td:first-child {
				order: 1;
				align-self: center;
		}
		.table td:has(.actions) {
				order: 2;
				grid-column-end: -1;
				align-self: center;
		}
		.table .label {
				margin: 0;
		}
}
.pagination {
		/*
		position: sticky;
		z-index: 50;
		bottom: 0;
		background: var(--white);
	*/
		padding: 24px 0;
		font-weight: 600;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
}
.pagination .link {
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
		overflow: hidden;
		text-align: left;
		text-indent: -100vw;
		white-space: nowrap;
}
.pagination .first {
		background-image: url("../img/pagination/first.svg");
}
.pagination .prev {
		background-image: url("../img/pagination/prev.svg");
}
.pagination .next {
		background-image: url("../img/pagination/next.svg");
}
.pagination .last {
		background-image: url("../img/pagination/last.svg");
}
.pagination input {
		padding: 0;
		height: 36px;
		text-align: center;
		width: 56px;
		font-size: 14px;
		flex: 0 0 auto;
}
.pagination .btn {
		padding: 0 32px;
		border-radius: 18px;
		height: 36px;
		font-weight: 600;
		width: auto;
}
@media only screen and (max-width: 639px) {
		.pagination .btn {
				padding: 0;
				width: 56px;
		}
}
.wrap-player {
		position: relative;
		padding-right: 32px;
		line-height: 20px;
}
.wrap-player-play, .wrap-player-pause {
		cursor: pointer;
		user-select: none;
		position: absolute;
		top: 50%;
		right: 0;
		width: 24px;
		height: 24px;
		margin: -12px 0;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
}
.wrap-player-play {
		background-image: url("../img/icons/play.svg");
}
.wrap-player-pause {
		background-image: url("../img/icons/pause.svg");
		display: none;
}
.wrap-player.playing .wrap-player-play {
		display: none;
}
.wrap-player.playing .wrap-player-pause {
		display: block;
}
.wrap-player-info {
		position: absolute;
		top: 50%;
		right: 32px;
		transform: translate3d(0, -50%, 0);
		text-align: right;
		white-space: nowrap;
		font-size: 12px;
		line-height: 1.5;
		pointer-events: none;
		transition: opacity 0.4s ease;
}
@media only screen and (max-width: 1279px) {
		.wrap-player-play, .wrap-player-pause, .wrap-player-info {
				top: 10px;
		}
}
.table tr td:has(.wrap-player.playing) {
		background-color: #ABF501;
}