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

a {
	text-decoration: none;
}

body, html {
	height: 100%;
}

body.en :lang(ru) {
	display: none;
}

body.ru :lang(en) {
	display: none;
}

hr {
	margin-bottom: 7px;
	margin-top: 40px;
	padding: 0;
	height: 0;
	border: none;
	border-top: 1px solid var(--gray-super-light);
	width: 100%;
}

.opacity-zero {
	opacity: 0;
}

.display-none {
	display: none !important;
}

.clear {
	clear: left;
}

.clear-both {
	clear: both;
}

.purple {
	color: var(--purple)
}

.hovering {
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.hovering:hover {
	-webkit-filter: brightness(85%);
			filter: brightness(85%);
	opacity: 1;
}

a {
	color: var(--blue);
}

/* === Vars === */

:root {
	--gray-light: #F1F2F7;
	--gray-light-text: #989EB3;
	--gray-super-light: #E8ECEE;
	--dark-blue: #191349;
	--blue: #468AC9;
	--purple: #9F5FDF;
	--purple-hover: #ac63f5;
	--gray-input: #CBD4DB;
	--red: #EB5757;
	--yellow: #ffcc00;
}

/* === Fonts === */

@font-face {
	font-family: MyGothic;
	src: url('fonts/Century-Gothic.ttf');
}

@font-face {
	font-family: MyGothicBold;
	src: url('fonts/Century-Gothic-Bold.ttf');
}

@font-face {
	font-family: MyRoboto;
	src: url('fonts/Roboto.ttf');
}

@font-face {
	font-family: MyRobotoMedium;
	src: url('fonts/Roboto-Medium.ttf');
}

@font-face {
	font-family: MyMontserrat;
	src: url('fonts/Montserrat.ttf');
}

@font-face {
	font-family: MyNunito;
	src: url('fonts/Nunito-Light.ttf');
}

/* === Main === */
body {
	background-color: var(--gray-light);
}

main {
	font-size: 14px;
	width: 100%;
	height: 100%;
	font-family: MyRoboto;
	color: var(--dark-blue);
}

.blur {
	-webkit-filter: blur(10px);
			filter: blur(10px);
}

/* Блок для появления поп-апов */
.blur-block {
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	z-index: 2;
	width: 100vw;
	height: 100vh;
}

/* === Sidebar, menu and mobile footer === */

#pc-nav {
	width: 30%;
	height: 100%;
	background-color: white;
	padding-left: 3%;
	font-size: 16px;
	float: left;
	position: fixed;
	padding-top: 30px;
}

.menu a, #mobile-menu a {
	color: var(--gray-light-text);
}

.logos img {
	margin-right: 10px;
	vertical-align: middle;
}


.logo-ltkarta {
	height: 50px;
}

.logo-metro {
	height: 45px;
}

li {
	list-style-type: none;
	margin-top: 30px;
}

.about {
	font-size: 14px;
	position: absolute;
	bottom: 15px;
}

.help-icons {
	display: flex;
	font-size: 30px;
	margin-top: 20px;
}

.help-icon {
	margin-right: 20px;
	display: flex;
	align-items: center;
}

.help-icon a {
	display: flex;
}

.help-icon .fa {
	transition: filter 0.1s ease;
}

.help-icon .fa:hover {
	filter: opacity(0.5);
}

.help-icon_phone .fa {
	color: #4dc94d;
	font-size: 25px;
}

.help-icon_telegram .fa {
	color: #0088cc;
}

.help-icon_email .fa {
	color: #f6cb7d;
}

.email {
	font-family: MyNunito;
	font-weight: bold;
}

.about-payment-logo {
	width: 250px;
	margin: 14px 0;
}

.about-payment-logo img {
	width: 100%;
}

.about-copyright,
.about-metro {
	color: var(--gray-light-text);
}

#footer-mobile {
	display: none;
}

#mobile-menu img {
	width: 15px;
	margin-right: 10px;
}

#mobile-menu {
	display: none;
	position: fixed;
	left: 0;
	width: 100%;
	height: 105vh;
	background-color: white;
	z-index: 999;
	margin-top: -205vh;
}

.animation-class-open {
	-webkit-animation: menu-animation-open 1s ease forwards;
			animation: menu-animation-open 1s ease forwards;
}

.animation-class-close {
	-webkit-animation: menu-animation-close 0.5s ease forwards;
			animation: menu-animation-close 0.5s ease forwards;
}

#mobile-menu ul {
	margin-left: 40px;
	margin-top: 100px;
}

