/**************** HEADER ****************//**************** HEADER ****************//**************** HEADER ****************/

#header {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: space-between; -webkit-justify-content: space-between;
    align-items: flex-start; -webkit-align-items: flex-start;
    align-content: flex-start; -webkit-align-content: flex-start;
    
    width: 100%; min-width: 1260px; height: 54px; padding: 0px 18px 0px 18px; background: rgb(46,92,138);
}

#header .logo {display: block; height: 24px; margin: 15px 0px 0px 0px;}

#header .logo img {display: block; height: 100%;}


#header .menu {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: flex-start; -webkit-justify-content: flex-start;
    align-items: flex-start; -webkit-align-items: flex-start;
    align-content: flex-start; -webkit-align-content: flex-start;
    
    margin: 0px; padding: 0px;
}

#header .menu .item {margin: 0px 6px 0px 6px;}

#header .menu .item .name {
    display: block; padding: 18px 12px 18px 12px; font-weight: 500;
    color: rgb(255,255,255); background: rgb(46,92,138); box-sizing: border-box; cursor: pointer; transition: color linear 60ms;
}

#header .menu .item .name > [class*='fa-'] {color: hsla(210,35%,81%,1); transition: color linear 60ms;}

#header .menu .item:hover .name {color: rgb(255,255,255); background: rgb(62,107,152);}


#header .menu .item.ico .name {padding: 12px 12px 12px 12px; background: rgb(46,92,138);}

#header .menu .item.ico .name > [class*='fa-'] {width: auto; height: 30px; font-size: 24px; line-height: 30px; color: rgb(255,255,255);}

#header .menu .item.ico:hover .name > [class*='fa-'] {color: rgb(220,220,220);}


#header .menu .item.ico.active .name > [class*='fa-'] {transform: rotate(-10deg); animation: attention-rotate 480ms ease infinite forwards;}

@keyframes attention-rotate {
    0% {transform: rotate(-10deg); color: rgb(255,255,255);} 50% {transform: rotate(10deg); color: rgb(220,60,60);} 100% {transform: rotate(-10deg); color: rgb(255,255,255);}
}


#header .menu .item .drop-box {
    position: absolute; top: 48px; left: -6px; width: auto; min-width: calc(100% + 12px); max-height: 420px;
    background: rgb(255,255,255); border-radius: 4px; box-shadow: 0px 0px 24px -6px rgba(60,60,60,0.24);
    opacity: 0; pointer-events: none; transform: translate(0px,-10px); overflow: hidden; transition: all ease 240ms; z-index: 100;
}
#header .menu .item .drop-box.right {left: auto; right: -6px;}
#header .menu .item .drop-box > .scrollbar {max-height: 420px;}
#header .menu .item .drop-box .drop-pad {padding: 6px 0px 6px 0px;}
#header .menu .item:hover .drop-box {opacity: 1; pointer-events: auto; transform: translate(0px,0px);}

/***/ [dir="rtl"] #header .menu .item .drop-box {left: auto; right: -6px;}
/***/ [dir="rtl"] #header .menu .item .drop-box.right {right: auto; left: -6px;}

#header .menu .item .drop-lnk {
    display: block; width: 100%; padding: 6px 24px 6px 18px; font-weight: 400;
    color: rgb(42,102,162); background: rgb(255,255,255);
    white-space: nowrap; box-sizing: border-box; cursor: pointer; transition: all linear 60ms;
}

#header .menu .item .drop-lnk [class*='fa-'] {color: rgb(66,132,198);}
#header .menu .item .drop-lnk:hover {background: rgb(245,245,245);}
#header .menu .item .drop-lnk.sel {background: rgb(245,245,245);}

#header .menu .item .drop-border {display: none; height: 0px; margin: 9px 18px; border-top: solid 1px rgb(220,220,220);}
#header .menu .item .drop-border.staff_revise_count {display: block;}
#header .menu .item .drop-border.staff_currency {display: block;}

/***/ [dir="rtl"] #header .menu .item .drop-lnk {padding: 6px 18px 6px 24px;}



/**************** HEAD ****************//**************** HEAD ****************//**************** HEAD ****************/

#head {width: 1260px; min-width: 1260px; max-width: 1260px; margin: 0px auto; padding: 18px 18px 0px 18px;}

