﻿.additionString {
/*    width: 100%;
*/    text-align: right;
}
.panel-line {
    padding: 0.3% 0;
    display: inline-block;
    vertical-align: middle;
}

.panel-input-line {
    border: 1px solid #888;
    padding: 1% 0;
    margin-left: 4px;
    margin-right: 4px;
    display: none;
    text-align: center;
}

    .panel-input-line.edit {
        display: inline-block;
    }
/*.photoGalleryImg {
    display: block;
}
*/
button {
    border: none;
    border-radius: 5px;
    margin-left: 5px;
    background: rgb(239, 239, 239);
}

    button img {
        vertical-align: bottom;
    }
.buttonRed {
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.newTemplateSetName {
    border: 1px solid lightgrey;
}
    .newTemplateSetName.active {
        border: 1px solid red;
        backgroundColor: 'cornsilk';
    }
    .styled:hover {
        background-color: rgba(255, 0, 0, 1);
    }

    .styled:active {
        box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
    }

    div {
    }

        div.closeDiv {
            display: inline-block;
        }

        div.linklist {
            display: inline-block;
            margin: 10px;
            vertical-align: top;
        }

        div.links {
            display: inline-block;
        }
.buttonCenterHorizont{
    align-items:center;
}
.textInput {
    width: 95%;
    box-shadow: 5px 5px 5px 5px gray;
    display: none;
    border-radius: 6px;
}
    .textInput.show{
        display:inline-block;
}
.textItem {
    box-shadow: 5px 5px 5px 5px gray;
    display: none;
    white-space: pre;
}
    .textItem.show{
        display:inline-block;
    }
.textFrame{
    width: 35%;
    padding: 20px;
    display:none;
}
    .textFrame.textShow {
        display:inline-block;
    }
.photoFrame {
    display: none;
    position: fixed;
    top: 7%;
    left: 6%;
    z-index: 2;
    padding: 30px;
    border: 1px solid lightgray;
    border-radius: 6px;
    box-shadow: 5px 5px 5px 5px grey;
    background-color: snow;
}
    .photoFrame.show {
        display: inline-block;
    }
.pageTemplateFrame {
    display: none;
    position: fixed;
    top: 7%;
    left: 6%;
    z-index: 2;
    padding: 30px;
    border: 1px solid lightgray;
    border-radius: 6px;
    box-shadow: 5px 5px 5px 5px grey;
    background-color: snow;
    height:80%;
    width:80%;
    overflow-y: auto;
}
.pageTemplateFrame.show {
    display: inline-block;
}
div.tree {
    display: inline-block;
    width: 45%;
}

div.treeItem{
    display: block;
}

div.text {
    display: inline-block;
}

div#Photo{
    display: inline-block;
}
.saveItemTextImage {
    width: 35px;
    height: 35px;
    display: inline-block;
    background: url("/img/ok1_40.png") no-repeat scroll center;
    box-shadow: 2px 2px 5px 5px grey;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border: none;
    cursor: pointer;
    opacity:1;
}
input {
    border: none;
    border-radius: 4px;
    padding: 3px;
    max-width: 280px;
}

    input[type="checkbox"] {
        padding:3% 0;
        height:20px;
        width:20px;
        vertical-align: middle;
    }


    input#nodeSearch {
        border: 1px solid #186999;
        display: inline;
        width: 300px;
    }

p {
    text-decoration: none;
    font: 12px "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    font-weight: bold;
    color: #186999;
}
p.panel-line{
    margin: 0px 0px 0px 0px;
}

table {
    border-collapse: collapse;
}

th, td {
    border: none;
}

tr {
    border-radius: 4px;
}
    tr.trClientSearch {
        cursor: pointer;
    }

.arrow {
    cursor: pointer;
    height: var(--lineHeight);
    width: var(--lineHeight);
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    background-size:auto;
}

    .arrow.closed {
        background: url(/img/triangular-unselected-20.png) 6px no-repeat;
    }

    .arrow.opened {
        background: url(/img/triangular-selected-20.png) 6px no-repeat;
    }

