@import url('/css/lato.css');

:root
{
	--standart: 300 1rem/1.65 'Lato',sans-serif;
	--h1: 500 36px/1.4 'Lato';
	--h3: 500 24px/1.4 'Lato';
	--h4: 500 18px/1.4 'Lato';
	--h5: 500 14px/1.4 'Lato';
	--nav2: 400 16px/1.1 'Lato',sans-serif;
	--nav3: 400 14px/1.1 'Lato',sans-serif;
	--nav4: 400 14px/1.1 'Lato',sans-serif;
	--nav5: 400 12px/1.1 'Lato',sans-serif;
	--menu: 400 16px/1.1 'Lato',sans-serif;

	--black: #212529;
	--white: #ffffff;
	--red: #E01E26;
	--dark-red: #6d1900;
	--blue:#003B71;
	--light-blue: rgba(0, 59, 113, 0.8);
	--light-grey: #C6C6C6;
	--grey: #7B7B7B;
	--green: rgba(64,192,62,1.0);
	/*--dark-green: rgba(65, 149, 64, 1);
	--light-green: rgba(64,192,62,0.1);*/
	--dark-green: rgba(53, 163, 51, 1);
	--light-green: rgba(53, 163, 51, 0.1);
	--light-red: rgba(163,46,11,0.1);
	--white03: rgba(255,255,255,0.3);
	--white08: rgba(255,255,255,0.8);

	--preloader: all 0.2s ease;
}

html, body
{
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: #fff;
	font-size: 14px;
	line-height: 1.15;
	font-family: als_sector,sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--black);
}

h1 { font: var(--h1); margin: 0;}
h3 { font: var(--h3); margin: 0;}
form h3 {text-align: center;}
.event-info h3, .child-info h3{ word-break: break-all;}
a {color: var(--blue); text-decoration: none;}
.block-6-col, .block-6-col .row {display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 24px; max-width: 800px; margin: 0 auto;}
.block-6-col .row {grid-column: span 6;}
.col1 {grid-column: span 1;}
.col2 {grid-column: span 2;}
.col3 {grid-column: span 3;}
.col4 {grid-column: span 4;}
.col5 {grid-column: span 5;}
.col6 {grid-column: span 6;}
.flex-right{display: flex; justify-content: flex-end;}
.flex-left{display: flex; justify-content: flex-start;}
#root
{
	display: grid;
	grid-template-rows: max-content 1fr max-content;
	min-height: 100vh;
}

#content
{
	display: block;
	padding: 50px 0 80px;
}

.input
{
	display: block;
	width: 100%;
	padding: 5px 9px;
	border: 1px solid var(--light-grey);
	border-radius: 0px;
	margin: 0;
	box-sizing: border-box;
	position: relative;
}

.input .error-message
{
	display: none;
	display: block;
	position: absolute;
	width: 100%;
	top: 105%;
	color: var(--red);
	pointer-events: none;
	opacity: 0;
	transition: all 0.2s ease;
}

.input.error .error-message
{
	opacity: 1;
}

.input.radio
{
	border-color: transparent;
}

.input.radio .radio-variants
{
	display: flex;
	justify-content: space-between;
	padding-top: 5px;
}

.input.date:after
{
	content: "\e902";
	font-family: "icomoon";
	color: var(--light-grey);
	position: absolute;
	right: 5px;
	bottom: 5px;
	font-size: 25px;
	pointer-events: none;
}

.input label, .input .radio-name
{
	display: block;
	font: var(--nav3);
	color: var(--grey);
}

.input.select span, .input.file span
{
	display: block;
	position: relative;
	font: var(--h3);
	padding-top: 5px;
}

.input.select span:after
{
	content: "\e906";
	font-family: "icomoon";
	position: absolute;
	right: 0;
	top: 5px;
	font-size: 0.8em;
}

.input.file span:after
{
	content: "\e912";
	font-family: "icomoon";
	float: right;
	font-size: 0.8em;
	color: var(--light-grey);
}

.input input[type=text], .input input[type=email], .input input[type=password], .input input[type=tel]
{
	-webkit-appearance: none;
	margin: 0;
	padding: 5px 0 0;
	border: none;
	width: 100%;
	font: var(--h3);
	outline: none;
	background: transparent;
}