#head .head-box {width: 100%; padding: 0px 0px 0px 0px; background: rgb(255,255,255); border: solid 1px rgb(220,220,220); border-radius: 6px;}

#head .details {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    flex-wrap: wrap; -webkit-flex-wrap: wrap;
    justify-content: flex-start; -webkit-justify-content: flex-start;
    align-items: flex-start; -webkit-align-items: flex-start;
    align-content: flex-start; -webkit-align-content: flex-start;

    width: 100%; padding: 6px 9px 0px 9px; font-size: 12px; line-height: 12px; color: rgb(120,120,120);
}

#head .details.center {justify-content: center; -webkit-justify-content: center;}

#head .details > * {display: block; margin: 6px 9px 0px 9px;}

#head .details.bottom {padding: 0px 9px 6px 9px;}

#head .details.bottom > * {display: block; margin: 0px 9px 6px 9px;}

#head .head-title {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: space-between; -webkit-justify-content: space-between;
    align-items: flex-start; -webkit-align-items: flex-start;
    align-content: flex-start; -webkit-align-content: flex-start;
    
    width: 100%; padding: 12px 18px 12px 18px;
}

#head .head-title.center {justify-content: center; -webkit-justify-content: center;}

#head .head-title .title {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: space-between; -webkit-justify-content: space-between;
    align-items: flex-start; -webkit-align-items: flex-start;
    align-content: flex-start; -webkit-align-content: flex-start;
    
    height: 30px; margin: 0px -6px 0px -6px; font-size: 18px; font-weight: 600; line-height: 30px;
}

#head .head-title .title > * {display: block; margin: 0px 6px 0px 6px;}

#head .head-title .title > *:last-child {max-width: 500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


#head .head-title .options {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: flex-start; -webkit-justify-content: flex-start;
    align-items: flex-start; -webkit-align-items: flex-start;
    align-content: flex-start; -webkit-align-content: flex-start;

    margin: 0px -12px 0px -12px;
}

#head .head-title .options .btn {margin: 0px 12px 0px 12px;}

#head .head-title .options .input-btn-box {margin: 0px 12px 0px 12px;}

#head .pad-menu {padding: 6px 0px 0px 0px;}



/**************** BODY ****************//**************** BODY ****************//**************** BODY ****************/

#body {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(240,240,240); overflow-y: scroll; z-index: 1;}

/* SYNC */ #body.sync {min-height: 600px; z-index: 100000;} #body.sync:after {top: 324px; width: 48px; height: 48px;}


#page {width: 100%;}

/* SYNC */ #page.sync {min-height: 400px;} #page.sync:after {top: 224px; width: 48px; height: 48px;}

#page .page-box {width: 1260px; min-width: 1260px; max-width: 1260px; margin: 0px auto;}

#page .page {width: 100%;}

#page .page .random {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    flex-wrap: wrap; -webkit-flex-wrap: wrap;
    justify-content: flex-start; -webkit-justify-content: flex-start;
    align-items: flex-start; -webkit-align-items: flex-start;
    align-content: flex-start; -webkit-align-content: flex-start;

    width: 100%;
}

#page .page .random.border-top {border-top: solid 1px rgb(220,220,220);}

#page .page .random.border-bottom {border-bottom: solid 1px rgb(220,220,220);}

#page .page .random.border-left {border-left: solid 1px rgb(220,220,220);}

#page .page .random.border-right {border-right: solid 1px rgb(220,220,220);}

#page .page .grid {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: flex-start; -webkit-justify-content: flex-start;
    align-items: stretch; -webkit-align-items: stretch;
    align-content: flex-start; -webkit-align-content: flex-start;
    
    width: 100%;
}

#page .page .grid.border-top {border-top: solid 1px rgb(220,220,220);}

#page .page .grid.border-bottom {border-bottom: solid 1px rgb(220,220,220);}

#page .page .grid.border-left {border-left: solid 1px rgb(220,220,220);}

#page .page .grid.border-right {border-right: solid 1px rgb(220,220,220);}


#page .page .grid .main {flex: 1 1 auto; -webkit-flex: 1 1 auto;}

/* SYNC */ #page .page .grid .main.sync:after {width: 36px; height: 36px;}