.arrowTemplate {
    cursor: pointer;
    height: var(--lineHeight);
    width: var(--lineHeight);
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    background-size: auto;
    background: url(/img/triangular-unselected-20.png) 6px no-repeat;
}

.addImage {
    cursor: pointer;
    line-height: var(--lineHeight);
    height: var(--lineHeight);
    width: var(--lineHeight);
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    background: url("/img/plus.png") no-repeat scroll center transparent;
}

.boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 15px;
    border: none;
    margin-bottom: 5px;
    box-sizing: border-box;
    font-size: 1rem;
    text-align: left;
    text-decoration: none;
}

.cancelEditItemImage {
    cursor: pointer;
    line-height: var(--lineHeight);
    height: var(--lineHeight);
    width: 24px;
    cursor: pointer;
    display: none;
    margin-left: 10px;
    margin-right: 10px;
}

.childs {
    margin-left: 24px
}

    .childs.opened {
        display: block;
    }

    .childs.closed {
        display: none;
    }

.cancelEditItemImage.edit {
    display: inline-block;
}

.close {
}

    .close:hover,
    .close:focus {
        color: black;
        cursor: pointer;
    }

.count {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none;
    margin-left: 4px;
    margin-right: 4px;
}

    .count.selected {
        display: inline-block;
    }

.countInput {
    display: none;
    position: relative;
    top: -11px;
    width: 50px;
}

.childsCount {
    padding-right: 5px;
    padding-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none;
    position: relative;
    left: 1%;
}

.closeSearch {
    display: block;
}
/*.closeSearch.modal {
    display: inline-block;
}*/


.editImage {
    cursor: pointer;
    /*line-height: var(--lineHeight);*/
    height: 30px; /*var(--lineHeight);*/
    width: 30px; /*var(--lineHeight);*/
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    background: url("/img/edit.png") no-repeat scroll center transparent
}
.orderLine {
    display: block;
    border: 1px solid lightgrey;
    padding-left: 5px;
    padding: 0;
    box-shadow: none;
}
.orderLine.selected {
background-color:bisque;
}
.folderImage {
    cursor: pointer;
    width: var(--lineHeight);
    height: var(--lineHeight);
    cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
    background: url("/img/folder.png") no-repeat scroll center transparent
}

    .folderImage.relocate {
        background: url("/img/folder-red.png") no-repeat scroll center transparent
    }

.preview {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    display: none;
    padding-right: 10px;
    padding-left: 10px;
}

    .preview:hover {
        opacity: 0.7;
    }

    .preview.selected {
        display: inline-block;
        margin-left: 0px;
    }

.price {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none;
    margin-left: 4px;
    margin-right: 4px;
}

    .price.selected {
        display: inline-block;
    }

.priceInput {
    display: none;
    width: 80px;
}

    .priceInput.edit {
        display: inline-block;
    }

.relocateImage {
    cursor: pointer;
    line-height: var(--lineHeight);
    height: var(--lineHeight);
    width: 24px;
    cursor: pointer;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    display: none;
    background: url("/img/arrow14.png") no-repeat scroll center transparent
}

.toOrderLineSelectImage {
    cursor: pointer;
    line-height: var(--lineHeight);
    height: var(--lineHeight);
    width: 24px;
    cursor: pointer;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    display: none;
    background: url("/img/select-item.png") no-repeat scroll center transparent
}

.saveItemImage {
    cursor: pointer;
    line-height: var(--lineHeight);
    height: var(--lineHeight);
    width: 24px;
    cursor: pointer;
    display: none;
    margin-left: 10px;
    margin-right: 10px;
}

    .saveItemImage.edit {
        display: inline-block;
    }
