/**************** TEXT ****************//**************** TEXT ****************//**************** TEXT ****************/

body {
    font-family: 'Source Sans Pro', sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 18px; letter-spacing: 0px;
    color: rgb(30,30,30); background: rgb(240,240,240); -webkit-font-smoothing: antialiased;
}

b {font-weight: 600;} strong {font-weight: 700;}

.mono {font-family: 'Roboto Mono', monospace;}

.t12 {font-size: 12px; line-height: 16px;}
.t14 {font-size: 14px; line-height: 18px;}
.t16 {font-size: 16px; line-height: 20px;}
.t18 {font-size: 18px; line-height: 22px;}
.t20 {font-size: 20px; line-height: 24px;}
.t24 {font-size: 24px; line-height: 30px;}

.tblack {color: rgb(30,30,30);}
.tgrey {color: rgb(120,120,120);}
.tred {color: rgb(210,30,30);}



/**************** FA & IT ****************//**************** FA & IT ****************//**************** FA & IT ****************/

[class*='fa-'] {display: inline-block; font-style: normal; width: auto; height: 18px; font-size: 14px; line-height: 18px; text-align: center;}

.t16 [class*='fa-'] {height: 20px; font-size: 16px; line-height: 20px;}

.it {
    display: flex !important; display: -webkit-flex !important;
    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;
}

.it.center {justify-content: center; -webkit-justify-content: center;}
.it > [class*='fa-'] {display: block; height: 18px; font-size: 16px; line-height: 18px;}
.it > b {display: block; font-weight: inherit !important; margin: 0px 0px 0px 0px;}
.it > [class*='fa-'] + b {margin: 0px 0px 0px 9px;}
.it.li > [class*='fa-'] {width: 1.25em; box-sizing: border-box;}
.it.li > [class*='fa-'] + b {margin: 0px 0px 0px 12px;}
.it.t16 > [class*='fa-'] {display: block; height: 20px; font-size: 18px; line-height: 20px;}

[dir="rtl"] .it > [class*='fa-'] + b {margin: 0px 9px 0px 0px;}
[dir="rtl"] .it.li > [class*='fa-'] + b {margin: 0px 12px 0px 0px;}

.fa-on {color: rgb(66,132,198) !important;} .fa-on:before {content: "\f058";} .fa-off {color: rgb(210,210,210) !important;} .fa-off:before {content: "\f111";}

.fa-on.eye:before {content: "\f06e";} .fa-off.eye:before {content: "\f070";}
.fa-on.shield:before {content: "\f2f7";} .fa-off.shield:before {content: "\f132";}

.fa-onoff {color: rgb(210,210,210) !important;} .fa-onoff:before {content: "\f0c8";}
.sel .fa-onoff {color: rgb(66,132,198) !important;} .sel .fa-onoff:before {content: "\f14a";}



/**************** LNK ****************//**************** LNK ****************//**************** LNK ****************/

.lnk {color: rgb(42,102,162); cursor: pointer; transition: all linear 60ms;}
.lnk:hover {color: rgb(48,120,192);}

.lnk.red {color: rgb(180,36,36);}
.lnk.red:hover {color: rgb(220,60,60);}

.lnk.black {color: rgb(45,45,45);}
.lnk.black:hover {color: rgb(48,120,192);}

.lnk.grey {color: rgb(85,105,125);}
.lnk.grey:hover {color: rgb(115,138,160);}



/**************** BTN ****************//**************** BTN ****************//**************** BTN ****************/

.btn {
    display: flex !important; display: -webkit-flex !important;
    flex-direction: row; -webkit-flex-direction: row;
    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;
    
    height: 30px; padding: 5px 10px 5px 11px;
    font-size: 15px; font-weight: 400; line-height: 18px; text-align: center;
    color: rgb(255,255,255); background: rgb(66,132,198);
    border: solid 1px rgb(66,132,198); border-radius: 4px; opacity: 1;
    box-sizing: border-box; cursor: pointer; transition: all linear 60ms;
}

[dir="rtl"] .btn {padding: 5px 11px 5px 10px;}

.btn:hover {opacity: 0.84;}

.btn.hide {display: none !important;}
.btn.nopoint {color: rgb(120,120,120) !important;}

