body {
    font: normal 11px tahoma, arial, verdana;
    direction: rtl;
}


.x-form-element {
    display: inline-flex;
    padding-right: 0px !important;
    width: unset !important;
}
/* Fixes */
.white-menu .x-menu {
    background: white !important;
}

.no-left {
    left: 0px !important;
    width: 155px !important;
}

.left-width {
    width: 97px !important;
    left: 42px !important;
}

.um-width {
    width: 114px !important;
}




.x-window-mc {
    background-color: #F4F4F4 !important;
}

.title-label {
    color: black;
}

.x-form-field-wrap {
    text-align: right !important;
}

.x-theme-slate .title-label {
    color: white;
}

.cbStates-list th {
    text-align: right;
    font-weight: bold;
}

.ext-gecko .x-form-text, .ext-ie8 .x-form-text /* added by amir 22-Jun-2014 case id 16158  .x-form-element{padding-left:0px !important;}*/ {
    direction: ltr;
    padding-bottom: 0;
    padding-top: 2px;
    text-align: right;
}


/* buttons */
.x-btn {
    direction: ltr;
}
@media  (min-width: 768px) and (max-width: 1024px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-750%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-750%); cursor: pointer;
    }
}
@media  (min-width: 1025px) and (max-width: 1050px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-818%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-818%); cursor: pointer;
    }
}
@media  (min-width: 1051px) and (max-width: 1080px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-856%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-856%); cursor: pointer;
    }
}
@media  (min-width: 1051px) and (max-width: 1080px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-856%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-856%); cursor: pointer;
    }
}
@media  (min-width: 1081px) and (max-width: 1100px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-890%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-890%); cursor: pointer;
    }
}
@media  (min-width: 1101px) and (max-width: 1170px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-918%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-918%); cursor: pointer;
    }
}
@media  (min-width: 1171px) and (max-width: 1280px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1040%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1040%); cursor: pointer;
    }
}
@media  (min-width: 1281px) and (max-width: 1300px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1120%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1120%); cursor: pointer;
    }
}
@media  (min-width: 1301px) and (max-width: 1400px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1185%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1185%); cursor: pointer;
    }
}
@media  (min-width: 1401px) and (max-width: 1500px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1310%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1310%); cursor: pointer;
    }
}
@media  (min-width: 1501px) and (max-width: 1600px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1490%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1490%); cursor: pointer;
    }
}
@media  (min-width: 1601px) and (max-width: 1650px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1540%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1540%); cursor: pointer;
    }
}
@media  (min-width: 1651px) and (max-width: 1700px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1580%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1580%); cursor: pointer;
    }
}
@media  (min-width: 1701px) and (max-width: 1800px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1722%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1722%); cursor: pointer;
    }
}
@media  (min-width: 1801px) and (max-width: 2600px){
    table#eyeToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1770%); cursor: pointer;
    }
table#eyeCancleToggle {
    position: absolute;  top: 53%; transform: translateY(7%) translateX(-1770%); cursor: pointer;
    }
}
table#btnOK{
    margin: 20px 40% !important;
}
div#x-form-el-passwordField{
    left: 8px;
}
.x-btn-text {
    direction: rtl;
}

.x-form-element {
    padding-left: unset !important;
}

.x-btn-mc em.x-btn-arrow {
    background-position: left center;
    padding-right: 0;
    padding-left: 10px;
}

.x-btn-mc em.x-btn-split {
    background-position: left center;
    display: block;
    padding-right: 0;
    padding-left: 14px;
}

.x-btn-mc em.x-btn-split {
    background-image: url(../images/default/button/s-arrow-rtl.gif);
}

.x-btn-over .x-btn-mc em.x-btn-split, .x-btn-click .x-btn-mc em.x-btn-split, .x-btn-menu-active .x-btn-mc em.x-btn-split, .x-btn-pressed .x-btn-mc em.x-btn-split {
    background-image: url(../images/default/button/s-arrow-o-rtl.gif);
}

/* menus */
.x-menu {
    background-image: url(../images/default/menu/menu-rtl.gif);
    background-position: top right;
    background-repeat: repeat-y;
}

.x-menu-item-arrow {
    background-image: url(../images/default/menu/menu-parent-rtl.gif);
    background-position: left center;
}

a.x-menu-item {
    padding: 3px 27px 3px 21px;
}

.x-menu-item-icon {
    left: auto;
    right: 3px;
}

.x-menu .x-color-palette {
    margin-right: 26px;
    margin-left: 4px;
}

.x-menu-list-item-indent {
    padding-left: auto;
    padding-right: 27px;
}