#close-mobile-menu-button {
	width: 10px;
	float: right;
	margin-top: 70px;
	margin-right: 30px;
}

@-webkit-keyframes menu-animation-open {
	0% {
		margin-top: -200vh;
	}
	50% {
		margin-top: 0;
	}
	100% {
		margin-top: -5vh;
	}
}

@keyframes menu-animation-open {
	0% {
		margin-top: -200vh;
	}
	50% {
		margin-top: 0;
	}
	100% {
		margin-top: -5vh;
	}
}

@-webkit-keyframes menu-animation-close {
	0% {
		margin-top: -5vh;
	}
	100% {
		margin-top: -205vh;
	}
}

@keyframes menu-animation-close {
	0% {
		margin-top: -5vh;
	}
	100% {
		margin-top: -205vh;
	}
}

@media screen and (max-width: 940px) and (min-width: 900px) {
	.about-payment-logo {
		width: 200px;
	}
}

@media screen and (max-width: 900px) {
	#pc-nav {
		display: none;
	}
	.content {
		min-height: calc(100vh - 70px);
	}
	#footer-mobile {
		display: flex;
		flex-direction: column;
		padding: 5px 10px;
	}
	#footer-mobile div {
		margin-top: 20px;
	}
	#footer-mobile img {
		width: 100%;
	}
	#mobile-menu {
		display: block;
	}
}

.footer-mobile-payment-logo {
	width: 200px;
}

@media screen and (max-height: 550px) {
	#pc-nav li {
		margin-top: 20px;
		font-size: 14px;
	}

	.about {
		font-size: 13px;
	}

	.logo-metro {
		height: 35px;
	}

	.logo-ltkarta {
		height: 40px;
	}
}

/* === Content === */

.content {
	padding-left: 60px;
	padding-right: 60px;
	width: 70%;
	float: right;
	padding-top: 40px;
}

#header-pc {
	font-family: MyGothic;
	text-align: justify;
	font-size: 16px;
	margin-bottom: 60px;
}

#header-pc span {
	float: left;
}

#header-pc img {
	width: 15px;
}

.language-button, .login-button, .profile-button {
	float: right;
	margin-left: 30px;
	cursor: pointer;
}

.login-button p, .profile-button p {
	display: inline;
}

.heading-1 {
	font-family: MyGothicBold;
	font-size: 28px;
}

.heading-2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	margin-bottom: 30px;
}

.heading-2 img {
	width: 20px;
	float: left;
	margin-right: 10px;
}

.heading-2 p {
	float: left;
	color: var(--gray-light-text)
}

.heading-3 {
	color: var(--red);
	margin-top: 30px;
	font-size: 22px;
	font-weight: bold;
}

#header-mobile {
	display: none;
}

@media screen and (max-width: 900px) {
	.content {
		width: 100%;
		padding: 0 10px;
	}
	#header-pc {
		display: none;
	}
	#header-mobile {
		display: block;
		width: 100%;
		height: 80px;
		background-color: white;
		padding: 20px;
		margin-bottom: 30px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
		font-family: MyGothic;
	}
	.mobile-logos {
		height: 100%;
		float: left;
	}
	.mobile-logos img {
		height: 100%;
		margin-right: 20px;
	}
	.mobile-menu-button {
		height: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
	}
	.mobile-menu-button img {
		height: 40%;
	}
	.mobile-language-button {
		margin-left: auto;
		font-size: 16px;
		margin-right: 10px;
	}
}

@media screen and (max-width: 426px) {
	.content {
		padding: 0;
	}
	.heading-1 {
		font-size: 20px;
	}

	.heading-1, .heading-2, .heading-3 {
		padding: 0 10px;
	}
}

@media screen and (max-width: 470px) {
	.mobile-heading {
		display: none;
	}
}

/* === Forms === */

.submit-button {
	color: white;
	border-radius: 40px;
	background-color: var(--purple);
	border: none;
	cursor: pointer;
	padding: 20px 40px;
	display: block;
	-webkit-appearance: none;
	-webkit-box-shadow: none;
}


.submit-button-disabled {
	background-color: var(--gray-light-text);
}

.back-button {
	float: left;
	margin-top: 16px;
}

.back-button img {
	width: 16px;
	cursor: pointer;
}

.back-button input {
	border: none;
	background: none;
	font: 16px MyRobotoMedium;
	color: var(--purple);
	cursor: pointer;
}

.control-buttons {
	margin-top: 50px;
}

