/*Thank God*/
/*Css Reset*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, 
code, em, img, small, strong, sub, sup, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot,
thead, tr, th, td, article, aside, footer, header, nav, section, time, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font-weight: inherit;vertical-align: baseline;background: transparent;}
article,aside,figure,footer,header,nav,section {display: block;}
*,*:before,*:after {box-sizing: inherit;}
img,object {max-width: 100%;}
ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}
th {font-weight: bold;vertical-align: bottom;}
td {font-weight: normal;vertical-align: top;}
input,select {vertical-align: middle;}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
strong {font-weight: bold;}
label,input[type="file"],button {cursor: pointer;}
button,input,select,textarea {margin: 0;border: 0;}
button::-moz-focus-inner {padding: 0;border: 0}
a,a:visited {
    text-decoration: none;
    color: #0150ca;
}
a:hover{color: red}
::selection {
    padding: 2px;
    background: #c5e0eb; /* WebKit/Blink Browsers */
}
::-moz-selection {background: #c5e0eb; /* Gecko Browsers */
}

.min-height {
    min-height: 1px;
}

.up>input {
    text-transform: uppercase;
}
.block{ display: block;}

div{box-sizing: border-box;}
body {
    font: normal 11px/2 Tahoma;
    line-height: 2;
    direction: rtl;
    background: #37435b;    
    margin: 0;
    padding: 0;
}
.fade-in {
    -webkit-animation: fadeIn .7s ease both;
    animation: fadeIn .7s ease both;
}
.fade-in-1 {
    -webkit-animation: fadeIn 1s ease both;
    animation: fadeIn 1s ease both;
}

body.no-scroll {overflow: hidden;}
body.no-scroll2 {overflow: hidden;}
body.no-scroll3 {overflow: hidden;}

/*mynotifiy*/
.notifyjs-corner {
    z-index: 99950;
}


/*minwidth*/


.gh.light-padding,
.light-padding {
    padding: 4px;
}

.icon {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

/*colors*/
.blue{color: #054473;}

/*colors*/
/*generalui*/
div.error-solid,
div.red-solid {
    background: #ff1c1c;
    color: white;
}
div.warning-solid ,
div.orange-solid {
    background: #f18904;
    color: white;
}
div.success-solid ,
div.green-solid {
   background: #1eaf02;
    color: white;
}

div.info-solid,div.blue-solid {
    background: #0ab2e6;
    color: white;
}
div.disable-solid ,
div.gray-solid {
    background: #cbd1d4;
    color: #f3f2f2;
}

div.info-line,div.blue-line {
    border-color: #1a95bd;
    background: #dceff5;
}

div.gray-line,
div.disable-line {
    background: #ececec;
    color: #909090;
    border-color: #bbb9b9;
}
div.error-line,div.red-line {
    border-color: #cc2c2c;
    background: rgba(244, 27, 27, 0.09);
    color: black;
}

div.warning-line,div.orange-line {
    border-color: #e28c03;
    background: rgb(253, 252, 194);
}

.stick-message.transparent {
    background: transparent;
    border-color: transparent;
    color: black;
}

div.green-line,div.success-line {
    border-color: #1eaf02;
    color: black;
    background: #e2f1df;
}


.top-bar {
    min-height: 62px;
    background: #36425b url('img/top-bar.png');
    
}
.wrapper{position: relative}
.stage {
    margin: auto;
    width: 1200px;
    max-width: 100%;
    min-width: 400px;
    width: 100%;
}


#portal-logo {
   width: 400px;
    margin-top: 13px;
    height: 40px;
    background-position: left center;
    background-repeat: repeat-y;
    transition: all .3s;
}

#portal-logo:hover {
    background-position: 0 -80px ;
}

.profile-place {
    padding-top: 21px;
   color: white;
   padding-right: 14px;
}


.profile-place .exit-link,
.profile-place .exit-link:visited
{
   color: #BCD2F5;
   color: rgba(188, 210, 245, 0.81);
    padding-right: 6px;
}

.profile-place .exit-link:hover {
    color: red;
}



.color-green{ color: green;}


.page-load-place {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    text-align: center;
    background: rgb(255, 255, 0);
    height: 4px;
    transition: all .3s;
}
.page-load-place.collapse {
    top: -40px;
    opacity: .5;
}
.page-load-text {    
   color: #656057;
    display: inline-block;
    background-color: yellow;
    padding: 5px 16px;
    text-align: center;
    font-size: 12px;
    margin-top: 0px;
    border-radius: 6px;
}


.main-body {
    background: #eae9e9 url(img/main-body.png);
    padding: 6px 6px;
    zoom: 1;
}


