/**************** BTN BOX ****************//**************** BTN BOX ****************//**************** BTN BOX ****************/

.btn-box {
    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: center; -webkit-align-items: center;
    align-content: center; -webkit-align-content: center;

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

.btn-box > * {margin: 0px 6px 0px 6px; flex: 0 0 auto; -webkit-flex: 0 0 auto;}

.btn-box > .nofix {flex: 1 1 auto; -webkit-flex: 1 1 auto;}



/**************** INPUT BTN BOX ****************//**************** INPUT BTN BOX ****************//**************** INPUT BTN BOX ****************/

.input-btn-box {
    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: center; -webkit-align-items: center;
    align-content: center; -webkit-align-content: center;

    padding: 0px 0px 0px 1px;
}

.input-btn-box > * {flex: 1 1 auto; -webkit-flex: 1 1 auto; margin: 0px 0px 0px -1px !important; border-radius: 0px;}

.input-btn-box > .btn {flex: 0 0 auto; -webkit-flex: 0 0 auto;}

.input-btn-box > *:focus {z-index: 10;}

.input-btn-box > *:first-child {border-radius: 3px 0px 0px 3px;}

.input-btn-box > *:last-child {border-radius: 0px 3px 3px 0px;}

.input-btn-box .select .header {border-radius: 0px 0px 0px 0px;}

.input-btn-box > .select:first-child .header {border-radius: 3px 0px 0px 3px;}

.input-btn-box > .select:last-child .header {border-radius: 0px 3px 3px 0px;}

.input-btn-box .select.focus {z-index: 10;}

.input-btn-box .select.focus .header {border-radius: 0px 0px 0px 0px;}

[dir="rtl"] .input-btn-box {padding: 0px 1px 0px 0px;}

[dir="rtl"] .input-btn-box > * {margin: 0px -1px 0px 0px !important;}

[dir="rtl"] .input-btn-box > *:first-child {border-radius: 0px 3px 3px 0px;}

[dir="rtl"] .input-btn-box > *:last-child {border-radius: 3px 0px 0px 3px;}

[dir="rtl"] .input-btn-box .select .header {border-radius: 0px 0px 0px 0px;}

[dir="rtl"] .input-btn-box > .select:first-child .header {border-radius: 0px 3px 3px 0px;}

[dir="rtl"] .input-btn-box > .select:last-child .header {border-radius: 3px 0px 0px 3px;}

[dir="rtl"] .input-btn-box .select.focus .header {border-radius: 0px 0px 0px 0px;}



/**************** GRID CBOX ****************//**************** GRID CBOX ****************//**************** GRID CBOX ****************/

.cbox {width: auto; padding: 18px 18px 0px 18px;}



/**************** PAD MENU ****************//**************** PAD MENU ****************//**************** PAD MENU ****************/

.pad-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;

    width: 100%; padding: 18px 0px 0px 0px;
}

.pad-menu.center {justify-content: center; -webkit-justify-content: center;}

.pad-menu .pad-lnk {
    margin: 0px 18px 0px 18px; padding: 0px 0px 15px 0px; font-weight: 600;
    color: rgb(120,120,120); border-bottom: solid 3px; border-color: rgba(220,220,220,0);
    cursor: pointer; user-select: none; transition: all linear 60ms;
}

.pad-menu .pad-lnk:hover {color: rgb(45,45,45); border-color: rgba(220,220,220,1);}

.pad-menu .pad-lnk.sel {color: rgb(45,45,45); border-color: rgba(66,132,198,1);}



/**************** CONTENT BOX ****************//**************** CONTENT BOX ****************//**************** CONTENT BOX ****************/

.content-box {background: rgb(255,255,255); border: solid 1px rgb(220,220,220); border-radius: 6px;}

/* SYNC */ .content-box.sync:after {width: 36px; height: 36px;}


.content-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;
   
    min-height: 54px; background: rgb(245,245,245); border-bottom: solid 1px rgb(220,220,220); border-radius: 6px 6px 0px 0px;
}

.content-title .title {padding: 18px 18px 18px 18px; font-weight: 600;}

.content-title .input-btn-box {margin: 12px 18px 0px 0px;}

[dir="rtl"] .content-title .input-btn-box {margin: 12px 0px 0px 18px;}

.content-title .btn-box {padding: 12px 18px 0px 0px;}

[dir="rtl"] .content-title .btn-box {padding: 12px 0px 0px 18px;}

.content-title.hmini {min-height: 36px;}

.content-title.hmini .title {padding: 9px 18px 9px 18px; font-weight: 600;}


.content-options {
    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;

    padding: 18px 9px 0px 9px;
}

.content-options.end {justify-content: flex-end; -webkit-justify-content: flex-end;}

.content-options .btn {margin: 0px 9px 0px 9px;}

.content-options .input-btn-box {margin: 0px 9px 0px 9px;}


.content-center {padding: 18px 18px 18px 18px;}

.content-center.text {padding: 36px 18px 36px 18px; text-align: center;}

.content-center.text.big {font-size: 16px; line-height: 20px;}