.input-field {
	border: 1px solid var(--gray-input);
	border-radius: 4px;
	padding: 10px 12px;
	width: 100%;
}

.input-field::-webkit-input-placeholder {
	font-size: 14px;
	color: var(--gray-light-text);
}

.input-field::-moz-placeholder {
	font-size: 14px;
	color: var(--gray-light-text);
}

.input-field:-ms-input-placeholder {
	font-size: 14px;
	color: var(--gray-light-text);
}

.input-field::-ms-input-placeholder {
	font-size: 14px;
	color: var(--gray-light-text);
}

.input-field::placeholder {
	font-size: 14px;
	color: var(--gray-light-text);
}

.input-field:focus {
	outline: none;
	border: 1px solid var(--blue);
}

.input-name {
	font-size: 13px;
	margin-bottom: 10px;
}

input[type="date"] {
	padding: 4px 12px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	color: rgba(0, 0, 0, 0);
	opacity: 1;
	display: block;
	background: url(images/date.png) no-repeat;
	width: 20px;
	height: 20px;
	border-width: thin;
}

.input-clarification {
	color: var(--gray-light-text);
	font-size: 12px;
	margin-top: 8px;
}

.input-clarification-black {
	color: black;
}

.input-clarification-red {
	color: red;
}

.input-error-red {
	border-color: red;
}

.input-tip {
	float: right;
	margin-right: 6px;
	margin-top: -27px;
	position: relative;
	z-index: 2;
	color: var(--gray-light-text);
	font-size: 15px;
	cursor: pointer;
}

@media screen and (max-width: 426px) {
	.control-buttons {
		padding-left: 30px;
		padding-right: 30px;
	}
	
}

/* === Main-card === */

#block-2, #block-3, #block-5, #block-6, #block-7 {
	margin-bottom: 100px;
}

.main-card {
	border-radius: 10px;
	background-color: white;
	padding: 30px;
	margin-top: 30px;
}

.main-card-shadow {
	-webkit-box-shadow: 0px 10px 40px rgba(90, 97, 132, 0.15);
			box-shadow: 0px 10px 40px rgba(90, 97, 132, 0.15);
}

.main-card-name {
	font-size: 18px;
	font-family: MyRobotoMedium;
	margin-bottom: 25px;
}

.main-card-name-big {
	font-size: 20px;
	font-family: MyRobotoMedium !important;
	margin-bottom: 25px !important;
}

.main-card-blue {
	background-color: var(--blue);
	color: white;
	font-size: 18px;
}

.modal {
	z-index: 2;
	display: block;
	position: absolute;
	font-family: MyRoboto;
	margin: 0;
	top: 40%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	min-width: 300px;
	max-width: 500px;
}

@media screen and (max-width: 426px) {
	.modal {
		width: 100%;
	}
}

.modal__close {
	display: flex;
	justify-content: right;
	cursor: pointer;
}

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

.modal__icon {
	font-size: 40px;
}

.modal__icon.fa-circle-xmark {
	color: var(--red);
}

.modal__icon.fa-circle-exclamation {
	color: var(--yellow);
}

.modal__title {
	font-size: 16px;
	font-weight: bold;
	margin-left: 10px;
}

.modal__text {
	margin-top: 20px;
}

@media screen and (max-width: 426px) {
	.main-card {
		border-radius: 0;
		padding-left: 20px;
		padding-right: 20px;
	}

	.main-card-blue p {
		font-size: 16px;
	}
}

/* === Block-1 ввод номера бск === */

#block-1 .main-card {
	width: 370px;
}

#block-1 .input-field {
	padding: 10px 12px;
}

#block-1 .main-card .submit-button {
	width: 100%;
	margin-top: 30px;
}

.hands-pc {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 500px;
	z-index: -2;
}

.hands-mobile {
	display: none;
}

@media screen and (max-width: 1077px) {
	.hands-pc {
		width: 300px;
	}
}

@media screen and (max-width: 900px) {
	#block-1 .main-card {
		width: 300px;
	}
}

@media screen and (max-height: 700px) {
	.hands-pc {
		width: 300px;
	}
}

@media screen and (max-width: 900px) {
	#block-1 .main-card {
		width: 330px;
	}
	.hands-pc {
		display: none;
	}
	.hands-mobile {
		display: unset;
		width: calc(100% + 20px);
		margin-left: -10px;
		margin-top: 20px;
		margin-bottom: 50px;
	}
	#block-1 .main-card {
		margin-left: auto;
		margin-right: auto;
	}
	#block-1 .heading-1 {
		text-align: center;
	}
}