.input.select select, .input.file input
{
	-webkit-appearance: none;
	margin: 0;
	padding: 0px 0 0;
	border: none;
	width: 100%;
	outline: none;
	background: transparent;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 20px;
	height: 40px;
	opacity: 0;
}


.input.ready
{
	background: var(--light-green);
}

.input.ready label:after
{
	font-family: "icomoon";
	content: "\e905";
	color: var(--green);
	float: right;
	font-size: 0.8em;
}

.input.error
{
	background: var(--light-red);
	margin-bottom: 20px;
}

.input.error label:after
{
	font-family: "icomoon";
	content: "\e904";
	color: var(--red);
	float: right;
	font-size: 0.8em;
}

input[type=submit], a.button, .button, .login button
{
	-webkit-appearance: none;
	display: flex;
	width: 272px;
	height: 60px;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--blue);
	color: var(--white);
	font: var(--h3);
	border: none;
	border-radius: 0px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

input[type=submit]:hover, a.button:hover,.button:hover, .login button:hover
{
	background: var(--light-blue);
}

input[type=checkbox], input[type=radio]
{
	display: none;
}

input[type=checkbox]+label
{
	display: inline-block;
	padding: 3px 0 3px 25px;
	font: var(--nav4);
	color: var(--black);
	position: relative;
}

input[type=checkbox]+label:before
{
	content: " ";
	font-family: "icomoon";
	display: flex;
	position: absolute;
	left: 0px;
	top: 0px;
	border: 1px solid var(--light-grey);
	border-radius: 0px;
	width: 17px;
	height: 17px;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 10px;
}

input[type=checkbox]:checked+label:before
{
	content: "\e905";
	background: var(--blue);
	border-color: var(--blue);
	color: var(--white);
}

input[type=radio]+label
{
	display:block;
	width: 190px;
	box-sizing: border-box;
	border: 1px solid var(--grey);
	border-radius: 0px;
	text-align: center;
	padding: 5px 0;
	color: var(--grey);
	font: var(--nav3);
}

input[type=radio]:checked+label
{
	border-color: var(--blue);
	color: var(--white);
	background: var(--blue);
}


.button.next:after
{
	content: "\e903";
	font-family: "icomoon";
	font-size: 0.6em;
	position: absolute;
	right: 20px;
	transition: all 0.2s ease;
}

.button.next:hover:after
{
	right: 10px;
}

.add-new
{
	display: inline-block;
	border: 1px dashed var(--blue);
	border-radius: 0px;
	height: 60px;
	box-sizing: border-box;
	padding: 12px 12px 12px 60px;
	position: relative;
	transition: all 0.2s ease;
	-webkit-appearance: none;
	background: transparent;
	color: var(--blue);
}

.add-new:before
{
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "icomoon";
	text-align: center;
	content: "\e913";
	width: 32px;
	height: 32px;
	font-size: 32px;
	box-sizing: border-box;
	padding-top: 5px;
	position: absolute;
	left: 12px;
	top: 12px;
}

.add-new:hover
{
	background: var(--blue);
	color: var(--white);
	border: 1px solid var(--blue);
	cursor: pointer;
}

.notice
{
	display: block;
	padding: 0 0 12px;
	font: var(--nav3);
	color: var(--grey);
}

.hidden
{
	display: none !important;
}

.bold
{
	font-weight: bold !important;
}

body
{
	display: grid;
	grid-template-rows: max-content 1fr max-content;
	position: relative;
}

.wrapper
{
	display: block;
	margin: 0 auto;
	max-width: 1200px;
}

.header
{
	display: grid;
	grid-template-columns: 150px 1fr;
	grid-gap: 48px;
	max-width: 920px;
	padding: 28px 0;
}

.header div
{
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	flex-wrap: wrap;
	text-align: center;
}

.header img
{
	max-width: 100px;
	margin: 0 auto 0px;
}

.header span { font: var(--nav3); display: block; }
.header span.bold { font: var(--nav2); display: block; }


content
{
	display: block;
	padding: 50px 0 80px;
}

