* {
    box-sizing: border-box;
}
body {
    font-family: Bellota Text, Tahoma, Verdana, Arial, sans-serif;
    margin: 0px;
    height: 100vh;
}
a {
    color: black;
}
#tree ul, #tree li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#tree ul {
    padding-left: 30px;
}
#tree>ul, #tree>ul>li>ul {
    padding-left: 0px;
}
#tree li {
    padding: 6px 10px;
    background-color: #ffffff;
    border-radius: 4px;
    --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
#tree li.collapsed, #tree li.nochild {
    margin-bottom: 10px;
}
#tree li.nochild {
    padding-left: 30px;
}
#tree li:hover {
    --box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.toolbar {
    margin-bottom: 10px;
}
.toggle {
    cursor: pointer;
    user-select: none;
    --padding-bottom: 6px;
}
li:not(.collapsed)>.toggle {
    padding-bottom: 15px;
}
.toggle::before {
    content: '▼';
    display: inline-block;
    margin-right: 4px;
    transition: transform 0.3s ease;
}
.collapsed .toggle::before {
    content: '▼';
    transform: rotate(-90deg);
}
.collapsed > ul {
    display: none;
}
ul ul {
    padding-left: 20px;
}
.container {
    display: flex;
    height: 100vh;
    overflow: auto;
}
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.history #new-history {
    display: none;
}
body:not(.history) #refresh-history, body:not(.history) #clear-history {
    display: none;
}
.grid-container {
    display: flex;
    align-items: flex-start;
    margin: 6px;
    padding: 6px;
    border: 1px solid grey;
    border-radius: 10px;
}
.line-view .grid-container {
    border-radius: 3px;
    border: none;
    display: table-row;
}
.line-view:not(.no-remains) .grid-container[data-code]:nth-child(odd), .line-view.no-remains .zebra {
    background-color:#eeeeee;
}
.grid-container:hover {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8);
}
.line-view #data .grid-container[data-code]:hover {
    box-shadow: none;
    background-color: #ffff7d;
}
.path {
    padding: 6px 10px;
    text-align: left;
    width: 80%;
    top: 0;
    background-color: white;
}
.title {
    text-align: left;
    font-weight: bold;
}
.name {
    font-weight: bold;
    grid-column: 1 / 3;
    text-align: left;
}
.picture {
    margin-right: 10px;
}
.nomenclature {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: min-content auto;
}
#menu {
    display: inline-block;
    position: fixed;
    top: 20px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-image: url('/pub/icon/menu.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;

	transform: scale(1);
	animation: pulse 0.3s infinite;
    animation-iteration-count: 3;
}
@keyframes pulse {
	0% {
		transform: scale(1);
	}
	30% {
		transform: scale(1.3);
	}
	100% {
		transform: scale(1);
	}
}
#back-scroll {
    display: none;
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 30px;
    height: 30px;
    background-image: url('/pub/icon/back-scroll.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;
    border-radius: 5px;
}
.back-scroll #back-scroll {
    display: inline-block;
}
#backdrop {
    display: none;
    position: absolute;
    top: 0;
    /*bottom: 0;*/
    height:100%;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}