.menu-place {
    background: #182033;
    background: linear-gradient(to bottom,#182033 0,#293550 50%,#232d43 100%);
    /*border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;*/
    min-height: 45px;
}

.view-place {
    padding: 11px 12px;
    padding: 8px 7px;
    min-height: 300px;
    background: #fff url(img/view-place-top.png) repeat-x left top;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 0 0 #edeff2;
    
}

/*uiinlineform*/
.ui-inline-form {
    position: relative;
}


.bottom-bar {
    color: white;
    background: #36425b url(img/bottom-bar.png) repeat-x left top;
    min-height: 64px;
    padding: 19px;
}

.panel-copyright {
    margin: auto;
    text-align: center;
}
.panel-copyright a,.panel-copyright a:visited {
    color: yellow;
    text-decoration: none;
    
}

    .panel-copyright .version {
        cursor: pointer;
        color: #ffffff91;
        transition: all .3s;
        display: block;
    }
    .panel-copyright .version:hover {
        color: white;
    }

.dialog-back {
    position: fixed;
    left: 0;top: 0;right: 0;bottom: 0;
    overflow: auto;
}


/*ui-view-print*/
.print-dialog {
    background-color: #404c67;
    display: block;
    position: fixed;
    right: 0;left: 0;top: 0;left: 0;bottom: 0;
    overflow-y: scroll;
    overflow-x: auto;
    direction: ltr;
    z-index: 9000;
}

.print-side-buttons {
    position: fixed;
    left: 15px;
    top: 30px;
    bottom: 0;
    width: 80px;
    height: 100%;
    display: block;
    z-index: 999;
    display: block;
}

.hide{ visibility: hidden;}

[icon],
.icon {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-bottom: -4px;
    margin-left: 3px;
}


.print-footer-area {
   bottom: 0;
    position: absolute;
    left: 0;
    text-align: center;
    right: 0;
}


/*printtable tableprint*/
.print-query-messages {
        text-align: right;
    direction: rtl;
   padding: 1mm 0;
    margin-bottom: 1.2mm;
}


.print-query-messages>.item {
background: #e6e6e6;
    padding: .4mm 2mm 1mm 2mm;
    border-radius: 1.5mm;
    margin-left: 1mm;
    display: inline-block;
    border: 1px solid #868484;
}


.print-summary {
 direction: rtl;
    padding: 0mm 2mm;
    border: 1px solid #afafaf;
    /* border-radius: 1mm; */
    margin-top: 1mm;
    background: #efefef;
}
.print-summary>.item {
    margin-left: 14mm;
}
.print-summary>.item>.title {}
.print-summary>.item>.bulk {
    position: relative;
    background: transparent;
    color: black;
    left: auto;
    top: auto;
    width: auto;
    display: inline-block;
    font-size: inherit;
}






/*newcontrol*/
/*base*/
div[ng-click],
span[ng-click] {
    /*cursor: default;*/
}

div[ng-click].hover,span[ng-click].hover {
    cursor: pointer;
}


/*notify*/
.notifyjs-corner {
    font-size: 12px;
}

/*devjson*/
[dev],
.dev-json {
    color: #007500;
    line-height: 14px;
    font-size: 12px;
    font-family: 'courier new';
    position: relative;
    width: 100%;
    border: 1px solid #10a74a;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 5px;
    background: #dce9f5;
    margin: 2px 0;
    display: block;
    text-align: left;
    overflow-x: scroll;
}


/*normalbuttons*/
.button:hover,
.button-holder:hover {
    background: linear-gradient(to top,#FFF 0,#D8D8D8 1%,#FFF 100%);
}

.button-holder {
    margin: 0;
    padding: 5px 11px 8px 11px;
    font: normal 11px/1.2 Tahoma;
    border: 1px solid #c2c2c2;
    text-align: center;
    background: linear-gradient(to bottom,#FDFDFD 0,#F3F3F3 100%);
    border-radius: 3px;
    text-align: center;
    margin-left: 4px;
    display: inline-block;
    min-width: 57px;
}

.button-holder.delete-button:focus {
    border-color: #d25959;
}




.button,
.button-holder {
    margin: 0;
    padding: 5px 9px 8px 11px;
    font: normal 11px/1.2 Tahoma;
    border: 1px solid #c2c2c2;
    text-align: center;
    background: linear-gradient(to bottom,#FDFDFD 0,#F3F3F3 100%);
    border-radius: 3px;
    text-align: center;
    margin-left: 4px;
    display: inline-block;
    min-width: 57px;
}

.button {
    margin-bottom: 7px;
    display: inline-block;    
    cursor: pointer;
    min-height: 29px;
    color: #2d2d2d;
}

.ui-button {
    display: inline-block;
}
.mini-buttons>.ui-button {
    padding-left: 4px;
}
.mini-buttons>.ui-button:last-child {
    padding-left: 0px;
}

.color-buttons>.ui-button:hover>.button-holder {background: #53afff;
    color: white;}
.color-buttons>.ui-button>.button-holder {width: 100%;border: none;background: #e8e8e8;}

.color-buttons>.ui-button.white>.button-holder {background: white;}
.color-buttons>.ui-button.white:hover>.button-holder {background: #b8bcbf;}

.filter-buttons-margin {
    margin-top: 6px;
    margin-bottom: 6px;
}

/*ui-button uibutton*/
.button-holder {
    cursor: pointer;
    outline: 0;
    border: 1px solid #c2c2c2;
    cursor: pointer;
}


.button:focus,
.button-holder:focus {
   border: solid 1px #129FC6;
    outline: 0;
}

.print-large-button > .button-holder:focus ,
.print-large-button > .button-holder:hover {
    background: lightblue;
}

.print-large-button>.button-holder {
    position: relative;
    border-radius: 8px;
    left: 15px;
    width: 80px;
    height: 80px;
    display: block;
    -border: 1px solid gray;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80%;
    cursor: pointer;
    background-color: white;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.39);
    margin-bottom: 9px;
}

.print-large-button>.button-holder .button-icon{
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: auto;
    height: auto;
}

    .print-large-button > .button-holder:hover .button-title {
    color: rgba(255, 255, 255, 0.87);
    left: 92px;

    }

.print-large-button>.button-holder .button-title{
    position: absolute;
    left: 50px;
    text-align: center;
    color: rgba(0, 0, 0, 0);
    transition: all .3s;
    font-size: 12px;
}







/*main-view viewmaini*/
.main-view{ position: relative;}
.view-header {
    height: 32px;
    padding-top: 1px;
    margin-bottom: 6px;
}

.view-header .view-icon {
    width: 20px;
    height: 20px;
    margin-bottom: -3px;
    margin-bottom: -5px;
    margin-left: 4px;
    
}
.view-header .view-title {
    font-family: Nassim;
    color: rgb(10, 47, 115);
    font-size: 18px;
}

.main-view-buttons {
   margin-top: 4px;
    padding-right: 2px;
}

.view-header .sub-title {
    position: relative;
    
}
.view-header .sub-title>.icon {
    background-image: url(/c/icon/arr-red.png);
    width: 10px;
    height: 13px;
    margin-right: 5px;
    margin-left: 6px;
}
    .view-header .sub-title > .title {
        font-family: nazanin;
        font-size: 17px;
        color: #0c1625;
    }

    .view-header .sub-title:hover > .context-menu {
        opacity: 1;
        display: block;
        visibility: visible;
     }
    .view-header .sub-title > .context-menu {
        position: absolute;
    right: 23px;
    top: -13px;
    z-index: 9;
    background-color: white;
    border: 1px solid #d3d5dd;
    border-radius: 5px;
    padding: 5px 0;
    box-shadow: 3px 3px 1px #00000038;
    min-width: 114px;
    transition: all .4s;
    overflow: hidden;
    opacity: 0.0;
        visibility: hidden;
            z-index: 24;
    }

        .view-header .sub-title > .context-menu > .item {
         display: inline-block;
    width: 100%;
    padding: 2px 23px 2px 16px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    color: #313131;
        }

    .view-header .sub-title > .context-menu >.item:hover{
       background-color: #e0e0e0;

    }

    .view-header .sub-title > .context-menu >.item.active:after{

        background-image: url(/c/icon/list-red.png);        
        opacity: 1;
    }

    .view-header .sub-title > .context-menu >.item:after{
      content: "";
    width: 8px;
    height: 8px;
    /*background: url(/c/icon/list-gray.png) no-repeat center center;*/
    background-repeat: no-repeat;
    right: 7px;
    top: 10px;
    position: absolute;
    background-size: contain;
        


    }



/*pageLoading*/
.start-page-loading {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #00576f;
    text-align: center;
    padding-top: 278px;
    width: 100%;
    direction: ltr;
    font-weight: bold;
    font-family: -webkit-body;
    font-size: 70px;
    color: rgba(255, 255, 255, 0.94);
}

.start-page-loading:before {
    content: "";
    background-image: url(img/login.jpg);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .11;
}

.start-page-loading:after {
     display: block;
     content: "Loading...";    
}




/*formGroup uigroup*/
.form-group:hover,
.form-group:hover .group-title
 {
  -border-color: #abc2cf;
}

.border,
.form-group {
    border: 1px solid #d3d5dd;
    border-radius: 4px;    
}
.form-group {
    position: relative;
    box-sizing: border-box;
    margin-bottom: 1px;
    margin-top: 12px;
    min-height: 16px;
    background-color: #f7f8f9;
}

.group-body {
   padding: 0px 4px 5px 4px;
    margin-top: 18px;
    overflow: visible;
}

.group-header {
       position: absolute;
    right: 0;
    left: 0;
    top: -12px;
    height: 28px;
}

.group-title {
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #d3d5dd;
    position: absolute;
    max-width: 93%;
    padding: 2px 7px 1px 8px;
    padding: 2px 7px 1px 11px;
    top: 0px;
    font-size: 11px;
    right: 10px;
    overflow: hidden;
    color: #1a1d1f;
    border-color: #d3d5dd;
    background: rgb(244, 246, 247);
    cursor: pointer;
}

.form-group.style-top-bar,
.form-group.header-false {margin-top:0px;}

.form-group.header-false>.group-header {display: none}
.form-group.no-header>.group-body,
.form-group.header-false>.group-body {
    margin-top: 6px;
}




.form-group.style-normal {
    
}

.form-group.style-top-bar:hover > .group-header,
.form-group.style-top-bar > .group-header:hover {
    /*background: linear-gradient(to bottom,#fef7ed 0,#fbf1dd 100%);*/
    background: linear-gradient(to bottom,#edf5fe 0,#d3daff 100%);
}
.form-group.style-top-bar>.group-header {
    position: relative;
    top: 0px;
    border-bottom: 1px solid #d3d5dd;
    padding: 3px 4px 13px 2px;
    display: block;
    width: 100%;
    height: 33px;
    background: linear-gradient(to bottom,#f7f7f9 0,#edeef2 100%);
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}
.form-group.style-top-bar>.group-header>.group-title {
    position: relative;
    border: none;
    top: 0;
    display: inline-block;
    right: 0;
    background: none;
}
    .form-group.style-top-bar > .group-body {
        margin-top: 4px;
    }


.form-group.style-normal{}
.form-group.style-normal{}
.form-group.style-normal{}
.form-group.style-normal{}


.light-group {
    position: relative;
    border: 1px solid #d3d5dd;
    border-radius: 4px;
    min-height: 16px;
}
.no-border .light-group {
    border: none;
}
.light-group>.group-body {
   padding: 8px 7px;
    margin: 0;
}
.light-group >.toolbar {
    min-height: 39px;
    border-bottom: 1px solid #d3d5dd;
    width: 100%;
}



/*slim*/
.form-group.style-slim {padding-top: 2px;}
.form-group.style-slim-line {
    border: none;
    border-bottom: 1px solid #d3d5dd;
    border-radius: 0px;
    padding-top: 2px;
}



/*groupTab*/
.group-tabs {
    border-bottom: solid 1px #129FC6;
}

.group-tab {
    display: inline-block;
    border: 1px solid #d3d5dd;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    padding: 2px 8px 2px 9px;
    margin-left: 1px;
    margin-bottom: -1px;
    border-bottom: none;
}

.group-tab:hover {
    background: linear-gradient(to top,#FFF 0,#D8D8D8 1%,#FFF 100%);
    -border-color: red;
}

.group-tab-slave {
    border-radius: 0 0 5px 5px;
    border: 1px solid #d3d5dd;
    border: 1px solid #129fc6;
    padding: 9px 4px 2px 8px;
    margin-top: -1px;
    border-top: none;
}

    .group-tab.disable {cursor: not-allowed;color: gray}
    .group-tab.disable [icon] {opacity: .5}

    .group-tab:hover.disable {background: white}

    .group-tab.active:hover {
        background: white;
        cursor: default;
    }
.group-tab.active {
    border: solid 1px #129FC6;
    border-bottom: 1px solid white;
}


.group-tab>.main-icon,.group-tab.active>.collapse-icon{ display: inline-block;}
.group-tab>.collapse-icon,.group-tab.active>.main-icon{ display: none;}


/*side image sideimage*/
.form-group.has-side-image>.group-body {
    padding-right: 136px;
    position: relative;
}

.group-body>.side-image {
    position: absolute;
    right: 6px;
    top: 3px;
    width: 127px;
    display: block;
    bottom: 16px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    padding: 0;
    box-sizing: border-box;
}

.gh.take.has-side-image{}
.gh.take.has-side-image>.side-image{}

/*uifields*/
.field {
    min-height: 44px;
    min-height: 34px;
    position: relative;
    margin-bottom: 1px;
    padding-right: 122px;
    padding-left: 4px;
    margin-top: 1px;
}

.field>.label-area {
    position: absolute;
    width: 104px;
    display: block;
    overflow: hidden;
    right: 0;
    top: 2px;
    bottom: 0;
    text-align: left;   
	color: #051f48;
}

.field>.required,
.label-area>.required,
.info-area >.required {
    color: red;
}

.field > .info-area {
    position: absolute;
    right: 104px;
    
    -background: white;
    width: 11px;
    text-align: left;
    white-space: nowrap;
	color: #051f48;
}

    .field > .control-area {
        width: 100%;
        display: block;
        position: relative;
    }

    
    /*uifield labelstyles*/
    .label-style-normal{}

    .label-style-none {
        padding-right: 2px;
        min-height: 32px;
        padding-top: 1px;
    }
    .label-style-none>.info-area,
    .label-style-none>.label-area { display: none;}


    .label-style-inline{padding-right: 2px;text-align: right}
        .label-style-inline > .label-area,
        .label-style-inline > .control-area {
            position: relative;
            display: inline-block;
            width: auto;
        }
    .label-style-inline>.title{padding-right: 2px}
    .label-style-top{padding-right: 2px;}
    
    .label-style-top>.label-area {
        position: relative;
        text-align: right;
        width: 100%;
        display: block;
        padding: 2px 2px 2px 2px;
    }


.field.label-style-stack {
    direction: rtl;
    padding-right: 0;
}

    .field.label-style-stack > .label-area {
        width: auto;
        display: inline;
        position: relative;
    }

    .field.label-style-stack > .info-area {
        position: relative;
        display: inline-block;
        right: auto;
        width: auto;
        text-align: right;
    }

    .field.label-style-stack>.control-area {
        position: relative;
        display: inline-block;
        right: auto;
        width: auto;
        text-align: right;
    }





/*input textbox*/
.textbox {
    padding: 5px;
    margin: 0;
    border: 0;
    color: #535353;
    background: #fff;
    background: linear-gradient(to bottom,#ffffff 0,#f1f1f1 1%,#ffffff 100%);
    border: 1px solid #b5b5b5;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(204, 204, 204, 0.69);
    font: normal 11px/1.2 Tahoma;
    outline: 0;
    width: 180px;
    cursor: cell;
	color: #333333;
}
textarea.textbox {
    padding: 6px 6px;
}
.textbox:focus {
    cursor: text;
}

.ui-text-input.gray>input {
    color: #afafaf;
}

.ui-text-input {
    white-space: nowrap;
}

.ui-text-input>.postfix
 {
    color: #0b1629;
    left: 1px;
    position: absolute;
    background: #e8e8e8;
    top: 1px;
    border-right: 1px solid #d4d4d48a;
    bottom: 1px;
    display: block;
    border-radius: 4px 0 0 4px;
    padding-left: 8px;
}
.ui-text-input .postfix {
        padding-right: 1px;
    color: #21363a;
    
}

select:hover,
.textbox:focus,
.textbox:hover {
    border-color: #129FC6;
}

.fw>.textbox ,
.fw>input 
{
    width: 100%;
    max-width: 100%;
}

.code>.textbox {
    font-family: courier;
    font-size: 13px;
    text-align: left;
    direction: ltr;
}

.textbox:focus {
    border: solid 1px #129FC6;    
    background: rgba(236, 249, 253, 1);
}





/****** topMenu hr-menu uimenu topmenu ********/

/*all levels*/
.hr-menu{ display: block;width: 100%;z-index: 999}
.hr-menu .sub-menu {
    position: absolute;
    border: 1px solid gray;
    white-space: nowrap;
    background: white;
    padding: 4px;
}
.menu-item{ display: block;position: relative;}
.hr-menu .sub-menu { display: none;z-index: 999}
.hr-menu .menu-item:hover>.sub-menu {display: block}
.hr-menu .menu-item:hover{background: gray}


/*level 1: main items*/
.hr-menu>.menu-item {
    position: relative;
    display: inline-block;
    /*float: right;*/
    padding: 5px;
    cursor: pointer;
    margin-left: 2px;
    padding: 5px 1px;
}
.hr-menu>.menu-item>span>.icon {
    width: 20px;
    height: 30px;
    margin-left: 7px;
    margin-bottom: -10px;
    padding-bottom: 4px;
    line-height: 3px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    margin-bottom: -4px;
}
.hr-menu>.menu-item:before {
    content: "";
    width: 2px;
    height: 100%;
    background-color:gray;
    position: absolute;
    left: -2px;
    top: 0;
}


/*level 2*/
.hr-menu>.menu-item>.sub-menu {
    right: 0;
    top: 25px;

}





/*level 3*/
.hr-menu>.menu-item>.sub-menu>.menu-item>.sub-menu {
    right:50px;
    top: 0;
}




/********* [customize base menu] *******/
.hr-menu {
     color: white;font-family: nassim;font-size: 15px;
     min-height: 20px;
    padding-right: 4px;
}
.hr-menu .sub-menu {    
    background-color: rgba(55, 67, 91, 0.96);
    border-radius: 0 0 7px 7px;
    min-width: 220px;

}
    .hr-menu.collapse-all .menu-item .sub-menu{
        display: none;
    }

    .hr-menu .menu-item:focus {
        outline: none;
    }


/*level 1*/
.hr-menu>.menu-item:hover {
    background: #405585;
    background: linear-gradient(to bottom,#607ec3 0,#2c3a60 100%);
    transition: none;
    box-shadow: inset 0 3px 7px #2d3c5c;
    
}
    .hr-menu>.menu-item:before{
        width: 1px;
        left: -1px;
        border-right: 1px solid #424d67;
        background-color: #1f293f;
    }


    .hr-menu > .menu-item.home > span > .icon {
        width: 20px;
        height: 30px;
        margin-bottom: -12px;
    }

    .hr-menu > .menu-item {
        margin-left: 0px;
    box-sizing: border-box;
    height: 100%;
    line-height: 14px;
    margin-top: 0;
    height: 49px;
    }
        .hr-menu > .menu-item > .topic {
            display: inline-block;
            padding: 13px 15px 5px 16px;
        }
/*level 2*/
.hr-menu>.menu-item .sub-menu {
        background-color: rgba(48, 62, 88, 0.96);
    border-radius: 0 0 7px 7px;
    min-width: 220px;
    padding: 6px 0;
    font-family: tahoma;
    font-size: 12px;
    color: #dce6fc;
    top: 49px;
    border: none; 
}
.hr-menu>.menu-item .sub-menu .bulk {
    float: left;
        margin-top: -2px;
}
    
    .hr-menu > .menu-item > .sub-menu  .menu-item:hover {
            background-color: #2c3752;
            color: #ff8a00;
            color: #fdf9c7;
    }

.hr-menu>.menu-item>.sub-menu .menu-item {
    padding: 0;
    border-bottom: 1px solid rgba(50, 58, 78, 0.89);
}
    .hr-menu > .menu-item > .sub-menu .menu-item > .topic {
        
        /*padding: 7px 10px 10px 3px;*/
        padding: 8px 11px 11px 3px;
        width: 100%;
        display: block;
    }


.hr-menu>.menu-item>.sub-menu>.menu-item .icon {
    margin-left: 7px;
}
/*level 3*/
.hr-menu>.menu-item>.sub-menu>.menu-item>.sub-menu {
    border-radius: 7px;
    right:180px;
    top: -10px;
}

/*colors textcolors*/
.red{ color: red;}
.green{ color: green;}
.vilot{ color: #8902ff;}
.orange{ color: #d06b00;}
.aqua{ color: #00988b;}
.gray{color: gray}
/*.blue{color: #046890;   }*/


/*menu bulk*/
.hr-menu .bulk {
   padding: 3px 7px 3px 4px;
    background-color: gray;
    text-align: center;
    font-family: tahoma;
    font-size: 11px;
    display: inline-block;
    margin-right: 4px;
    border-radius: 4px;
    min-width: 20px;
    margin-top: -6px;
}

.bulk.red {
    background-color: red;
    color: white;
}



.menu-item.about:before {
    display: none;
}

.menu-item.about {
    float: left;
    direction: ltr;
    padding: 5px 0;
    min-height: 2px;
    margin: 0;
    left: 3px;
    font-family: verdana;
    color: #ffffffba;
    font-style: italic;
    font-size: 14px;
}
.menu-item.about>.topic {
    padding-left: 0px;
}
.hr-menu > .menu-item.about > span > .icon {
    width: 29px;
    height: 27px;
    margin-bottom: -7px;
}
    .menu-item.about .title {
       
    }


/*side*/
.menu-item.side {
    float: left;
    margin-left: 2px;
}
.menu-item.side.first {
    margin-left: 8px;
}
.hr-menu>.menu-item.side .sub-menu {
    right: auto;
    left: 0;
}

/********* [end menu] *******/







/*uistickmessage  stick-message*/
.stick-message {
  padding: 4px 8px;
    border-radius: 5px;
    margin-bottom: 5px;
    background-color: rgba(199, 245, 127, 0.15);
    border-width: 1px;
    border-style: solid;    
}



.stick-message.error {
    border-color: red;
    color: #480101;
    background: rgba(255, 136, 136, 0.15);
}

.stick-message.success {
    border: 1px solid #059422;
    background: rgba(51, 202, 71, 0.15);
}


    .stick-message.info {
        border-color: #1a95bd;
    background: #dceff5;
    }
.stick-message.orange,
.stick-message.warning {
    border-color: #ff9100;
    color: #0a0000;
    background: rgba(245, 182, 0, 0.83);
}



/*table css uitable*/
.table {
    width: 100%;
    border-collapse: separate;
    border-collapse: collapse;
    border-spacing: 1px;
    direction: rtl;
}

.table th {
    background: #526d9a;
    background: linear-gradient(to bottom,#526d9a 0,#374f76 100%);
    /*border: 1px solid #9babc4;*/
    border: 1px solid #9babc473;
    color: #fff;
    text-align: center;
    height: 44px;
    font-weight: normal;
    vertical-align: middle;
}

.table tr {
    min-height: 27px;
    text-indent: 0;
    color: #162134;
}
.table tr:nth-child(odd) {
    background-color: #f7f9fb;
}
.table tr:nth-child(even) {
    background-color: #d5e2ec;
}
.table td {
    padding: 4px 8px;
}

.table tr:hover {    
    background: #fcf0be;
    background: linear-gradient(to bottom,#FCF0BE 0,#FCE184 100%);
}
.table tr.selected {
    background: rgba(255, 197, 0, 1);
    color: rgba(0, 0, 0, 0.82);
}

/*table sort*/
th.has-sort {
    cursor: pointer;
}


th .sort-indicator.des,
th .sort-indicator {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px;
    border-color: transparent;
    margin-left: 2px;
}
th .sort-indicator {
    border-top-width: 0;
    border-bottom-color: #fbdc00;
}

th .sort-indicator.des {
    border-bottom-width: 0;
    border-top-color: #fbdc00;
}


/*tableprint*/
.table.print {border: 1px solid black;border-collapse: collapse}
.table.print tr:hover { background: #dedede;}
.table.print td{border: 1px solid #b3b3b3;}
.table.print th {
    height: 34px;
    color: black;background: white;
        background: #efefef;
    border: 1px solid #afafaf;
}


.table.print tr
{ background: white;}
.table.print td {
    padding: 3px 4px;
}

/*fullloading uifullloading*/
.full-loading {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    vertical-align: middle;
    /*background: rgba(255, 255, 255, 0.25);*/
    z-index: 99;
    padding-top: 23px;
    color: white;
    direction: ltr;
    cursor: wait;
    background-image: url('img/bar-loading.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 286px;
}


/*uicontextmenu*/ 
.contex-menu-bc {
    position: fixed;
    left: 0;
    right: 0;top: 0;bottom: 0;
    /*background-color: rgba(0, 0, 0, 0.29);*/
    cursor: wait;
    z-index: 999998;
}

.contex-menu-bc:hover {    
}

.contex-menu-wrapper {
    position: absolute;
    display: block;
    padding: 20px;    
    cursor: default;
    -background-color: rgba(255, 255, 255, .5);
    overflow: hidden;
    
}

.contex-menu-body:focus {
    outline: none;
    
}

.contex-menu-body {
    display: block;
    cursor: default;
    background-color: white;
    border-radius: 4px 0 4px 0px;
    box-shadow: 4px 4px 1px rgba(25, 0, 0, 0.4);
    min-width: 10px;
    min-height: 50px;
    /*border: 1px solid #7b888a;*/
}


/*verticlamenu*/
.vertical-menu {
    display: block;
    position: relative;
    /*padding: 4px 0;*/
    min-width: 140px;
}

.vertical-menu>.menu-item>.icon {
        width: 18px;
    height: 18px;
    margin-bottom: -6px;
}
.vertical-menu>.menu-item {
    padding: 5px 10px 7px 9px;
    cursor: pointer;
    line-height: 21px;
    transition: all 0.2s;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
}


.vertical-menu>.menu-item:hover {
   background: #d8dbdc;
   background: linear-gradient(to top,#FFF 0,#D8D8D8 1%,#FFF 100%);
   border-top: 1px solid #607c8c;
    border-bottom: 1px solid #607c8c;
}

.vertical-menu>.menu-item .title {
    padding-right: 3px;
}





/*dialog-view uidialog dialogview view dialog*/
.dialog-view {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.56);
    background: rgba(0, 8, 11, 0.7);
    z-index: 18;
    overflow: auto;
    direction: ltr;
}

.dialog-window {
    position: absolute;
    top: 130px;
    width: 700px;
    box-sizing: border-box;
    box-shadow: 1px 5px 18px rgba(0, 0, 0, 0.53);
    animation: fade 1s;
    -webkit-animation: fade .5s;
    direction: rtl;
    margin-bottom: 42px;
    max-width: 100%;
}
.dialog-title {
    margin: 0 auto;
    padding: 1px 15px;
    border: 1px solid #d3d5dd;
    border-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #f7f7f9;
    background: linear-gradient(to bottom,#f7f7f9 0,#edeef2 100%);
    font: normal bold 16px/1.8 Nassim,Arial;
    color: #5a6575;
    color: #3A414C;
    text-shadow: 0 1px 0 #fff;
    box-shadow: inset 0 0 0 1px #fff;
    min-height: 31px;
    box-sizing: border-box;
    padding-top: 4px;
    color: rgb(7, 17, 100);
    overflow: hidden;
    height: 37px;
    cursor: move;
}


.dialog-close-button {
    width: 16px;
    height: 16px;
    position: absolute;
    left: 8px;
    top: 11px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(/c/icon/dialog-close.png);
    opacity: 0.15;
    cursor: pointer;
    transition: all .3s;
}
.dialog-close-button:hover {
    background-image: url(/c/icon/dialog-close-hover.png);
    opacity:.8;
}


.dialog-body {
    margin: 0 auto;
    border: 1px solid #d3d5dd;
    background-color: #f9fbfd;
    border-top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: inset 0 0 0 1px #fff;
    position: relative;
    padding-bottom: 6px;
    min-height: 20px;
    padding: 8px 8px 6px 8px;
}

.dialog-buttons {
    padding: 7px 2px 3px;
}



/*uiselect dropdown*/
.fw >.dropdown {
    width: 100%;
}
.select, .dropdown {
    margin: 0;
    padding: 4px;
    background-color: #fff;
    border: 1px solid #cfcfcf;
    font: normal 11px/1.2 Tahoma;
    color: #535353;
    color: #242424;
    width: 180px;
    background: #fff;
    background: linear-gradient(to bottom,#ffffff 0,#f1f1f1 1%,#ffffff 100%);
    border-radius: 3px;
    box-shadow: 0 1px 3px 0 #ccc;
    cursor: pointer;
}

select.dropdown:focus {
   outline: none;
    border: 1px solid #129FC6;
    background: rgb(225, 235, 239);
    background: rgba(236, 249, 253, 1);
}


/*accessdeny*/
.access-deny-bc:after {
    content: "Sorry!Access Denied.Please Try Again."
}

.access-deny-bc {
    background-color: red;
    font-size: 30px;
    text-align: center;
    padding-top: 30%;
    display: block;
    position: fixed;
    top: 0;right: 0;bottom: 0;left: 0;

}

/*uilogin viewlogin loginview*/
.login-bc {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #6e788c;
    z-index: 99;
    background-position: center center;
    background-size: cover;
    background-image: url('/c/core/img/login-bc.jpg')
}

.login-bc .version {
    position: absolute;
    left: 10px;
    bottom: 10px;
    color: white;
    padding: 5px 12px;
    background: #0000004d;
    border-radius: 7px;
}


.login-panel {
    width: 552px;
    min-height: 312px;
    border-radius: 16px;
    background-clip: padding-box;
    background-color: rgba(14, 36, 76, 0.69);
    box-shadow: 3px 4px 3px rgba(0,0,0,.36);
    top: 40%;
    position: relative;
    margin: -156px auto 0 auto;
    border: 1px solid rgb(14, 66, 153);
    direction: ltr;
    max-width: 100%;
    padding-bottom: 28px;
}

.login-panel>.logo {
    background-image: url('/c/core/img/login-logo.png');
    width: 70px;
    height: 70px;
    position: absolute;
    left: -1px;
    top: 0px;    
    background-size: contain;
}


.login-copyright {
    position: absolute;
    text-align: center;
    color: white;
    bottom: -60px;
    background: #02182dbd;
    border-radius: 0 0 8px 8px;
    padding: 7px;
    box-sizing: border-box;
    left: 14%;
    right: 14%;
    border: 1px solid #0e4299d4;
    border-top: none;
    height: 60px;
    overflow: hidden;
    z-index: -1;
}
    .login-copyright a,
    .login-copyright a:visited
     {
        color: yellow;
        text-decoration: none;
    }


.login-copyright .logo {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 30px;
    height: 30px;
    /*background-image: url('/c/khtrans/icon/icarvand-bw.png');*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .8;
    transition: all .3s;

}
.login-copyright:hover .logo {
    opacity: 1;
    /*background-image: url('/c/khtrans/icon/icarvand.png');*/
    
}

   .login-panel > .controls {
    position: relative;
    color: #fff;
    font-family: "Arial";
    font-size: 15px;
    margin: 0 auto;
    width: 371px;
    max-width: 86%;
    padding: 0;
}


.login-panel .controls *:focus {
    outline: none;
}

.login-panel .controls .title {
    background-image: url(/c/core/img/login-title.png);
    width: 100%;
    height: 32px;
    top: 20px;
    background-repeat: no-repeat;
    margin-bottom: 55px;
}


.login-panel .controls .question-title:after {    
    content: "Please enter your user and password : ";
}

.login-panel .controls>.item {
    position: relative;
    display: block;
    max-width: 100%;
}

.login-panel .controls .username,
.login-panel .controls .password {
    width: 100%;
    margin-top: 17px;
    height: 37px;
    border-radius: 3px;
    background-clip: padding-box;
    background-color: rgba(255,255,255,.83);
    border: 0px solid transparent;
    position: relative;
    left: 0;
    padding-left: 45px;
    font-family: verdana;
    font-weight: bold;
    font-size: 14px;
    padding-top: 2px;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url('img/login-username.png')
}
.login-bc .calls {
    z-index: 40000;
    color: #eeff06;
    text-align: left;
    padding: 4px;
    position: fixed;
    width: 100%;
}
.login-panel .controls .password {        
    background-image: url('img/login-password.png')
}
.login-panel .controls .buttons {
    margin-top: 20px;
    text-align: left;
}
    .login-panel .controls .login-button:hover {
        color: white;
    }
    .login-panel .controls .login-button {
    min-width: 112px;
    border-radius: 4px;
    background-clip: padding-box;
    background-color: #fc9403;
    color: black;
    font-family: "verdana";
    font-size: 15.5px;
    text-align: center;
    padding-top: 2px;
    border: 0px;
    cursor: pointer;
    display: inline-block;
    padding: 2px 23px 2px 23px;
    margin-right: 5px;
    margin-top: 0;
        transition: all .7s;
}

        .login-panel .controls .login-button.login:hover {background-color: #02ad05;}
        .login-panel .controls .login-button.login:after {content: "Login"}
        .login-panel .controls .login-button.forget {background-color: rgba(168, 168, 168, 0.51);}
        .login-panel .controls .login-button.forget:after {content: "Forget Password"}
        .login-panel.loading .controls .login-button,
        .login-panel.loading .controls .login-button:hover
        {background-color: rgba(168, 168, 168, 0.51);color: rgba(0,0,0,.8);cursor: wait}

@media only screen and (max-width : 500px) {
    .login-panel > .logo {
        width: 70px;
        height: 70px;
        position: absolute;
        left: 50%;
        margin-left: -35px;
        top: -35px;
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 999;
    }
    .login-panel > .controls {
        margin-top: 26px;
    }
    .login-panel .controls .login-button.forget {
        background: none;
    color: rgba(255, 255, 255, 0.38);
    }
    .login-panel .controls .title {
    margin-bottom: 36px;
}
}

body.disconnected,
body.logout {
    background: #404040;
    /*transition: all 1s;*/
}
body.disconnected .gray-on-dc,
body.logout .gray-on-dc{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);    
}



.logout-bc {
    position: fixed;
    left: 0;top: 0;right: 0;bottom: 0;
    z-index: 99999;
    cursor: wait;
}



/*uistreamviewer uistream frame*/
.ui-stream-viewer{ display: block;}

.ui-stream-viewer .frame {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #d3d5dd;
    border-radius: 4px;
    margin-bottom: 1px;
    min-height: 16px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}



/*uicheck checkbox*/
.check-box:focus {
    outline: none;
    color: gray;
}
.check-box .tick {
    width: 13px;
    height: 13px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(/c/icon/checkbox.png);
    display: inline-block;
    -transition: all .3s;
    margin-left: 4px;
    margin-bottom: -3px;
    
}
.check-box.readonly{
    cursor: pointer;
}

.check-box.checked .tick {
    background-position: 0 0;
    background-image: url(/c/icon/checked.png);
}
.check-box.checked {
    color: black;
}


.check-box.checked > .icon {opacity: 1 }
.check-box>.icon {
    opacity: .4;
    width: 18px;
    height: 18px;
    margin-left: 2px;
}


/*key*/
.ui-check-view.key,.ui-check.key{}
     
.ui-check-view.key>.check-box>.tick,.ui-check.key>.check-box>.tick {
    position: relative;
    background: rgba(0,0,0,.1);
    background: rgba(0, 0, 0, 0.16);
    display: inline-block;
    vertical-align: middle;
    border-radius: 14px;
    width: 25px;
    height: 15px;
    margin-right: 5px;
    top: -2px;
    transition: all .15s;
    text-align: right;
    padding-left: 7px;
    font-size: 10px;
    padding-right: 5px;
    color: white;
    line-height: 14px;
}
     .ui-check.key > .check-box.checked > .tick {
         text-align: left
     }
.ui-check.key.has-text > .check-box > .tick {
    width: 42px;
}
    .ui-check.key.has-text > .check-box > .tick:before {
        content: "OFF"
    }
.ui-check.key.has-text > .check-box.checked > .tick:before {
    content: "ON"
}
    .ui-check-view.key > .check-box.checked > .tick, .ui-check.key > .check-box.checked > .tick {
        background: #009fff;
    }

    .ui-check-view.key.green > .check-box.checked > .tick, .ui-check.key.green > .check-box.checked > .tick {
        background: #19a700;
    }
.ui-check-view.key>.check-box>.tick:after, .ui-check.key>.check-box>.tick:after {
    content: "";
    border-radius: 12px;
    position: absolute;
    top: 1px;
    right: auto;
    left: 2px;
    width: 13px;
    height: 13px;
    background: #fff;
    display: block;
    transition: left .15s;
    /*box-shadow: 0 2px 4px 0 rgba(0,0,0,.2), 0 0 1px 0 rgba(0,0,0,.21);*/
    transition: all .18s;
}
    
    .ui-check-view.key > .check-box.checked > .tick:after, .ui-check.key > .check-box.checked > .tick:after {
        left: 11px;
        
    }

.ui-check.key .check-box {color: #b7babb;}
.ui-check.key .check-box.checked {color: #0053ab;}

.ui-check.key.has-text > .check-box.checked > .tick:after {
    left: 28px;
}
/*uiprofile profile*/
.profile-place .profile-icon {
    width: 19px;height: 18px;
}



/*uitextinput uimoneyinput*/
.ui-model-select .inner-icon ,
.ui-text-input .inner-icon {
    position: absolute;
    right: 6px;
    top: 5px;
    width: 16px;
    height: 16px;
}


.ui-model-select .inner-icon:after ,
.ui-text-input .inner-icon:after {
    content: "";
    position: absolute;
    left: -6px;
    top: -1px;
    bottom: -1px;
    width: 1px;
    background: #c5c5c5;
}
input.has-inner-icon {
    padding-right: 32px;
}

td.image {
    width: 2%;
}
td.date-view {
    direction: ltr;text-align: center;
}

.ui-text-input.number-input, .ui-text-input.money-input {
    direction: rtl;
}


.ui-text-input.number-input input,.ui-text-input.money-input input{
    direction: rtl;
    text-align: center;
    /*width: 143px;*/
}

.ui-text-input.number-input .postfix,.ui-text-input.money-input .postfix{
   color: #0443a5;

   color: #0b1629;
    left: 1px;
    position: absolute;
    background: #e8e8e8;
    top: 1px;
    padding: 0 5px;
    border-right: 1px solid #d4d4d48a;
    bottom: 1px;
    display: block;
    border-radius: 4px 0 0 4px;
}


.money-view {
 color: #03629c;
    text-align: left;
    font-weight: bold;
}
.money-view.green,.money.green {color: #008405;}
.money-view.red  ,.money.red {color: #c50303;}
.money-view.pink ,.money.pink {color: #ea00c1;}

.ui-text-input.code input {
    min-height: 25px;
    font-family: courier new;
    font-size: 13px;
    font-weight: bold;
    color: #172e56;
}



/*uiluncher uicirclemenu*/
.circle-menu {
    width: 100%;
    min-height: 200px;
}

    .circle-menu .main-image {
        width: 482px;
        height: 625px;
        position: relative;
        margin: 30px auto;
        background-image: url(img/circle.png);
        background-size: contain;
        max-width: 100%;
    }



/*uivgxplayer uivideoplayer uiplayer*/
.ui-stream-player {
    background-color: black;
    color: white;
    overflow: hidden;
    position: relative;
}

.ui-stream-player .no-stream {
    color: #404040;
    text-align: center;
    position: absolute;
    top: 50%;
    width: 100%;
    font-size: 40px;
    line-height: 2px;
    font-family: courier;
    font-weight: bold;
}



/*uiprocessbar*/ 
.ui-process-bar {
    position: relative;
    font-family: tahoma;
    padding-top: 10px;
}

.ui-process-bar .process-item {
    display: block;
    text-align: center;
    height: 96px;
    position: relative;
    cursor: cell;
}

.process-item>.line {
    position: absolute;
    height: 4px;
    background-color: #b5b5b5;
    top: 32px;
   
}
.process-item > .line.line-right {
    right: 0;
    left: 50%
}
.process-item > .line.line-left {
    right: 50%;
    left: 0;
}

.process-item:first-child .line.line-right {
    display: none;
}

.process-item:last-child .line.line-left {
    display: none;
}

.process-item>.circle {
    border-radius: 50%;
    width: 65px;
    height: 65px;
    position: relative;
    display: block;
    background-color: #b5b5b5;
    text-align: center;
    margin: auto;    
}
    .process-item > .circle .label {
        font-size: 25px;
        color: white;
        line-height: 0px;
        font-weight: bold;
        display: block;
        width: 100%;
        height: 100%;
        padding-top: 29px;
        box-sizing: border-box;
    }
.process-item>.title {
    position: relative;
    font-size: 13px;
    margin-top: 5px;
    color: #054167;
    font-family: nassim;
}


.process-item.success.play>.circle,
.process-item.success.play>.line,
.process-item.success>.circle ,
.process-item.success>.line {
   background-color: #1e9a06;
    color: white;
}

.process-item.cancel>.circle, .process-item.cancel>.line {
    background-color: #ff9921;
    color: white;
}

.process-item.play>.circle ,
.process-item.play>.line {
background-color: #ff981f;
    color: white;
}



.process-bar-legends {
    direction: rtl;
 margin-right: 2px;
    margin-top: -21px;
    margin-top: -11px;
    margin-bottom: 14px;
    border-bottom: 1px solid #d3d5dd;
    padding-bottom: 7px;
    text-align: left;
}
    .process-bar-legends > .item.just-icon {
        background: white;
    padding-right: 7px;
    padding-left: 5px;
    border-color: #d0d0d0;
    }
    .process-bar-legends > .item {
        direction: rtl;
        display: inline-block;
        margin-left: 6px;
        padding: 2px 10px;
        margin-bottom: 2px;
        border-radius: 5px;
        font-size: 11px;
        padding-top: 1px;
        border-width: 1px;
        border-style: solid;
    }


    .process-bar-comment {
        padding: 4px;
    text-align: center;
    border-top: 1px solid #d3d5dd;
    margin-top: 10px;
    padding-top: 8px;
    font-size: 11px;
    }

/*uiinfolist*/
.ui-info-list {
    
}

.info-list {}
.info-list>.item {
    transition: all .3s;
    margin-bottom: 0px;
    border-radius: 5px;
    padding: 2px 4px 2px 4px;
}
.info-list>.item:hover {
    background-color: #e4e4e4;
}
.info-list>.item.sep {
    margin-top: 8px;
    margin-bottom: 6px;
    height: 1px;
        padding: 0;
    overflow: hidden;
    background-color: #cccccc;
}
.info-list>.item.sep>*{ display: none;}
.info-list>.item>.title {}
.info-list>.item>.bulk {
    float: left;
    border-radius: 5px; 
    color: #06247b;   
    display: inline-block;
    position: relative;
    width: auto;
    background: transparent;
    color: black;
    padding: auto;
    left: auto;
    font-size: 11px;
    top: auto;
    
}
.info-list>.item>.icon {}


/*pcal uidateinput*/
a.pcalBtn {
    width: 22px;
    height: 22px;
    vertical-align: bottom;
    display: inline-block;
    background-image: url(img/pcal.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;    
    left: 1px;
    bottom: 2px;
}


.fw .persian-date-handy {
    width: 100%;
}
.persian-date-handy {
    position: relative;
    min-height: 20px;
	    white-space: nowrap;
        width: 180px;
}
.persian-date-handy input {
    border: none;
    text-align: center;
    background: none;
    color: #072948;
    width: 100%;
    border: solid 1px transparent;
    padding: 6px 21px 5px 21px;
}

._3dbar {
    background: linear-gradient(to bottom,#f7f7f9 0,#edeef2 100%);
}

/*uiindexedview uiindexed*/
.ui-indexed-view {
    position: relative;
}

.ui-indexed-view .side-panel .view-header .view-title {
    font-size: 17px;
}

.ui-indexed-view>.side-panel {
    float: right;
    
}

.ui-indexed-view>.side-panel .title-region{
    padding: 4px 8px 4px 2px;
    border-bottom: 1px solid #d3d5dd;
}


.ui-indexed-view>.side-panel .title-region>.title{
    padding-right: 1px;
    font-family: yekan;
    color: rgb(10, 47, 115);
    font-size: 13px;
}


.ui-indexed-view>.side-panel .title-region>.icon{
    
}


.ui-indexed-view>.main-panel {
    float: right;
    
}


/*bulk uibulk*/
.bulk {
       display: inline-block;
    position: absolute;
    width: auto;
    background: gray;
    border-radius: 3px;
    color: white;
    padding: 2px 6px 2px 5px;
    left: 7px;
    font-size: 11px;
    top: 4px;
    background: #7e8ca7;
}

.bulk.green {
    background: #81af09;
}

.bulk.red {
    background: #c60c0f;
}

.bulk.blue {
    background: #50a5ec;
}

.bulk.yellolw,
.bulk.orange {
    background: #f08a03;
}

.bulk.gray {
    background: #7e8ca7;
}



/*side-menu-items sidemenuitems*/
.side-menu-items {
    position: relative;
    padding: 3px 2px;
}

    .side-menu-items.tight > .item {
            padding: 1px 1px 0px 0;
        margin: 0;

    }
.side-menu-items>.item {
    padding: 4px 2px 7px 0;
    cursor: pointer;
    margin-bottom: 1px;
    position: relative;
    /*width: 100%;*/
    /* height: 31px; */
    /*border-right: 4px solid transparent;*/
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: all .38s;
    border-radius: 4px;
    padding-right: 3px;
}

.side-menu-items>.item:nth-child(odd) {
    /*background-color: rgb(231, 237, 243);*/
}

   .side-menu-items > .item:hover {
    /*color: #ffffff;
    background-color: rgb(77, 100, 152);
    background-color: rgb(64, 103, 142);
    background-color: rgb(69, 172, 193);
    background-color: rgb(153, 186, 210);*/
       transition: all 0s;
        background-color: #6297bd2e;
        color: black;
    /*:)*/
}

   /*sep*/
    .side-menu-items > .item.sep {
     border-top: 1px solid #d5d7e0;
    border-radius: 0;
    margin-bottom: 10px;
    height: 0px;
    min-height: 0;
    border-bottom: 1px solid #e4e4e4;
    overflow: hidden;
    margin-top: 8px;
    max-height: 0;
    line-height: 0;
    padding: 0;
    cursor: default;
    }

    .side-menu-items > .item.active:hover,
    .side-menu-items > .item.active     
    {
        color: black;
    background-color: #d9e4ec;
    /*border-bottom: 1px solid #9badd6;
    border-top: 1px solid #9badd6;
    border-right: 3px solid #9daed6;*/
    
    border: 1px solid #9badd6;
    border-top: 1px solid #9badd6;
    
    }
    .side-menu-items > .item.active:hover
     {
        color: black;
    }

    .side-menu-items > .item > .bulk {
        display: inline-block;
    position: absolute;
    width: auto;
    left: 7px;
    top: 4px;
    
    }
    .side-menu-items.normal-icon > .item > .icon {
        width: 16px;
        height: 16px;
        margin-left: 5px;
    }
    .side-menu-items > .item > .icon {
        width: 18px;
        height: 18px;
        margin-left: 9px;
    }

    .side-menu-items.sub-items {
        display: none;
       margin-right: 16px;
    border-right: 1px solid #d3d5dd;
    padding-right: 12px;
    margin-bottom: 12px;
    }


/*uicollection collection*/


.collection-main-panel>.light-group,
.collection-view-panel>.light-group,
.collection-side-panel>.light-group{
    width: 100%;
    min-height: 100px;
    min-height: 75px;
}


.collection-side-panel {
    padding-left: 4px;
    float: right;
    width: 22%;
}

.collection-view-panel {
    padding-right: 4px;
    float: left;
    width: 18%;
}


.collection-main-panel {
    float: right;
    width: 60%;
}

/*emptyresult*/
.collection-main-panel .empty-result {
    text-align: center;
    padding: 29px;
}
.collection-main-panel .empty-result>.info {
    padding: 6px;
    color: gray;
} 


.icon.remove {
    background-image: url('/c/icon/chrome-delete.png');
    cursor: pointer;
}

.icon.search {
    background-image: url('/c/icon/search-1.png');    
}

.icon.remove:hover {
    background-image: url('/c/icon/chrome-delete-hover.png');
}
     

/*toolbar*/

.toolbar.flex {
    display: flex;
    justify-content: space-between;
    direction:rtl;
}

.toolbar._3dbar {
    border-radius: 5px 5px 0 0;
    /*overflow: hidden;*/
}

.toolbar>.toolbar-item {
float: right;
    width: 100%;
    max-width: 328px;
    text-align: center;
    white-space: nowrap;
    position: relative;
}

.toolbar-menu-item:hover {
    background-color: #e8ebec;
    background-color: #a6cfff63;
    border-bottom: 2px solid #3494d8;
    
}

.main-panel:hover .toolbar .toolbar-menu-item {
    opacity: 1;
}


.toolbar:hover .toolbar-menu-item {
    opacity: 1;
}

.toolbar-item .toolbar-menu-item:hover .submenu {
    opacity: 1;
    visibility: visible;
}
.toolbar-item .toolbar-menu-item .submenu {
   position: absolute;
    min-width: 100%;
    right: 0;
    top: 39px;
    white-space: nowrap;
    border: 1px solid #4c6692;
    background-color: white;
    border-radius: 0 0 6px 6px;
    transition: all .3s;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

.toolbar-menu-item {
    min-height: 39px;
    height: 100%;
    padding-right: 11px;
    padding-left: 11px;    
    cursor: pointer;
    padding-top: 11px;
    position: relative;
    opacity: 0;
    transition: opacity .3s;
    position: relative;
}


.collection-side-panel .toolbar-menu-item {
    display: block;
    opacity: 1;
    text-align: right;
    padding-top: 6px;
}

    
.collection-side-panel .toolbar-menu-item>.icon {
    width: 16px;
    height: 16px;
        margin-bottom: -6px;
    opacity: .7;
}
.collection-side-panel .toolbar-menu-item:hover>.title,
.collection-side-panel .toolbar-menu-item>.title {
    display: inline-block;
    opacity: 1;
    text-align: right;
    background: transparent;
    position: relative;
    top: 0;
}

.toolbar-menu-item:hover>.title {
    top: -25px;
    opacity: 1;
}

.toolbar-menu-item > .title {
     display: block;
    white-space: nowrap;
    position: absolute;
    top: -15px;
    opacity: 0;
    color: #375394;
    transition: all .3s;
    text-align: center;
    width: 100%;
    right: 0;
    background: #ffffffe8;
    padding: 2px 6px;
    border-radius: 3px 3px 0 0;
    background-color: #b0d2fb;
}

.toolbar-menu-item .icon {
    width: 19px;
    height: 19px;
    /*-webkit-filter: grayscale(100%); 
    filter: grayscale(100%);*/
    transition: all .5s;    
}


     

.toolbar-item.input {
    padding:8px 7px 0 0;
}

.collection-main-panel:hover .toolbar-menu-item {
    opacity: 1;   
}


/*searchbar*/
.search-bar {
    position: relative;
    display: inline-block;
}
.search-bar input {
    font-family: tahoma;
    padding: 5px;
    margin: 0;
    color: #535353;    
    border: 1px solid #d4d4d4;
    border: 1px solid transparent;
    border-radius: 7px;
    font: normal 11px/1.2 Tahoma;
    outline: 0;
    width: 260px;    
    padding-right: 25px;
    padding-left: 22px;
    background: transparent;
}


    
.search-bar .icon.search {
   position: absolute;
    right: 4px;
    top: 5px;
}
.search-bar .input-region {
    display: inline-block;
    position: relative;
}

    
    .search-bar .input-region:focus:after,
    .search-bar:hover .input-region:after {
        left: 0;
        right: 0;
    }



.search-bar .input-region:after {
    content: "";
    position: absolute;
    bottom: -6px;
    background-color: #22babf;
    left: 50%;
    right: 50%;
    height: 2px;
    background-color: #03A9F4;
    transition: all .3s;
}



    .search-bar:hover .icon.remove {
        display: block;
    }
.search-bar .icon.remove {
    position: absolute;
    left: 0px;
    top: 5px;
    margin: 0;
    width: 18px;
    height: 18px;
    display: none;
}


.search-bar .action-button {display: inline-block;
    color: #525284;
    cursor: pointer;
    padding: 0px 9px;
    border-radius: 4px;
    background: #e6e6e6;    
}


.search-bar .action-button:hover {
   background-color: #16aae0;
   color: white;
}




/*querymessages*/
.query-messages {
  border: 1px solid #d3d5dd;
    margin-top: 3px;
    margin-bottom: -3px;
    border-radius: 5px 5px 0 0;
    padding: 4px 3px;
    padding-bottom: 4px;
    border-bottom: none;
}
.query-messages .item{ display: inline-block;
    display: inline-block;
    border: 1px solid #e29404;
    border-radius: 4px;
    padding: 1px 9px 0px 0;
    margin: 0 0 0px 3px;
    background: #ffe3a2;
    margin-bottom: 3px;
    font-size: 11px;
    /* background: #f7e5cd; */
}
.query-messages .item>.prefix{}
.query-messages .item>.prefix:after{content: " :"}
.query-messages .item>.title{}
.query-messages .item>.remove.icon {
    margin-right: -3px;
    visibility: hidden
}
.query-messages .item:hover>.remove.icon {visibility: visible}




/*menuitems listmenuitems*/
.menu-items {
    position: relative;
    padding: 3px 2px;
}
   
.menu-items>.item {
    padding: 3px 2px 5px 0;
    cursor: pointer;
    margin-bottom: 0px;
    position: relative;
    border: 1px solid transparent;
    box-sizing: border-box;    
    border-radius: 0px;
    text-align: right;
    padding-right: 7px;
    padding-left: 7px;
    white-space: nowrap;
    }

    .menu-items > .item:hover {
        background-color: #6297bd2e;
        color: black;
    }

    .menu-items > .item.active:hover,
    .menu-items > .item.active {
        color: black;
        background-color: #d9e4ec;
        border: 1px solid #9badd6;
        transition: all .38s;
    }
    .menu-items > .item.active:hover
     {
        color: black;
    }

    .menu-items > .item > .bulk {
        display: inline-block;
        position: absolute;
        width: auto;
        left: 7px;
        top: 4px;
    }
    
    .side-menu-items > .item > .icon {
       width: 16px;
        height: 16px;
        margin-left: 5px;
    }

.menu-items.sub-items {
    display: none;
    margin-right: 16px;
    border-right: 1px solid #d3d5dd;
    padding-right: 12px;
    margin-bottom: 12px;

}


/*filteritems*/
.filter-summary {
  color: #324858;
    padding: 4px;
    background: white;
    margin-top: 5px;
    min-height: auto;    
}



/*thicon thstyles*/

th.th-icon{ width: 1.6%;}
th.th-date{ direction: ltr;text-align: center;white-space: nowrap;}
td.td-date{text-align: center;direction: ltr;white-space: nowrap;}
th.td-index,td.td-index,th.min{width: .1%}

.item-date-fix span.title {
    display: inline;
    direction: ltr;
}

/*dateandtime*/
.fw>.date-and-time {
    width: 100%;
}
.date-and-time {
    white-space: nowrap;
    position: relative;
    max-width: 100%;
    width: 231px;
    width: 188px;
}

.date-and-time>.date-input {
   padding-left: 133px;
   padding-left: 113px;
    position: relative;
    text-align: right;
}


    .date-and-time > .date-input .pcalBtn{
        position: relative;
    display: inline-block;
    margin-right: 1px;
    margin-bottom: 1px;
        
    }
    .date-and-time > .date-input input {
        width: 100%;
    }
.date-and-time>.time-input {
    width: 100px;
    width: 77px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    text-align: right;

}
    .date-and-time > .time-input input{
       width: 45px;
    text-align: center;

    }

.date-and-time>.time-input .icon {
  background-image: url(/c/icon/time.png);
    width: 19px;
    height: 19px;
    margin-bottom: -6px;
    margin-right: 2px;
}


.ml>.date-and-time {}
.ml>.date-and-time>.date-input {
    display: block;
    position: relative;
    width: 100%;
    padding-left: 22px;
}
.ml>.date-and-time>.time-input input{width: 100%;}
.ml>.date-and-time>.time-input {
    display: block;
    position: relative;
    width: 100%;
    padding-left: 22px;
    margin-top: 3px;
}


div.date-and-time input.textbox:focus,
div.date-and-time input.textbox:hover {
        border-color: #129FC6;
        border-color: #129fc666;
}
div.date-and-time input.textbox {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
    border-bottom: 1px solid #6ebfd8;
}



/*uiprogressbar*/
.progress-bar.no-label {
    padding-left: 0;
}
.progress-bar {
    position: relative;
    width: 100%;
    padding-left: 49px;
    padding-top: 2px;
}
.progress-bar>.label {
    position: absolute;
    left: 0;
    text-align: left;
   
    line-height: 17px;
}
.progress-bar>.bar-wrapper {
border: 1px solid #cfcfd2;
   border: 1px solid #138fc1;
    height: 18px;
    border-radius: 4px;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #ecf2f5;
}
.progress-bar>.bar-wrapper .bar-empty{}
.progress-bar>.bar-wrapper .bar-full {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(153,218,255,1) 0%, rgba(10,149,204,1) 77%, rgba(10,149,204,1) 100%); 
}


.progress-bar > .bar-wrapper .bar-red {
        background: linear-gradient(180deg, rgb(255, 225, 229) 0%, rgb(224, 1, 1) 77%, rgb(210, 4, 4) 100%);
        /* background: red; */
        z-index: 6;
    }


        .progress-bar>.bar-wrapper .bar-text {
    position: absolute;
    left: 0;
    top: 0px;
    right: 0;
    text-align: center;
    line-height: 15px;
    color: #064965;
    color: #010b0e;
    font-size: 10px;
}


.progress-bar.disable >.bar-wrapper{border: 1px solid #cfcfd2;}
.progress-bar.disable >.bar-wrapper .bar-full{display: none}
.progress-bar.disable >.bar-wrapper .bar-text{color: #777777;}



/*uinumberplay*/
.fw.number-play {
    width: 100%;
    max-width: 100%;
}
.number-play {
    width: 100%;
        max-width: 138px;
    padding: 0px;
    position: absolute;
}
.number-play>input {
    width: 100%;
    text-align: center;
    direction: ltr;
    overflow: hidden;
}

    .number-play > .minus-button:hover,
    .number-play > .plus-button:hover {
        background-color: rgba(236, 249, 253, 1);
    }
    .number-play > .minus-button,
    .number-play > .plus-button {
        position: absolute;
        width: 24px;
        top: 0px;
        border: 1px solid #d4d4d4;
        z-index: 13;
        background: white;
        bottom: 0px;
        cursor: pointer;
        background-position: center center;
        background-size: 63%;
        background-repeat: no-repeat;
        border-radius: 3px;
        opacity: 1;
        transition: all .3s;

    }
    .number-play:hover >.minus-button,
    .number-play:hover >.plus-button     
    {
        display: block;
        opacity: 1;
        
    }
     .number-play>input.textbox {
         
         border-color: #d3d5dd;
         font-weight: bold;
         color: #0964b5;
     }

.number-play>.plus-button {

    right: 0;
    background-image: url(/c/icon/plus.png);
    
}


.number-play>.minus-button {
    left: 0;
    background-image: url(/c/icon/minus.png);
}



/*uiinfofields info-fields */

.info-fields {
    position: relative;
}


.info-fields>.item {
    min-height: 31px;
    direction: rtl;
}
.info-fields>.item.hover:hover {
    color: blue;
   
}


    .info-fields > .item.as-header-group{
        padding: 4px 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid #14a4d0;
    }
    .info-fields>.item.as-header-group>.label>.title:after {
    content: "";
}
.info-fields>.item>.label {
   float: right;
    padding: 1px 3px 1px 0px;
}


.info-fields>.item>.label>.title:after{content: " : "}
.info-fields>.item>.info {
    float: right;
    
        margin-right: 5px;
}

.button.has-action {
    cursor: pointer;
   
}

.text.has-action {
    color: #0023dc;
    position: relative;

    color: #0058e0;
    position: relative;
    cursor: pointer;
}


.info-fields > .sep {
    border-top: 1px solid #d3d5dd;
    margin-top: 7px;
    height: 4px;
    overflow: hidden;
    max-height: 2px;
    min-height: 8px;
}

    .text.has-action:hover {
        /*color: red;*/
    }
    .text.has-action:hover:after {
        left: -3px;
        right: -2px;
        
    }
.text.has-action:after {
   content: "";
    position: absolute;
    height: 1px;
    left: 50%;
    right: 50%;
    bottom: -5px;
    /* background-color: #697de8; */
    border-bottom: 1px solid #7f8dd8;
    /*transition: all .2s;*/
    
}

.text>.icon {
    margin-left: 5px;
    width: 15px;
    height: 14px;
}


.text.button {
    color: #0023dc;
    position: relative;
    background: #e8e8e8;
    padding: 4px 10px 8px 10px;
    border-radius: 5px;
    color: #232323;
}
    .text.button:after {
        display: none;
    }



/*gotoppage*/
#goTopPage {
position: fixed;
    right: 20px;
    bottom: 10px;
    width: 26px;
    height: 26px;
    display: none;
    background-image: url(img/go-top.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    opacity: .6;
    transition: all .3s;
    background-color: white;
    border-radius: 51%;
    border: 1px solid white;}

#goTopPage:hover {
    opacity: 1;
}



/*uicheckgroup*/
.ui-check-group {
       margin-bottom: 19px;
}


.ui-check-group>.top {
   padding: 4px 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid #14a4d0;
}
    .ui-check-group:hover > .top > .actions {
        opacity: 1;
    }
    .ui-check-group > .top > .actions {
        color: gray;
            margin-right: 8px;
        opacity: 0;
        transition: all .3s;
    }

        .ui-check-group > .top > .actions .link:hover {
            color: rgb(176, 5, 5);
        }
    .ui-check-group > .top > .actions .link{
        cursor: pointer;
    }


    .ui-check-group > .check-boxes > .check-box {
        color: gray;
    }

.ui-check-group > .check-boxes >.check-box:hover{
    color: rgb(176, 5, 5);
    }

.ui-check-group > .check-boxes > .check-box.checked {
       color: rgb(8, 74, 222);
    }


    .ui-check-group > .expand:hover {
        background: #eaeaea;
    color: #0e0000;
    }
.ui-check-group>.expand {
   color: gray;
    border: 1px solid lightgray;
    padding: 0px 9px 4px 9px;
    display: inline-block;
    line-height: 10px;
    border-radius: 5px;
}



/*pager*/
.pager {
padding: 5px 5px 0 2px;
    position: relative;
    min-height: 22px;
    border-top: 2px solid #318fd8;
    margin-top: 6px;
}
.pager .pages {
    width: 100%;
    box-sizing: border-box;
    padding-right: 80px;
    direction: ltr;
    white-space: normal;
}

.pager .pages>.item {
    display: inline-block;
    min-width: 23px;
    height: 22px;
    margin: 0 2px;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    color: white;
    background: rgba(183, 190, 193, 0.96);
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 6px;
    padding-left: 4px;
    padding-right: 4px;
}

.pager .pages>.item:hover {
    background: rgb(209, 144, 7);
}
.pager .pages>.item.active {
    /*background: rgb(73, 125, 165);*/
    background: rgb(49, 143, 216);
}
    .pager .pages > .item.gap {
        color: #a2a2a2;
        background: transparent;
        cursor: default;
        margin: 0;
    }
.pager .pages>.item.active:hover {
    background: rgb(92, 150, 195);
}

.pager .options {
    position: absolute;
    top: 5px;
}
.pager .options select {
    color: #39466b;
    font-family: tahoma;
    font-size: 12px;
    padding: 2px 2px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    direction: rtl;
    outline: none;

    outline: none;
    box-shadow: 2px 2px 4px transparent;
    transition: all .3s;
}
    .pager .options select:hover {
        border-color: #1c87da;
        box-shadow: 2px 2px 4px #318fd8;
    }

/*uiimageview*/
.ui-image-view {
    
}

    .ui-image-view > .image.person {
        background-image: url('img/no-person-image.jpg');
        
    }
    .ui-image-view > .image {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        border: 1px solid #d3d5ddbd;
        border-radius: 6px;
        max-width: 100%;
        transition: all .3s;
        width: 100%;
        height: 100%;
        position: relative;
    }

    

    


/*uicssblock*/
.css-block {
    
    width: 15px;
    height: 15px;
    display: inline-block;
    position: relative;
    margin-bottom: -4px;
}

.css-block.circle {
    border-radius: 50%;
}

.css-block.red {background: red;}
.css-block.orange {background: #ff7800;}

/*arraybuttons*/
.array-button {
width: 23px;
    height: 23px;
    position: absolute;
    border-radius: 5px;
    background: #FFFFFF;
    padding: 0px;
    border: 1px solid #B3B3B3;
    /* box-sizing: content-box; */
    cursor: pointer;
    display: block;
    z-index: 99;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 85%;
}

.array-button.delete {
    background-image: url('/c/icon/delete.png');
}

.array-button.move {
    cursor: move;
    background-image: url('/c/icon/move-3.png');
    
}


/*uifileupload*/
.ui-file-upload {
    position: relative;
}
.upload-frame-wrapper {
    position: relative;
    display: inline-block;
}
.upload-frame-wrapper>.array-button {top: -5px;opacity: 0;z-index: 200;}
.upload-frame-wrapper:hover>.array-button {opacity: 1;}
.upload-frame-wrapper>.array-button.move {rigth: -4px;}
.upload-frame-wrapper>.array-button.delete {left: -6px;}
.upload-frame {
    position: relative;
    display: block;
    border-radius: 5px;
    border: 1px solid #D1D5E4;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    width: 211px;
    height: 156px;
}
.upload-frame.error {border-color: red;}
.upload-frame.ok {border-color: green;}
.upload-frame.no-image {
    background-image: url(img/no-image.png);
}

    .upload-frame> .top-info.allways,
    .upload-frame:hover > .top-info {
        opacity: 1;
        top: 0px;
            direction: ltr;
            line-height: 14px;
            overflow: hidden;
    max-height: 34px;
    }
.upload-frame>.top-info {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: auto;
    padding: 9px 12px 19px 9px;
    color: white;
    text-align: center;
    overflow: hidden;
    z-index: 99;
    background: linear-gradient(to bottom, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 2%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 100%);
    opacity: 0;
    transition: opacity .15s;
}



/*messageregion*/
.upload-frame.message-success {
    border-color: #37925b;
}


.upload-frame .message-region {
    text-align: right;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 99;
    padding: 5px 7px;
    line-height: 18px;
    width: 100%;
    background: #148e46;
    color: white;
    /* color: black; */
    /* background: #ffffffcf; */
    /* border-radius: 4px; */
    border-top: 1px solid #ffffff8c;
}
    .upload-frame .message-region .icon {
        background-image: url('/c/icon/ok-2.png');
    }


.upload-frame.message-error {
   border-color: #801a08;
}

.upload-frame.message-error .message-region {
    background: #d02406;
}
.upload-frame.message-error .message-region .icon {
        background-image: url('/c/icon/warning-2.png');
}

 
.upload-frame.message-info .message-region {
    background: #16aed2;
}
.upload-frame.message-info {
    border-color: #13afd4;
}
.upload-frame.message-info .message-region .icon {
    display: none;
}

.upload-frame > .actions-region {
    text-align: center;
    background: #3d548a96;
    padding: 10px 4px 6px 4px;
    opacity: 0;
    transition: opacity .15s;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101;
}



    .upload-frame:hover > .actions-region {
        opacity: 1;
    }
    .upload-frame > .actions-region .vcenter {
    }
.upload-frame > .actions-region .ui-button {
    margin-bottom: 4px;
}

.upload-frame > .actions-region .info-region{
    position: absolute;
    bottom: 0px;
    padding: 6px;
    color: #ffffffd1;
    font-size: 11px;
    cursor: cell;
}
.upload-frame > .actions-region .ui-button .button-holder {
    border: none;
        border-color: white;
        background: rgba(255, 255, 255, 1);
    }
    .upload-frame > .actions-region .ui-button:hover .button-holder {
        -border-color: #0387a2;
        background: #dff5ff;
        background: white;
        color: blue;
        -background: linear-gradient(to top,#FFF 0,#D8D8D8 0%,#FFF 100%);
    }

    .upload-frame:hover > .size {
       background: #0e0e0e8f;
    color: white;
    }
.upload-frame>.size {
    position: absolute;
    padding: 0;
    left: 4px;
    bottom: 4px;
    display: block;
    text-align: left;
    direction: ltr;
    text-transform: uppercase;
    color: #ffffffc7;
    font-size: 10px;
    opacity: 1;
    padding: 2px 5px;
    border-radius: 5px;
    line-height: 15px;
    z-index: 105;
}


/*drag*/
.upload-frame>.drag-bc{ display: none;}
.upload-frame-wrapper.drag> .array-button {display: none;}
.upload-frame-wrapper.drag > .upload-frame {
    border: 2px dashed #2da9f9;
}
.upload-frame-wrapper.drag>.upload-frame>.drag-bc {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    /* background-color: #3399d9; */
    background: #87cbf7 url(/c/icon/upload-3.png) no-repeat center center;
    background-size: 40%;
    opacity: .94;
    
    }

.upload-frame-wrapper.drag.deny > .upload-frame {
    border: 2px dashed red;
}
.upload-frame-wrapper.drag.deny>.upload-frame>.drag-bc {
    background: #f99797 url(/c/icon/deny.png) no-repeat center center;
    background-size: 38%;
    cursor: not-allowed;
    
    }



/*uploading*/

.upload-frame-wrapper:hover .uploading {
    
}
.uploading {
   position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.66);
    text-align: center;
    padding: 4px 0px 9px 0px;
    cursor: wait;
}

.uploading .label {
    margin-bottom:5px;
}
    .uploading .percent {
            color: #077707;
        font-weight: bold;
    }

        .uploading .upload-size {
        color: #737373;
    text-align: center;
    padding: 0px;
    margin-top: 6px;
    direction: ltr;
    font-size: 10px;
    }
.uploading .progress {
    width: 100%;
    height: 3px;
    background: #cacaca;
    position: relative;
}


.uploading .progress .fill{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: #1a7faf;
}


/*hoveractive*/
.hover-actived{ visibility: hidden;}
.hover-active:hover>.hover-actived{ visibility: visible;}


/*uimodelselect*/
.ui-model-select {
    position: relative;
    width: 250px;
    max-width: 100%;
    min-height: 26px;
    width: 181px;
}
.ui-model-select.same-text-box {
    width: 180px;
}

.ui-model-select.same-text-box>main-box {
    border: 1px solid #cfcfcf;
}
.ui-model-select.same-text-box>main-box:focus {
    border: 1px solid #cfcfcf;
    background: rgba(236, 249, 253, 1);
}

.ui-model-select.same-text-box>.main-box:hover {
    border-color: #129FC6;
}

.ui-model-select.fw {
    width: 100%;
}
.ui-model-select:hover .inner-buttons .hover-actived {
    visibility: visible;
}

.ui-model-select>.main-box {
    padding: 1px 3px 1px 1px;
    width: 100%;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    position: relative;
    min-height: 26px;
    min-height: 28px;
}

.ui-model-select >.main-box:focus {border-color: #d3d5dd;}
.ui-model-select>.main-box.has-focus,.ui-model-select>.main-box:hover 
{border-color: #129FC6;}
.ui-model-select>.main-box.has-inner-icon { padding-right: 30px; }
.ui-model-select.multi-select>.main-box.has-inner-icon {padding-right: 28px;}
.ui-model-select>.main-box>input {
    padding: 1px 2px 3px 0px;
    margin: 0;
    border: 0;
    font: normal 11px/1.2 Tahoma;
    outline: 0;
    cursor: cell;
    color: #333333;
    width: 100%;
    background: transparent;
    caret-color: #0295ab;
    min-height: 20px;



    /*new*/
    padding: 0px 3px 2px 0px;
    margin: 0;
    border: 0;
    font: normal 11px/1.2 Tahoma;
    outline: 0;
    cursor: cell;
    color: #333333;
    width: 100%;
    background: transparent;
    caret-color: #0295ab;
    min-height: 19px;
}
.ui-model-select.multi-select>.main-box>input {
    padding-right: 5px;
    /* background: #0998c51c; */
    width: 80px;
    margin-top: 0px;
    padding-top: 3px;
    margin-bottom: 0px;
    height: 24px;
    /*height: 26px;*/

}
    /*.ui-model-select.multi-select > .main-box.has-focus > input {display: inline-block}*/
    /*.ui-model-select.multi-select:hover > .main-box > input {display: inline-block}*/
.ui-model-select>.main-box>.inner-icon {
    right: 5px;
    top: 3px;
    bottom: 8px;
    height: auto;
    width: 16px;
    display: none;
}
    .ui-model-select > .main-box.has-inner-icon > .inner-icon { display: block; }
    .ui-model-select.multi-select .inner-buttons {
        top: -24px;
        border: 1px solid #009fff;
        padding-right: 2px;
        margin-bottom: 2px;
        border-bottom: none;
        border-radius: 5px 5px 0 0;
    }
.ui-model-select .inner-buttons {
    position: absolute;
    left: 0px;
    top: 1px;
    bottom: auto;
    text-align: left;
    border-radius: 5px;
    opacity: 0;
    transition: all .3s;
    background-color: rgba(255,255,255,.8)
}
    .ui-model-select:hover  .inner-buttons {
        opacity: 1;
    }

.ui-model-select .inner-buttons>.icon {
    margin-right:1px;    
}
.ui-model-select .inner-buttons>.icon.s {
    width: 14px;
    height: 14px;
    margin-bottom: -3px;
}


.ui-model-select .error-icon {
    left: 0;
    top: 4px;
    display: none;
    position: absolute;
}
.ui-model-select.has-error .error-icon {
    display: block;
}
.ui-model-select.has-error .main-box {
    border: 1px solid #ff7300;
    background: #fffad5;
}

.ui-model-select.has-error .quick-list-region {
    border: 1px solid #ff7300;
    
}

/*multiselect items*/
.main-box > .selected-item:hover {
    background: #cbe5ec;
}


.main-box>.selected-item {
    position: relative;
    margin-left: 3px;
    padding: 3px 9px 4px 14px;
    direction: rtl;
    border-radius: 3px;
    background: #e6e8ead6;
    line-height: 17px;
    color: #000713;
    margin-bottom: 1px;
    margin-top: 1px;
    cursor: cell;
    transition: background-color .2s;
    float: right;
    display: block;
    width: auto;
    overflow: hidden;
    height: 24px;
}
.main-box > .selected-item>.remove {
    position: absolute;
    left: 1px;
    top: 2px;
    background: white;
    width: 18px;
    height: 18px;
    z-index: 2;
    background-image: url(/c/icon/delete.png);
    background-repeat: no-repeat;
    background-size: 11px;
    cursor: pointer;
    background-position: center center;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .15s;
    background-color: #cbe5ec;
}
    .main-box > .selected-item:hover > .remove { opacity: 1; }


/*quickregion*/
.quick-list-region > .bc {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: -1;
}
.quick-list-region {
    position: absolute;
    border: 1px solid gray;
    border: 1px solid #b9b9b9;
    background-color: white;
    border-radius: 4px;
    z-index: 999;
    transition: all .4s;
    min-width: 70%;
    box-shadow: 3px 4px 1px #1313133d;
    padding: 3px 2px;
    border-color: #009fff;
}
.quick-list-region .full-loading {
    bottom: 28px;
    top: 3px;
    left: 4px;
    right: 3px;
    background-color: rgba(255, 255, 255, 0.45);
}

.quick-list-region>.items-region {
    overflow: hidden;
    overflow-y: auto;
    direction: rtl;
    padding: 8px;
    direction: ltr;
    min-height: 28px;
}
.quick-list-region>.items-region>*{ direction: rtl;}

.quick-list-region>.footer {
    text-align: left;
    border-top: 1px solid #d4d4d4;
    margin: 7px -2px 0px -2px;
    padding: 1px 2px 0 1px;
    color: #404040;
}

.quick-list-region>.footer .info {
   color: #c1c1c1;
    float: right;
    font-size: smaller;
    padding: 3px 5px 2px 3px;
}
    .quick-list-region > .footer:hover  {
        opacity: 1;
    }
    .quick-list-region > .footer  {
        opacity: .54;
        transition: opacity .3s;
        white-space: nowrap;
    }

.quick-list-region>.not-found {
  
    text-align: center;
    padding: 4px 5px 11px 3px;


}
    .quick-list-region > .not-found > .actions {
        color: #272727;
        padding-top: 2px;
    }
    .quick-list-region > .not-found > .message {
        color: gray;
        padding: 11px 5px;
        display: inline-block;
    }



/*texticonitems*/
.text-icon-items {
    direction: rtl;
    position: relative;
}

.text-icon-items>.item {
    border-radius: 5px;
    margin-bottom: 1px;
    padding: 1px 2px;
    margin-left: 0px;
    min-height: 27px;
    border: 1px solid transparent;    
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: right 3px top 6px;
    padding-right: 24px;
}
.text-icon-items>.item:hover {
  /* background-color: #4ed6c8; */
    background-color: #eacb3d;
}

.text-icon-items>.item.selected {
    border: 1px solid lightgray;
    background-color: #efefef;
}
    .text-icon-items > .item.intend-1 {
        padding-right: 35px;
        background-position: right 15px top 5px;
    }
    .text-icon-items > .item.intend-2 {
        padding-right: 50px;
        background-position: right 30px top 5px;
    }
    .text-icon-items > .item.intend-3 ,
    .text-icon-items > .item.intend-4 ,
    .text-icon-items > .item.intend-5 ,
    .text-icon-items > .item.intend-6 {
        padding-right: 65px;
        background-position: right 45px top 5px;
    }

.text-icon-items.action-icon>.item {
    height: 92px;
    text-align: center;
    padding: 56px 0 0 0;
    background-size: 37px;
    background-position: center 10px;
}

.text-icon-items.large>.item {
    height: 92px;
    text-align: center;
    padding: 56px 0 0 0;
    background-size: 37px;
    background-position: center 10px;
}

/*buttonicon*/
[icon].button-icon,
.icon.button-icon {
 width: auto;
    padding: 2px 22px 4px 4px;
    line-height: 14px;
    border-radius: 5px;
    background-size: 14px 14px;
    height: auto;
    background-position: right 3px top 3px;
    font-size: 11px;
    background-color: transparent;
    cursor: default;
}

[icon][ng-click].button-icon:hover,
[ng-click].button-icon:hover {
    background-color: #dcdcdcb8;
    color: #0942c7;
    cursor: pointer;
}



/*pageonlinestatus*/
.page-online-status {
    position: fixed;
    z-index: 998000;
    white-space: nowrap;
    border-radius: 5px;
    background-position: right 6px top 7px;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    padding: 4px 13px;
    padding-right: 27px;
    left: 4px;
    top: 8px;
    line-height: 20px;
    border: 0px solid #007b02;
    background-color: rgba(255,255,255,.8);
    opacity: 0;
    cursor: wait;
}
    

    .page-online-status.online {
        background-color: white;
        background-image: url(/c/icon/ok.png);
        opacity: 1;
        transition: all .8s;
    }
    
    .page-online-status.offline {
        background-image: url(/c/icon/warning-red.png);
        background-color: #ffffff;     
        color: #151515;
        border-color: #840000;
        opacity: 1;
        transition: all .8s;
    }
    .page-online-status.slow {
        background-image: url(/c/icon/warning-3.png);
        background-color: #ffffff;
        color: #460e00;
        border-color: #fcaa53;
        opacity: 1;
        transition: all .8s;

    }

body.disconnected > div.page-online-status, body.logout > div.page-online-status {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}



/*fullreloadingpage*/
#full-reloading-page {
    bottom: 0;
    z-index: 9999999;
    background-color: rgba(6, 8, 31, 0.27);
    padding-top: 45%;
    cursor: wait;
    display: none;
    font-size: 60px;
    text-align: center;
    direction: ltr;
    color: white;
    left: 0;
    top: 154px;
    right: 0;
    text-shadow: 2px 3px 3px #00000038;
    font-family: monospace;
    position: fixed;
    top: 0;
    padding-top: 111px;
}
    

.full-ctrl-f5 {
    z-index: 9999999;
   position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #00576f;
    text-align: center;
    padding-top: 278px;
    width: 100%;
    direction: ltr;
    font-weight: bold;
    font-family: -webkit-body;
    font-size: 70px;
    color: rgba(255, 255, 255, 0.89);
}

.full-ctrl-f5>.des {
    display: block;
    font-size: 40px;
    color: rgba(255, 255, 255, 0.79);
}



/*dashbordwidget*/
.float-widget {position: absolute;}
.float-widget.left { left: 9px;}
.float-widget.right { right: 9px;}
.float-widget.top { top: 1px;}
.float-widget.bottom {bottom: 1px;}



/*uiimageupload*/
.ui-image-upload {
    position: relative;
    margin: auto;
}


/*general*/
.bc-contain{ background-size: contain; }
.bc-cover{ background-size: cover; }
.ui-image-upload>.frame {
    position: absolute;
    left: 0;right: 0;top: 0;bottom: 0;
    display: block;
    border-radius: 5px;
    border: 1px solid #D1D5E4;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;    
    transition: background .4s;
}

.ui-image-upload>.frame .info-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 9px 2px 4px;
    color: white;
    overflow: hidden;
    z-index: 100;
    text-align: right;
    background-color: transparent;
    background-position: right 4px top 2px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    min-height: 26px;
    
}

.ui-image-upload>.frame .info-bar .size {
    position: absolute;
    left: 2px;
    bottom: 3px;
    display: block;
    width: auto;
    padding: 0px 4px;
    color: #ffffffcc;
    direction: ltr;
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
}


/*default*/
    .ui-image-upload > .frame.default .info-bar {
        background-color: transparent;
    }
.ui-image-upload > .frame.default .info-bar .size {
    background-color: #3132396b;
}


/*uploading*/
    .ui-image-upload > .frame.uploading {
        border-color: #55aaea;
        border-color: #adadad;
    }

        .ui-image-upload > .frame.uploading .info-bar {
            background-color: #42aeff;
            padding-right: 30px;
            background-image: url('/c/icon/upload-white.png');
        }

        .ui-image-upload > .frame.uploading .upload-overlay {
            display: flex;
        }

    .ui-image-upload > .frame .upload-overlay {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #10101042;
        display: none;
        z-index: 50;
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }

        .ui-image-upload > .frame .upload-overlay .progress {
            position: relative;
            background-color: #fffdfd8a;
            width: 100%;
            height: 3px;
            text-align: left;
        }

            .ui-image-upload > .frame .upload-overlay .progress > .bar {
                position: relative;
                margin: auto;
                height: 3px;
                background: #3aa9fd;
                transition: all .3s;
            }


        .ui-image-upload > .frame .upload-overlay .percent {
            color: #ffffff85;
            font-family: arial;
            font-size: 24px;
            font-weight: normal;
            position: absolute;
            text-align: left;
            bottom: -46px;
            left: 7px;
            right: 7px;
        }

/*overlayactions*/
.overlay-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    background: #00000061;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    opacity: 0;
    transition: opacity .4s;
}
.overlay-actions:hover {
    opacity: 1;

}
.overlay-actions>.item {
    padding: 3px 5px;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: right 7px top 6px;
    margin-bottom: 3px;
    margin-bottom: 3px;
    background-color: #ffffffcf;
    cursor: pointer;
    transition: background-color .3s;
    width: 170px;
    display: block;
    margin: 3px auto;
    border: 1px solid #ffffff4d;
    max-width: 94%;
    padding-right: 18px;
}
    .overlay-actions > .item:hover {
        background-color: white;
        background-color: #ffce27;
    }



/*overlaydrag*/
.ui-image-upload>.frame.dragover {
    border: none;
}
.ui-image-upload>.frame.dragover.rejected {
    border: none;
}

.ui-image-upload>.frame.dragover>.overlay-drag { display: flex}
.overlay-drag {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px dashed #004a5d;
    background: #90cefbf0;
    background: #83cbfff0;
    cursor: none;
    display: none;
    align-items: center;
    justify-content: center;
}


.overlay-drag>.icon {
    width: 117px;
    height: 117px;
    /* border: 1px solid red; */
    background: url(/c/icon/upload-3.png) center center no-repeat;
    background-size: contain;

} 
 /*rejecteddrag*/
.ui-image-upload>.frame.dragover.upload-success .overlay-drag,
ui-image-upload>.frame.dragover.rejected .overlay-drag{
    border-color: #ff0a0a;
    background: #982020d6;
}

.ui-image-upload>.frame.dragover.upload-success .overlay-drag>.icon,
.ui-image-upload>.frame.dragover.rejected .overlay-drag>.icon{
    background-image: url(/c/icon/deny.png);
}


/*disable upload when uploading*/
.ui-image-upload>.frame.uploading.dragover>.overlay-drag { display: none}


/*upload success*/
.ui-image-upload>.frame.upload-success {
    border-color: #ffffff;
    border-color: #dedede;
    border-color: #99aab787;
    border-color: #c7c7c7;
}
.ui-image-upload>.attached
 {
    content: "";
    display: block;
    position: absolute;
    right: -7px;
    top: -5px;
    width: 25px;
    height: 24px;
    background-image: url(/c/core/img/attach.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    z-index: 99;
}
.ui-image-upload>.frame.upload-success >.info-bar{
    background-color: #068431ed;
    background-color: #3297e2f5;

}


/*upload error*/
.ui-image-upload>.frame.upload-error {
    border-color: red;
}

.ui-image-upload>.frame.upload-error >.info-bar{
    background-color: red;
    display: none;
}

    

.ui-image-upload>.frame.upload-error>.message {    
    background: #bf0303cf;
    color: white;    
}



/*message*/
.ui-image-upload>.frame>.message {

    direction: rtl;
    line-height: 16px;
    position: absolute;
    right: 6px;
    left: 6px;
    bottom: 6px;
    background: #bf0303cf;
    color: white;
    border-radius: 5px;
    opacity: 1;
    transition: all .4s;
    text-align: center;
    background: #7e7f8447;
    color: white;
    padding-bottom: 4px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;

}
.ui-image-upload>.frame>.message.black {
    background: #ffffff54;
    color: #564505;

}
.ui-image-upload > .frame.no-message > .message {
    bottom: -20px;
    opacity: 0;    
}  

/*crop dialog wrapper*/
.crop-dialog-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000000db;
    display: none;
    z-index: 500;
    justify-content: center;
    padding: 23px;
}

.crop-dialog-wrapper>.close {
    position: absolute;
    left: 9px;
    top: 10px;
    color: white;
    font-size: 40px;
    text-align: left;
    cursor: pointer;
    opacity: .7;
    transition: opacity .3s;
    z-index: 120;
}
    .crop-dialog-wrapper > .close:hover { opacity: 1;}

.crop-dialog-wrapper>.dialog {
    max-width: 97%;
    width: 1000px;
    z-index: 10;
    position: absolute;
    display: block;
    border-radius: 0 0 6px 6px;
    background: white;
    padding-bottom: 40px;
    overflow: hidden;
    top: 18px;
    bottom: 18px;
} 

.crop-dialog-wrapper>.dialog >.cropper-frame {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #b5b5b5;
}

.crop-dialog-wrapper>.dialog >.toolbar {
    position: absolute;
    bottom: 0;
}

.crop-dialog-wrapper>.preview {
    width: 174px;
    height: 244px;
    position: absolute;
    right: 16px;
    top: 24px;
    overflow: hidden;
    direction: ltr;
}

.crop-dialog-wrapper .resolution {
    float: right;
    direction: ltr;
    font-size: 13px;
    padding: 6px 6px 0 0;
    color: #05203e;
}



/*uicropper*/
.ui-cropper {
    max-width: 1000px;
}

.ui-cropper>.frame {
    max-height: 500px;
    overflow: hidden;
    opacity: 0.2;
}
.ui-cropper>.frame.enabled {
    overflow: hidden;
    opacity: 1;
}

/*awesome toolbar*/
.awesome-toolbar {
    width: 100%;
    text-align: center;
    font-size: 18px;    
    direction: ltr;
}

.awesome-toolbar>.group {
    margin-right: 6px;
    margin-bottom: 3px;
    display: inline-block;
    direction: ltr;
}

.awesome-toolbar> .group >.fa {
    color: #fff;
    background-color: #3a8be2;
    /* border-color: #469bf7; */
    cursor: pointer;
    border-radius: 0;
    padding: 6px 10px;
    margin: 0 -3px;
}
.awesome-toolbar> .group >.fa:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.awesome-toolbar> .group >.fa:last-child {
    
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.awesome-toolbar > .group >.fa:hover {
    background-color: #0069d9;
    background-color: #4e9cef;
}


/*infotags*/
.info-tags {
    direction: rtl;
}

.info-tags >div {
    display: inline-block;
    min-width: 44px;
    padding: 0px 16px 0px 2px;
    margin-left: 1px;
    background-size: 12px 12px;
    background-position: top 5px right 0px;
    background-repeat: no-repeat;
    /* line-height: 14px; */
    font-weight: bold;
    color: #0a4079;
}



td.more {
    padding-top: 4px;
    padding-right: 4px;
    padding-left: 3px;
    padding-bottom: 0;
}
.more-icon:hover {
    background-color: #c3cbd2;
}
.more-icon {
    background-image: url(/c/icon/more.png);
    background-size: 11px;
    background-position: center center;
    width: 21px;
    height: 19px;
        border-radius: 4px;
        
}

td>.more-icon {
    margin-bottom: -6px;
}

.mobile-sms {
    width: 250px;
    margin: auto;
    border: 7px solid #038294;
    border-radius: 22px;
    padding: 14px 20px;
    overflow: auto;
    height: 376px;
    background: white;
    position: relative;
    padding-bottom: 35px;
}


.mobile-sms:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34px;
    border-top: 6px solid #038294;
    background: #e5f6f9;
}



/*uitextbox*/
.ui-text-area {
    position: relative;
}
.ui-text-area textarea {
    font-size: 12px;
    line-height: 19px;
    color: #142a54;
    padding: 5px 9px;
    width: 100%;
    background: white;
    box-sizing: border-box;
}

.minimal >textarea {
    border-right-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
    box-shadow: none;
    background-color: transparent;
}
 

.nob >textarea {
    border-color: transparent;    
    box-shadow: none;
    background-color: transparent;
}

.ui-text-area >.bar {
    position: absolute;
    left: 3px;
    right: auto;
    padding-left: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    transition: all .3s;
    opacity: 0;
    top: -20px;
}
.ui-text-area:hover >.bar {
    opacity: 1;
    top: 2px;
    
}
    .ui-text-area > .bar.isltr {
        left: auto;
        right: 17px;
    }

    .ui-text-area > .bar > .icon.dic {width: 26px}
    .ui-text-area > .bar > .icon.ltr {width: 20px}
    .ui-text-area > .bar > .icon {
        cursor: pointer;
    width: 22px;
    height: 21px;
    direction: ltr;
    float: left;
    margin: 2px;
    }



    /*announce*/
.item.announce {}
.item.announce .bulk {
    color: #949494;
}

.announce-view {
    font-family: nassim;
    font-size: 18px;
    background: white;
    border-radius: 7px;
    padding: 9px 20px;
    border: 1px solid #d3d5dd;
    line-height: 27px;
}




/*Final Tools :)*/
.image.image-cover,.image.bc-cover{ background-size: cover;}
.image.bc-fixed{ background-attachment: fixed;}
.image.image-stretch,.image.bc-stretch{ background-size: 100% 100%;}



/*uidynamicdialog*/
.ui-dynamic-dialog{}
.ui-dynamic-dialog .button{}
.ui-dynamic-dialog .button .icon{}
.ui-dynamic-dialog .button .title{}


/*linkbutton*/
.link-button {
    cursor: pointer;
    color: #002aa5;
    color: #0c0f10;
    border-bottom: 1px dashed transparent;
    display: inline-block;
    color: #0530d4;
}
.link-button:hover {
    color:blue;
    border-bottom: 1px dashed #024f69;
}

    .link-button.null {color: gray;}
    .link-button.null>.icon.main {opacity: .5}


   

    .link-button .icon.tools {
        width: 14px;
    height: 14px;
    margin-right: 5px;
    }

/*uiactioncollection*/
.ui-action-collection{ position: relative;}
.ui-action-collection>.toolbar { border-bottom: 1px solid #d3d5dd;padding-bottom: 5px;margin-bottom: 5px;}
.ui-action-collection>.template { padding: 5px;}





/*uiclockwidget*/
.ui-clock-widget {
    position: absolute;
    left: 21px;
    top: 6px;
    position: absolute;
    top: 4px;
    zoom: 1;
    color: yellow;
    left: 11px;
}

.clock-icon {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 6px;
    -background-image: url(img/clock.png);
    background-repeat: no-repeat;
    background-position: center center;
}

.time-region {
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter";
    font-size: 18px;
    color: #fefefe;
    text-align: left;
    font-weight: bold;
    position: absolute;
    left: 56px;
    top: 0px;
    white-space: nowrap;
    direction: ltr;
}
.ampm {
    color: #dadada;
}

.date-region {
    color: rgba(239, 236, 236, 0.85);
    font-family: nassim;
    text-align: left;
    direction: rtl;
    position: absolute;
    left: 56px;
    top: 25px;
    white-space: nowrap;
    font-size: 16px;
}

.time-region,.date-region{ left: 0;}





/*uidaterange*/
.ui-date-range {
        border: 1px solid #7d8b9e6b;
    border-radius: 5px;
    padding: 3px 5px;
}
.ui-date-range:hover {
    border-color: #129FC6;
}

.ui-date-range>.mode {width: 100%}
.ui-date-range>.mode select {width: 100%}
.ui-date-range>.date {
        margin-top: 10px;
    position: relative;
}

.ui-date-range>.label {
        width: 100%;
    text-align: right;
    padding-bottom: 1px;
    margin-bottom: 3px;
    padding-right: 7px;
    padding-top: 2px;
    
}

.ui-date-range>.date.start{}
.ui-date-range>.date.end{}

.ui-date-range>.date .label {
    color: gray;
    position: absolute;
    right: 4px;
    top: 2px;
    z-index: 10;
}

.ui-date-range>.date .control{}
.ui-date-range>.date .control input {
    text-align: left;
    padding-left: 26px;
    color: #1b2b33;
}


.table-image {
    background-repeat: no-repeat;
    background-position: center;
    width: 123px;
    height: 81px;
    border-radius: 5px;
}



/*uitinymce*/
.ui-tiny-mce{}
.tiny-wrapper{}
.tiny-wrapper .blocks {
    direction: rtl;
}
.tiny-wrapper .blocks>.item {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid lightgrey;
    font-size: 12px;
    line-height: 23px;
    margin-left: 4px;
    margin-top: 4px;
}
    .tiny-wrapper .blocks > .item.error {
        border-color: red;
        background: #ffe1e1;
    }

/*uiinlinecollection*/
.ui-inline-collection{}
.ui-inline-collection .loading {
    text-align: center;
    color: #989191;
    padding: 1px;
}
.ui-inline-collection>.actions {margin-top: 3px;}
.ui-inline-collection>.template {
    overflow: auto;

}




/*carditems*/
.card-items {
}

    .card-items > .item-wrapper {
        padding: 3px;
    }

        .card-items > .item-wrapper > .item {
            border: 1px solid #cacbce;
            border-radius: 5px;
            min-height: 10px;
            padding: 3px;
            cursor: pointer;
            transition: box-shadow 2px;
            position: relative;
            /* padding-top: 26px; */
            padding: 4px 9px;
        }


            .card-items > .item-wrapper > .item.selected {
                border-color: #ff9d00;
                box-shadow: 0 0 4px #ffa400;
            }

            .card-items > .item-wrapper > .item:hover {
                border-color: #00b4ff;
                box-shadow: 0 0 4px #39b6ff;
            }

        .card-items > .item-wrapper:hover > .item > .more-actions {
            opacity: 1;
        }

        .card-items > .item-wrapper > .item > .more-actions {
            text-align: left;
            padding-left: 0;
            opacity: 0;
            transition: all .3s;
            position: absolute;
            left: 4px;
            top: 8px;
            z-index: 10;
            left: 0px;
            top: 4px;
        }

        .card-items > .item-wrapper > .item > .actions .more-icon {
        }



.button-holder>.button-icon {
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: -6px;
    margin-left: -3px;
    margin-bottom: -5px;
    cursor: pointer;
}

.ui-runtime-button .button-holder {
    margin-bottom: 9px;
}


.ui-runtime-button.col-button {
    width: 100%;
}

.ui-runtime-button.col-button>.button-holder {
    margin-bottom: 4px;
    width: 100%;
    text-align: right;
    padding: 8px 10px 10px 6px;
}


.card-items .field,
.card-items .field.label-style-none {
    min-height: 0;
}