#page .page .grid .side {flex: 0 0 auto; -webkit-flex: 0 0 auto; padding: 18px 36px 0px 18px; border-left: solid 1px rgb(220,220,220);}

/* SYNC */ #page .page .grid .side.sync:after {width: 36px; height: 36px;}

#page .page .grid .side.noborder {border-left: none; padding: 18px 18px 0px 0px;}

[dir="rtl"] #page .page .grid .side {padding: 18px 18px 0px 36px;}

[dir="rtl"] #page .page .grid .side.noborder {padding: 18px 0px 0px 18px;}

/**************** SIDE ****************//**************** SIDE ****************//**************** SIDE ****************/

/**************** SIDE TITLE ****************/

.side-title {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: space-between; -webkit-justify-content: space-between;
    align-items: center; -webkit-align-items: center;
    align-content: center; -webkit-align-content: center;
    
    margin: 0px -18px 0px -18px; height: 30px; padding: 0px 18px 0px 18px; background: rgb(230,230,230);
}

.side.noborder .side-title {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: none; border-bottom: solid 1px rgb(220,220,220);}

.side-title .name {font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;}

.side-title .ico-box {margin: 0px -12px 0px -12px;}

.side-title .ico-box > * {display: block; margin: 0px 12px 0px 12px;}



/**************** SIDE LOGO ****************/

/* SYNC */ .side-logo.sync:after {width: 24px; height: 24px;}

.side-logo {width: 100%; padding: 0px 0px 18px 0px;}

.side-logo-upload {width: 100%; padding-top: 100%; background: rgb(209,210,211); border-radius: 6px; transition: all linear 60ms;}

.side-logo-upload:hover {background: rgb(219,220,221);}

.side-logo-upload i {
    display: block; position: absolute; top: 50%; left: 50%;
    width: 60px; height: 60px; margin: -30px 0px 0px -30px; font-size: 36px; line-height: 60px;
    color: rgb(120,120,120);
}

[dir="rtl"] .side-logo-upload i {margin: -30px -30px 0px 0px;}

.side-logo-img {width: 100%; min-height: 100px; background: rgb(230,230,230);}

.side-logo-img img {display: block; width: 100%;}

.side-logo-img .hh {display: block; position: absolute; opacity: 0;}

.side-logo-img:hover .hh {opacity: 1;}

.side-logo-img .hh.del {top: 12px; right: 12px;}

.side-logo-img .hh.copy {bottom: 12px; left: 12px;}

.side-logo-img .hh.upload {bottom: 12px; left: 50%; margin-left: -17px;}

.side-logo-img .hh.open {bottom: 12px; right: 12px;}



/**************** SIDE GALLERY ****************/

.side-gallery {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    flex-wrap: wrap; -webkit-flex-wrap: wrap;
    justify-content: flex-start; -webkit-justify-content: flex-start;
    align-items: center; -webkit-align-items: center;
    align-content: center; -webkit-align-content: center;

    margin: 0px -6px 0px -6px; padding: 12px 0px 12px 0px;
}

.side-gallery-pad {width: 50%; padding: 6px 6px 6px 6px;}

.side-gallery-upload {width: 100%; padding-top: 100%; background: rgb(209,210,211); border-radius: 4px; transition: all linear 60ms;}

.side-gallery-upload:hover {background: rgb(219,220,221);}

.side-gallery-upload i {
    display: block; position: absolute; top: 50%; left: 50%;
    width: 40px; height: 40px; margin: -20px 0px 0px -20px; font-size: 24px; line-height: 40px;
    color: rgb(120,120,120);
}

.side-gallery-img {
    width: 100%; padding-top: 100%;
    background-color: rgb(230,230,230); background-size: cover; background-position: center center; background-repeat: no-repeat;
    border-radius: 3px;
}

.side-gallery-img .hh {display: block; position: absolute; opacity: 0;}

.side-gallery-img:hover .hh {opacity: 1;}

.side-gallery-img .hh.del {top: 6px; right: 6px;}

.side-gallery-img .hh.copy {bottom: 6px; left: 6px;}

.side-gallery-img .hh.open {bottom: 6px; right: 6px;}