@media screen and (max-width: 426px) {
	.hands-mobile, .hands-pc {
		margin-top: 40px;
	}

	#block-1 .main-card {
		border-radius: 10px;
		width: 90%;
	}
}

/* === Block-7 выбор билета ===*/

#block-7 hr, #block-8 hr, #block-9 hr {
	display: none;
}

#block-7 .submit-button, #block-8 .submit-button, #block-9 .submit-button {
	float: right;
}

.radio-option:not(:first-child) {
	margin-top: 20px;
}

.radio-option label {
    margin-left: 5px;
}

.ticket-option {
	margin-top: 20px;
}

.fast-wallet {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 14px;
}

.fast-wallet-button {
	margin-right: 10px;
	margin-top: 15px;
	color: white;
	border-radius: 40px;
	background-color: var(--purple);
	border: none;
	cursor: pointer;
	padding: 10px 20px;
}

@media screen and (max-width: 426px) {
	#block-7 hr, #block-8 hr, #block-9 hr {
		display: block;
		margin: 30px 0;
	}	
	
	#block-7 .main-card, #block-8 .main-card, #block-9 .main-card {
		padding-bottom: 10px;
		padding-top: 20px;
	}	

	#block-7 .control-buttons, #block-8 .control-buttons, #block-9 .control-buttons {
		background-color: white;
		height: 100px;
		margin-top: 0px;
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* === Block-2 payment === */

#block-2 hr {
	display: none;
}

@media screen and (max-width: 426px) {
	#block-2 hr {
		display: block;
		margin: 30px 0;
	}	
	
	#block-2 .main-card {
		padding-bottom: 10px;
		padding-top: 10px;
		width: 100% !important;
	}
	
	#block-2 .main-card:not(.main-card-blue) {
		margin-top: 0 !important;
	}

	#block-2 .control-buttons {
		background-color: white;
		height: 100px;
		margin-top: 3px; /* хз зачем это */
		padding-left: 30px;
		padding-right: 30px;
	}
}


/* card 2 */
.payment__email-input {
	width: 50%;
}

@media screen and (max-width: 426px) {
	.receive-way-card {
		padding-top: 0 !important;
		margin-bottom: -3px;
	}
}

@media screen and (max-width: 500px) {
	.payment__email-input{ 
		width: 100%;
	}
}

/* card 5 */

.payment-methods {
	display: flex;
	flex-direction: column;
	margin-top: 40px;
}

.payment-method {
	display: flex;
	align-items: center;
	margin-top: 20px;
}

.payment-method__input {
	margin-right: 10px;
}

.payment-method__card {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--gray-light-text);
	border-radius: 10px;
	padding: 5px 0;
	height: 50px;
	width: 100%;
	transition: box-shadow 0.1s ease;
}

.payment-method__card:hover {
	-webkit-box-shadow: 2px 6px 10px 0px rgba(34, 60, 80, 0.11);
	-moz-box-shadow: 2px 6px 10px 0px rgba(34, 60, 80, 0.11);
	box-shadow: 2px 6px 10px 0px rgba(34, 60, 80, 0.11);
}

.payment-method__logo {
	height: 100%;
}

.payment-method-comission {
	color: var(--gray-light-text);
  font-size: 12px;
  margin-top: 7px;
  text-align: center;
  margin-left: 20px;
}

.payment-data {
	margin-top: 40px;
}

.payment-data p {
	margin-top: 5px;
}

.payment-data__amount {
	font-size: 20px;
}

.payment-data__comission {
	font-size: 16px;
}

.payment-data__total {
	font-size: 20px;
	font-weight: 700;
}

.payment-warning {
	margin-top: 40px;
}

.payment-agreement {
	margin-top: 15px;
}

.payment-agreement label {
	cursor: pointer;
}

#block-2 .submit-button {
	float: right;
}

@media screen and (max-width: 900px) {
	#block-2 .main-card-shadow {
		-webkit-box-shadow: none;
				box-shadow: none;
	}
}


/* block-3 and block-6 */

#block-3 .main-card-shadow p,
#block-6 .main-card-shadow p {
	margin-bottom: 20px;
}

.last-block-margin {
	margin-top: -20px;
}

#block-3 .main-card-shadow p:not(.main-card-name),
#block-6 .main-card-shadow p:not(.main-card-name) {
	font-family: MyMontserrat;
}

.hyphen {
	float: left;
	width: 100%;
}

