/* Start:/bitrix/templates/techmaps/template_styles.css?169156319315708*/
/* RESET STYLES */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0; width: 100%;}
table td {vertical-align: top;}

/* @import url("https://fonts.googleapis.com/css?family=Play:400,700&display=swap&subset=cyrillic"); */

body {background: #fafafa;}

.page *
{
	box-sizing: border-box;
	position: relative;
	/* -webkit-transition: background .3s, color .3s, opacity .3s, box-shadow .3s, left .3s; */
	/* -moz-transition: background .3s, color .3s, opacity .3s, box-shadow .3s, left .3s; */
	/* -o-transition: background .3s, color .3s, opacity .3s, box-shadow .3s, left .3s; */
	/* transition: background .3s, color .3s, opacity .3s, box-shadow .3s, left .3s; */
	font-family: 'Play';
}

.page {min-width: 320px; max-width: 840px; margin: 0 auto; color: #333; font-family: 'Play'; font-size: 16px; line-height: 1.2; padding: 20px; box-sizing: border-box;}

.page a {color: #333;}
.page b {font-weight: bold;}
.page h1 {font-size: 150%; text-align: center; margin: 0 0 10px;}
.page h2 {font-size: 120%; margin: 0 0 10px;}
.page input {outline: none;}
.page select {outline: none;}
.page select option[disabled] {color: #ccc;}
.page textarea {outline: none;}
.page p.center {padding: 0 0 10px; text-align: center;}

.btn {display: block; cursor: pointer; text-decoration: none; border: 1px solid #aaa; border-radius: 4px; background: #fff; box-shadow: 2px 2px 0 #bbb;}
.btn:hover {background: #ffffaa;}
.btn-add {padding: 10px 20px; max-width: 300px; margin: 0 auto; text-align: center;}
.btn-red {background: #faa;}
.btn-green {background: #afa;}
.btn-gray {background: #bbb;}
.btn-margin {margin: 0 auto 10px;}

.mainmenu {transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; text-align: center;}
.mainmenu li {margin: 10px;}
.mainmenu li a {width: 300px; padding: 10px 20px;}

.components:after {content: ''; display: block; clear: both;}
.components .btn-first-add {margin: 0 auto 10px;}

.component {padding: 10px 5px; margin: 0 0 10px;}
.component:after {content: ''; display: block; clear: both;}
.component .name {float: left; width: 45%; padding: 0 5px; word-wrap: break-word;}
.component .title {font-size: 80%; height: 17px; margin: 10px 0;}
.component .props {float: left; width: 30%; padding: 0 5px;}
.component .prop {display: inline-block; margin-right: 5px; white-space: nowrap;}
.component .prop-protein {color: #4b0;}
.component .prop-fat {color: #b40;}
.component .prop-carbohydrates {color: #04b;}
.component .prop-sugar {color: #b4b;}
.component .prop-dry {color: #bb4;}
.component .price {float: left; width: 25%; padding: 0 5px; white-space: nowrap;}

.component.deleted {background: #eee;}
.component.deleted .name {text-decoration: line-through;}
.component.deleted .prop {text-decoration: line-through;}
.component.deleted .price {text-decoration: line-through;}

.products {margin: 10px 0 0;}

.product {padding: 10px 5px; margin: 0 0 10px;}
.product:after {content: ''; display: block; clear: both;}
.product .date {float: left; padding: 0 5px;}
.product .name {float: left; padding: 0 5px;}

.product.deleted {background: #eee;}
.product.deleted .name {text-decoration: line-through;}

.form {border: 1px solid #aaa; border-radius: 4px; background: #fff; box-shadow: 2px 2px 0 #bbb; padding: 10px; margin: 0 0 10px;}
.form label, .form .label {display: block; display: flex; align-items: center; white-space: nowrap; padding: 0 0 10px;}
.form label input[type='text'], .form .label input[type='text'], .form .product-component .quantity input[type='text'] {display: block; border: 1px solid #ddd; font: inherit; font-size: 90%; padding: 5px; width: 100%; margin: 0 0 0 10px; background: #eee;}
.form .product-component .quantity input[type='text'] {margin: 0;}



/* .form label input[type='checkbox'], .form .label input[type='checkbox'] {display: block; border: 1px solid #ddd; font: inherit; font-size: 90%; padding: 5px; margin: 5px 0 10px; background: #eee;} */
.form label select, .form .label select, .form select.product-add-component {display: block; border: 1px solid #ddd; font: inherit; font-size: 90%; padding: 5px; width: 100%; margin: 5px 0 10px; background: #eee;}
.form label textarea, .form .label textarea {resize: none; height: 65px; display: block; border: 1px solid #ddd; font: inherit; font-size: 90%; padding: 5px; width: 100%; margin: 0 0 0 10px; background: #eee;}
.form .btns {text-align: center;}
.form .btns input, .form .btns a {font: inherit; display: inline-block; padding: 10px 20px; margin: 0 5px;}

/* .page .bx-auth {max-width: none; margin: 0 0 10px;} */
/* .page .bx-auth {border: 1px solid #aaa; border-radius: 4px; background: #fff; box-shadow: 2px 2px 0 #bbb; padding: 10px; margin: 0 0 10px;} */
/* .page .bx-auth label, .page .bx-auth .label {display: block; padding: 0 0 20px;} */
/* .page .bx-auth input[type='text'] {display: block; border: 1px solid #ddd; font: inherit; font-size: 90%; padding: 5px; width: 100%; margin: 0 0 10px; background: #eee;} */
/* .page .bx-auth input[type='password'] {display: block; border: 1px solid #ddd; font: inherit; font-size: 90%; padding: 5px; width: 100%; margin: 0 0 10px; background: #eee;} */
/* .page .bx-auth select {display: block; border: 1px solid #ddd; font: inherit; font-size: 90%; padding: 5px; width: 100%; margin: 5px 0 10px; background: #eee;} */
/* .page .bx-auth textarea {resize: none; height: 65px; display: block; border: 1px solid #ddd; font: inherit; font-size: 90%; padding: 5px; width: 100%; margin: 5px 0 10px; background: #eee;} */
/* .page .bx-auth .btns {text-align: center;} */
/* .page .bx-auth .btns input, .page .bx-auth .btns a {font: inherit; display: inline-block; padding: 10px 20px; margin: 0 5px;} */
/* .page .bx-auth .bx-auth-note {font-size: 120%; margin: 0 0 10px;} */

/* .components .form label input[type='text'], .components .form .label input[type='text'] {margin: 5px 0 10px;} */

.calculations {padding: 0 0 10px;}
.calculations table {margin: 0 0 10px;}
.calculations table tr {}
.calculations table tr th {padding: 5px 10px; border: 1px solid #ddd; background: #eee;}
.calculations table tr td {padding: 5px 10px; border: 1px solid #ddd;}
.calculations table tr td.rtext {text-align: right;}

.product-component {padding: 5px; margin: 5px 0 0; border-bottom: 1px solid #aaa; display: flex; align-items: center;}
.product-component .name {width: 45%;}
.product-component .price {width: 15%;}
.product-component .props {width: 40%;}
.product-component .quantity {width: 100px; padding: 0 5px; flex-shrink: 0;}
.product-component .quantity input {margin: 0;}
.product-component .delete {display: block; flex-shrink: 0; width: 29px; height: 29px; background: url('data:image/png;base64,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') 50% 50% no-repeat #faa; background-size: 40%; border-radius: 2px;}
.product-component .delete:hover {background-color: #f77;}
/* .product-component .prop {width: 29px; text-align: center; line-height: 29px; vertical-align: top; margin: 0; border-radius: 2px;} */
/* .product-component .prop-protein {background-color: #afa; color: #fff;} */
/* .product-component .prop-fat {background-color: #faa; color: #fff;} */
/* .product-component .prop-carbohydrates {background-color: #aaf; color: #fff;} */

.product-deleted-component {opacity: 0.5;}
.product-deleted-component .name {text-decoration: line-through;}
/* .product-deleted-component .delete {visibility: hidden; z-index: -100; position: relative;} */

.form .product-component-edit {display: none; padding: 0 0 10px; width: 100%;}
/* .form .product-component-edit label {display: flex; align-items: center; white-space: nowrap;} */
/* .form .product-component-edit label input[type='text'] {margin: 0 0 0 10px;} */
/* .form .product-component-edit label textarea {margin: 0 0 0 10px;} */
.product-component-editing {align-items: start;}
.product-component-editing .product-component-toggle {display: none;}
.product-component-editing .props {display: none;}
.product-component-editing .price {display: none;}
.product-component-editing .product-component-edit {display: block;}

.mass-row {float: right; width: 124px;}

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


.page .edit
{
	--color: #333;
	--hover-color: #0f9cba;
	--border-color: #aaa;
	--background-color: #fff;
}

.page .edit .button {font: inherit; cursor: pointer; padding: 5px 10px; text-align: center; display: inline-block; text-decoration: none; color: var(--background-color); background: var(--hover-color); border: none; border-radius: 0; -webkit-appearance: none;}
.page .edit .button-gray {background: var(--border-color);}

.page .edit input[type='text'],
.page .edit input[type='date'],
.page .edit input[type='number'],
.page .edit input[type='password'],
.page .edit select
{
	font: inherit;
	color: var(--color);
	border-radius: 0;
	line-height: 1;
	height: 38px;
	padding: 5px 10px;
	border: 2px solid var(--border-color);
	background: var(--background-color);
	display: block;
	width: 100%;
	-webkit-appearance: none;
	/* border-width: 0 0 1px; */
}

.page .edit input[type='text']::-webkit-date-and-time-value,
.page .edit input[type='date']::-webkit-date-and-time-value,
.page .edit input[type='number']::-webkit-date-and-time-value,
.page .edit input[type='password']::-webkit-date-and-time-value
{
	margin: 0;
	text-align: left;
	line-height: 28px;
	width: 100%;
}

.page .edit textarea
{
	font: inherit;
	color: var(--color);
	border-radius: 0;
	line-height: 1;
	height: 38px;
	padding: 10px;
	border: 1px solid var(--border-color);
	background: var(--background-color);
	display: block;
	width: 100%;
	resize: none;
	border-width: 0 0 1px;
}

.page .edit .textarea
{
	font: inherit;
	color: var(--color);
	border-radius: 0;
	line-height: 1;
	padding: 10px;
	border: 1px solid var(--border-color);
	background: var(--background-color);
	display: block;
	width: 100%;
	resize: none;
	border-width: 0 0 1px;
}

.page .edit
{
	overflow-y: auto;
}

.page .edit .field
{
	padding: 10px;
}

.page .edit .field-title
{
	padding: 0 0 5px;
}

.page .edit .field-body
{
	
}

.page .edit .submit
{
	text-align: center;
	padding: 5px;
}

.page .edit .submit .button
{
	padding: 5px 30px;
	margin: 5px;
}

.page .edit .checkbox
{
	position: relative;
	width: 24px;
	height: 24px;
	border: 2px solid var(--border-color);
	cursor: pointer;
	flex-shrink: 0;
}
.page .edit .checkbox input
{
	visibility: hidden;
	position: absolute;
}
.page .edit .checkbox-mark
{
	position: absolute;
	width: 13px;
	height: 7px;
	border-bottom: 3px solid var(--hover-color);
	border-left: 3px solid var(--hover-color);
	transform: translate(4px, 4px) rotate(-45deg);
	opacity: 0;
	margin-right: 10px;
}
.page .edit .checkbox input:checked + .checkbox-mark
{
	opacity: 1;
}

.page .edit .flex-hl
{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
/* End */
/* /bitrix/templates/techmaps/template_styles.css?169156319315708 */