.btn > [class*='fa-'] {display: block; width: 1.25em; height: 18px; font-size: 14px; line-height: 18px; flex: 0 0 auto; -webkit-flex: 0 0 auto;}
.btn > b {display: block; max-width: 100%; font-weight: inherit !important; margin: 0px 0px 1px 0px; flex: 1 1 auto; -webkit-flex: 1 1 auto;}
.btn > [class*='fa-'] + b {margin-left: 9px;}
.btn > b + [class*='fa-'] {margin-left: 9px;}

[dir="rtl"] .btn > [class*='fa-'] + b {margin-left: auto; margin-right: 9px;}
[dir="ltr"] .btn > [class*='fa-'] + b {margin-right: auto; margin-left: 9px;}
[dir="rtl"] .btn > b + [class*='fa-'] {margin-left: auto; margin-right: 9px;}
[dir="ltr"] .btn > b + [class*='fa-'] {margin-right: auto; margin-left: 9px;}



/**************** BTN BIG ****************/

.btn.big {height: 36px; padding: 8px 16px 8px 17px;}

[dir="rtl"] .btn.big {padding: 8px 17px 8px 16px;}

.btn.big > [class*='fa-'] {font-size: 16px;}


/**************** BTN ICO ****************/

.btn.ico {width: 36px; padding: 5px 0px 5px 1px;}

[dir="rtl"] .btn.ico {padding: 5px 1px 5px 0px;}

.btn.big.ico {width: 40px; padding: 8px 0px 8px 1px;}

[dir="rtl"] .btn.big.ico {padding: 8px 1px 8px 0px;}

/**************** BTN HH ****************/

.btn.hh {background: rgb(45,45,45,1); border: none;}

.btn.hh:hover {background: rgb(45,45,45,0.9);}



/**************** BTN BORDER ****************/

.btn.border {color: rgb(66,132,198); background: none; border: solid 1px rgb(220,220,220);}

.btn.border:hover {color: rgb(72,144,216); border: solid 1px rgb(160,200,240);}



/**************** BTN NOBG ****************/

.btn.nobg {color: rgb(66,132,198); background: none; border: solid 1px rgba(66,132,198,0);}

.btn.nobg:hover {color: rgb(72,144,216);}

.btn.nobg.border {border: solid 1px rgba(66,132,198,0);}

.btn.nobg.border:hover {border: solid 1px rgba(72,144,216,1);}



/**************** BTN NOPAD ****************/

.btn.nopad {padding-left: 0px; padding-right: 0px;}



/**************** BTN NAVI ****************/

.btn.navi {min-width: 33px; padding: 5px 4px 5px 5px; color: rgb(45,45,45); background: none; border: solid 1px rgb(230,230,230);}

[dir="rtl"] .btn.navi {padding: 5px 5px 5px 4px;}

.btn.navi:hover {color: rgb(87,90,93); border: solid 1px rgba(220,220,220);}

.btn.navi.sel {color: rgb(45,45,45); background: rgb(245,245,245); border: solid 1px rgb(245,245,245);}

.btn.navi.dot {min-width: 20px; border: solid 1px rgba(230,230,230,0);}



/**************** BTN RED ****************/

.btn.red {background: rgb(220,60,60); border: solid 1px rgb(220,60,60);}

.btn.red:hover {background: rgb(232,84,84);}

.btn.red.border {color: rgb(220,60,60); background: none; border: solid 1px rgb(220,60,60);}

.btn.red.border:hover {color: rgb(232,84,84); border: solid 1px rgb(232,84,84);}

.btn.red.nobg {color: rgb(220,60,60); background: none; border: solid 1px rgba(220,60,60,0);}

.btn.red.nobg:hover {color: rgb(232,84,84);}

.btn.red.nobg.border {border: solid 1px rgba(220,60,60,0);}

.btn.red.nobg.border:hover {border: solid 1px rgba(220,60,60,1);}


/**************** BTN GREY ****************/

.btn.grey {color: rgb(85,105,125); background: rgb(230,235,240); border: solid 1px rgb(230,235,240);}

.btn.grey:hover {background: rgb(235,240,245);}

.btn.grey.sel {color: rgb(250,250,251); background: rgb(140,150,160); border: solid 1px rgb(140,150,160); pointer-events: none;}


/**************** TAGS ****************/