.hyphen:before {
	margin-right: 10px;
	float: left;
	font-size: 14px;
	font-weight: bold;
	color: var(--gray-light-text);
	content: "—";
}

.hyphen a {
	font-weight: bold;
}

#block-3 .submit-button,
#block-6 .submit-button {
	margin-top: 30px;
}


@media screen and (max-width: 426px) {
	#block-3 .main-card:not(.main-card-blue),
	#block-6 .main-card:not(.main-card-blue),
	#block-7 .main-card:not(.main-card-blue) {
		margin-top: 0 !important;
	}
	#block-3 .control-buttons,
	#block-6 .control-buttons {
		margin-top: 0;
		background-color: white;
		height: 100px;
		padding-left: 30px;
		padding-right: 30px;
	}

	#block-3 .control-buttons input,
	#block-6 .control-buttons input {
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
	}
}

/* block-6 */


.list-numbers {
	margin-bottom: 30px;
}

.list-numbers-item {
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	margin-bottom: 30px;
}

.list-numbers p {
	margin-bottom: 0 !important;
}

.circle {
	display: inline;
	float: left;
	border: 2px solid var(--purple);
	width: 30px;
	height: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	border-radius: 100%;
	margin-right: 15px;
	color: var(--purple);
	font-weight: bold;
}

/* block-4 */

#block-4 .main-card {
	width: 370px;
}

#block-4 .submit-button {
	width: 100%;
	margin-top: 30px;
}

#block-4 .input-field {
	padding-right: 25px;
}

.input-tip:hover::after {
	content: attr(data);
	position: absolute;
	bottom: 20px;
	background-color: var(--gray-light);
	color: var(--dark-blue);
	font-family: MyRoboto;
	font-weight: normal;
	font-size: 12px;
	right: -20px;
	width: 200px;
	padding: 13px;
	border-radius: 4px;
}

#block-4 .input-field:nth-child(2):focus + .input-tip:nth-child(3) {
	opacity: 0;
}

#block-4 .input-field:nth-child(5):focus + .input-tip:nth-child(6) {
	opacity: 0 !important;
}

.signin-button, .signup-button {
	font-family: MyGothicBold;
	font-size: 25px;
	float: left;
	cursor: pointer;
}

.signup-button {
	float: right;
}

#block-4 .main-card hr {
	margin-top: 20px;
}

.signin .input-name {
	margin-top: 20px;
}

.signup p {
	font-family: MyGothic;
	margin-top: 25px;
}

@media screen and (max-width: 900px) {
	#block-4 .main-card {
		width: 300px;
	}
}

@media screen and (max-width: 900px) {
	#block-4 .main-card {
		width: 330px;
	}
	#block-4 .main-card {
		margin-left: auto;
		margin-right: auto;
	}
}

@media screen and (max-width: 426px) {
	#block-4 .main-card {
		border-radius: 10px;
		width: 90%;
	}
}

/* block-5 */

#block-5 hr {
	margin: 20px -30px;
	width: auto;
}

.account-ticket {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
}

.account-ticket:first-child {
	height: 30px;
}

.account-ticket input[type=checkbox],
.account-ticket-name,
.account-ticket-label {
	float: left;
}

.account-ticket input[type=checkbox] {
	margin-right: 10px;
}

.account-ticket-label {
	margin-left: 15px;
	background-color: var(--gray-super-light);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
}

.account-ticket-icons {
	margin-left: auto;
	cursor: pointer;
}

.account-ticket-icons img {
	width: 17px;
	margin-left: 10px;
	opacity: 0.5;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	cursor: pointer;
}

.account-ticket-icons img:hover {
	opacity: 1;
}

.account-ticket-number {
	color: var(--gray-light-text);
	font-size: 12px;
	margin-left: 22px;
	margin-top: 5px;
}

.account-ticket-icons input[type=text] {
	padding: 6px 12px;
}



/* Loading animation */