/* Panels */
.x-tool {
    float: left;
}

.x-panel-tl .x-panel-icon, .x-window-tl .x-panel-icon {
    background-position: 100% 4px;
    padding-right: 20px !important;
    padding-left: 0 !important;
}

/*Layouts*/
.x-column {
    float: right !important;
}

.x-panel-inline-icon {
    margin-left: 4px;
    margin-right: 0;
}

.x-tool-expand-east, .x-tool-expand-west {
    float: none;
}

/*Tabs*/
ul.x-tab-strip li {
    direction: ltr;
    float: right;
    margin-right: 2px;
    margin-left: 0;
    width: 120px;
}


ul.x-tab-strip > li {
    width: auto;
}



.x-tab-strip-text {
    direction: rtl;
}

ul.x-tab-strip li.x-tab-edge {
    float: right;
}

.x-tab-scroller-left {
    left: auto;
    right: 0;
    background-image: url(../images/default/tabs/scroll-left-rtl.gif);
}

.x-tab-scroller-right {
    right: auto;
    left: 0;
    background-image: url(../images/default/tabs/scroll-right-rtl.gif);
}

.x-tab-strip .x-tab-with-icon span.x-tab-strip-text {
    background-position: 100% 3px;
    background-repeat: no-repeat;
    padding-right: 20px;
    padding-left: 0;
}

.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {
    right: auto;
    left: 3px;
}

.x-tab-strip-closable .x-tab-left {
    padding-left: 3px;
    padding-right: 3px;
}


/*Grids*/
.x-props-grid .x-grid3-td-name .x-grid3-cell-inner {
    background-image: url(../images/default/grid/grid3-special-col-bg-1-rtl.gif) !important;
    padding-left: 0;
    padding-right: 12px;
    background-position: 100% 0% !important;
}

.x-grid3-hd-btn {
    left: 0;
    right: auto;
    background-image: url(../images/default/grid/grid3-hd-btn-rtl.gif);
}

.x-grid3-hd-row td {
    border-right-color: #EEEEEE;
    border-left-color: #D0D0D0;
}

.x-grid3-body .x-grid3-td-numberer, .x-grid3-body .x-grid3-td-expander, .x-grid3-body .x-grid3-td-checker {
    background-image: url(../images/default/grid/grid3-special-col-bg-rtl.gif);
}

.x-grid-group-hd div {
    background-position: 99% -47px;
    padding: 4px 20px 4px 17px;
}

.x-grid-group-collapsed .x-grid-group-hd div {
    background-position: 99% 3px;
}

.x-grid3-header-offset {
    text-align: right;
}

.n-date-control > div > div {
    margin: 0 0 0 -2px;
}
/*Forms*/
.x-form-item label {
    /*float: right; commented by kashif for employee card report*/
}

.x-form-label-left label {
    text-align: right;
}

    .x-form-label-left label.x-form-item-label {
        text-align: right;
    }

.x-form-item label.x-form-item-label {
    clear: right;
    display: block;
    float: right;
    /*Added by M.O Ather for Field label font settings on 01-Jul-2013*/
    padding: 3px 0 3px 3px;
    font-family: Arial;
    font-size: 11px;
    /*End Added by M.O Ather*/
}

.x-form-field {
    font-family: Arial;
    font-size: 11px;
}

.ext-safari .x-form-field-wrap .x-form-trigger, .ext-gecko .x-form-field-wrap .x-form-trigger, .ext-webkit .x-form-field-wrap .x-form-trigger {
    right: auto;
    left: 0;
    /* position:absolute;  Added by M.O Ather on 6-Jul-2013 for combo and datefield trigger to align them with their input field as it was out through out app in many forms*/
}

.x-form-field-wrap .x-form-trigger {
    /*Commect Tick Arrow Remove from CSS */
    background-image: url(../images/default/form/trigger-rtl.gif);
}

.x-form-field-wrap .x-form-simpletick-trigger {
    background-image: url(../images/default/form/simple-tick-trigger-rtl.gif);
}

.x-form-field-wrap .x-form-date-trigger {
    background-image: url(../images/default/form/date-trigger-rtl.gif);
    left: auto !important;
}

.x-form-field-wrap .x-form-clear-trigger {
    background-image: url(../images/default/form/clear-trigger-rtl.gif);
}

.x-form-field-wrap .x-form-search-trigger {
    background-image: url(../images/default/form/search-trigger-rtl.gif);
}

/*Date picker*/
.x-date-right a {
    background-image: url(../images/default/shared/left-btn-rtl.gif);
}

.x-date-left a {
    background-image: url(../images/default/shared/right-btn-rtl.gif);
}