.side-gallery-img .preview {
    position: absolute; bottom: 0px; right: calc(100% + 12px); width: 300px; min-height: 50px; box-shadow: 0px 0px 24px -6px rgba(60,60,60,0.24);
    background: rgb(230,230,230); opacity: 0; pointer-events: none; transition: opacity linear 60ms; z-index: 1;
}

.side-gallery-img .preview img {display: block; width: 100%;}

.side-gallery-img:hover .preview {opacity: 1; z-index: 1000;}



/**************** SIDE TAGS ****************/

.side-tags {padding: 0px 0px 9px 0px;}

.side-tags-select {padding: 18px 0px 9px 0px;}

.side-tags-box {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    flex-wrap: wrap; -webkit-flex-wrap: wrap;
    justify-content: flex-start; -webkit-justify-content: flex-start;
    align-items: center; -webkit-align-items: center;
    align-content: center; -webkit-align-content: center;
    
    margin: 0px -6px 0px -6px; padding: 3px 0px 3px 0px;
}

.side-tags-box .tag {max-width: calc(100% - 9px); margin: 6px 6px 6px 6px;}

.side-tags-box .tag .lnk {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}



/**************** SIDE FILTERS ****************/

.filters-box {padding: 0px 0px 9px 0px;}

.filter {margin: 9px 0px 9px 0px;}

.filter b {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}



/**************** SIDE TEXT ****************/

.input-text {background: rgb(234,235,236);}


/**************** POPUP ****************//**************** POPUP ****************//**************** POPUP ****************/

#popup-sys {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(245,245,245,0.84); overflow-y: scroll; z-index: 100000;}

#popup-sys > div {
    display: flex; display: -webkit-flex;
    flex-direction: column; -webkit-flex-direction: column;
    flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: center; -webkit-justify-content: center;
    align-items: center; -webkit-align-items: center;
    align-content: center; -webkit-align-content: center;

    width: 100%; min-height: 100%; padding: 18px 18px 18px 18px;
}

#popup {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(245,245,245,0.84); overflow-y: scroll; z-index: 10000;}

#popup > div {
    display: flex; display: -webkit-flex;
    flex-direction: column; -webkit-flex-direction: column;
    flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: center; -webkit-justify-content: center;
    align-items: center; -webkit-align-items: center;
    align-content: center; -webkit-align-content: center;

    width: 100%; min-height: 100%; padding: 18px 18px 18px 18px;
}

.content-box.popup, .content-box.popup-sys {border: solid 1px rgb(230,230,230); box-shadow: 0px 0px 24px -6px rgba(60,60,60,0.24);}

.content-box.popup .content-bottom .btn, .content-box.popup-sys .content-bottom .btn {min-width: 120px;}


.js-popup-close.ico {
    display: block; position: absolute; top: 15px; right: 12px; width: 24px; height: 24px;
    font-family: "Font Awesome 5 Pro"; font-size: 24px; font-weight: 300; line-height: 24px; text-align: center; color: rgb(45,45,45);
    -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; cursor: pointer; transition: all linear 60ms;
}
[dir="rtl"] .js-popup-close.ico {right: auto; left: 12px;}

.js-popup-close.ico:before {content: "\f00d";}

.js-popup-close.ico:hover {color: rgb(87,90,93);}

.js-popup-text {cursor: pointer;}



/**************** ORDER PAGE ****************//**************** ORDER PAGE ****************//**************** ORDER PAGE ****************/

#item-search #item-search-clear {display: none !important; position: absolute; top: 1px; right: 36px; z-index: 100;}
#item-search #item-search-list {display: none; position: absolute; top: calc(100% + 3px); left: 0px; width: 100%; height: auto; max-height: 123px; background: rgb(255,255,255); border: solid 1px rgb(230,230,230); border-radius: 4px; box-shadow: 0px 0px 24px -6px rgba(60,60,60,0.24); overflow-y: auto; z-index: 100;}
#item-search #item-search-list .item {display: none; padding: 6px 9px 6px 9px; text-align: start; background: rgb(255,255,255); border-bottom: solid 1px rgb(230,230,230); cursor: pointer;}
#item-search #item-search-list .item:hover {background: rgb(250,250,250);}

#item-search.search #item-search-clear {display: flex !important;}
#item-search.search #item-search-list {display: block;}
#item-search.search #item-search-list.empty {display: none;}
#item-search.search #item-search-list .item.on {display: block;}