.lds-roller {
	display: inline-block;
	position: absolute;
	width: 80px;
	height: 50px;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto;
	top: 40%;
}
.lds-roller div {
	-webkit-animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	-webkit-transform-origin: 40px 40px;
	    -ms-transform-origin: 40px 40px;
	        transform-origin: 40px 40px;
}
.lds-roller div:after {
	content: " ";
	display: block;
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--purple);
	margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
	-webkit-animation-delay: -0.036s;
	        animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
	top: 63px;
	left: 63px;
}
.lds-roller div:nth-child(2) {
	-webkit-animation-delay: -0.072s;
	        animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
	top: 68px;
	left: 56px;
}
.lds-roller div:nth-child(3) {
	-webkit-animation-delay: -0.108s;
	        animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
	top: 71px;
	left: 48px;
}
.lds-roller div:nth-child(4) {
	-webkit-animation-delay: -0.144s;
	        animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
	top: 72px;	
	left: 40px;
}
.lds-roller div:nth-child(5) {
	-webkit-animation-delay: -0.18s;
	        animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
	top: 71px;
	left: 32px;
}
.lds-roller div:nth-child(6) {
	-webkit-animation-delay: -0.216s;
	        animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
	top: 68px;
	left: 24px;
}
.lds-roller div:nth-child(7) {
	-webkit-animation-delay: -0.252s;
	        animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
	top: 63px;
	left: 17px;
}
.lds-roller div:nth-child(8) {
	-webkit-animation-delay: -0.288s;
	        animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
	top: 56px;
	left: 12px;
}
@-webkit-keyframes lds-roller {
	0% {
		-webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}
@keyframes lds-roller {
	0% {
		-webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}

/* receipt */

.receipt-wrapper {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: baseline;
	    -ms-flex-align: baseline;
	        align-items: baseline;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	font-size: 14px;
}

.receipt-wrapper hr {
	border: 2px dashed gray;
	border-bottom: none;
	margin-top: 15px;
	margin-bottom: 15px;
}

.receipt-wrapper p:not(:first-child) {
	margin-top: 7px;
}

.receipt-wrapper .not-advert {
	border: 1px solid black;
	width: 20%;
}

.receipt-wrapper .main-card {
	width: 50%;
}

.receipt-center {
	text-align: center;
}

.receipt-bold {
	font-weight: bold;
	font-size: 16px;
}

.summary-small {
	font-weight: bold;
}

.receipt-big {
	font-size: 20px;
}

.receipt-block-left {
	float: left;
}

.receipt-block-right {
	float: right;
}
.receipt-block {
	width: 100%;
	clear: left;
	margin-bottom: 10px;
	display: flow-root;
}

@media screen and (max-width: 600px) {
	.receipt-wrapper {
		display: block;
	}
	.receipt-wrapper .main-card {
		width: 100%;
	}
	.receipt-wrapper .not-advert {
		width: 100%;
		display: none;
	}
}

/* Datepicker */

.ui-datepicker-unselectable span {
	color: var(--gray-light-text) !important;
	font-weight: normal !important;
}


.ui-state-default {
	color: black;
}


.ui-datepicker {
	text-align: center;
	background-color: white;
	border-radius: 10px !important;
	overflow: hidden;
	-webkit-box-shadow: 0px 0px 22px 2px rgba(34, 60, 80, 0.2);
	        box-shadow: 0px 0px 22px 2px rgba(34, 60, 80, 0.2);
	font-family: MyRoboto !important;
	z-index: 2;
}

.ui-datepicker-trigger {
	margin: 0 0 0 5px;
	vertical-align: text-top;
}

.ui-datepicker {
	font-family: MyRoboto !important;
	margin-top: 2px;
	padding: 0 !important;
	border-color: #c9f0f5 !important;
}

.ui-datepicker {
	width: 256px;
}

.openemr-calendar .ui-datepicker {
	width: 191px;
}

.ui-datepicker table {
	width: 256px;
	table-layout: fixed;
}

.openemr-calendar .ui-datepicker table {
	width: 191px;
	table-layout: fixed;
}

.ui-datepicker-header {
	background-color: var(--blue) !important;
	background-image: none !important;
	border-radius: 0;
}

.openemr-calendar .ui-datepicker-header {
	background-color: #e6f7f9 !important;
	border-width: 1px;
	border-color: #c9f0f5;
	border-style: solid;
}

.ui-datepicker-title {
	line-height: 35px !important;
	margin: 0 10px !important;
}

.openemr-calendar .ui-datepicker-title {
	line-height: 20px !important;
}

.ui-datepicker-prev span {
	display: none !important;
}

.ui-datepicker-next {
	text-align: center;
}

.ui-datepicker-next span {
	display: none !important;
}

.ui-datepicker-prev {
	background-color: transparent !important;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAYAAACulacQAAAAUklEQVQYlXWPwQnAMAwDj9IBOlpH8CjdJLNksuujFIJjC/w6WUioFBcqJ7sGEAD5Y/hpqLRghRv4YQlUjqXI3Kql2MixraGbEhVcDXcFUR/1egEHNuTBpFW0NgAAAABJRU5ErkJggg==') !important;
	height: 12px !important;
	width: 7px !important;
	margin: 14px 12px;
	display: inline-block;
	left: 0 !important;
	top: 0 !important;
}

.openemr-calendar .ui-datepicker-prev {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAOCAYAAAD9lDaoAAAAuUlEQVQokXXRsUtCYRAA8J8pDQ1CVIgIgtBU2NDiZIuDS4uLf6WDS1O0tLREEE8icBNKS3lTs8/B78XHw3dwcHA/juOuqjzucYJVrQQMcYctvo4OgEFIeMK6iPphCjzjEWLUC3vACx7yRo5uMUIFr5gii1EL41AvMIkBVPGH04DrSLEsIvjEOZq4wi9+iijDR0ANXOMbmxjlcIY2LtANO6YxymGCDs5wg/ciYv+KBJeY4+2A+Y9j4Y47RtUkrNXeDxUAAAAASUVORK5CYII=') !important;
	height: 14px !important;
	width: 9px !important;
	margin: 5px !important;
}

.ui-datepicker-next {
	cursor: pointer;
}

.ui-datepicker-prev {
	cursor: pointer;
	margin-bottom: 0 !important;
}

.ui-datepicker-next {
	background-color: transparent !important;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAVUlEQVQYlXWQ0Q3AIAhEL07gKI7kKN2kI3Wk1w9to3KQEELucQEECOizhhTQGHFnwOdgobWx0GkZILfYBhXl0STVbPoBarbkL7ozN/F8VBBXh8uJgF5r2hrI4GHUkAAAAABJRU5ErkJggg==') !important;
	height: 12px !important;
	width: 8px !important;
	margin: 0px 12px;
	display: inline-block;
	right: 0 !important;
	top: 0 !important;
}

.openemr-calendar .ui-datepicker-next {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAOCAYAAAASVl2WAAAAtElEQVQYlXXQsUpCcRQH4I97EQyHa1pgIEE0hBGYL+BjNLRFjxXh4rM4F21BS4S4FAgqQioOngt/RM/6+zi/w4EanlA4MDkecYsO3vG/D8a4Rx03eMMqBQt8oodTXAdalwBm+IpNDVxG3aYEMMU3ujjDBT5SAH9R2cE58mwPFOgneJSCGp7RjLoXTEtQjbCFOV7xCxkqdp9sYxnhpFyb4QFXdh8c4Cc9Ko++OwzjFwfn5FiwBVeuI/K2UCkSAAAAAElFTkSuQmCC') !important;
	height: 14px !important;
	width: 8px !important;
	margin: 5px;
}

.ui-datepicker-month {
	border-radius: 2px;
	background-color: var(--blue);
	width: 110px !important;
	height: 22px;
	font-family: MyRoboto !important;
	color: #fff;
	font-size: 14px !important;
	font-weight: 600;
	text-align: left;
	border: none !important;
	margin-right: 17px !important;
	vertical-align: text-top;
}

.openemr-calendar .ui-datepicker-month {
	font-family: MyRoboto !important;
	color: rgba(34, 34, 34, 0.87);
	font-size: 12px !important;
	font-weight: 700;
	text-align: center;
	-webkit-transform: scaleX(1.0029);
	    -ms-transform: scaleX(1.0029);
	        transform: scaleX(1.0029)
}

.ui-datepicker-year {
	border-radius: 2px;
	background-color:  var(--blue);
	width: 61px !important;
	height: 22px;
	border: none !important;
	font-family: MyRoboto !important;
	color: #fff;
	font-size: 14px !important;
	font-weight: 600;
	text-align: left;
	vertical-align: text-top;
}

.openemr-calendar .ui-datepicker-year {
	font-family: MyRoboto !important;
	color: rgba(34, 34, 34, 0.87);
	font-size: 12px !important;
	font-weight: 700;
	text-align: center;
	-webkit-transform: scaleX(1.0029);
	    -ms-transform: scaleX(1.0029);
	        transform: scaleX(1.0029)
}

.ui-datepicker-month option,
.ui-datepicker-year option {
	color:  var(--blue) !important;
	background-color: #fff !important;
	font-family: MyRoboto !important;
	font-size: 14px !important;
	font-weight: 600;
}

.ui-datepicker-month option[selected],
.ui-datepicker-year option[selected] {
	background-color: #e5edf0 !important;
}

.ui-datepicker .ui-state-hover {
	background: none !important;
	border: 0 !important;
}

.ui-datepicker td {
	vertical-align: top;
}

.ui-datepicker .ui-state-default {
	border-radius: 2px;
	border-color: #edebeb !important;
/*     background: white !important; */
	width: 24px;
	height: 24px;
	padding: 0 !important;
	line-height: 24px;
	text-align: center !important;
	font-family: MyRoboto !important;
	color: #707070;
	font-size: 13px;
	font-weight: bold;
	margin: 7px 0 0 4px;
}

.ui-datepicker .ui-state-default.ui-state-highlight{
	border-color: #dcdcdc;
	color: #3e9aba !important;
}

.openemr-calendar .ui-state-default {
	font-size: 10px;
	margin: 0;
}

.ui-datepicker td {
	width: 33px;
}

.openemr-calendar .ui-datepicker td {
	width: 26px;
}

.openemr-calendar .ui-state-default {
	width: 26px;
	height: 20px;
	line-height: 20px;
}
.ui-state-default.ui-state-hover {
	border-color: #dcdcdc;
}

.ui-datepicker .ui-state-active {
	border-color: #dcdcdc;
	background-color: #cff3f8 !important;
	color: #3e9aba !important;
} 

.ui-datepicker-calendar thead tr th {
	font-family: MyRoboto !important;
	color: #549fa8;
	font-size: 12px;
	font-weight: 400;
	padding: 0.45em 0.3em !important;
	/*   width: 15px !important; */
}

.openemr-calendar .ui-datepicker-calendar thead tr th {
	font-size: 10px;
}

.ui-datepicker-close {
	display: none;
}

.ui-datepicker thead {
	background-color: #f5f5f5;
}

.openemr-calendar .ui-datepicker thead {
	background: none;
}

.ui-state-default.ui-datepicker-current {
	float: none !important;
	font-family: MyRoboto !important;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
	border-width: 0 !important;
	border: none;
	vertical-align: top;
	margin: 0 !important;
	background-color: transparent !important;
}

.ui-datepicker-buttonpane.ui-widget-content {
	text-align: center;
	/* background-color: #3e9aba; */
	background-color: var(--blue);
	margin: 0 !important;
	height: 28px;
	padding: 0 !important;
}

.openemr-calendar .ui-datepicker-year {
	background-color: transparent;
}

.openemr-calendar .ui-datepicker-month {
	background-color: transparent;
}

.openemr-calendar .ui-state-default {
	border: 0 !important;
}

.openemr-calendar .ui-datepicker-month {
	margin-right: 10px !important;
}

td {
	cursor: pointer;
}

td:hover {
	background-color: var(--blue);
}

td:hover a {
	color: white !important;
	background-color: var(--blue) !important;
}

td:hover .ui-state-default {
	background-color: var(--blue) !important;
	color: white !important;
}

td:hover .ui-state-default.ui-state-highlight {
	color: white !important;
}

.ui-datepicker-current-day {
	background-color: #cff3f8;
}

.ui-datepicker-unselectable {
	cursor: default;
}

.ui-datepicker-unselectable:hover {
	background-color: transparent !important;
}

.ui-datepicker-unselectable span {
	opacity: 0;
}

/* Ссылки меню */

.additional-link-main-card p {
	line-height: 2em;
}

.about-logo-wrapper {
	width: 230px;
	float: left;
	margin-right: 30px;
	position: relative;
	overflow: hidden;
}

.about-logo {
	width: 100%;
}

.about-logo-wrapper:after{
	content: '';
	position: absolute;
	top: 140px;
	left: 110px;
	background-color: white;
	width: 140px;
	height: 10px;
	transform: rotate(45deg);
	animation: shine 4s ease-in-out  infinite;
}

.additional-link-main-card li {
	list-style-type: unset;
}

.first-indent-list {
	margin-left: 10px;
}

.second-indent-list {
	margin-left: 20px;
}
summary {
	margin-bottom: 20px;
}

summary p {
	display: inline;
	cursor: pointer;
}

.details-list {
	margin-left: 15px;
}

@keyframes shine {
	90% {
		top: 140px;
	}
	100% {
		top: -20px;
	}
}

@media screen and (max-width: 426px) {

	#block-6 .additional-link-main-card.main-card {
		margin-top: 20px !important;
	}

}

@media screen and (max-width: 500px) {
	.about-logo-wrapper {
		width: 160px;
		margin-right: 20px;
	}
	.about-logo-wrapper:after{
		left: 70px;
	}
}

details>ymaps {
	margin-bottom: 15px;
}