.x-date-middle .x-btn-mc em.x-btn-arrow {
    background-position: 0 0;
}

x-btn-mc em.x-btn-arrow {
    padding-left: 12px;
}

.x-date-mp-ybtn a.x-date-mp-next {
    background-position: 0 -105px;
}

.x-date-mp-ybtn a.x-date-mp-prev {
    background-position: 0 -120px;
}

.x-date-mp-ybtn a.x-date-mp-next:hover {
    background-position: -15px -105px;
}

.x-date-mp-ybtn a.x-date-mp-prev:hover {
    background-position: -15px -120px;
}

/*Toolbar icons*/
.x-tbar-page-first {
    background-image: url(../images/default/grid/page-first-rtl.gif) !important;
}

.x-tbar-page-last {
    background-image: url(../images/default/grid/page-last-rtl.gif) !important;
}

.x-tbar-page-next {
    background-image: url(../images/default/grid/page-next-rtl.gif) !important;
}

.x-tbar-page-prev {
    background-image: url(../images/default/grid/page-prev-rtl.gif) !important;
}

.x-item-disabled .x-tbar-page-first {
    background-image: url(../images/default/grid/page-first-disabled-rtl.gif) !important;
}

.x-item-disabled .x-tbar-page-last {
    background-image: url(../images/default/grid/page-last-disabled-rtl.gif) !important;
}

.x-item-disabled .x-tbar-page-next {
    background-image: url(../images/default/grid/page-next-disabled-rtl.gif) !important;
}

.x-item-disabled .x-tbar-page-prev {
    background-image: url(../images/default/grid/page-prev-disabled-rtl.gif) !important;
}

/*Toobar elements*/
.x-toolbar .x-btn-over .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-click .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-menu-active .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-pressed .x-btn-mc em.x-btn-split {
    background-image: url(../images/default/button/s-arrow-o-rtl.gif);
}

.x-toolbar .x-btn-mc em.x-btn-split {
    background-image: url(../images/default/button/s-arrow-noline-rtl.gif);
}

.x-toolbar-more-icon {
    background-image: url(../images/default/toolbar/more-rtl.gif) !important;
}

.x-btn-mc em.x-btn-arrow {
    background-position: left center;
    padding-right: 0;
    padding-left: 10px;
}

.x-toolbar-more em.x-btn-arrow {
    padding-left: 0;
}

.x-toolbar-right td .x-form-field-trigger-wrap {
    text-align: right;
}

/*MessageBox and Window*/
.x-window-dlg .ext-mb-icon {
    float: right;
}

.x-window-dlg .ext-mb-info, .x-window-dlg .ext-mb-warning, .x-window-dlg .ext-mb-question, .x-window-dlg .ext-mb-error {
    background-position: right top;
}

.x-window-dlg .x-dlg-icon .ext-mb-content {
    margin-left: 0;
    margin-right: 47px;
}

.x-hidden, .x-hide-offsets {
    left: 0px;
}

/* ProgressBar */
.x-progress-bar {
    float: right;
}

.pull-right {
    float: left !important;
}

.x-progress-text {
    left: auto;
    right: 0;
}

/* Tree */
.x-tree-lines .x-tree-elbow {
    background-image: url( "../images/default/tree/elbow-rtl.gif" );
}

.x-tree-lines .x-tree-elbow-plus {
    background-image: url( "../images/default/tree/elbow-plus-rtl.gif" );
}

.x-tree-lines .x-tree-elbow-minus {
    background-image: url( "../images/default/tree/elbow-minus-rtl.gif" );
}

.x-tree-lines .x-tree-elbow-end {
    background-image: url( "../images/default/tree/elbow-end-rtl.gif" );
}

.x-tree-lines .x-tree-elbow-end-plus {
    background-image: url( "../images/default/tree/elbow-end-plus-rtl.gif" );
}

.x-tree-lines .x-tree-elbow-end-minus {
    background-image: url( "../images/default/tree/elbow-end-minus-rtl.gif" );
}

.x-tree-lines .x-tree-elbow-line {
    background-image: url( "../images/default/tree/elbow-line-rtl.gif" );
}

/*
Added this Class for Activity Lable allignment in other language like arabic
*/
.x-form-field-wrap .x-form-text.clear-right {
}

.x-label-value {
    /*color: navy;*/
    /*  font-size:11px; */
    left: 8px;
    padding: 3px 0 3px 3px;
    text-align: center;
    padding: 3px 0 3px 3px;
    font-family: Arial;
}

/* Added by Ali Memon for picture upload */
.my-field .x-form-file-wrap .x-form-file-btn {
}