footer
{
	/*border-top: 4px solid var(--red);*/
	padding: 23px;
	display: flex;
	justify-content: space-between;
	font: var(--nav2);
	background: var(--blue);
	color: var(--white);
}

footer a
{
	color: var(--white);
}

footer div span
{
	display: block;
	margin-top: 5px;
}

/*CONTENT*/

form.login, div.login
{
	display: grid;
	grid-template-columns: 1fr;
	max-width: 450px;
	margin: 0 auto;
	grid-gap: 24px;
}

div.login
{
	margin-top: 20px;
}

form.login a, form.login input[type=submit], form.login button, div.login a, div.login input[type=submit], div.login button
{
	margin: 0 auto;
}

div.login div
{
	text-align: center;
}

.subdata
{
	display: block;
	padding-top: 8px;
	text-align: right;
}

.top-steps
{
	display: flex;
	justify-content: space-between;
	max-width: 800px;
	margin: 0 auto;
}

.top-steps .top-step
{
	display: block;
	color: var(--light-grey);
}

.top-steps .top-step i
{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 60px;
}

.top-steps .top-step span
{
	display: block;
	text-align: center;
	padding: 10px 0;
	max-width: 110px;
}

.top-steps .top-step.now
{
	color: var(--blue);
}

.top-steps .top-step.ready
{
	color: var(--dark-green);
	cursor: pointer;
}

/*RESULTS*/

.child-result a
{
	color: var(--white);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 10px;
	border-bottom: 1px solid var(--white03);
}

.child-result>a:last-child
{
	border-bottom: none;
}