.saveTemplateImage {
    cursor: pointer;
    line-height: var(--lineHeight);
    height: var(--lineHeight);
    width: 24px;
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    background: url("/img/ok1_16.png") no-repeat scroll center transparent
}
.translitItemImage {
    cursor: pointer;
    line-height: var(--lineHeight);
    height: var(--lineHeight);
    width: 24px;
    cursor: pointer;
    display: none;
    margin-left: 10px;
    margin-right: 10px;
}

    .translitItemImage.edit {
        display: inline-block;
    }
.templateSetName {
    border:1px solid;
}
.trtemplateTypeSearch{
    background-color: none;

}
.trtemplateTypeSearch.selected
{
    background-color:bisque;
}
.searchResult.treeItem {
    display: inline-block;
}
.searchResultFrame.modal {
    display:block;
}
.searchResultFrame {
    display: none;
}

.searchResult {
    display: block;
    background-color: #f3faff;
    border: 1px dotted orange;
    padding: 30px;
    margin:20px;
}
    .selected .saveItemImage {
    background: url("/img/ok1_16.png") no-repeat scroll center transparent
}
.selected .translitItemImage {
    background: url("/img/red-marker_16.png") no-repeat scroll center transparent
}

.selected .cancelEditItemImage {
    background: url("/img/cancel2_16.jpg") no-repeat scroll center transparent
}
.fileInputString {
    z-index: 10;
    position: fixed;
    top: 30%;
    left: 7%;
    border: 1px;
    padding: 10px;
    background-color: darkorange;
    border: 1px solid lightgray;
    border-radius: 6px;
    box-shadow: 3px 3px 3px 3px gray;
}
.sum {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none;
    margin-left: 4px;
    margin-right: 4px;
}

.sym {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 4px;
    margin-right: 4px;
}

.textImage {
    height: 30px;
    width: 30px;
    cursor: pointer;
    display: inline-block;
    text-align: right;
    background: url(/img/edit.png) no-repeat scroll center transparent;
}

.textClose {
    display: inline-block;
    font: bold 20px arial;
    color: rosybrown;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border: 2px solid;
    height: 35px;
    width: 35px;
    cursor: pointer;
    margin-left:15px;
}
.additionDelete {
    display: inline-block;
    font: bold 20px arial;
/*    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border: 2px solid;*/
    height: 25px;
    width: 25px;
    cursor: pointer;
    margin-left: 15px;
    background: url("/img/delete.png") no-repeat scroll center transparent
}
.additionControlString {
    padding-top: 30px;
    text-align: right;
}

.tree {
    margin-left: 0px;
    min-width: 30%;
}
.containerPhotoFixed {
    display:none;
    position: fixed;
    top: 5%;
    left: 5%;
    z-index: 2;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius:6px;
    box-shadow: 10px 10px 10px 10px gray;
    width:60%;
    background-color:lightgray;
}
    .containerPhotoFixed.show {
        display:inline-block;
    }
.containerTextFixed {
    display: none;
    position: fixed;
    top: 5%;
    left: 5%;
    z-index: 2;
    padding: 10px;
    padding-left:24%;
    border: 1px solid lightgray;
    border-radius: 6px;
    box-shadow: 10px 10px 10px 10px gray;
    width: 30%;
    background-color: lightgray;
}

    .containerTextFixed.show {
        display: inline-block;
    }
.imageContainer{
    display:inline-block;
}
    .imageContainer img {
        max-width: 100%;
        width: 100%;
        height: auto;
        object-fit: contain;
        opacity: 1;
    }
