:root {
	--main: #0E2235;
	--gray2: #737B8F;
	--bg-main: #F6F7FC;
	--href: #0075DC;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	min-height: 0;
	min-width: 0;
}

body {
	overflow-x: hidden;
	font: 500 18px/143% 'PF BeauSans Pro';
	color: var(--main);
	background-color: var(--bg-main);
}

.wrapper {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	justify-content: space-between;
}

.content {
	padding: 0 230px;
	height: 142px;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	box-sizing: border-box;
}

.header {
	padding: 0 150px;
	align-items: flex-end;
}

.logo__link {
	display: block;
}
.logo__link-image {
	width: 160px;
	height: 100px;
	padding: 22px;
}

.center {
	width: 938px;
	height: 608px;
	border-radius: 20px;
  margin: 0 auto;
	display: flex;
	background-color: white;
	overflow: hidden;
	flex-direction: row;
}

.center__title {
	font: 400 36px/45px 'PF BeauSans Pro';
	margin-bottom: 10px;
}
.center__subtitle {
	font: 400 16px/24px 'PF BeauSans Pro';
}

/*  */
.center__inner {
	width: 50%;
	display: block;
	height: 100%;
	padding: 40px;
}

.center__right {
	background-color: #E4E8F0;
	background-size: 100% auto;
	background-position: bottom center;
	background-repeat: no-repeat;
}
/*  */

a {
	text-decoration: none;
	color: var(--href);
	transition: color .3s ease;
}
a:hover {
	--href: #1a6ab1;
}
h1 {
	font: 600 36px/133% 'PF BeauSans Pro';
}

.sing-in {
	margin: 0 -10px;
}

.sing-in__text {
	font: 500 14px/143% 'PF BeauSans Pro';
	margin: 0 10px 12px
}
.sing-in__buttons {
	display: flex;
}
.sing-in__button {
	display: inline-block;
	margin: 0 10px;
	white-space: nowrap;
	max-width: calc(50% - 10px);
}
.button-leader {
	max-width: 100%;
	width: 100%;
	height: 47px;
	padding: 0 20px;
	border: 1px solid #0075DC;
	border-radius: 6px;
	transition: opacity .3s ease;
	display: inline-block;
	text-align: center;
}
.button-leader > img {
	max-width: 70%;
	position: relative;
	transform: translateY(13px);
}
.button-downloader {
	height: 47px;
	display: inline-block;
	padding: 0 20px;
	color: #0075DC;
	border: 1px solid rgba(255, 255, 255, 0.8);
	font: 500 14px/167% 'PF BeauSans Pro';
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 6px;
	transition: opacity .3s ease;
	text-decoration: none;
	white-space: nowrap;
}
.button-downloader > .sing-in__button-group{
	max-width: 100%;
	position: relative;
	transform: translateY(10px);
	text-align: center;
}
.button-downloader > .sing-in__button-group > span {
	vertical-align: super;
}
.button-leader:hover,
.button-downloader:hover {
	opacity: 0.8;
}

.footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 50px;
	padding-bottom: 40px;
}

.footer__question {
	font: 400 14px/143% 'PF BeauSans Pro';
	max-width: 400px;
	color: var(--main);
}

.footer__copyright {
	font: 400 14px/143% 'PF BeauSans Pro';
	color: var(--gray2);
}

@media (max-width: 1200px) {
	.header {
		padding: 30px 16px 20px;
	}
	.logo__link {
		padding: 0;
	}
	.content {
    padding: 0 160px;
	}
	.content__left {
		min-width: 0;
		width: 650px;
	}
	.content__right {
		width: auto;
    max-height: 70dvh;
    margin-top: 6dvh;
    margin-right: -36vw;
	}
	.footer {

		padding-right: 50px;
		padding-bottom: 30px;
	}
}

@media (max-width: 992px) {
	.header {
		padding: 16px;
	}

	.content {
		padding: 0 60px;
	}

	.content__left {
		display: block;
		width: 100%;
		position: relative;
	}
	.content__right {
		display: block;
		width: 100%;
		position: relative;
	}
	.question {
		padding: 24px 0 36px;
	}
	.content__right {
		display: none;
	}
	.footer {
		padding: 0 50px 30px 60px;
	}
}
@media (max-width: 576px) {
	.header {
		padding: 16px 16px 0;
	}
	.content {
		display: initial;
		padding: 0 20px;
	}
	.wrapper-header {
		margin-bottom: 40px;
	}
	.form-card {
		padding: 10px;
	}
	.content__right  {
		display: initial;
		align-items: initial;
		justify-content: initial;
		flex: initial;
	}
	.content__title {
		margin-bottom: 20px;
	}
	.content__list {
		margin-bottom: 8px;
	}
	.content__list-item {
		font: 600 14px/171% 'PF BeauSans Pro';
	}
	.sing-in__buttons {
		display: block;
		/*max-width: 290px;*/
		width: 100%;
	}
	.sing-in__button {
		margin-bottom: 20px;
		width: 100%;
		max-width: 230px;
		display: block;
	}
	.button-downloader {
		width: 100%;
	}
	.question {
		font: 300 14px/143% 'PF BeauSans Pro';
		max-width: 100%;
		border-top: 1px solid #E4E8F0;
	}
	.footer {
		/* padding: 10px 0; */
	}
	.footer__copyright {
		font: 300 12px/200% 'PF BeauSans Pro';
	}
	.content__right {
		display: none;
	}
}

.hide {
	opacity: 0;
}

.placeholder-image {
	margin-left: 248px;
}

.form-card__error {
	background-color: #f8d7da;
	color: #721c24;
	padding: 6px;
	margin-top: -20px;
	margin-bottom: 8px;
	border: 1px solid #f5c6cb;
	border-radius: 5px;
	text-align: center;
}
.error-message {
	font-size: 14px;
}