.tag {
    height: 24px; padding: 0px 30px 0px 9px;
    font-size: 12px; font-weight: 600; line-height: 24px; text-align: center;
    color: rgb(45,45,45); background: rgb(211,229,248); border-radius: 4px;
    box-sizing: border-box;
}

[dir="rtl"] .tag  {padding: 0px 9px 0px 30px;}

.tag i {
    display: block; position: absolute; top: 0px; right: 0px; width: 24px; height: 24px;
    font-size: 14px; font-weight: 300; line-height: 24px; text-align: center; color: rgb(45,45,45);
    cursor: pointer; transition: all linear 60ms;
}

[dir="rtl"] .tag i {right: auto; left: 0px;}

.tag i:hover  {color: rgb(87,90,93);}



/**************** FORM UI ****************//**************** FORM UI ****************//**************** FORM UI ****************/

input, textarea, select {
    display: block; height: 30px; font-family: 'Source Sans Pro', sans-serif; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: 0px;
    color: rgb(45,45,45); background: rgb(255,255,255); border: solid 1px rgb(220,220,220); border-radius: 4px;
    box-shadow: inset 1px 1px 2px -1px rgba(57,60,63,0.24);
    box-sizing: border-box; transition: all linear 60ms;
}

input {padding: 3px 9px 3px 9px;}
input[type="number"] {padding: 3px 6px 3px 6px;}
input[type="number"].noarr {padding: 3px 9px 3px 9px; text-align: center;}
input[type="time"] {padding: 3px 3px 3px 9px;}

[dir="rtl"] input[type="time"] {padding: 3px 9px 3px 3px;}

textarea {padding: 5px 9px 4px 9px; white-space: nowrap; overflow-x: hidden;}
select {padding: 3px 3px 3px 6px;}

[dir="rtl"] select {padding: 3px 6px 3px 3px;}

option {font-weight: 400; color: rgb(45,45,45); background: rgb(255,255,255);}

input.big {height: 36px; padding: 3px 3px 3px 6px;}

[dir="rtl"] input.big {padding: 3px 6px 3px 3px;}

textarea.big {height: 36px; padding: 8px 9px 7px 9px;}
select.big {height: 36px; padding: 3px 3px 3px 6px;}

[dir="rtl"] select.big {padding: 3px 6px 3px 3px;}

textarea.wrap {white-space: normal;}
textarea.h2x {height: 49px !important; white-space: normal;}
textarea.h3x {height: 68px !important; white-space: normal;}
textarea.text {height: 106px !important; white-space: normal;}
textarea.editor-mini {height: 240px !important; white-space: normal;}
textarea.editor {height: 360px !important; white-space: normal;}

input:hover, textarea:hover, select:hover {border: solid 1px rgb(160,200,240);}
input:focus, textarea:focus, select:focus {border: solid 1px rgb(160,200,240);}
input.unsave, textarea.unsave, select.unsave {border: solid 1px rgb(240,200,160);}

input[type="date"].placehold {color: rgb(220,220,220);}
input[type="time"].placehold {color: rgb(220,220,220);}

input::-webkit-input-placeholder {color: hsla(0,0%,58%,1); text-shadow: none; transition: all linear 60ms;}
input:-moz-placeholder {color: hsla(0,0%,58%,1); text-shadow: none; transition: all linear 60ms;}
input::-moz-placeholder {color: hsla(0,0%,58%,1); text-shadow: none; transition: all linear 60ms;}
input:focus::-webkit-input-placeholder {color: transparent !important; text-shadow: none; transition: all linear 60ms;}
input:focus:-moz-placeholder {color: transparent !important; text-shadow: none; transition: all linear 60ms;}
input:focus::-moz-placeholder {color: transparent !important; text-shadow: none; transition: all linear 60ms;}

textarea::-webkit-input-placeholder {color: hsla(0,0%,58%,1); text-shadow: none; transition: all linear 60ms;}
textarea:-moz-placeholder {color: hsla(0,0%,58%,1); text-shadow: none; transition: all linear 60ms;}
textarea::-moz-placeholder {color: hsla(0,0%,58%,1); text-shadow: none; transition: all linear 60ms;}
textarea:focus::-webkit-input-placeholder {color: transparent !important; text-shadow: none; transition: all linear 60ms;}
textarea:focus:-moz-placeholder {color: transparent !important; text-shadow: none; transition: all linear 60ms;}
textarea:focus::-moz-placeholder {color: transparent !important; text-shadow: none; transition: all linear 60ms;}