.cabinet .cabinet-children .child-card a>span
{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.cabinet .cabinet-children .child-card a>span>i
{
	display: inline-block;
	font-size: 14px;
	margin-top: 0;
	margin-right: 10px;
}

.child-result a>span:last-child
{
	font-size: 1.2em;
	font-weight: bold;
}

.child-result a:hover
{
	background: var(--white03);
}

.break {
	flex-basis: 100%;
	height: 0;
}

.full-result
{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 570px;
	column-gap: 30px;
	margin: 20px 0;
}

.full-result .res-block
{
	display: flex;
	flex: none;
	width: 100px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.full-result .res-block i
{
	font-size: 40px;
	color: var(--blue);
}

.full-result .res-block span
{
	text-align: center;
	font-size: 11px;
	display: flex;
	align-items: flex-start;
	height: 36px;
}

.full-result .res-block div
{
	font-size: 35px;
	line-height: 35px;
	text-align: center;
	padding: 10px 0;
}

.full-result .res-block.myres div
{
	font-weight: bold;
	font-size: 40px;
}

.full-result .res-block.myres.good
{
	background: var(--light-green);
}
.full-result .res-block.myres.bad
{
	background: var(--light-red);
}

.res-itog
{
	width: 100%;
}

.res-itog div
{
	display: block;
	text-align: center;
	padding: 10px 20px;
	border-radius: 0px;
	font-size: 20px;
	color: var(--black);
}

.res-itog div.recomend
{
	background: var(--light-green);
}
.res-itog div.notrecomend
{
	background: var(--light-red);
}

.result-additional
{
	width: 500px;
	max-width: 100%;
	border: 1px solid var(--blue);
	border-bottom: none;
}

.result-additional>div
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1px;
	background: var(--blue);
	border-bottom: 1px solid var(--blue);
}

.result-additional>div>div
{
	padding: 5px;
}

.result-additional>div.ra-header>div
{
	text-align: center;
	color: var(--white);
	background: var(--blue);
}

.result-additional>div.ra-line>div
{
	text-align: center;
	background: var(--white);
}

.result-additional>div.ra-line:nth-child(2n)>div
{
	text-align: center;
	background: var(--white08);
}

.res-itog
{
	margin-bottom: 20px;
}

.downloader
{
	padding-bottom: 25px;
}

.works-list
{
	display: flex;
	justify-content: flex-start;
	/*width: 100px;*/
	max-width: 100vw;
	box-sizing: border-box;
	overflow: auto;
	gap: 20px;
	padding: 20px;
	border-radius: 0px;
	border: 1px solid var(--blue);
	margin-bottom: 20px;
}

.works-list a
{
	display: block;
	flex: none;
	width: 10vw;
	padding-bottom: 13vw;
	border-radius: 0px;
	border: 1px solid var(--grey);
	background-size: cover;
	background-position: center;
}

/*------------acidmax ------------*/

.delete-new.student add-new.bs{
	width: auto;
	min-width: 40vw;
}



.flex-space
{
	justify-content: space-between;
	flex-wrap: nowrap;
	display: flex;
}


@media (max-width: 700px)
{
	.flex-space .button
	{
		width: auto;
		min-width: 40vw;
	}
}

.list {
	font-size: larger;
	margin-top: 0px;
}

.list__item {
	margin-left: 20px;
	font-size: medium;
	margin-top: 5px;
}

.input.checkbox{
	border:none;
}

.react-dadata__input {
	-webkit-appearance: none;
	margin: 0;
	padding: 5px 0 0;
	border: none;
	width: 100%;
	font: var(--h4);
	outline: none;
	background: transparent;
}

.notice.files{
	display: flex;
	flex-direction: column;
}

.delete-new
{
	display: inline-block;
	border: 1px dashed var(--red);
	border-radius: 0px;
	height: 60px;
	box-sizing: border-box;
	padding: 12px 12px 12px 60px;
	position: relative;
	transition: all 0.2s ease;
	-webkit-appearance: none;
	background: transparent;
	color: var(--red);
}

.delete-new:before
{
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "icomoon";
	text-align: center;
	content: "\e914";
	width: 32px;
	height: 32px;
	font-size: 32px;
	box-sizing: border-box;
	padding-top: 5px;
	position: absolute;
	left: 12px;
	top: 12px;
}

.delete-new:hover
{
	background: var(--dark-red);
	color: var(--white);
	border: 1px solid var(--dark-red);
}

.notice.classes {
	display: block;
	padding: 15px;
	border-radius: 0px;
	font: var(--h3);
	color: var(--white);
	background-color: var(--red);
}
.input.select span.result
{
	display: block;
	position: relative;
	font: var(--h4);
	padding-top: 5px;
}

.cabinet .cabinet-events .event .event-action button
{
	display: block;
	background: var(--white);
	border-radius: 0px;
	font: var(--h3);
	color: var(--black);
	text-align: center;
	padding: 3px 20px;
}

.tabs span
{
	display: block;
	padding: 6px 9px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid var(--blue);
	border-bottom: none;
	text-decoration: none;
	color: var(--black);
}

.tabs span.selected
{
	background: var(--blue);
	color: var(--white);
}

.notice.pk
{
	display: block;
	padding: 10px 0 10px;
	font: var(--nav2);
	color: black;
}

.button-block {
	display: flex;
}
.shadow .window .button-block.center{
	justify-content: center;
}

/*------------cabinet---------------*/
.cabinet
{
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-gap: 30px;
}

.cabinet .menu
{
	border-right: 3px solid var(--blue);
}

.cabinet .menu a
{
	display: block;
	padding: 8px;
	font: var(--menu);
	text-decoration: none;
	color: var(--black);
}

.cabinet .menu a .bell
{
	display: inline-block;
	background: var(--red);
	color: var(--white);
	padding: 3px 5px;
	margin-left: 10px;
	border-radius: 0px;
}

.cabinet .menu a.selected
{
	background: var(--blue);
	color: var(--white);
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.cabinet .cabinet-content
{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 25px;
}

.cabinet .attention
{
	display: block;
	position: relative;
	color: var(--white);
	padding: 10px 10px 10px 105px;
	background: var(--red);
	border-radius: 0px;
}

.cabinet .attention:before
{
	position: absolute;
	font-family: "icomoon";
	content: "\e909";
	font-size: 54px;
	left: 20px;
	top: 10px;
}

.cabinet .cabinet-children
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 40px;
	height: auto;
}

.cabinet .cabinet-children .child-card
{
	display: grid;
	grid-template-columns: 1fr 80px;
	grid-gap: 10px;
	padding: 10px 15px;
	box-sizing: border-box;
	background: var(--blue);
	color: var(--white);
	border: 1px solid var(--blue);
	border-radius: 0px;
}

.cabinet .cabinet-children .child-card i
{
	font-size: 50px;
	margin-top: 10px;
	display: block;
}

.cabinet .cabinet-events
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 25px;
}