.my-field .x-form-file-wrap .x-form-file-text {
    /* left : 195px; */
}

.my-field .x-form-file-wrap {
    /* left:100; */
    /* margin-right:170px; */
}
/*End Ali Memon Code */

/* Kashif Qureshi */
.fa fa-money {
    background-image: url(../../resources/icons/settings.png) !important;
}

.icon-payroll {
    background-image: url(../../resources/icons/payroll.png) !important;
}

.icon-hrs {
    background-image: url(../../resources/icons/User.png) !important;
}

.icon-ess {
    background-image: url(../../resources/icons/SelfService.png) !important;
}

.icon-sec {
    background-image: url(../../resources/icons/Security.png) !important;
}

.icon-tof {
    background-image: url(../../resources/icons/TimeOffice.png) !important;
}

.icon-rep {
    background-image: url(../../resources/icons/rep.png) !important;
}

.icon-Leave-Workflow {
    background-image: url(../../resources/icons/Leave-WorkFlow.png) !important;
}

.icon-com {
    background-image: url(../../resources/icons/SelfService.png) !important;
}
/*Added by Saud on Wednesday, October 29, 2014, to display MRR Icon on Tree View*/
.icon-meeting {
    background-image: url(../../resources/icons/SelfService.png) !important;
}
/*End by Saud*/
.icon-webportal {
    background-image: url(../../resources/icons/SelfService.png) !important;
}

.icon-Correspondence {
    background-image: url(../../resources/icons/SelfService.png) !important;
}

.icon-reports-node {
    background-image: url(../../resources/icons/reportNode.png) !important;
}


/*added by sabid*/
div.item-wrap {
    float: right;
    border: 1px solid transparent;
    margin: 5px 30px 30px 40px;
    width: 170px;
    cursor: pointer;
    height: 170px;
    text-align: center;
}

div.items-clear {
    clear: right;
}

.x-form-cb-label {
    margin-left: -4px !important;
}

.x-form-check-wrap input {
    margin-left: 4px;
}

.auto-align {
    text-align: left;
    text-align: -moz-left;
}



.icon-arrowright {
    background-image: url("../../icons/arrow_left-png/ext.axd") !important;
}

.icon-arrowleft {
    background-image: url("../../icons/arrow_right-png/ext.axd") !important;
}


.x-form-label-right label.x-form-item-label {
    text-align: left;
}

.heading2 {
    /* 
    background: rgb(252,252,252);
    background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(234,234,234,1) 100%); 
    background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(234,234,234,1) 100%); 
    background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(234,234,234,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eaeaea',GradientType=0 );  */
    background-color: #d9e8f7;
    border: 1px solid #c1daf2;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    color: #5195b5;
    font-size: 12px;
    font-weight: bold;
    height: 21px;
    margin: 4px 2px;
    padding: 5px 6px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.h1 {
    font-size: 30px !important;
    font-weight: 100 !important;
}

.x-form-item label.x-form-item-label {
    float: right !important;
}


.x-toolbar-right td {
    text-align: right !important;
}

.report-checkbox-rtl {
    left: 413px !important;
    top: 0;
    width: 50px;
}

.report-label-rtl {
    left: 380px !important;
    top: 0;
    width: 50px;
}

.report-combo-rtl {
    left: 203px !important;
    top: 0;
    width: 142px;
}



.padding-left-box {
    width: 171px !important;
    margin-top: 5px;
}

.padding-right-box {
    width: 152px !important;
    margin-right: 3px;
}

.m-l-3 {
    margin-right: 3px;
    margin-top: 5px;
}

.m-l-30 {
    left: 30px !important;
}

.search-inside {
    position: relative;
    left: 25px !important;
    height: 27px !important;
}

.query-inside {
    left: -46px !important;
    position: relative;
    border-right: 1px #3280d8 solid;
    z-index: 1;
}

.asc-desc {
    position: relative;
    left: 30px !important;
    height: 27px !important;
}


/* For Lock Icon Alignment in RTL*/
#ext-comp-1002{
       /*      left: 0px !important;*/
        }

    


/* start css for Login page*/

.logo-body-right
{
    right:0;
    margin-right:25px;
}
.logo-body-left
{
    left:0;
    margin-left:-50px;
}
.x-btn-text-icon .x-btn-icon-small-left .x-btn-text {
     background-position: 0 center;
    background-repeat: no-repeat;
    padding-right: 11px !important;
    height: 16px;

}
.saud{
    margin-left: 34px !important;
}
/*Added by Abdulrehman for set letter template*/ 
.LetterPanel{
    margin-right:15%;
}
/* start css for Login page*/