/****************  SELECT CSS ****************//****************  SELECT CSS ****************//****************  SELECT CSS ****************/

.select {display: block; position: relative; width: auto; height: 30px; font-size: 14px; line-height: 18px; box-sizing: border-box;}

.select.big {height: 36px;}

.select .header {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    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%; height: 100%; padding: 3px 6px 3px 9px;
    color: rgb(45,45,45); background: rgb(255,255,255); border: solid 1px rgb(220,220,220); border-radius: 4px;
    box-shadow: inset 1px 1px 2px -1px rgba(57,60,63,0.24);
    box-sizing: border-box; cursor: pointer; transition: all linear 60ms;
}

[dir="rtl"] .select .header {padding: 3px 9px 3px 6px;}

.select .header:hover {border: solid 1px rgb(160,200,240);}

.select.focus .header {border: solid 1px rgb(160,200,240); border-radius: 4px 4px 0px 0px; z-index: 10;}

.select.unsave .header {border: solid 1px rgb(240,200,160);}

.select .drop-box {
    position: absolute; top: 100%; right: 0px; width: auto; min-width: 100%; max-height: 280px; margin: -1px 0px 0px 0px;
    background: rgb(255,255,255); border: solid 1px rgb(160,200,240); border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 3px 3px -3px rgba(60,60,60,0.24);
    overflow-y: auto; opacity: 0; pointer-events: none; transition: all ease 60ms; z-index: 100;
}

.select .drop-box.left {right: auto; left: 0px;}

.select.focus .drop-box {opacity: 1; pointer-events: auto;}

.select .option {
    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;
    
    width: 100%; height: 28px; padding: 0px 6px 0px 9px;
    color: rgb(45,45,45); background: rgb(255,255,255); box-sizing: border-box; transition: all linear 60ms;
}

[dir="rtl"] .select .option {padding: 0px 9px 0px 6px;}

.select .option:hover {background: rgb(245,245,245);}

.select .option.sel {background: rgb(245,245,245);}

.select .option.empty {height: 12px; background: rgb(245,245,245);}

