/* USER VARIABLES SECTION */

:root {
	--color-accent: #74A1F9;
	--color-title: #000000;
	--color-text: #787878;
	--color-error: #BD2323;
	--color-warning: #FDE400;
	--color-success: #54B674;
	--color-bg-field: #EDEDF1;
	--default-offset: 20px;
	--header-height: 64px;
	--sidebar-width: 300px;
	--userfont: roboto-st, sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


/* FONTS LOAD SECTION */

@font-face { src: url("../fonts/roboto-regular-webfont.woff2") format("woff2"); font-family: "roboto-st"; font-weight: 400; font-style: normal; }
@font-face { src: url("../fonts/roboto-italic-webfont.woff2") format("woff2"); font-family: "roboto-st"; font-weight: 400; font-style: italic; }
@font-face { src: url("../fonts/roboto-bold-webfont.woff2") format("woff2"); font-family: "roboto-st"; font-weight: 700; font-style: normal; }
@font-face { src: url("../fonts/roboto-bolditalic-webfont.woff2") format("woff2"); font-family: "roboto-st"; font-weight: 700; font-style: italic; }

::placeholder { color: #666; }
::selection { background-color: var(--color-accent); color: #fff; }
input, textarea { outline: none; }
input:focus:required:invalid, textarea:focus:required:invalid { border-color: red; }
input:required:valid, textarea:required:valid { border-color: green; }

html {
	background: #F5F5F5;
	height: 100%;
}

body {
	font-family: var(--userfont);
	font-size: 16px;
	color: var(--color-text);
	min-width: 320px;
	position: relative;
	overflow-x: hidden;
}

.body--with-active-menu .main-layout {
	opacity: 0.4;
	pointer-events: none;
	transition: 0.3s ease-in-out;
}

.dialog {
	border: none;
	border-radius: 15px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	position: fixed;
	width: 100%;
	max-width: 320px;
	min-height: 300px;
}
.dialog[open] {
	opacity: 1;
	pointer-events: inherit;
}
.dialog::backdrop {
	background-color: rgba(0,0,0, 0.2);
}

.sidebar-menu {
	display: none;
	width: var(--sidebar-width);
	padding: var(--default-offset);
	height: 100%;
	flex: 0 0 auto;
	position: sticky;
	left: 0;
	top: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

.content {
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: var(--default-offset);
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: var(--default-offset);
}

.breadcrumbs__item {
	overflow: hidden;
	border-radius: 0.3rem;
	border: 1px solid var(--color-accent);
	cursor: pointer;
	background: #FFFFFF;
	color: var(--color-title);
	outline: none;
	position: relative;
	text-decoration: none;
	transition: background 0.2s linear;
	list-style: none;
	display: flex;
	font-size: 14px;
	height: 30px;
	padding: 0 calc(var(--default-offset) / 2);
	align-items: center;
	justify-content: center;
}

.breadcrumbs__item:not(:last-child) {
	margin-right: 5px;
	margin-bottom: 5px;
}

.breadcrumbs__item a {
	text-decoration: inherit;
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
}

.breadcrumbs__item.breadcrumbs__item--active {
	background: var(--color-accent);
	color: #FFFFFF;
	cursor: default;
}

@media screen and (min-width: 768px) {
	body {
		height: 100%;
	}

	.content > * {
		max-width: 768px;
	}

	.main-layout {
		padding: 0;
		overflow: hidden;
		display: flex;
		height: calc(100% - var(--header-height));
	}

	.auth-layout .content > * {
		margin: 0 auto;
		max-width: 400px;
	}

	.sidebar-menu {
		display: block;
	}
}

/* Общие стили и элементы */

.title {
	color: var(--color-title);
	font-family: var(--userfont);
	font-weight: 700;
	margin: 0;
	padding: 0;
}

.title--level-1 {
	font-size: 25px
}

.title--level-2 {
	font-size: 20px
}

.title--level-3 {
	font-size: 16px
}

.button {
	background: var(--color-accent);
	color: #ffffff;
	font-weight: 600;
	border: 2px solid var(--color-accent);
	border-radius: 26px;
	padding: 16px 26px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
}

.button.button--secondary {
	background: #ffffff;
	color: var(--color-accent);
}

.field {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
}

.field__label {
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: calc(var(--default-offset) / 2);
	color: var(--color-title)
}

.field__input, .field__textarea {
	background: var(--color-bg-field);
	border: none;
	padding: 6px;
	border-radius: 12px;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	color: var(--color-title)
}

.field__input {
	height: 50px;
	min-width: 120px;
}


.text-field {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
}

.text-field__label {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: calc(var(--default-offset) / 2);
	color: var(--color-title)
}

.text-field__input, .text-field__textarea {
	background: var(--color-bg-field);
	border: none;
	padding: 6px 16px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 14px;
	color: var(--color-title)
}

.text-field__input {
	height: 50px;
	min-width: 120px;
}

/* Шапка */

.hamburger {
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
}
.hamburger:hover {
	opacity: 0.7;
}
.header__menu--active .hamburger:hover {
	opacity: 0.7;
}
.hamburger-box {
	width: 20px;
	height: 12px;
	display: inline-block;
	position: relative; }

.hamburger-inner {
	display: block;
	top: 50%;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 20px;
	height: 3px;
	background-color: var(--color-accent);
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
	content: "";
	display: block;
}
.hamburger-inner::before {
	top: -7px; }
.hamburger-inner::after {
	bottom: -7px; }

.hamburger--3dx .hamburger-box {
	perspective: 80px; }

.hamburger--3dx .hamburger-inner {
	transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
	transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.header__menu--active .hamburger--3dx .hamburger-inner {
	background-color: transparent !important;
	transform: rotateY(180deg); }
.header__menu--active .hamburger--3dx .hamburger-inner::before {
	transform: translate3d(0, 7px, 0) rotate(45deg); }
.header__menu--active .hamburger--3dx .hamburger-inner::after {
	transform: translate3d(0, -7px, 0) rotate(-45deg); }


.header {
	background: #ffffff;
	height: var(--header-height);
	padding: 0 var(--default-offset);
	width: 100%;
	position: sticky;
	z-index: 2;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	box-shadow: 0px 4px 25px 5px #0000000D;
}

.header-button {
	border: none;
	background: #FFFFFF;
	box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.05);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 40px;
	width: 40px;
}

.header-button svg {
	height: 20px;
	width: 20px;
}

.header__logo {
	width: calc(var(--sidebar-width) - var(--default-offset));
	height: 100%;
	display: none;
	align-items: center;
	justify-content: flex-start;
}

.header__logo img {
	height: 100%;
	width: 100%;
	object-fit: contain;
	max-width: 270px;
}


.header__menu {
	margin-right: auto;
	position: relative;
}

.header__menu-dropdown {
	padding: 20px 10px;
	display: block;
	z-index: 0;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #FFFFFF;
	opacity: 0;
	pointer-events: none;
	transition: 0.3s ease-in-out transform, 0.2s ease-in opacity;
	transform: translateY(100%);
}

.header__menu--active .header__menu-dropdown {
	transform: translateY(0%);
	opacity: 1;
	pointer-events: auto;
}

.header__menu-action-button {
	cursor: pointer;
}

@media screen and (min-width: 768px) {
	.header__logo {
		display: flex;
	}
	.header__menu {
		display: none;
	}
}

.sidebar-item {
	background: #FFFFFF;
	border-radius: 12px;
	margin-bottom: 10px;
}

.header__menu-item, .sidebar-item {
	width: 100%;
	text-decoration: none;
	font-weight: 700;
	padding: 14px;
	border-bottom: 1px solid #E6E6E6;
	display: flex;
	align-items: center;
}

.header__menu-item-icon, .sidebar-item__icon {
	flex: 0 0 auto;
	margin-right: 20px;
	height: 32px;
	width: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 50%;
	box-shadow: 0px 2px 2px 0px #00000040;
	background: #FFFFFF;
}

.header__menu-item-icon svg,  .sidebar-item__icon svg {
	height: 16px;
	width: 16px;
}

.header__menu-item-text,  .sidebar-item__text {
	color: var(--color-accent);
}

.header__title {
	white-space: nowrap;
	font-size: 14px;
	text-overflow: ellipsis;
	overflow: hidden;
	padding: 0 20px;
	font-weight: bold;
	color: var(--color-title);
}

.header__phone {
	margin-left: auto;
}

/* Баннер срочной помощи */

.fast-banner {
	background: linear-gradient(257.38deg, #6578DB 0%, #6E97DC 48.6%, #78BDDE 98.18%);
	color: #ffffff;
	padding: 16px;
	border-radius: 10px;
	margin-bottom: var(--default-offset);
}

.fast-banner__title {
	font-size: 24px;
	font-weight: 400;
	text-align: center;
	margin-bottom: var(--default-offset);
}

.fast-banner__description {
	font-weight: 300;
}

.fast-banner__button {
	width: 100%;
	margin-top: var(--default-offset);
	background: #ffffff;
	color: var(--color-accent);
	font-weight: 700;
}

/* Список специалистов */

.specialists {
	display: block;
}

.specialists__title {
	margin-bottom: var(--default-offset);
}

.specialists-item {
	text-decoration: none;
	color: var(--color-text);
	display: flex;
	align-items: center;
	position: relative;
}

.specialists-item:not(:last-child) {
	margin-bottom: var(--default-offset);
	padding-bottom: var(--default-offset);
	border-bottom: 1px solid #E6E6E6;
}

.specialists-item__icon {
	flex: 0 0 auto;
	margin-right: 20px;
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.specialists-item__icon img {
	height: 100%;
	width: 100%;
	object-fit: fill;
}

.specialists-item__icon svg {
	height: 100%!important;
	width: 100%!important;
	object-fit: fill;
}

.specialists-item__title {
	margin-bottom: 6px;
}

.specialists-item__content {
	max-width: 540px;
	padding-right: 30px;
}

.specialists-item__right-icon {
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	right: 8px;
	display: block;
	transform: scale(1.6) translateY(-50%);
	width: 22px;
	height: 22px;
	color: var(--color-accent);
}

.specialists-item__right-icon::after {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	right: 3px
}

.specialists-item__right-icon::after {
	width: 8px;
	height: 8px;
	border-top: 2px solid;
	border-right: 2px solid;
	transform: rotate(45deg);
	bottom: 7px
}


/* Список конкретных людей-специалистов */

.specialists-people {
	display: block;
}

.specialists-people__title {
	margin-bottom: var(--default-offset);
}

.specialists-people-item {
	text-decoration: none;
	color: var(--color-text);
	display: flex;
	align-items: center;
	position: relative;
}

.specialists-people-item:not(:last-child) {
	margin-bottom: var(--default-offset);
	padding-bottom: var(--default-offset);
	border-bottom: 1px solid #E6E6E6;
}

.specialists-people-item__photo {
	flex: 0 0 auto;
	margin-right: 20px;
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	border-radius: 50%;
	overflow: hidden;
	justify-content: center;
	margin-bottom: auto;
}

.specialists-people-item__photo img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.specialists-people-item__title {
	margin-bottom: 6px;
}

.specialists-people-item__content {
	max-width: 540px;
	padding-right: 30px;
}

.specialists-people-item__description {
	font-weight: 700;
	font-size: 14px;
}

.specialists-people-item__description > *:not(:last-child) {
	margin-bottom: 4px;
}

.specialists-people-item__specialization {
	color: var(--color-accent);
}

.specialists-people-item__experience span {
	color: var(--color-title);
}

.specialists-people-item__grade span {
	color: var(--color-title);
}

.specialists-people-item__right-icon {
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	right: 8px;
	display: block;
	transform: scale(1.6) translateY(-50%);
	width: 22px;
	height: 22px;
	color: var(--color-accent);
}

.specialists-people-item__right-icon::after {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	right: 3px
}

.specialists-people-item__right-icon::after {
	width: 8px;
	height: 8px;
	border-top: 2px solid;
	border-right: 2px solid;
	transform: rotate(45deg);
	bottom: 7px
}

/* Детальная страница специалиста */

.specialist-detailed {
	display: block;
}

.specialist-detailed-top {
	min-height: 170px;
	background: #FFFFFF;
	display: block;
	padding: var(--default-offset);
	margin-bottom: var(--default-offset);
	border-radius: 10px;
}

.specialist-detailed-top__title {
	margin-bottom: 6px;
}

.specialist-detailed-top__photo {
	float: right;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	border-radius: 50%;
	overflow: hidden;
	justify-content: center;
	margin-bottom: 10px;
	margin-left: 10px;
}


@media screen and (min-width: 768px) {
	.specialist-detailed-top__photo {
		width: 130px;
		height: 130px;
	}
}

.specialist-detailed-top__photo.specialist-detailed-top__photo--no-overflow {
	overflow: visible;
	border-radius: unset;
}

.specialist-detailed-top__photo img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.specialist-detailed-top__specialization {
	color: var(--color-accent);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.6;
}

.specialist-detailed-top__experience, .specialist-detailed-top__item {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.7;
}

.specialist-detailed-top__item span {
	color: var(--color-accent);
}

.specialist-detailed-top__experience span {
	color: var(--color-title);
}

.specialist-detailed-top__grade, .specialist-detailed-top__course {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.6;
}

.specialist-detailed-top__grade span, .specialist-detailed-top__course span {
	color: var(--color-title);
}

.specialist-detailed-form {
	border-radius: 10px;
	background: #FFFFFF;
	padding: var(--default-offset);
	margin-bottom: var(--default-offset);
}

.specialist-detailed-form__title {
	text-align: center;
	margin-bottom: var(--default-offset);
}

.specialist-detailed-form__row {
	display: flex;
	align-items: center;
	justify-content: center;
}

.specialist-detailed-form__row > *:not(:last-child) {
	margin-right: var(--default-offset);
}

.specialist-detailed-form__button {
	width: 100%;
	max-width: 260px;
	margin: var(--default-offset) auto 0;
}

.specialist-detailed-text {
	border-radius: 10px;
	background: #FFFFFF;
	padding: var(--default-offset);
	margin-bottom: var(--default-offset);
	line-height: 1.5;
}

.specialist-detailed-text h1, .specialist-detailed-text h2, .specialist-detailed-text h3, .specialist-detailed-text h4, .specialist-detailed-text h5, .specialist-detailed-text h6 {
	color: var(--color-title);
	font-weight: 700;
}

.specialist-detailed-text > *:not(:last-child) {
	margin: 10px 0;
}

.specialist-detailed-text ul, .specialist-detailed-text ol {
	margin-left: 20px;
	padding-left: 20px;
}

.specialist-detailed-text a {
	color: var(--color-accent);
}

.contacts__title {
	margin-bottom: var(--default-offset);
}

.contact {
	text-decoration: none;
	display: block;
	background: #FFFFFF;
	font-weight: 700;
	color: var(--color-text);
	border-radius: 10px;
	padding: var(--default-offset);
	position: relative;
}

.contact__wrapper {
	display: flex;
	align-items: center;
}

.contact:not(:last-child) {
	margin-bottom: var(--default-offset);
}


@media screen and (min-width: 768px) {
	.contact {
		padding: calc(var(--default-offset) / 1.5);
	}
}

.contact__icon {
	box-shadow: 0px 2px 2px 0px #00000040;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex: 0 0 auto;
	margin-right: 20px;
}

.contact__icon svg {
	height: 24px;
	width: 24px;
}

.contact__value {
	color: var(--color-accent);
	font-size: 26px;
}

.contact__label {
	margin-top: 6px;
}

.contact__warning {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	margin-top: var(--default-offset);
	color: var(--color-error);
}

/* Страница когда записались */

.operation-result {
	border-radius: 10px;
	background: #FFFFFF;
	padding: calc(var(--default-offset) * 2) var(--default-offset);
	margin-bottom: var(--default-offset);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.operation-result__icon {
	height: 100px;
	width: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: calc(1.2 * var(--default-offset));
}

.operation-result__title {
	text-align: center;
	margin-bottom: var(--default-offset);
}

.operation-result__row {
	display: flex;
	align-items: center;
	justify-content: center;
}

.operation-result__row > *:not(:last-child) {
	margin-right: var(--default-offset);
}

.operation-result__text {
	line-height: 1.4;
	font-weight: 700;
	margin-top: var(--default-offset);
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 400px;
}

.operation-result__button {
	margin-top: calc(2 * var(--default-offset));
	max-width: 300px;
	width: 100%;
	padding: var(--default-offset);
}

/* Чат */

.chat {
	display: block;
	height: calc(100vh - 110px);

	@supports (max-height: 100dvh) {
		height: calc(100dvh - 110px);
	}
}

.chat__wrapper {
	height: 100%;
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
}

.chat__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-bottom: 70px;
}

.chat__footer {
	min-height: 64px;
	height: auto;
	max-height: 400px;
	flex: 0 0 auto;
	width: 100%;
	display: flex;
	align-items: center;
	background: #FFFFFF;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 12px;
}

@media screen and (min-width: 768px) {
	.chat__content {
		border-radius: 10px;
		border: 2px solid #E6E6E6;
		padding: var(--default-offset);
		margin-bottom: var(--default-offset);
		overflow-x: hidden;
		overflow-y: auto;
	}

	.chat__footer {
		position: static;
		max-width: 768px;
		margin: 0 auto;
		border-radius: 10px;
	}
}

.chat__button {
	height: 40px;
	flex: 0 0 auto;
	width: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: none;
	cursor: pointer;
}

.chat__button svg {
	height: 20px;
	width: 20px;
}

.chat__button-attach-file {
	background: #E6E6E6;
	margin-right: auto;
}

.chat__button-send {
	background: #5297F7;
	margin-left: auto;
}

.chat__field {
	width: 100%;
	height: 100%;
	max-height: 300px;
	padding: 0 10px;
	border: none;
	background: none;
	margin: 0 10px;
	resize: none;
}

.chat-item {
	padding: 12px;
	border-radius: 10px;
	font-weight: 500;
	max-width: 260px;
	display: flex;
	flex-direction: column;
}

@media screen and (min-width: 768px) {
	.chat-item:not(.chat-item.chat-item--date) {
		width: 100%;
		max-width: 80%;
	}
}

.chat-item:not(:last-child) {
	margin-bottom: 20px;
}

.chat-item.chat-item--date {
	background: #FFFFFF;
	color: #4C4C4CBF;
	margin-left: auto;
	margin-right: auto;
	font-size: 14px;
}

.chat-item.chat-item--my {
	margin-left: auto;
	color: #FFFFFF;
	background: #5297F7;
}

.chat-item.chat-item--operator {
	margin-right: auto;
	color: #4C4C4C;
	background: #FFFFFF;
}

.chat-item__time {
	margin-top: 6px;
	font-size: 14px;
	margin-left: auto;
}

/* Профиль */
.profile {
	display: block;
}

.profile__field:not(:last-child) {
	margin-bottom: var(--default-offset);
}

.profile__submit {
	margin-top: calc(2 * var(--default-offset));
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 300px;
}

.documents {
	display: block;
}

.documents__title {
	margin-bottom: var(--default-offset);
}

.document {
	display: block;
	background: #FFFFFF;
	border-radius: 10px;
	padding: 20px;
	position: relative;
}

.document:not(:last-child) {
	margin-bottom: var(--default-offset);
}

.document__file-button {
	box-shadow: 0px 2px 2px 0px #00000040;
	position: absolute;
	right: var(--default-offset);
	top: var(--default-offset);
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 10px;
}

.document__file-button svg {
	height: 16px;
	width: 16px;
}

.document__wrapper {
	display: flex;
}

.document__preview {
	flex: 0 0 auto;
	width: 80px;
	height: 120px;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	margin-right: 20px;
	cursor: pointer;
}

.document__preview:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #000000;
	opacity: 0.3;
}

.document__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.document__preview-button {
	text-decoration: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

.document__preview-button svg {
	flex: 0 0 auto;
	height: 24px;
	width: 24px;
}

.document__preview-button span {
	font-size: 10px;
}

.document__footer {
	margin-top: var(--default-offset);
}

.document__content {
	font-weight: 700;
}

.document__content > *:not(:last-child) {
	margin-bottom: 4px;
}


.tariffs {
	display: block;
}

.tariffs__title {
	margin-bottom: var(--default-offset);
}

.tariff {
	border-radius: 10px;
	padding: calc(2 * var(--default-offset)) var(--default-offset) var(--default-offset);
	background: #FFFFFF;
	border-top: #637CED 10px solid;
	border-left: #637CED 4px solid;
	border-right: #637CED 4px solid;
	border-bottom: #637CED 4px solid;
	display: flex;
	flex-direction: column;
}

.tariff__wrapper {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--default-offset);
}

.tariff__title {
	text-align: center;
	color: #637CED;
	margin-bottom: var(--default-offset);
}

.tariff__table {
	width: 100%;
	border-collapse: collapse;
}

.tariff__table td, .tariff__table th {
	border: 1px solid #EAEEF3;
	text-align: left;
	padding: 12px;
}

@media screen and (max-width: 480px) {
	.tariff__table {
		width: auto;
		margin-left: calc(-1 * var(--default-offset));
		margin-right: calc(-1 * var(--default-offset));
	}
	.tariff__table td, .tariff__table th {
		padding: 6px;
		font-size: 12px;
	}
}

.tariff__footer {
	margin-top: auto;
}

.document-sign {
	background: #FFFFFF;
	border-radius: 10px;
	padding: var(--default-offset);
}

.document-sign__title {
	text-align: center;
	margin-bottom: var(--default-offset);
}

.document-signer {
	border-top: 1px solid #E6E6E6;
}

.document-signer__name {
	text-align: center;
	padding-top: var(--default-offset);
	margin-bottom: var(--default-offset);
	color: var(--color-title);
}

.document-signer__description {
	margin-top: var(--default-offset);
}

.document-signer__description span {
	color: var(--color-accent);
}

.document-signer__footer {
	display: flex;
	flex-direction: column;
	margin-top: var(--default-offset);
}

.document-signer__footer > *:not(:last-child) {
	margin-bottom: 10px;
}

.auth {
	display: block;
}

.auth__logo {
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	background: #FFFFFF;
	color: var(--color-title);
	text-transform: uppercase;
	padding: var(--default-offset) 0;
	margin-bottom: var(--default-offset);
}

.auth__logo svg {
	height: 80px;
	width: 80px;
	flex: 0 0 auto;
	margin-bottom: var(--default-offset);
}

.auth__form {
	border-radius: 10px;
	background: #FFFFFF;
	padding: var(--default-offset) var(--default-offset) calc(2 * var(--default-offset));
}

.auth__form-title {
	text-align: center;
	margin-bottom: var(--default-offset);
}

.auth__form-content > *:not(:last-child) {
	margin-bottom: var(--default-offset);
}

.auth__form-description {
	margin-top: var(--default-offset);
	font-size: 14px;
	line-height: 1.5;
}

.auth__form-submit {
	margin-top: var(--default-offset);
	width: 100%;
}

.auth__form-submit .button {
	width: 100%;
}

.auth__recovery {
	max-width: 400px;
	padding-top: calc(var(--default-offset) / 2);
	margin-left: auto;
	margin-right: auto;
	margin-top: calc(var(--default-offset) / 2);
}

.auth__recovery__title {
	text-align: center;
	margin-bottom: var(--default-offset);
}

/* Страница Главная с текстом о программе */
.about-program {
	background: #FFFFFF;
	padding: var(--default-offset);
	margin-bottom: var(--default-offset);
	border-radius: 10px;
	padding-right: 30px;
	line-height: 1.6;
}

.about-program__title {
	text-align: center;
	margin-bottom: var(--default-offset);
}

.about-program__text > * {
	margin-bottom: calc(var(--default-offset) / 2);
}

.about-program__text ul, .about-program__text ol {
	margin-left: 20px;
}

.about-program__text ul li:not(:last-child), .about-program__text ol > li:not(:last-child) {
	margin-bottom: calc(var(--default-offset) / 2);
}

.about-program__text ul ul, .about-program__text ul ol, .about-program__text ol ul, .about-program__text ol ol {
	margin-top: calc(var(--default-offset) / 2);
}

.services-list {
	display: block;
}

.services-list__item {
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border-radius: 10px;
	overflow: hidden;
	padding: 20px;
	text-align: left;
	color: var(--color-title);
	margin-bottom: var(--default-offset);
	text-decoration: none;
}


/* Детальная страница услуги */
.service-detailed {
	display: block;
}

.service-detailed__header {
	display: flex;
	height: 240px;
	background: #FFFFFF;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: var(--default-offset);
}

@media screen and (max-width: 480px) {
	.service-detailed__header {
		display: flex;
		flex-direction: column;
		height: auto;
	}
}

.service-detailed__image {
	width: 60%;
	flex: 0 0 auto;
}

@media screen and (max-width: 480px){
	.service-detailed__image {
		width: 100%;
	}
}

.service-detailed__image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.service-detailed__actions {
	padding: 20px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.service-detailed__actions > *:not(:last-child) {
	margin-bottom: var(--default-offset);
}

@media screen and (max-width: 480px) {
	.service-detailed__actions > *:not(:last-child) {
		margin-bottom: calc(var(--default-offset) / 2);
	}
}

.service-detailed__content {
	background: #FFFFFF;
	line-height: 1.6;
	border-radius: 10px;
	padding: var(--default-offset);
}

.service-detailed__content > *:not(:last-child) {
	margin-bottom: calc(var(--default-offset) / 2);
}

.service-detailed__content ul {
	margin-left: 4px;
	list-style: none;
}

.service-detailed__content ul li {
	position: relative;
	margin-bottom: 6px;
}

.service-detailed__content ul li:before {
	color: var(--color-accent);
	content: '✵';
	font-weight: bold;
	height: 20px;
	width: 20px;
	display: inline-block;
}

.service-detailed__content table {
	border-collapse: collapse;
}

.service-detailed__content table img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.service-detailed__content table td {
	border: none;
}

/* Наши работы */
.our-works {
	display: block;
}

.our-works__wrapper {
	display: flex;
	margin: -10px;
	flex-wrap: wrap;
}

.our-work {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	width: 33.33333333333%;
	padding: 10px;
}

@media screen and (max-width: 1200px){
	.our-work {
		width: 50%;
	}
}

@media screen and (max-width: 480px){
	.our-work {
		width: 100%;
	}
}

.our-work__wrapper {
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	border-radius: 10px;
	overflow: hidden;
	padding-bottom: var(--default-offset);
}

.our-work__image {
	height: 170px;
	width: 100%;
	flex: 0 0 auto;
}

.our-work__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.our-work__title {
	padding: var(--default-offset);
}