#dialog {
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    position: relative;
/* Добавка для скролинга */
    max-height: 100%;
    overflow-y: auto;
    margin: 5px;
}
#two-rows-content {
    display: grid;
    grid-gap: 20px;
}
#basket-icon {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-image: url('/pub/icon/basket.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;

	transform: scale(1);
	animation: pulse 0.3s infinite;
    animation-iteration-count: 3;
}
#load-icon {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-image: url('/pub/icon/load.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;

	transform: scale(1);
	animation: pulse 0.3s infinite;
    animation-iteration-count: 3;
}
#telegram-icon {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-image: url('/pub/icon/chat.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;

	transform: scale(1);
	animation: pulse 0.3s infinite;
    animation-iteration-count: 30;
}
.hide-jivosite #telegram-icon {
    display:none;
} 
.detail #telegram-icon {
    display:none;
}
.basket #telegram-icon {
    bottom: 30px;
}
.basket-icon:not(.detail):not(.basket) #basket-icon {
    display:block;
}
body:not(.detail):not(.basket-icon) #load-icon {
    display:block;
}
.current-document {
    border-color: black;
    border-width: 3px;
}
.already-in-basket {
    border-color: black;
    border-width: 3px;
}
.highlight-no-remains {
    border-color: red;
    border-width: 2px;
}
.highlight-no-remains div.highlight-no-remains {
    color: red;
    font-weight: bold;
}
.grid-view .grid-view {
    display: none;
}
.line-view .grid {
    display: table;
}
.line-view .nomenclature {
    display: contents;
}
.line-view .nomenclature .nom-code {
    order: 0;
    display: table-cell;
    padding-left: 0.5em;
}
.nomenclature .title:nth-child(1) {
    order: 2;
}
.nomenclature .nom-code {
    order: 3;
}
.nomenclature .name {
    order: 0;
}
.nomenclature .title:nth-child(4) {
    order: 4;
}
.nomenclature .amount {
    order: 5;
}
.nomenclature .title:nth-child(6) {
    order: 6;
}
.nomenclature .price {
    order: 7;
}
.nomenclature .title:nth-child(8) {
    order: 8;
}
.nomenclature .remain {
    order: 9;
}
.nomenclature .title:nth-child(10) {
    order: 10;
}
.nomenclature .summ {
    order: 11;
}
.line-view .nomenclature .name {
    order: 1;
    display: table-cell;
    padding-left: 0.5em;
    width: 100%;
}
.line-view .nomenclature .price {
    order: 2;
    display: table-cell;
    padding-left: 0.5em;
    text-align: right;
}
.line-view .nomenclature .summ {
    order: 3;
    display: table-cell;
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: right;
}
.line-view .nomenclature .remain {
    order: 3;
    display: table-cell;
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: right;
}
.line-view .nomenclature .amount {
    text-align: right;
}
.line-view #basket {
    margin-top: 5px;
}
.line-view .nomenclature .order {
    display: none;
}
.line-view .grid .title {
    display: none;
}
.line-view .grid-container[data-code] .picture:not(.system) {
    display: none;
}
.line-view .grid-container .picture img {
    width: 25px;
}
.line-view .line-view {
    display: none;
}
.no-remains .no-remains {
    display: none;
}
body:not(.no-remains) .show-all {
    display: none;
}
.line-view .price, .line-view .summ, .line-view .remain, .line-view .amount {
    white-space: nowrap;
}
.system-picture {
    padding: 15px;
    width: 100px;
}
/*
.line-view .currency-name {
    display: none;
}
*/
.line-view .grid-container .system-picture {
    padding: 5px;
    width: 32px;
    padding-left: 0.5em;
}
.detail #backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.detail {
    overflow: hidden;
}
.wait #clock {
    display: inline;
}
.wait #dialog {
    display: none;
}
#clock {
    display: none;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: url('/pub/icon/time.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;
}
#dialog-data-code {
    position: absolute;
    top: 25px;
    left: 25px;
    /* text-shadow: 0px 0px 2px white; */
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; /* белая обводка */
}
#dialog-data-name {
    padding-right: 40px;
}
.dialog-data-input.bank, .dialog-data-input.delivery, .dialog-data-input.pickup, .dialog-data-input.email {
    display: none;
}
.dialog-data-input.delivery p {
    max-width: 600px;
}
.paytype-2 .bank, .delivery_type-1 .delivery, .delivery_type-0 .pickup, .feedback-1 .email {
    display: grid;
}
.star {
    color: red;
}
input, select {
    font-size: 1.2em;
    align-self: center;
    display: block;
    width: 100%;
    padding: 5px;
    border: 1px solid black;
    border-radius: 6px;
    /*background-color: transparent;*/
}
input[type=tel] {
    text-align: right;
}
#dialog-data-form.dialog-form {
    margin-top: -8px;
}
.dialog-form .title {
    font-weight: bold;
    font-size: 1.2em;
}
#dialog-data-form form, #dialog-data-element-form form {
    margin-top: 20px;
}
#dialog-data-element-form {
    display: grid;
    grid-template-columns: min-content minmax(50px, auto) min-content min-content;
    grid-template-rows: 1fr;
    grid-gap: 5px;
    margin-top: 20px;
}
#dialog-data-form input, #dialog-data-form select {
    width: 100%;
    min-width: 50px;
}
.dialog-data-submit, .dialog-data-two-submit {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    text-align: left;
    margin-top: 30px;
    margin-bottom: 5px;
}
.dialog-data-input {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 1fr;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 5px;
}
.dialog-data-input-caption {
    font-size: 0.8em;
    align-self: center;
}
#dialog-data-form input[name=amount] {
    width:100px;
}
.dialog-text-bold {
    font-weight: bold;
}
#dialog-data-close {
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
    background-image: url('/pub/icon/close.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0);
}
#basket-delete {
    display: block;
    bottom: 40px;
    right: 40px;
    width: 30px;
    margin-left: 15px;
    background-image: url('/pub/icon/trash.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0);
    background-position-x: right;
}
.detail #dialog-data-close {
    display: flex;
}
span.price_type_id_1 {
    display: none;
}
span.price_type_id_2 {
    display: none;
}
span.price_type_id_3 {
    display: none;
}
.price_type_id_1 span.price_type_id_1 {
    display: inline;
}
.price_type_id_2 span.price_type_id_2 {
    display: inline;
}
.price_type_id_3 span.price_type_id_3 {
    display: inline;
}
.spin {
    animation: spin 4000ms infinite;
    animation-timing-function: linear;
}
@keyframes spin {         
    from { 
        transform: rotate(0deg); 
    } to { 
        transform: rotate(360deg); 
    }
}
.tree #tree {
    display: block;
}
.tree #data {
    display: none;
}
#tree {
    display: none;
}
#data {
    flex: 1;
}
.news {
    display: flex;
    flex-direction: column;
}
.news-date {
    padding: 20px;
    position: sticky;
    top: 0px;
    background-color: white;
}
.news-text {
    padding: 20px;
    width: 100%;
    order: 3;
}
.news-highlight {
    text-decoration: underline dotted;
}
.news-image {
    padding: 20px;
    text-align: center;
    order: 2;
}
.news-image img {
    max-width: 100%;
}
#main-image {
    width: 100%;
    max-width: 400px;
    max-height: 300px;
}
div.thumbnails {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: 75px;
}
.thumbnails img {
    max-width:100px;
    max-height:75px;
}
.tl_article {
    margin: 20px;
}
.tl_article address{
    display: none;
}
.tl_article .tl_article_content figure {
    margin: 0 21px 16px;
    padding: 0;
    text-align: center;
    position: relative;
}
.tl_article .tl_article_content img, .tl_article .tl_article_content video {
    opacity: 1;
    transition: opacity .15s ease;
    max-height: 690px;
}
.tl_article .tl_article_content .iframe_wrap, .tl_article .tl_article_content iframe, .tl_article .tl_article_content img, .tl_article .tl_article_content video {
    max-width: 100%;
    vertical-align: top;
}

