/* Start:/bitrix/templates/foodtechmaps/template_styles.css?176252441313646*/
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;}

html, body {height: 100%;}

.page {font-family: 'Play', sans-serif; height: 100%;}
.page * {box-sizing: border-box;}

.techmaps {box-shadow: 0 0 0 1px #777; height: 100%; overflow-y: auto; font-size: 14px; line-height: 20px; overflow-y: scroll;}
.techmaps .head {padding: 10px 0; display: flex; justify-content: space-between; background: #ddd; position: sticky; top: 0; z-index: 100;}
.techmaps .head:before {content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: #777; z-index: 50;}
.techmaps .head:after {content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #777; z-index: 50;}
.techmaps .head div {border-left: 1px solid #777; padding: 0 10px; flex: 0 0 100px; text-align: center;}
.techmaps .head div:first-child {border-left: none; flex: 1 0 auto; text-align: left;}
.techmaps .head .head-actions {display: flex; gap: 5px; flex: 0 0 166px; justify-content: end;}
.techmaps .head .head-actions .icon {opacity: 0.2;}
.techmaps .head:hover .head-actions .icon {opacity: 1;}
.techmaps .list {}
.techmaps .group {}
.techmaps .group-head {padding: 10px 0; display: flex; justify-content: space-between; background: #bcf; position: sticky;}
.techmaps .group-head:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #777; z-index: 50;}
.techmaps .group-head:after {content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #777; z-index: 50;}
.techmaps .group-head div {border-left: 1px solid #777; padding: 0 10px; flex: 0 0 100px; display: flex; justify-content: center; align-items: center;}
.techmaps .group-head div:first-child {border-left: none; flex: 1 0 auto; text-align: left;}
.techmaps .group-head .group-head-title {display: flex; gap: 15px; justify-content: space-between;}
.techmaps .group-head .group-head-actions {gap: 5px; flex: 0 0 166px; justify-content: end;}
.techmaps .group-head .group-head-actions .icon {opacity: 0.2;}
.techmaps .group-head .group-head-actions .icon-shrink {display: none;}
.techmaps .group-head:hover .group-head-actions .icon {opacity: 1;}
.techmaps .group-body {padding-left: 20px; display: none;}
.techmaps .group.opened > .group-body {display: block;}
.techmaps .group.opened > .group-head .group-head-actions .icon-expand {display: none;}
.techmaps .group.opened > .group-head .group-head-actions .icon-shrink {display: flex;}
.techmaps .item {}
.techmaps .item-head {padding: 10px 0; display: flex; justify-content: space-between; background: #cfb; position: sticky;}
.techmaps .item-head:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #777; z-index: 50;}
.techmaps .item-head:after {content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #777; z-index: 50;}
.techmaps .item-head div {border-left: 1px solid #777; padding: 0 10px; flex: 0 0 100px; display: flex; justify-content: center; align-items: center;}
.techmaps .item-head div:first-child {border-left: none; flex: 1 0 auto; text-align: left;}
.techmaps .item-head .item-head-title {display: flex; gap: 15px; justify-content: space-between;}
.techmaps .item-head .item-head-actions {gap: 5px; flex: 0 0 166px; justify-content: end;}
.techmaps .item-head .item-head-actions .icon {opacity: 0.2;}
.techmaps .item-head .item-head-actions .icon-shrink {display: none;}
.techmaps .item-head:hover .item-head-actions .icon {opacity: 1;}
.techmaps .item-body {padding-left: 20px; display: none;}
.techmaps .item.opened > .item-body {display: block;}
.techmaps .item.opened > .item-head .item-head-actions .icon-expand {display: none;}
.techmaps .item.opened > .item-head .item-head-actions .icon-shrink {display: flex;}
.techmaps .part {}
.techmaps .part-head {padding: 10px 0; display: flex; justify-content: space-between; background: #cbf; position: relative;}
.techmaps .part-head:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #777; z-index: 50;}
.techmaps .part-head:after {content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #777; z-index: 50;}
.techmaps .part-head div {border-left: 1px solid #777; padding: 0 10px; flex: 0 0 100px; display: flex; justify-content: center; align-items: center;}
.techmaps .part-head div:first-child {border-left: none; flex: 1 0 auto; text-align: left;}
.techmaps .part-head .part-head-actions {gap: 5px; flex: 0 0 166px; justify-content: end;}
.techmaps .part-body {padding-left: 20px;}

.techmaps .part .part .part-head {background: #ddd;}

.techmaps input[type='text'] {font: inherit; text-align: center; line-height: 18px; padding: 5px; margin: -5px; border: none; height: 30px; background: transparent; outline: none; font-weight: bold; width: calc(100% + 10px);}
.techmaps input[type='text']:hover {background: rgba(255, 255, 255, 0.5);}
.techmaps select {font: inherit; text-align: center; line-height: 18px; padding: 5px; margin: -5px; border: none; height: 30px; width: calc(100% + 10px); background: transparent; outline: none; font-weight: bold; -webkit-appearance: none; padding-right: 15px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" viewBox="0 0 15 15"><path d="M 8,5.5 11,9.5 14,5.5 z"></path></svg>'); background-repeat: no-repeat; background-position: center right;}
.techmaps select:hover {background-color: rgba(255, 255, 255, 0.5);}
.techmaps select option {}

/* .techmaps .list > .item {position: relative;} */
/* .techmaps .list > .item:before {position: absolute; content: ""; width: 20px; height: 20px; top: 0; left: -20px; border: 1px solid #777; border-top: none; border-right: none; border-bottom-left-radius: 20px;} */

.techmaps .group-head-title input {text-align: left;}
.techmaps .item-head-title input {text-align: left;}

.techmaps .group-head {top: 40px; z-index: 90;}
.techmaps .group-body .group-head {top: 80px; z-index: 80;}
.techmaps .group-body .group-body .group-head {top: 120px; z-index: 70;}

.techmaps .icon {width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; text-decoration: none;}
.techmaps .icon i {}
.techmaps .icon i:before {width: 100%; height: 100%; color: #000;}
.techmaps .icon:hover i:before {color: #f00;}

.techmaps .inputs {display: flex; gap: 10px;}

.techmaps-popup {position: fixed; background: rgba(0, 0, 0, 0.8); top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 100; font-size: 14px; line-height: 20px;}
.techmaps-popup-content {background: #fff; padding: 10px 10px 0; text-align: center; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; min-width: 300px; box-shadow: 0 5px 15px #000;}
.techmaps-popup-content h2 {font-size: 20px; font-weight: bold; padding: 0 0 5px; margin: 0;}
.techmaps-popup-content .error:not(:empty) {padding: 10px 0 10px; color: #f00;}
.techmaps-popup-content .buttons {padding: 10px 0; display: flex; gap: 20px; justify-content: center;}
.techmaps-popup-content .buttons a {padding: 5px 10px; text-decoration: none; background: #cfb; box-shadow: 0 1px 2px #aaa; color: #000;}
.techmaps-popup-content .buttons .cancel {background: #fcb;}
.techmaps-popup-content input {display: block;}
.techmaps-popup-content select {display: block;}
.techmaps-popup-content input + select {margin-top: 0.5em;}

.techmaps-popup-content label {padding: 5px 0; text-align: left;}
.techmaps-popup-content label input {font: inherit; line-height: 18px; padding: 5px; margin: 5px 0 0; border: 1px solid #777; height: 30px; width: 100%; background: transparent; outline: none;}
.techmaps-popup-content label select {font: inherit; line-height: 18px; padding: 5px; margin: 5px 0 0; border: 1px solid #777; height: 30px; width: 100%; background: transparent; outline: none;}
.techmaps-popup-content label select[multiple] {height: 300px;}
.techmaps-popup-content label select[multiple] optgroup {padding: 5px 0;}
.techmaps-popup-content label select[multiple] option {padding: 5px 0;}

/* .techmaps .group .group .group-head {border-left: 1px solid #ddd;} */



.techmaps .item .item-head {background: #cfb;}
/* .techmaps .item .item .item-head {background: #bdf;} */
/* .techmaps .item .item .item .item-head {background: #cfb;} */
/* .techmaps .item .item .item .item .item-head {background: #bdf;} */
/* .techmaps .item .item .item .item .item .item-head {background: #cfb;} */
/* .techmaps .item .item .item .item .item .item .item-head {background: #bdf;} */

.techmaps .group:nth-child(even) > .group-head {box-shadow: inset 0 0px 0 50px rgb(0, 0, 0, 0.1);}
.techmaps .item:nth-child(even) > .item-head {box-shadow: inset 0 0px 0 50px rgb(0, 0, 0, 0.1);}


.techmaps .switch {position: relative; cursor: pointer; flex: 0 0 auto; margin-right: auto;}
.techmaps .switch input {position: absolute; visibility: hidden; z-index: -1;}
.techmaps .switch .fa-check {width: 20px; height: 20px; display: none; align-items: center; justify-content: center;}
.techmaps .switch .fa-xmark {width: 20px; height: 20px; display: flex; color: #f00; align-items: center; justify-content: center;}
.techmaps .switch input:checked ~ .fa-check {display: flex;}
.techmaps .switch input:checked ~ .fa-xmark {display: none;}
.techmaps .switch + input {margin-left: 5px;}

.techmaps select[value='10'] {background: #f00;}

/* .techmaps .item-level-1 > .item-head {top: 40px; z-index: 90;} */

.techmaps .group-level-2 > .group-body > .list > .item-level-1 > .item-head {top: 120px; z-index: 70;}
.techmaps .group-level-2 > .group-body > .list > .item-level-1 > .item-body > .list > .item-level-2 > .item-head {top: 160px; z-index: 60;}




.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/foodtechmaps/template_styles.css?176252441313646 */