.cabinet .cabinet-events.big
{
	grid-template-columns: 1fr;
}

.cabinet .cabinet-events .event
{
	display: grid;
	grid-template-columns: 1fr 80px;
	grid-gap: 10px;
	padding: 10px 15px;
	box-sizing: border-box;
	color: var(--black);
	border: 1px solid var(--blue);
	border-radius: 0px;
}

.cabinet .cabinet-events.big .event
{
	grid-template-columns: 1fr 130px;
}

.cabinet .cabinet-events .event.action
{
	background: var(--blue);
	color: var(--white);
}

.cabinet .cabinet-events .event .event-date
{
	font: var(--menu);
	text-align: center;
}

.cabinet .cabinet-events .event .event-date i
{
	font-size: 50px;
	margin-top: 10px;
	display: block;
}

.cabinet .cabinet-events .event.fail .event-date i
{
	color: var(--red);
}

.cabinet .cabinet-events .event.wait .event-date i
{
	color: var(--red);
}

.cabinet .cabinet-events .event.ready .event-date i
{
	color: var(--green);
}

.cabinet .cabinet-events .event p
{
	font: var(--menu);
}

.cabinet .cabinet-events .event .event-action
{
	grid-column: span 2;
	display: flex;
	align-items: center;
}

.cabinet .cabinet-events .event .event-action a
{
	display: block;
	background: var(--white);
	border-radius: 0px;
	font: var(--h3);
	color: var(--black);
	text-align: center;
	padding: 3px 20px;
}

.progress
{
	display: block;
	border: 1px solid var(--light-grey);
	border-radius: 0px;
	padding: 10px 15px;
	box-sizing: border-box;
}

.progrees-steps
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.progrees-steps .step
{
	width: 105px;
	display: block;
	position: relative;
	text-align: center;
	font: var(--nav4);
	color: var(--light-grey);
	background: var(--white);
	z-index: 1;
}

.progrees-steps .substep.wait a
{
	color: var(--light-grey);
}

.progrees-steps .step.ready, .progrees-steps .substep.ready a
{
	color: var(--green);
}

.progrees-steps .step.fail, .progrees-steps .substep.fail a
{
	color: var(--red);
}

.progrees-steps .step.process, .progrees-steps .substep.process a
{
	color: var(--black);
}

.progrees-steps .step i
{
	font-size: 42px;
	display: block;
	height: 50px;
}

.progrees-steps .step span
{
	display: block;
	margin-top: 15px;
	font: var(--nav5);
}

.progrees-steps .substep
{
	width: 24px;
	text-align: center;
}

.shadow
{
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: var(--white03);
	z-index: 100;
}

.shadow .window
{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
	padding: 20px;
	border-radius: 0px;
	border: 1px solid var(--blue);
	background: #fff;
	max-width: 90vw;
	width: 614px;
	max-height: 90vh;
	box-sizing: border-box;
	overflow: auto;
}

.shadow .window .window-head
{
	text-align: center;
}

.shadow .window .button-block
{
	justify-content: space-between;
}

.date-time-block .times
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 25px;
}

.date-time-block .times input[type=radio]+label
{
	width: auto;
	border-color: var(--blue);
	color: var(--blue);
}

.date-time-block .times input[type=radio]:checked+label
{
	color: var(--white);
}

.date-time-block .times input[type=radio]:disabled+label
{
	border-color: var(--light-grey);
	color: var(--light-grey);
}

.button-block a
{
	margin: 0 auto;
}

.tab-content .block-6-col
{
	margin: 0;
}

.tab-content
{
	padding-top: 25px;
}

.tabs
{
	display: flex;
	justify-content: flex-start;
	border-bottom: 1px solid var(--blue);
}

.tabs a
{
	display: block;
	padding: 6px 9px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid var(--blue);
	border-bottom: none;
	text-decoration: none;
	color: var(--black);
}

.tabs a.selected
{
	background: var(--blue);
	color: var(--white);
}

.preloader
{
	display: block;
	max-width: 100px;
	margin: 0 auto;
}

.preloader svg
{
	max-width: 100%;
}