.content-bottom {
    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;

    padding: 18px 18px 18px 18px;
}

.content-bottom.center {justify-content: center; -webkit-justify-content: center;}

.content-bottom.end {justify-content: flex-end; -webkit-justify-content: flex-end;}

.content-bottom.text {padding: 0px 18px 18px 18px;}

.content-bottom.table {padding: 0px 12px 18px 12px;}

.content-bottom.table .btn {margin: 0px 6px 0px 6px;}

.content-bottom.form {padding: 9px 18px 18px 18px;}



/**************** TABLE CONTENT BOX ****************//**************** TABLE CONTENT BOX ****************//**************** TABLE CONTENT BOX ****************/

.content-center.table {padding: 18px 18px 18px 18px;}

.content-center.table form {
    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: center; -webkit-align-items: center;
    align-content: center; -webkit-align-content: center;

    flex: 1 1 auto;
}

.content-center.table ul {
    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: center; -webkit-align-items: center;
    align-content: center; -webkit-align-content: center;
    
    position: relative; width: 100%; min-height: 55px; padding: 0px 6px 0px 6px;
    background: rgb(255,255,255); border-bottom: solid 1px rgb(230,230,230);
    list-style-type: none; box-sizing: border-box;
}

.content-center.table li {display: block; position: relative; flex: 0 0 auto; -webkit-flex: 0 0 auto; padding: 9px 6px 9px 6px; text-align: center;}

.content-center.table li.nofix {flex: 1 1 auto; -webkit-flex: 1 1 auto;}

.content-center.table li input, .content-center.table li textarea,.content-center.table select, .content-center.table .select {width: 100%;}


.content-center.table .thead ul {min-height: 55px; background: rgb(250,250,250);}

.content-center.table .thead.hmini ul {min-height: 37px;}

.content-center.table .thead.js-slide-table {cursor: pointer;}

.content-center.table .thead li {font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgb(87,90,93);}

.content-center.table .thead li a {color: rgb(87,90,93);}

.content-center.table .thead li i {color: rgb(97,100,103);}


.content-center.table .thead li.sel a:after {
    display: inline-block; margin: 0px 0px 0px 6px;
    font-family: "Font Awesome 5 Pro"; font-size: 14px; font-weight: 700; line-height: 18px; text-align: center;
    color: rgb(87,90,93); -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto;
}

[dir="rtl"] .content-center.table .thead li.sel a:after {margin: 0px 6px 0px 0px;}

.content-center.table .thead li.sel.sort1 a:after {content: "\f15d";}

.content-center.table .thead li.sel.sort-1 a:after {content: "\f881";}

.content-center.table .thead li.sel.w36px a:after {content: "" !important; display: none !important;}
.content-center.table .thead li.sel.w40px a:after {content: "" !important; display: none !important;}
.content-center.table .thead li.sel.w60px a:after {content: "" !important; display: none !important;}


.content-center.table .tbody ul:first-child .sort-up {opacity: 0; pointer-events: none;}
.content-center.table .tbody ul:last-child .sort-down {opacity: 0; pointer-events: none;}


.content-center.table ul.dark {background: rgb(245,245,245);}

.content-center.table ul.mini {min-height: 28px; padding: 0px 0px 0px 0px;}

.content-center.table ul.mini li {padding: 6px 6px 6px 6px;}


.content-center.table .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: 4px;
}

.content-center.table .img.land {
    width: 100%; padding-top: 66.666666%;
}

.content-center.table .img > i.fas.fa-plus {
    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); transition: all linear 60ms;
}

[dir="rtl"] .content-center.table .img > i.fas.fa-plus {margin: -20px -20px 0px 0px;}

.content-center.table .img:hover > i.fas.fa-plus {color: rgb(147,150,153);}

.content-center.table .img .hh {display: block; position: absolute; opacity: 0;}

.content-center.table .img:hover .hh {opacity: 1;}

.content-center.table .img .hh.del {top: 50%; left: 50%; transform: scale(0.8) translateY(-60%);}

.content-center.table .img .hh.upload {top: 50%; right: 50%; transform: scale(0.8) translateY(-60%);}


.content-center.table .img .preview {
    position: absolute; top: 50%; right: calc(100% + 12px); width: 200px; min-height: 50px; transform: translateY(-50%);
    background: rgb(230,230,230); opacity: 0; pointer-events: none; transition: all linear 60ms; z-index: 1;
}

.content-center.table .img .preview img {display: block; width: 100%;}

.content-center.table .img:hover .preview {opacity: 1; z-index: 1000;}

@media screen and (max-width: 1500px) {
    .content-center.table .img .preview {left: calc(100% + 12px); right: auto;}
}



/**************** FORM CONTENT BOX ****************//**************** FORM CONTENT BOX ****************//**************** FORM CONTENT BOX ****************/

.content-center.form {
    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;

    padding: 9px 9px 9px 9px;
}


.content-side.form {
    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;

    margin: 9px -9px 9px -9px;
}



/**************** INPUT BOX ****************/

.input-box {padding: 9px 9px 9px 9px;}