.service-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 5px;
}

.inline-form {
    margin: 80px 20px;
    text-align: center;
}

/*
    Десктопная версия
*/
@media (min-width: 768px) {
    #main-image {
        width: auto;
    }
    #menu {
        display: none;
    }
    #tree {
        display: block;
    }
    .news {
        flex-direction: row;
    }
    .news-text {
        order: 2;
    }
    .news-image {
        order: 3;
    }
    .news-image img {
        width: 250px;
    }
    .main-img {
        max-width: 400px;
    }
    #two-rows-content {
        grid-template-columns: 1fr auto;
    }
    .dialog-data-input {
        grid-gap: 5px;
        grid-template-columns: 1fr auto;
        text-align: right;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .dialog-data-submit {
        grid-gap: 5px;
        grid-template-columns: 1fr auto;
        text-align: right;
        margin-top: 30px;
        margin-bottom: 10px;
    }
    .dialog-data-two-submit {
        grid-gap: 10px;
        grid-template-columns: 1fr auto auto;
        text-align: right;
        margin-top: 30px;
        margin-bottom: 10px;
    }
    .dialog-data-input-caption {
        font-size: 1em;
    }
    #basket-delete {
        position: absolute;
        width: 80px;
        height: 80px;
    }
    #dialog-data-element-form input[type=submit]{
        display: inline-block;
    }
}