.preloader svg .cls-2
{
	opacity: 0;
	transition: var(--preloader);
	animation: preloader 1500ms infinite;
	animation-delay: 1000ms;
}

.preloader svg .cls-3
{
	opacity: 0;
	transition: var(--preloader);
	animation: preloader 1500ms infinite;
	animation-delay: 500ms;
}

.preloader svg .cls-4
{
	opacity: 0;
	transition: var(--preloader);
	animation: preloader 1500ms infinite;
	animation-delay: 750ms;
}

.preloader svg .cls-5
{
	opacity: 0;
	transition: var(--preloader);
	animation: preloader 1500ms infinite;
	animation-delay: 250ms;
}


.mustdouble
{
	grid-column: span 6;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

@keyframes preloader {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.menu-toggler {display: none;}

@media all and (max-width: 700px)
{
	:root
	{
		--standart: 300 1rem/1.65 'als_sector',sans-serif;
		--h1: 500 22px/1.4 'als_meringue';
		--h3: 500 18px/1.4 'als_meringue';
		--nav2: 400 14px/1.1 'als_sector',sans-serif;
		--nav3: 400 14px/1.1 'als_sector',sans-serif;
		--nav4: 400 14px/1.1 'als_sector',sans-serif;
	}
	body
	{
		padding: 10px 20px;
		box-sizing: border-box;
	}

	.mustdouble
	{
		grid-column: span 1;
	}

	.header img
	{
		display: block;
		margin: 0 auto 10px;
	}

	.header
	{
		grid-gap: 10px;
		padding: 0 0 10px;
	}

	/*.header span
	{
		display: none;
	}*/

	footer
	{
		padding: 23px 0;
	}

	footer>*:last-child
	{
		text-align: right;
	}

	.block-6-col, .block-6-col .row
	{
		grid-template-columns: 1fr;
	}

	.col1 {grid-column: span 1;}
	.col2 {grid-column: span 1;}
	.col3 {grid-column: span 1;}
	.col4 {grid-column: span 1;}
	.col5 {grid-column: span 1;}
	.col6 {grid-column: span 1;}

	.flex-right.col2, .flex-left.col2
	{
		justify-content: center;
	}

	input[type=radio]+label
	{
		width: 140px;
	}

	.top-steps
	{
		display: flex;
		justify-content: space-between;
		max-width: calc(100vw - 40px);
		margin: 0 auto;
		overflow-x: auto;
	}

	.top-steps .top-step
	{
		flex-shrink: 0;
	}

	.top-steps .top-step span
	{
		font-size: 10px;
	}

	.top-steps .top-step span b
	{
		font-size: 1rem;
	}

	.top-steps .top-step i
	{
		font-size: 40px;
	}

	.top-steps .top-step
	{
		width: 110px;
	}

	.cabinet {
		grid-template-columns: 1fr;
		position: relative;
	}

	.cabinet .cabinet-events
	{
		grid-template-columns: 1fr;
	}

	.progrees-steps {
		overflow: auto;
		max-width: calc(100vw - 72px);
	}

	.progrees-steps .step {
		margin: 0 10px;
	}

	.progrees-steps .step:first-child
	{
		margin-left: 0;
	}
	

	.cabinet .cabinet-children
	{
		grid-template-columns: 1fr;
	}

	.cabinet .cabinet-events.big .event
	{
		grid-template-columns: 1fr 70px;
	}

	.cabinet .menu
	{
		display: none;
		border: none;
		position: absolute;
		left: 0px;
		right: 0px;
		background: #fff;
		border-radius: 0px;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
		top: 0;
		z-index: 5;
	}

	.cabinet .menu.show {display:block}

	.cabinet .menu a.selected
	{
		border-radius: 0px;
	}

	.menu-toggler
	{
		display: flex;
		text-align: center;
		justify-content: center;
		
		background: var(--blue);
		border-radius: 0px;
		margin-bottom: 10px;
		color: var(--white);
		font-size: 30px;
		padding: 5px 0;
	}

	.menu-toggler:before {
		font-family: "icomoon";
	  content: "\e915";
	}

	.button-block
	{
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.button-block button
	{
		margin-top: 10px;
		max-width: 48%;
		font-size: 16px;
		box-sizing: border-box;
	}
}