.itemPanel {
    padding:0.1% 0;
    color: #186999;
    cursor: pointer;
}
.itemPanel .label {
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

    .itemPanel .labelCheck {
        display: none;
    }

    .itemPanel .labelInput {
        display: none;
    }

    .itemPanel .priceInput {
        display: none;
    }

    .itemPanel .saveItemImage {
        display: none;
    }

    .itemPanel .cancelEditItemImage {
        display: none;
    }

    .itemPanel .editImage {
        display: none;
    }

    .itemPanel .textImage {
        display: none;
    }


    .itemPanel .folderImage {
        display: none;
    }

    .itemPanel .addImage {
        display: none;
    }

    .itemPanel .childsCount {
        display: inline-block;
    }

    .itemPanel .count {
        display: inline-block;
    }

    .itemPanel .downloadImage {
        display: none;
    }

    .itemPanel .wizardImage {
        display: none;
    }

    .itemPanel .preview {
        display: none;
    }

    .itemPanel .sym {
        display: none;
    }

    .itemPanel .sum {
        display: none;
    }

    .itemPanel .price {
        display: none;
    }

    .itemPanel .count {
        display: none;
    }


    .itemPanel.selected {
        background: #e4f1fa;
    }

        .itemPanel.selected .preview {
            display: inline-block;
        }

        .itemPanel.selected .downloadImage {
            display: inline-block;
        }

        .itemPanel.selected .wizardImage {
            display: inline-block;
        }

        .itemPanel.selected .sym {
            display: inline-block;
        }

        .itemPanel.selected .sum {
            display: inline-block;
        }

        .itemPanel.selected .price {
            display: inline-block;
        }

        .itemPanel.selected .count {
            display: inline-block;
        }

        .itemPanel.selected .editImage {
            display: inline-block;
        }

        .itemPanel.selected .textImage {
            display: inline-block;
        }

        .itemPanel.selected .addImage {
            display: inline-block;
        }

        .itemPanel.selected .folderImage {
            display: inline-block;
        }
        .itemPanel.selected .relocateImage {
            display: inline-block;
        }

        .itemPanel.selected .toOrderLineSelectImage {
            display: inline-block;
        }

        .itemPanel.selected.edit .label {
            display: none;
        }

        .itemPanel.selected.edit .labelCheck {
            display: inline-block;
        }

        .itemPanel.selected.edit .labelInput {
            display: inline-block;
        }
        .itemPanel.selected.edit .translitItemImage {
            display: inline-block;
        }

        .itemPanel.selected.edit .priceInput {
            display: inline-block;
        }

        .itemPanel.selected.edit .saveItemImage {
            display: inline-block;
        }

        .itemPanel.selected.edit .cancelEditItemImage {
            display: inline-block;
        }

        .itemPanel.selected.edit .editImage {
            display: none;
        }

        .itemPanel.selected.edit .textImage {
            display: none;
        }

        .itemPanel.selected.edit .relocateImage {
            display: none;
        }
        .itemPanel.selected.edit .toOrderLineSelectImage {
            display: none;
        }

        .itemPanel.selected.edit .folderImage {
            display: none;
        }


.itemPanel.selected.edit .addImage {
    display: none;
}

        .itemPanel.selected.edit .childsCount {
            display: none;
        }

        .itemPanel.selected.edit .count {
            display: none;
        }

        .itemPanel.selected.edit .downloadImage {
            display: none;
        }

        .itemPanel.selected.edit .wizardImage {
            display: none;
        }

        .itemPanel.selected.edit .preview {
            display: none;
        }

        .itemPanel.selected.edit .sym {
            display: inline-block;
        }

        .itemPanel.selected.edit .sum {
            display: none;
        }

        .itemPanel.selected.edit .price {
            display: none;
        }

        .itemPanel.selected.edit .count {
            display: none;
        }
.multiImagePreview {
    vertical-align:middle;
}
.pageTemplateReturnCurrent {
    cursor: pointer;
    height: 35px;
    width: 35px;
    cursor: pointer;
    display: inline-block;
    background: url("/img/escape35.png") no-repeat scroll center transparent;
}
.selectTemplate { 
    margin-left:20px;
    cursor: pointer;
    height: 36px;
    width: 22px;
    cursor: pointer;
    display: inline;
    background: url("/img/downloadarrow30turned.png") no-repeat scroll center transparent;
}