.input-box .name {min-width: 6px; min-height: 24px; padding: 0px 0px 6px 0px; color: rgb(120,120,120); box-sizing: border-box;}

.input-box .input {width: 100%;}

.input-box .input input {display: block; width: 100%;} .input-box .input textarea {display: block; width: 100%;}

.input-box .input select {display: block; width: 100%;} .input-box .input .select {display: block; width: 100%;}

.input-text {height: 30px; padding: 6px 12px 6px 12px; background: rgb(245,245,245); border-radius: 4px;}

.input-text.big {height: 36px; padding: 9px 12px 9px 12px;}

.input-box .input-text {width: 100%;}



/**************** INPUT BNT BOX ****************/

.content-center.form .input-btn-box {padding: 9px 9px 9px 10px;}



/**************** INPUT LIST BOX ****************/

.input-list-box {
    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;

    width: 100%; padding: 9px 9px 9px 9px;
}

.input-list-box > .name {
    flex: 0 0 auto; -webkit-flex: 0 0 auto; width: 150px; min-height: 30px; line-height: 30px;
    text-align: right; color: rgb(120,120,120); white-space: nowrap; text-overflow: ellipsis;
}

.input-list-box .input {flex: 1 1 auto; -webkit-flex: 1 1 auto; margin: 0px 0px 0px 12px;}

[dir="rtl"] .input-list-box .input {margin: 0px 12px 0px 0px;}

.input-list-box .input input {display: block; width: 100%;} .input-list-box .input textarea {display: block; width: 100%;}

.input-list-box .input select {display: block; width: 100%;} .input-list-box .input .select {display: block; width: 100%;}

.input-list-box > .btn {flex: 0 0 auto; -webkit-flex: 0 0 auto; margin: 0px 0px 0px 24px;}

[dir="rtl"] .input-list-box > .btn  {margin: 0px 24px 0px 0px;}

.input-list-box .input-text {width: 100%;}




/**************** CATEGORIES CONTENT BOX ****************/

.content-center.categories {
    padding: 18px 18px 18px 18px;
}

.content-center.categories .cat {width: 100%; padding: 0px 0px 0px 0px;}

.content-center.categories .cat .name {
    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: center; -webkit-align-items: center;
    align-content: center; -webkit-align-content: center;

    min-height: 51px; padding: 0px 6px 0px 6px; background: rgb(245,245,245); border-bottom: solid 1px rgb(220,220,220);
}

.content-center.categories .cat .name > * {padding: 9px 6px 9px 6px; box-sizing: content-box;}

.content-center.categories .cat .name .w40px {flex: 0 0 auto; -webkit-flex: 0 0 auto;}

.content-center.categories .cat .name .nofix {flex: 1 1 auto; -webkit-flex: 1 1 auto;}

.content-center.categories .cat .name .del {display: none !important; opacity: 0 !important;}

.content-center.categories .cat .inbox {padding: 12px 0px 12px 24px; background: rgba(120,120,120,0.06); border-bottom: solid 1px rgba(120,120,120,0.18);}

[dir="rtl"] .content-center.categories .cat .inbox {padding: 12px 24px 12px 0px;}

.content-center.categories > .cat > .inbox {background: rgb(230,230,230); border-bottom: solid 1px rgb(220,220,220);}

.content-center.categories .cat.empty .name .del {display: flex !important; opacity: 1 !important;}

.content-center.categories .cat.empty .inbox {display: none;}


.content-center.categories.sort-on .cat .name .onoff {pointer-events: none;}

.content-center.categories.sort-on .cat .name .onoff > .fa-on:before {content: "\f0b2" !important; color: inherit !important;}

.content-center.categories.sort-on .cat .name .onoff > .fa-off:before {content: "\f0b2" !important; color: inherit !important;}

.content-center.categories.sort-on .cat .name .del {display: none !important; opacity: 0 !important;}

.content-center.categories.sort-on .cat .name .js-submit {display: none !important; opacity: 0 !important;}

.content-center.categories.sort-on .cat.empty .inbox {display: block;}

.content-center.categories.sort-on .lnk {color: rgb(45,45,45); pointer-events: none; user-select: none;}

.content-center.categories.sort-on input {border-color: transparent !important; background-color: transparent; box-shadow: none; pointer-events: none; user-select: none;}

.content-center.categories.sort-on textarea {border-color: transparent !important; background-color: transparent; box-shadow: none; pointer-events: none; user-select: none;}

.content-center.categories.sort-on select {display: none !important; opacity: 0 !important;}



/**************** HOVER INFO ****************/

.hover-info > span.info {
    display: none; position: absolute; bottom: 150%; left: 50%; width: auto; padding: 9px 9px 10px 9px; transform: translate(-50%,0%);
    font-size: 14px;line-height: 20px; text-align: center; white-space: normal;
    color: rgb(255,255,255); background: rgb(120,120,120); border-radius: 6px; z-index: 100;
}
.hover-info > i {display: block; margin-bottom: -2px; color: hsl(210,24%,72%,1);}
.hover-info:hover > span.info {display: block;}