@font-face {
    font-family: 'gilroy';
    src: url('../fonts/gilroy-light-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}
@font-face {
    font-family: 'gilroy';
    src: url('../fonts/gilroy-regular-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gilroy';
    src: url('../fonts/gilroy-medium-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;

}
@font-face {
	font-family: 'gilroy';
	src: url('../fonts/gilroy-semibold-webfont.woff2') format('woff2'),
	url('../fonts/gilroy-semibold-webfont.woff') format('woff');
	font-weight: 600;
	font-style: normal;

}
@font-face {
    font-family: 'gilroy';
    src: url('../fonts/gilroy-bold-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}
@font-face {
    font-family: 'gilroy';
    src: url('../fonts/gilroy-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-extrabold-webfont.woff') format('woff');
    font-weight: 800;
    font-style: normal;

}
@font-face {
	font-family: 'proxima_nova';
	src: url('../fonts/proxima_nova_black-webfont.woff2') format('woff2'),
	url('../fonts/proxima_nova_black-webfont.woff') format('woff');
	font-weight: 900;
	font-style: normal;

}


:root {
	font-size: 1em;

	--colorGreen: #4D9E7A;
	--colorGreenHover: #94C5AF;
	--colorOrange: #FFB240;
	--colorOrangeHover: #E6C79C;
	--colorGrayHover: #909090;
	--colorGrayRed: #D83434;
	--colorGrayE5: #E5E5E5;
	--colorGrayF3: #F3F3F3;
	--colorGrayF8: #F8F8F8;
	--colorGray91: #919191;
	--heightInput: 3.75rem;
	--heightBtn: 2.875rem;
	--weght800: 800;
}


body {display: flex;flex-direction: column; min-height: 100vh; font: 1rem/1.4 'gilroy'; letter-spacing: .04em;}
p, ul, mark, label, figure {padding: 0; margin: 0;}
ul {list-style: none;}
a {color: inherit;}
a:hover, a:focus {text-decoration: none;}
a, input[type='submit'], button {transition: all .3s;outline: none !important; cursor: pointer;}
mark {background: transparent; color: inherit;}
input, button {border: none;background: transparent;outline: none !important;}
input:invalid {border-color: #FF0000;}
h1 {font-size: 1.875rem;font-weight: var(--weght800);margin: 0;}
h2 {font-size: 1.5625rem;font-weight: var(--weght800);margin-bottom: 1.2em;}
.h2-test {font-size: 1.875rem;font-weight: 600;margin-bottom: .67em;}
::placeholder {opacity: 1; color: var(--colorGray91);}




.container-fluid {padding-left: calc(50vw - 573px); padding-right: calc(50vw - 573px);}
.form-control {display: block;width: 100%;border-style: solid;border-width: 3px;border-radius: .625em;height: var(--heightInput);padding: 0 .625em;background-color: #fff; outline: none !important;}
.select2-container {width: 10.375em !important;}
.select2-container--default .select2-selection--single {border-radius: .625em;border: 3px solid #C5C5C5;height: var(--heightInput);background: transparent; display: flex;align-items: center;justify-content: center;width: 10.375em; outline: none !important;}
.selection {display: flex;justify-content: center;}
.select2-container--default .select2-selection--single .select2-selection__rendered {padding-right: 8px;}
.select2-container--default .select2-selection--single .select2-selection__arrow {display: flex;align-items: center;position: static;}
.select2-container--default .select2-selection--single .select2-selection__arrow b {position: static;margin: 0;}
.img-fluid {max-width: 100%;}



.bg-green {background: var(--colorGreen);color: #fff;border-radius: .625em;}
.bg-gray {background: var(--colorGrayF3);border-radius: .625em;padding: 1.25em 1.25em 3.125em;width: 100%;}
.bg-gray-f8 {background: var(--colorGrayF8);}
.bg-gray h2 {padding-top: .8em;padding-left: .4em;}
[class*='btn-'] {display: flex;align-items: center;justify-content: center;color: #fff;font-weight: 700;height: var(--heightBtn);border-radius: .625em;max-width: 100%;width: 12.25em;}
[class*='btn-']:first-letter {text-transform: uppercase;}
.btn-green {background: var(--colorGreen);}
.btn-green:hover {background: var(--colorGreenHover);color: #fff;}
.btn-green-bordered {color: var(--colorGreen); border-style: solid; border-width: 3px; border-color: inherit;width: 12.5em;}
.btn-green-bordered:hover {color: var(--colorGreenHover);}
.btn-orange {background: var(--colorOrange);}
.btn-orange:hover {background: var(--colorOrangeHover);}
.block-input + .block-input {margin-top: 1.25em;}
.block-input small {font-size: 1rem;display: block;padding-left: .8125em;text-align: left;}
.bordered {border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: inherit;}
.orange {color: var(--colorOrange);}
.red {color: var(--colorGrayRed);}
.green {color: var(--colorGreen);}
.dark-gray {color: #5C5C5C;}
a.orange:hover {color: var(--colorOrangeHover);}
a.orange:active {color: var(--colorOrange);}
a.green:hover {color: var(--colorGreenHover);}
a.green:active {color: var(--colorGreen);}
a.black:hover {color: var(--colorGrayHover);}
a.black:active {color: initial;}
.styled-radio, .styled-checkbox {position: relative;font-size: 1.25rem;padding-left: 1.5em;cursor: pointer;}
.styled-radio::before, .styled-checkbox::before {content: '';position: absolute;left: 0;top: .3em;width: .9em;height: .9em;border-radius: 50%;border: 2px solid #C5C5C5;transition: .2s;}
.styled-checkbox::before {border-radius: 0;}
input:checked + .styled-checkbox::before, input:checked + .styled-radio::before {border-color: var(--colorGreen);background: var(--colorGreen) url(../img/ico-ok.svg) center center no-repeat;}
.password-wrapper {position: relative;}
.password-wrapper span {position: absolute;top: 3px;bottom: 3px;right: 3px;width: 2.5em;cursor: pointer;}
.password-wrapper.vis #block-login-password {background-image: url(../img/ico-password-vis.svg);}
.requires-validation {position: relative;}
.requires-validation input:invalid {border: 3px solid red !important;}
.requires-validation span {position: absolute;top: auto; left: 0; color: red;font-size: 12px;padding-top: .3em;display: none;}
.requires-validation input:invalid + span {display: block;}
.to-close {position: relative; padding: 2.4em 2.8em;margin-bottom: 4.375em;}
.to-close > img:first-child {position: absolute;top: .9375em;right: .9375em; cursor: pointer;}
.block-white {background: #ffffff;padding: 20px 40px;}
.block-white + .block-white, .block-white + .block-paddings {margin-top: 40px;}
.block-paddings {padding: 0 40px;}
.collapse__btn {cursor: pointer;}
.collapse__btn img {transition: .3s;}
.open .collapse__btn img {transform: rotate(180deg);}
.collapse__content {display: none;}
.txt p {line-height: 1.5;}
.txt p + p {margin-top: 7px;}
.width-content {width: max-content; max-width: 100%;}

footer.container-fluid {margin-top: auto;border-top: 30px solid #fff;text-align: center;padding-top: 1.5em;padding-bottom: 1.4em;letter-spacing: .1em;border-radius: 0;}
footer.container-fluid p {font-size: 1.25rem;font-weight: var(--weght800);}
footer.container-fluid span {font: 900 12px 'proxima_nova';}

.block-login {margin: auto auto 0;text-align: center;max-width: 100%;padding: 30px 15px 0;}
.block-login img {width: 9.75em;}
.block-login h2 {font-weight: 500;}
.block-login .block-input {width: 20.75em;max-width: 100%;margin-left: auto;margin-right: auto;}
.block-login .form-control {border-color: var(--colorGrayE5);padding-right: 2.5em;background-position: 96% center;background-repeat: no-repeat;}
#block-login-name {background-image: url(../img/ico-login.svg);}
#block-login-password {background-image: url(../img/ico-password.svg);}
.block-login .btn-green {height: var(--heightInput);width: 20.75em;max-width: 100%;margin: 2.625em auto .3em;}

header.container-fluid {padding-top: 1.5625em;padding-bottom: 1.5625em;min-height: 10.625em;}
header.container-fluid h1 {font-size: 1.5625rem;letter-spacing: .1em;}
nav {display: flex;}
nav a {font-size: 1.25rem;height: var(--heightInput);border-radius: calc(var(--heightInput) / 2); border: 3px solid transparent; padding: 0 2em;display: flex;align-items: center;text-transform: capitalize;}
nav a:hover {color: var(--colorGrayHover);}
nav a.active, nav a:active {border-color: var(--colorGreen);}

.attension-info {display: flex; align-items: center;}
.attension-info img {flex-shrink: 0;margin-right: 1em;}
.attension-info h5 {font: 700 1.875rem 'gilroy';margin-bottom: .1em;}

.main-search {margin: 0 -10px 3.125em;}
.main-search > div {padding-left: 10px;padding-right: 10px;}
.main-search .form-control {border-color: var(--colorGreen);font-size: 1.25rem;font-weight: 700;}
.main-search .btn-green {height: var(--heightInput);width: 10.375em;}

.table-main {width: 100%;}
.table-main table {width: 100%;font-size: 1.25rem;}
.table-main tr:nth-child(2n+3) {background: #F3F3F3;}
.table-main th, .table-main td {padding: 0;}
.table-main th p {line-height: 1.2;padding-left: 1.5em; border-radius: 0;height: 3.5em;display: flex;align-items: center;}
.table-main th:first-child p {border-radius: .5em 0 0 .5em;}
.table-main th:last-child p {padding-right: 1.5em; border-radius: 0 .5em .5em 0;}
.table-main td {padding-left: 1.5em;padding-top: .8em;padding-bottom: .8em;}
.table-main td:last-child {padding-right: 1.5em;}
.table-main td:nth-child(1) {font-weight: 500;}
.table-main td:nth-child(4), .table-main td:nth-child(5) {font-weight: 300;}

.page-questionary {background: var(--colorGrayF8);}
.page-questionary footer.container-fluid {border-top-color: var(--colorGrayF8);}

.questionary-info {padding: 2.875em 1.875em 3.4em; line-height: 1.3; margin-bottom: 4.25em;}
.questionary-info .row > div:first-child img {width: 8.4em;}
.questionary-info-stage h5 {font: 700 1.875rem/1.2 'gilroy';margin-bottom: .3em;}
.questionary-info-stage mark {font-weight: 700;font-size: 1.875rem;}
.questionary-info-stage div {width: 17.75em;height: .625em;background: var(--colorGrayE5);border-radius: .3125em; margin-top: .1em;}
.questionary-info-stage div span {content: '';display: block;height: 100%;border-radius: inherit;background: linear-gradient(0deg, #E6C79C, #E6C79C), linear-gradient(270deg, #FFB240 -1.15%, #F5E3BC 101.15%);}

.questionary-sort {margin-bottom: 1em; display: flex;justify-content: flex-end;}
.questionary-sort a {border-width: 1px; border-style: solid; border-color: transparent;font-size: 12px;height: 26px;border-radius: 13px;display: flex;align-items: center;padding: 0 1em;}
.questionary-sort .active, .questionary-sort a:active {border-color: inherit;}
.questionary-sort .green {font-weight: 700;}

.question-list {background: #fff;padding: 1.875em 4.5em 3.75em;}
.question-item {border-bottom: 1px solid #E9E9E9;padding-bottom: .75em;}
.question-item + .question-item {margin-top: 1.875em;}
.question-item header {display: flex;align-items: center;margin-bottom: .8em;}
.question-item header mark {font-size: 12px; font-weight: 700;width: 8.33em;height: 2.5em;border-radius: 1.665em;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.question-item header img {cursor: pointer;flex-shrink: 0;transition: .4s;}
.question-item header img.up {transform: rotate(180deg);}
.question-item .to-fill {color: var(--colorOrange); border: 1px solid var(--colorOrange);}
.question-item .filled {background: var(--colorGreen); color: #fff;}
.question-item h5 {flex-grow: 1; font: 600 1.25rem/1.3 'gilroy';margin: 0 30px 0 20px; cursor: pointer;}
.question-answer {margin: 0 0 0 calc(6.25em + 20px);}
.question-answer small {display: block;color: var(--colorGrayHover);font: 300 .875rem/1rem 'gilroy';max-width: 40em;letter-spacing: initial;padding-bottom: .5em;}
.question-answer small b {font-weight: 500;}
.answer-input {display: flex;flex-direction: column;align-items: flex-start;position: relative;}
.question-answer input, .answer-input p {font-size: 1.25rem;color: var(--colorGray91);}
.answer-input div {position: relative;width: 100%;}
.answer-input span {position: absolute;top: 0;bottom: 0;left: 101%; display: none;align-items: flex-end; cursor: pointer;}
.answer-input p {max-width: 100%;}
.question-answer input {width: 100%;}
.answer-input.limited span {display: flex;}
.answer-input.limited p {overflow: hidden;white-space: nowrap;}
.question-item-controls {display: flex;padding-top: 4em;padding-bottom: 1.25em;}
.question-answer > *:not(.answer-input) {display: none;}
.question-submit {display: flex;justify-content: space-between;margin-top: 2.5em;}
.question-submit [class*='btn-'] {width: auto;padding: 0 2em;}
.el-to-input {border-color: #E9E9E9;}

.profile-info h2 {height: 4em;margin: 0;}
.profile-info table {width: 100%;}
.profile-info td:first-child {font-size: .875rem;}
.profile-info td:last-child {font-weight: 700;padding-left: 1rem;}
.profile-info tr + tr td {padding-top: 1.875rem;}

.profile-form .block-input small {color: var(--colorGray91);}
.profile-form .form-control {border-color: #E9E9E9;}
.profile-form .form-control::placeholder {color: #000;}
.profile-form small {font-size: .875rem;}
.profile-form small span {font-size: 12px;}
.profile-form-save .btn-green {margin: 0 15px;}

/*Тут input-group и datepicker*/
.input-group-custom {display: flex; height: var(--heightBtn);border-radius: .625em;overflow: hidden;border: 3px solid #e9e9e9;}
.input-group-custom span {width: var(--heightBtn);display: flex;align-items: center;justify-content: center; background: var(--colorGrayE5);flex-shrink: 0;}
.input-group-custom input {padding: 0 .5em;}

input.datepicker {border: 3px solid #e9e9e9;border-radius: .625em; height: var(--heightBtn);}
.datepicker table tr td.active.active, .datepicker table tr td span.active.active {background: var(--colorGreen) !important;}

.logo {display: grid;grid-template-columns: max-content max-content; align-items: center; width: max-content; gap: 16px; font: 700 1.375rem/1 'gilroy'; letter-spacing: 0.07em;}
.logo:hover {color: inherit;}
.logo img {border: 2px solid var(--colorGreen); width: 50px; height: 50px;border-radius: 10px;object-fit: none; object-position: center center;}

.test-header {margin-bottom: 30px;}
.test-header h2 {margin-bottom: 1em;}
.test-header__timer {font-size: 3.75rem;}
.test-header__progress div {height: 10px;border-radius: 10px;background: var(--colorGrayE5);margin-top: 10px;}
.test-header__progress div span {display: block;border-radius: 10px;background: var(--colorGreen);height: 100%;}
.test-header .collapse {margin-top: 40px;}
.test-header .collapse__btn {display: flex;align-items: center;}
.test-header .collapse__btn span {margin: 0 12px 2px 0;}
.test-header .collapse__btn img {transition: .3s;}
.test-header__items {display: grid;grid-template-columns: repeat(auto-fill, 40px); gap: 14px;}
.test-header__items a {font-weight: 600; font-size: 1.125rem; color: var(--colorGray91);width: 40px;height: 40px;border-radius: 8px;display: flex;align-items: center; justify-content: center; text-decoration: underline transparent;}
.test-header__items a:hover {text-decoration-color: inherit;}
.test-header__items .passed {color: #000000;border-width: 1px; border-style: solid; border-color: inherit;}

.test-rules {counter-reset: test-rules;}
.test-rules li {padding-left: 18px; position: relative;}
.test-rules li::before {content: counter(test-rules)'.'; counter-increment: test-rules;position: absolute;left: 0;top: 0;}
.test-rules li + li {margin-top: 1rem;}
.test-rules h3 {font-size: 1rem;font-weight: 700;margin-bottom: 0.5em;}

.table-test {overflow-x: auto;max-width: 100%;}
.table-test td, .table-test th {padding: 7px 12px;border: 1px solid #000;}
.table-test th {font-weight: 600;background: var(--colorGrayF8);}
.table-test tr + tr:not(:last-child) td {border-bottom-color: var(--colorGrayE5);}
.test-variants {counter-reset: test-variants;}
.test-variants h4 {font-size: 1rem;font-weight: 600;margin-bottom: 1em;margin-top: 0.15em;}
/*.test-variants h4::before {content: counter(test-variants)'.'; counter-increment: test-variants;}*/
.test-variants .img-fluid {margin-left: -1.5em;}

.test-btns {margin-top: 1.25em;}
.test-btns > div {padding-bottom: 20px;}
.test-btns__nav {display: grid;grid-template-columns: repeat(auto-fit, 12.5em); gap: 20px;}

a.test-item-green {color: #ffffff;background: var(--colorGreen);}
a.test-item-green:hover {background: #00b062;text-decoration-color: transparent;}
a.test-item-red {color: #ffffff;background: var(--colorGrayRed);}
a.test-item-red:hover {background: #FF0000;text-decoration-color: transparent;}

.inputs {position: relative; width: 1110px; max-width: 100%;margin: 0 auto;height: 624px; padding: 15px;}

.inputs .form-control {position: absolute;max-width: 300px;}











@media screen and (max-width: 1176px) {
	.container-fluid {padding-left: 15px;padding-right: 15px;}
}

@media screen and (max-width: 991px) {
	:root {
		font-size: .875em;
		--weght800: 700;
	}

	.question-list {padding: 2em;}

	.inputs {display: flex;flex-direction: column; align-items: center; justify-content: center;height: 400px;}
	.inputs .form-control {position: static;}
	.inputs .form-control + .form-control {margin-top: 25px;}
}

@media screen and (max-width: 767px) {
	.to-close {padding: 1.875em 1.5em 2em;}
	.block-white {background: #ffffff;padding: 15px;}
	.block-white + .block-white, .block-white + .block-paddings {margin-top: 15px;}
	.block-paddings {padding: 0 15px;}

	.table-main table {font-size: 1rem;}

	.question-item header {flex-wrap: wrap;justify-content: space-between;}
	.question-item header h5 {order: 1;width: 100%;margin: .5em 0 0;}
	.question-answer {margin-left: 0;}
	.question-answer [class*='btn-'] {width: 9.5em;}

	.logo {font-size: 1.2rem;}

	.test-btns__nav {grid-template-columns: repeat(3, 1fr);}
	.test-btns__nav [class*='btn-'] {width: 100%;}
}

@media screen and (max-width: 575px) {
	:root {
		font-size: .75em;
	}

	h1 {font-weight: 700;}

	.table-main th p, .table-main td {padding-left: 1em;}
	.table-main th:last-child p, .table-main td:last-child {padding-right: 1em;}

	.question-submit {display: block;}

	.profile-form .row > div + div {margin-top: 1.25em;}

	.logo {font-size: 1.375rem;}

	nav {justify-content: flex-end;}

	.test-btns__nav {grid-template-columns: 1fr;}
	}

@media screen and (max-width: 450px) {
	nav a {padding: 0 1em;}
	
	.attension-info {text-align: center;}
	.attension-info img {display: none;}

	.table-main {overflow-x: auto;}

	.question-item-controls {padding-top: 2.5em;justify-content: space-around;flex-wrap: wrap;}
	.question-item-controls [class*='btn-'] {margin: 20px 10px 0 !important;}
	.question-item-controls [class*='btn-']:nth-child(2) {order: 1;}
	
	.profile-form-save .btn-green {width: 10em;}
}