.select .name {
    flex: 1 1 auto; -webkit-flex: 1 1 auto; display: block; position: relative;
    color: hsla(0,0%,0%,1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}

.select .ico {
    flex: 0 0 auto; -webkit-flex: 0 0 auto; display: block; position: relative; margin: 0px 0px 0px 12px;
    color: rgb(66,132,198); cursor: pointer; transition: all linear 60ms;
}

[dir="rtl"] .select .ico {margin: 0px 12px 0px 0px;}

.select .ico:hover {color: rgb(72,144,216);}

.select .header .ico {margin: -6px 0px 0px 12px; color: rgb(45,45,45);}

[dir="rtl"] .select .header .ico {margin: -6px 12px 0px 0px;}

/**************** CHECKBOX CSS ****************//**************** CHECKBOX CSS ****************//**************** CHECKBOX CSS ****************/

label.checkbox {
    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: flex-start; -webkit-align-content: flex-start;
    user-select: none; cursor: pointer;
}
label.checkbox input[type="checkbox"] {display: block; width: 18px !important; height: 18px !important; opacity: 0.3;}
label.checkbox input[type="checkbox"]:checked {opacity: 0.9;}
label.checkbox span {display: block; padding: 0px 0px 0px 9px; flex: 0 20 auto;}

[dir="rtl"] label.checkbox span {padding: 0px 9px 0px 0px;}

label.checkbox.right span {display: block; padding: 0px 9px 0px 0px;}
[dir="rtl"] label.checkbox.right span {padding: 0px 0px 0px 9px;}

/****************  UPLOAD CSS ****************//****************  UPLOAD CSS ****************//****************  UPLOAD CSS ****************/

.upload {display: block; position: relative;}

.upload input[type="file"] {display: none !important;}

.upload label {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;}



/*************** SYNC ***************//*************** SYNC ***************//*************** SYNC ***************/

.sync {pointer-events: none !important;}

.sync > * {opacity: 0;}

.sync:before {content: ""; display: block; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: inherit; border-radius: inherit; z-index: 100;}

.sync:after {
    content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 18px; height: 18px;
    background-image: url('../img/load-grey.png'); background-size: contain; background-position: center center; background-repeat: no-repeat;
    animation: sync 1800ms infinite linear; z-index: 110;
}

@keyframes sync {0% {transform: translate(-50%,-50%) rotate(0deg);}  100% {transform: translate(-50%,-50%) rotate(360deg);}}

/*** BTN SYNC ***/

.btn.sync:after {background-image: url('../img/load-white.png');}

.btn.h30px.sync:after {width: 12px; height: 12px;}

.btn.border.sync:after {background-image: url('../img/load-blue.png');} .btn.nobg.sync:after {background-image: url('../img/load-blue.png');}

.btn.border.red.sync:after {background-image: url('../img/load-red.png');} .btn.nobg.red.sync:after {background-image: url('../img/load-red.png');}

.btn.border.grey.sync:after {background-image: url('../img/load-black.png');} .btn.nobg.grey.sync:after {background-image: url('../img/load-black.png');}


/*************** BLINK ***************//*************** BLINK ***************//*************** BLINK ***************/

.blink {animation: blink 1200ms infinite linear; opacity: 1;}

@keyframes blink {0% {opacity: 1;} 50% {opacity: 0.36;}  100% {opacity: 1;}}



/*************** SCROLLBAR ***************//*************** SCROLLBAR ***************//*************** SCROLLBAR ***************/

.scrollbar {max-height: 100%;}
.scrollbar div {max-height: 100%;}
.scrollbar > .scroll-element, .scrollbar > .scroll-element div {position: absolute; margin: 0; padding: 0; background: none; border: none; z-index: 10;}
.scrollbar > .scroll-element div {display: block; top: 0; left: 0; width: 100%; height: 100%;}
.scrollbar > .scroll-element .scroll-element_track {display: none;}

.scrollbar > .scroll-element .scroll-bar {display: block; background: rgb(245,245,245); border-radius: 3px;}

.scrollbar > .scroll-element.scroll-x {bottom: 0px; left: 0; height: 0px; width: 100%; min-width: 100%; overflow: visible;}
.scrollbar > .scroll-element.scroll-y {top: 0; right: 0px; width: 6px; height: 100%; min-height: 100%; background: none; border-radius: 0px; opacity: 0; transition: opacity linear 60ms;}
.scrollbar:hover > .scroll-element.scroll-y {opacity: 1;}

.scrollbar > .scroll-element.scroll-x .scroll-bar {height: 6px; min-width: 10px; top: -6px;}
.scrollbar > .scroll-element.scroll-y .scroll-bar {left: 0px; min-height: 30px; width: 6px;}
.scrollbar > .scroll-element.scroll-x .scroll-element_outer { left: 0px; }
.scrollbar > .scroll-element.scroll-x .scroll-element_size { left: -0px; }
.scrollbar > .scroll-element.scroll-y .scroll-element_outer {top: 0px;}
.scrollbar > .scroll-element.scroll-y .scroll-element_size {top: -0px;}
.scrollbar > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {left: -11px;}
.scrollbar > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {top: -11px;}

.scrollbar.log-scroll > .scroll-element .scroll-bar {background: rgb(234,235,236) !important; border-radius: 3px;}



/*************** TINY MCE ***************//*************** TINY MCE ***************//*************** TINY MCE ***************/

.mce-widget.mce-tooltip {display: none !important;}

.tox-tinymce {min-height: 270px !important; border: 1px solid rgb(220,220,220) !important; border-radius: 4px !important;}

.tox .tox-toolbar__group:not(:last-of-type) {border-right: 1px solid rgb(220,220,220) !important;}

.tox .tox-edit-area {border-top: 1px solid rgb(220,220,220) !important;}

.tox .tox-menu {border: 1px solid rgb(220,220,220) !important; border-radius: 4px !important;}

.tox .tox-tbtn {color: rgb(45,45,45) !important;}

.tox .tox-tbtn svg {fill: #2a2d30 !important;}

.tox .tox-tbtn:hover {background: rgb(250,250,250) !important;}

.tox .tox-tbtn--enabled {background: rgb(245,245,245) !important;}

.tox .tox-collection--list .tox-collection__item {color: rgb(45,45,45) !important;}

.tox .tox-collection--list .tox-collection__item--active {background-color: rgb(245,245,245) !important;}