/********************************DESKTOP CONTROLS - START**********************************************/
/**********************************************************************************************/

/**********************************************************************************************/
/*Some css are commented intentionally to check its impact. Will be removed in future if there is no impact. */
/**********************************************************************************************/

/*This is to align the form in the runtime to auto align*/
.mainContainer {
    margin: auto;
}

/*This is required to clear red corner flag for each table cell*/
.x-grid-dirty-cell {
    background: none;
}

/*This is required to align radio button list properly*/
.kta-radiogroup .x-form-checkboxgroup-body {
    padding: 0;
}

/*This is required to not to overlap the radio button option text when horizontally aligned*/
.kta-radiogroup .x-form-type-radio {
    overflow: hidden;
}

/*Required to set Add, Modify ,Delete button inline with UX Style Guide */
.kta-action-button .x-inner-el {
    background: none;
    border: none;
}

/*This is required for textbox, calender and drodpdown controls to take the height that is set in the designer. Each sencha theme has it's own height so this has to be overridden.*/
.x-form-textarea.x-form-text-default {
    min-height:inherit;
}

/*Required as this will remove the duplicate node(DUMMYNode) in Resource tree control */
.x-tree-no-icon {
    display: none !important;
}

/*Each sencha theme has it's own default button height. So to take the designer set height this override is required */
.x-btn-button {
    min-height: inherit !important;
}

/*Required to auto adjust buttons in toolbar based on height*/
.kta-toolbarcontrol, .kta-toolbarcontrol-button {
    min-height: inherit !important;
    border: none;
}

/*Each sencha theme has it's own default toolbar button height. So to take the designer set height this override is required */
.x-btn-button-default-toolbar-small {
    /*min-height: inherit !important;*/
}

.page-heading {
    color: #006699;
    font-size: 14pt;
    font-weight: bold;  
}

/* Page Heading css using in most of the custom forms*/
.kta-page-heading {
    color: #006699;
    font-size: 14pt;
    font-weight: bold;
    margin:12px 12px 2px 2px ;
}

.kta-page-heading-middle {
    color: #666666;
    font-size: 10pt;
    font-weight: bold;
}

.kta-page-heading-last {
    color: #666666;
    font-size: 14px;
    line-height: 16px;
    font-weight: normal;
}
/* New Skin and BulkSkin css -Start- Tried by removing but couldnt find any change --need to check how the action is using these. Action clumn is not rendering now    */
.x-action-col-cell img {
    height: 16px;
    width: 16px;
    cursor: pointer;
}

.x-action-col-cell div.edit {
    background-image: url(../Images/ellipsis.png?productVersion=7.10.0.24.0.917);
    cursor: pointer;
}

.x-action-col-cell div.edit-disabled {
    background-image: url(../Images/ellipsis-disable.png?productVersion=7.10.0.24.0.917);
    cursor: default;
}

.ellipsis-edit {
    background-image: url(../Images/ellipsis.png?productVersion=7.10.0.24.0.917);
    cursor: pointer;
}

.ellipsis-edit-disabled {
    background-image: url(../Images/ellipsis-disable.png?productVersion=7.10.0.24.0.917);
    cursor: default;
}

/* New Skin and BulkSkin css - End    */

/*Business Calendar CSS - Start - used to generate color and remove calender style but not applying for all themes*/

.ux-calendar td.x-datepicker-active.x-datepicker-cell.x-datepicker-rnw {
    background: repeat-x left top;
    background-color: #F6A800;
    color: white;
}

.ux-calendar td.x-datepicker-active.x-datepicker-cell.x-datepicker-rw {
    background: repeat-x left top;
    background-color: #99E398;
    color: white;
}

.ux-calendar td.x-datepicker-active.x-datepicker-cell.x-datepicker-gwpw {
    background: repeat-x left top;
    background-color: #7F7F7F;
    color: white;
}

.ux-calendar .x-datepicker-next {
    background: none;
}

.ux-calendar .x-datepicker-prev {
    background-image: none;
}

.ux-calendar .x-datepicker-month .x-btn-split-right:after, .x-datepicker-month .x-btn-over .x-btn-split-right:after {
    background-image: none;
}

.ux-calendar td.x-datepicker-active.x-datepicker-cell.x-datepicker-gwpnw {
    background: repeat-x left top;
    background-color: #67A1C9;
    color: white;
}

.ux-calendar td.x-datepicker-active.x-datepicker-cell.x-datepicker-rwpw {
    background: repeat-x left top;
    background-color: #DCE6EF;
    color: white;
}

table.x-datepicker-inner .x-datepicker-rwpnw a {
    background: repeat-x left top;
    background-color: #E9E79D;
    color: white;
}

table.x-datepicker-inner .x-datepicker-rwpnw span {
    font-weight: bold;
}

.ux-calendar td.x-datepicker-active.x-datepicker-cell.x-datepicker-rwpnw {
    background: repeat-x left top;
    background-color: #E9E79D;
    color: white;
}

.ux-calendar td.x-datepicker-active.x-datepicker-cell.x-datepicker-gnw {
    background: repeat-x left top;
    background-color: #B4B4B4;
    color: white;
}

/*Business Calendar CSS - End*/

/*ViewWorkPattern CSS - Start*/

/* Tried by removing but couldnt find any change*/
.x-btn.btntree.x-btn-default-small {
    background: none !important;
    background-color: transparent !important;
    border: 0px;
    background-image: none !important;
    filter: none !important; /*background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 50%, #ffffff 51%, #ffffff 100%);              background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#ffffff), color-stop(51%,#ffffff), color-stop(100%,#ffffff));              background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#ffffff 51%,#ffffff 100%);             background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#ffffff 51%,#ffffff 100%);             background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#ffffff 51%,#ffffff 100%);              background: linear-gradient(top,  #0088ca 0%,#ffffff 50%,#ffffff 51%,#ffffff 100%);              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );        */
}

/*All these are used to get green and grey shades*/
.x-grid-row .x-grid-cell.mycls {
    background-color: #669999 !important;
}

.gridrow-debitscredits {
    height: 128px;
    word-wrap: break-word;
    text-align: center;
    vertical-align: middle;
}

    .gridrow-debitscredits .x-grid-cell {
        text-align: center;
        vertical-align: middle;
        word-wrap: break-word;
        white-space: normal;
        height: 128px;
    }

    .gridrow-debitscredits .x-grid-cell-inner {
        text-align: inherit;
        vertical-align: inherit;
        word-wrap: break-word;
        overflow: auto;
        white-space: normal;
    }

.gridrow-normal {
    height: 60px;
    word-wrap: break-word;
    text-align: center;
    vertical-align: middle;
}

    .gridrow-normal .x-grid-cell {
        text-align: center;
        vertical-align: middle;
        word-wrap: break-word;
        white-space: normal;
        height: 60px;
    }

    .gridrow-normal .x-grid-cell-inner {
        text-align: inherit;
        vertical-align: inherit;
        word-wrap: break-word;
        overflow: auto;
        white-space: normal;
    }

.x-grid-row .x-grid-cell.wp-glb-working {
    background-color: White;
    color: Black;
}

.x-grid-row .x-grid-cell.wp-glb-nonworking {
    background-color: #B4B4B4;
    color: Black;
}

.x-grid-row .x-grid-cell.wp-res-working {
    background-color: #DBE8F1;
}

.x-grid-row .x-grid-cell.wp-res-nonworking {
    background-color: #ECE386;
}
/*ViewWorkPattern CSS - End*/

/*.x-form-itemselector-top {
    background-image: url(../Plugins/ExtJs/ux/css/images/top2.gif);
}

.x-form-itemselector-up {
    background-image: url(../Plugins/ExtJs/ux/css/images/up2.gif);
}

.x-form-itemselector-add {
    background-image: url(../Plugins/ExtJs/ux/css/images/right2.gif);
}

.x-form-itemselector-remove {
    background-image: url(../Plugins/ExtJs/ux/css/images/left2.gif);
}

.x-form-itemselector-down {
    background-image: url(../Plugins/ExtJs/ux/css/images/down2.gif);
}

.x-form-itemselector-bottom {
    background-image: url(../Plugins/ExtJs/ux/css/images/bottom2.gif);
}*/

/*.ux-rangemenu-icon {
    margin-top: 0;
}

.ux-rangemenu-gt {
    background-image: url(../Plugins/ExtJs/ux/grid/images/greater_than.png) !important;
}

.ux-rangemenu-lt {
    background-image: url(../Plugins/ExtJs/ux/grid/images/less_than.png) !important;
}

.ux-rangemenu-eq {
    background-image: url(../Plugins/ExtJs/ux/grid/images/equals.png) !important;
}*/


/**************** Health Control - Start*******************/
.case-label {
    margin-left: 15px;
    margin-right: 4px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.casehealth-mainpanel {
    border-color: #cacacd;
}

.casehealth-progresslabel {
    margin-left: 20% !important;
}

.casehealth-panel, .casehealth-mainpanel {
    background: #FFFFFF;
}


.casehealth-panel-noborder {
    border: none;
}

.casehealth-panel {
    border: none;
    border-bottom: solid 1px #cacacd;
}

.case-label-html h5 {
    display: inline;
}

/* Align custom controls properly for various cell align modes 
   Controls include embeddedpage, image, joblist etc.. which are usually containers
*/
.kta-custom-controls {
    /* containers, i.e div tags are block elements, i.e they will push the controls next to them to next line, so specify inline-block to prevent this */
    display: inline-block;
    vertical-align: top;
}

.lbl-style {
    color: black !important;
}

.lbl-Expenditure-style {
    color: #A21B1D !important;
    font-weight: bold !important;
}

.lbl-overdue-style {
    color: #FFFFFF !important;
    font-weight: bold !important;
    display: block;
    margin-left: 30px;
    margin-right: auto;
}

.lbl-data-style {
    color: #000000 !important;
    font-weight: bold !important;
    border-bottom-color: transparent;
}

/**************** Health Control Progress bar - Start*******************/

.progressbar canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.progressbar span {
    display: block;
    line-height: 80px;
    width: 80px;
    color: black;
    font-family: sans-serif;
    font-size: 15px;
    text-align: center;
    font-weight: bold;
    margin-left: 4px;
}
/**************** Health Control Progress bar - End*******************/

/**************** Health Control - End*******************/

/*This is used in Add Group, Add Resounce and resource avilablity screens to align controls properly */
.x-fieldset-no-border {
    border: 0px !important;
    padding: 0 10px;
    margin-bottom: 0px;
    display: block;
}

/*Didnt find the usage */
/*.x-fieldset-no-border .x-fieldset-header-text {
     font-weight: bold;
     color:#006699;
 }*/

/*This is required to align form to the right based on designer form property setting*/
.mainContainerRightAlign {
    margin: auto;
    margin-right: 0;
}

/*Used in Entity Instance*/
.rounded-corners {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    border-style: solid;
    border-width: thin;
}

/*Didnt find any impact and so commenting */
.x-form-cb-label-after {
    display: inline-block;
    word-break: break-word;
    word-wrap: break-word;
}

/*Didnt find any impact and so commenting */
/* This is required to ensure the radio button description label takes the available space */
/*.x-form-cb-label {
    width: 100% !important;
}*/

/* to wrap up the controls in Auto layout for a cell with None selected*/
.kta-cell .x-form-item {
    display: inline-table;
    vertical-align: middle;
}

/*Didnt find any impact and so commenting */
/*.x-item-disabled, .x-item-disabled .x-form-item-label, .x-item-disabled .x-form-field {
    opacity: 0.7 !important;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70) !important;
}*/
/* fix for SPR00116248 */
/*path works for IE  we need to give path from Forms folder*/
.x-ie .rubberband {
    cursor: url('controls/capture/resources/img/select.cur'), default;
}

/*Used in capture forms - Start*/
/*path works for Chrome  URL relative to CSS file*/
/*.rubberband {
    cursor: url('../controls/capture/resources/img/select.cur'), default;
}

.draggable {
    cursor: url('../controls/capture/resources/img/grab.cur'), default;
}

.dragging {
    cursor: url('../controls/capture/resources/img/grabbing.cur'),default;
}

.annotatable {
    cursor: url('../controls/capture/resources/img/StickyNoteCursor.cur'), default;
}

.x-ie .draggable {
    cursor: url('controls/capture/resources/img/grab.cur'), default;
}

.x-ie .dragging {
    cursor: url('controls/capture/resources/img/grabbing.cur'), default;
}

.x-ie .annotatable {
    cursor: url('controls/capture/resources/img/StickyNoteCursor.cur'), default;
}*/
/*Used in capture forms - End*/

/*Didnt find usage-I belive class name is changed*/
.x-btn-default-small-icon button, .x-btn-default-small-icon .x-btn-inner, .x-btn-default-small-noicon button, .x-btn-default-small-noicon .x-btn-inner {
    /*height: 100%;*/
}

/*Added to remove glossy effect on buttons- can be removed if agreed*/
/*.x-btn.x-btn-default-small {
    height: 22px;
    background-image: none;
}*/

/*Didnt find usage-I belive class name is changed*/
/*.x-btn.x-btn-default-small.x-btn-over.x-focus {
    background-image: none;
 }*/

/*Class names are changed - if required need to rewrite with new class names*/
/*.x-form-number {
    line-height: 18px;
}*/

/*Class names are changed - if required need to rewrite with new class names*/
/*.x-form-email, .x-form-url {
    border-color: #b5b8c8;
    border-width: 1px;
    border-style: solid;
}*/

/*Class names are changed - if required need to rewrite with new class names*/
/*.x-form-email:focus, .x-form-url:focus {
     border-color: #7eadd9;
 }*/

/*Class name is changed . It has to be x-grid-item-alt. If correctly set, gives background color to table alternate row cell. Default is blue*/
.x-grid-item-alt .x-grid-cell, .x-grid-item-alt .x-grid-rowwrap-div {
    /*background-color: #fafafa !important;*/
}

/*IE10 tooltip issue SPR00177906
*/
.x-ie10 .x-form-invalid-tip, .x-ie10 .x-tip {
    height: auto !important;
    width: auto !important;
}

/*Used in column Selector and Wokspace header form*/
.x-btn.ta-imagebutton.x-btn-default-small {
    background: none !important;
    background-color: transparent !important;
    border: 0px !important;
    background-image: none !important;
    filter: none !important; /*background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 50%, #ffffff 51%, #ffffff 100%);              background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#ffffff), color-stop(51%,#ffffff), color-stop(100%,#ffffff));              background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#ffffff 51%,#ffffff 100%);             background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#ffffff 51%,#ffffff 100%);             background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#ffffff 51%,#ffffff 100%);              background: linear-gradient(top,  #0088ca 0%,#ffffff 50%,#ffffff 51%,#ffffff 100%);              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );*/
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

/*Used in column Selector and Wokspace header form*/
.ta-imagebutton .x-btn-inner {
    padding-top: 0px !important;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

/*Used to make the collapsible icon look bigger. Seen the usage in Workqueue*/
.x-btn-icon-el {
    background-size: contain;
}

/*::-webkit-input-placeholder {
    color: #acacac;
    text-overflow: ellipsis;
}

:-moz-placeholder {
    color: #acacac !important;
    text-overflow: ellipsis;
}

::-moz-placeholder {
    color: #acacac !important;
    text-overflow: ellipsis;
}
/* for the future */
/*:-ms-input-placeholder {
    color: #acacac !important;
    text-overflow: ellipsis;
}*/

/* Color for empty place holder*/
.x-form-empty-field { /* IE that does not support placeholder */
    text-overflow: ellipsis;
}

/*Used in capture forms*/
#documentnavigatorview {
    /*background-color: #c3daf9;*/
}

/*Used in capture forms*/
/*.pdf-plugin-missing {
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px;
    height: 600px;
    width: 100%;
    text-align: center;
    font-size: medium;
    font-weight: bold;
    color: #04408C;
}*/

.x-grid-header-ct.x-grid-header-ct-hidden {
    /*To hide dummy header in resource tree panel when table header is applied with a height*/
    height: 0px !important;
}
.x-toolbar.x-docked .x-toolbar-default.x-docked-bottom.x-toolbar-docked-bottom .x-toolbar-default-docked-bottom.x-box-layout-ct 
{
    min-height: unset;
    max-height: unset;
    height: auto !important;
}

/*Commenting as didnt find any usage*/
.x-form-textarea {
    /*overflow-x: hidden !important;*/
}

/*Checked many places to know the usage-couldnt find usage*/
/* To override the group header of each row.*/
.x-grid-group-hd {
    /*background: white;
    border-color: #8D9298;
    border-color: #aaccf6;
    border-width: 0 0 1px 0;*/
}

/*Checked many places to know the usage-couldnt find usage*/
/*.x-grid-group-title {
    color: #0066A4;
    font-weight: bold;
    font-size: 12px;
}*/

/*Class name changed*/
/*.x-grid-group-column {
    color: black;
    font-weight: normal;
    font-size: 11px;
}*/

/*Used in Federated Security -Start*/
.federationLinks {
    background: none !important;
    border: none !important;
}

    .federationLinks span {
        text-decoration: underline;
        border: 0px;
        font-size: 16px !important;
        text-align: left;
    }

.federationContainer {
    position: absolute;
    top: 200px;
    margin-top: 10px;
    background-color: transparent;
    border-width: 0px !important;
}

.federatedSecurityContainerCentered {
    margin: 0 auto;
}

.federationContainer .x-panel-body-default {
    border-width: 0px !important;
}

.authenticationLabel {
    font-size: 16px;
}
/*Used in Federated Security - End*/

.KTAHyperlink {
    display: inline-block;
}

/*Checked many places to know the usage-couldnt find usage*/
.x-menu-item-icon {
    background-size: contain;
    background-repeat: no-repeat;
}

/* Used by Menus to remove default space allocated for icon on a menu item. */
.kta-menu-nospace .x-menu-item-text-default.x-menu-item-indent-no-separator {
    margin-left: 4px;
}

/*.x-form-invalid-icon ul {
    display: none !important;
}*/

/*overridden this for not to show scrollbars on popups*/
.x-mask {
    border: 0px !important;
    background: rgba(204, 204, 204, 0.5) !important;
}

/*To hide scroll bars for popup window*/
.x-component.x-fit-item.x-window-item.x-component-default.x-scroller {
    /*overflow: auto !important;*/
}

/*Min Height is 56px which is not mandatory in KTA, so set 20px which is the default minHeight for textfield by Extjs theme*/
.x-form-text-default.x-form-textarea {
    /*min-height: 20px;*/
}

/*To ensure text overflow is clip inline with previous releases*/ /*Clip is no longer required as PM confirmed this has to be ellipses*/
/*Button text is slighly cropped with default overflow value and so setting it to inherit*/
.x-btn-inner {
    /*text-overflow: clip;*/
    overflow:inherit;
}

/*ThinClient.Css has overridden css class to show the field icons, e.g. force valid, overriden the same for message box as it is showing scrolls*/
.x-message-box .x-box-layout-ct .x-box-inner {
    /*overflow: hidden !important;*/
}

/*  extjs has always explicitly set no-border for all controls upon focus, on a global level(in their css, see :focus{outline:none}). 
    but they do provide 'focusable' config property & 'x-focus' class in case if we need focusing on a component
    (some components like button,radio etc dont need this as extjs takes care of them internally)

    for table, there is no focusable provided, so just going with focus selector
*/
.kta-table:focus, .KTAHyperlink.x-focus, .KTAImage.x-focus, .KTAHorizontalRule.x-focus {
    border-width: 1px;
    border-style: solid;
    border-color: #77b0e2; /*Change to UX Style Style color*/
}

/*overridden this for not to show border width on process viewer control information popup*/
.ProcessViewerControlInfo .x-grid-body {
    border-width: 0px;
}

/*To make a button look like a Hyperlink*/
/*.hyperlinkui {
    background: none !important;
    border: 0px;
    text-decoration: underline;
    color: #0D7ABF;
    text-align: left;
    padding: 0px;
}*/

/*Text area height and width should display as in designer*/
.x-form-text-heighted .x-form-trigger-wrap {
    height: inherit;
}

/* To maintain the default queries to align little left side */
.Querytreelist .x-treelist-item-expandable > div .x-treelist-item-text {
    margin-left: 20px;
}

/* To maintain the querytree unselected item color */
.Querytreelist .x-treelist-item-text {
    color: #32323C;
}

/* WQ / Workload / JobList Accessibility changes - Applies to All selected nodes */
.Querytreelist .x-treelist-item-selected > .x-treelist-row {
    background-color: #e9f8ff;
}

.Querytreelist .x-treelist-item-selected > .x-treelist-row .x-treelist-item-text {
    color: #0064be;
}

/* To maintain the default queries to align little left side */
.docsettree .x-treelist-item-expandable > div .x-treelist-item-text {
    margin-left: 20px;
}

/* To maintain the querytree unselected item color */
.docsettree .x-treelist-item-text {
    color: #32323C;
}

/* To maintain the selected item color for query tree selected item */
.docsettree .x-treelist-item-selected:not(.x-treelist-item-expandable) {
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #0064be;
}

.docsettree .x-treelist-item-selected:not(.x-treelist-item-expandable) .x-treelist-item-text {
    color: #0064be;
    margin-left: 34px !important;
}

/* This will ensure that a selected leaf node will not be indented. */
.docsettree .x-treelist-item-selected:not(.x-treelist-item-expandable) > .x-treelist-row {
    margin-left: -4px;
}

/* Doc Set Accessibility changes - Applies to All selected nodes */
.docsettree .x-treelist-item-selected > .x-treelist-row {
    background-color: #e9f8ff;
}

.docsettree .x-treelist-item-selected > .x-treelist-row .x-treelist-item-text {
    color: #0064be;
}

.docsetIcon {
    width: 80px !important;
    height: 80px !important;
    font-size: 80px;
    margin-right: auto !important;
    margin-left: auto !important;
}

/*To maintain the toolbar transparent for workqueue and joblist*/
.ktatoolbar {
    background-color: transparent;
}

/* To hide the border for querytree explorer panel, toolbar for WQ and Joblist, and border for docSetTree panel */
.queryTreebodyPanel, .firsttoolbar, docSetTreebodyPanel {
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}


/* To hide the criteria collapsible icon */
.kta-criteria-icon .x-tool-before-title {
    display: none;
}

/* To apply the treelist expander font icon */
.Querytreelist .x-treelist-item-expander:after {
    content: "\e902";
    font-family: 'Kofax-Action-Icons';
    font-size: 1.3rem;
    line-height: 0.8;
}

/* To apply the treelist expander font icon */
.Querytreelist .x-treelist-item-expanded > * > * > .x-treelist-item-expander:after {   
    content: "\e5c5";
    font-family: 'Kofax-Action-Icons';
    font-size: 1.3rem;
    line-height: 0.8;
}

.query-tree-list-focus .x-treelist-item-selected > .x-treelist-row {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-top-color: #0064be;
    border-bottom-color: #0064be;
}

.docset-tree-list-focus .x-treelist-item-selected > .x-treelist-row {
    border: 1px solid;
    border-color: #0064be;
}

/* To apply the treelist expander font icon */
.docsettree .x-treelist-item-expander:after {
    content: "\e902";
    font-family: 'Kofax-Action-Icons';
    font-size: 1.3rem;
    line-height: 0.8;
}

/* To apply the treelist expander font icon */
.docsettree .x-treelist-item-expanded > * > * > .x-treelist-item-expander:after {
    content: "\e5c5";
    font-family: 'Kofax-Action-Icons';
    font-size: 1.3rem;
    line-height: 0.8;
}

.x-toolbar .x-docked .x-toolbar-default .x-docked-bottom .x-toolbar-docked-bottom .x-toolbar-default-docked-bottom .x-box-layout-ct 
{
    height: auto !important;
    max-height:unset;
}

/*Theme's strike through has to be applied to labels of custom forms like worksapce, joblist and more*/
.x-form-item-label-inner
{
    display:unset;
}

/*Height shouldnt be set to file upload control. Done as part of US:974257*/
.x-form-file-wrap .x-form-trigger-wrap .x-form-text 
{
    height :auto;
}

/* Rerequired to auto adjust based on Font-Start*/
.Querytreelist li .x-treelist-row {
    height: 22px;
}

/* Rerequired to auto adjust based on Font-Start*/
.docsettree li .x-treelist-row {
    height: 22px;
}

/* sencha sets some line-height to elements according to font-sizes defined in their own themes, but KTA lets font-sizes to be customizable 
   so, set line-height as 1.2, this will auto adjust the height according to the font sizes */

.x-grid-cell,
.x-menu-item, /* needed for the grid column sort menus */
.x-grid .x-toolbar .x-btn,
.x-grid .x-toolbar .x-btn .x-btn-inner,
.x-btn-default-toolbar-small .x-btn-inner,
.x-btn-inner-default-small,
.x-btn-inner-kta-primarybutton-ui-small,
.Querytreelist .x-treelist-item-text {
    line-height: 1.2; /* 1.2 times the element font, this is recommended/widely-used, we can set to normal but that could lead to browser inconsistencies */
}
.docsettree .x-treelist-item-text {
    line-height: 1.2; /* 1.2 times the element font, this is recommended/widely-used, we can set to normal but that could lead to browser inconsistencies */
}

/* sencha sets top v-align for grid cells(odd!), when font-size is smaller, the cell height too gets smaller, 
   having a top v-align will push the cell to top of the row and the text appears slightly above center, to avoid that set v-align to middle */
.x-grid-td, .x-form-trigger:not(.x-form-trigger-spinner), .x-form-cb-input {
    vertical-align: middle;
}

/*Used for Title header of WorkspaceHeader and General Header*/
.workspace-headertext {
    font-size: 18px;
    color: #0B7EC4;
}

/*When form background is set for any random color, inner divs of input controls, having border radius is showing background color. This has to be transparent.*/
.x-form-trigger-wrap {
    background-color: transparent;
}

/*toolbar should have this padding as per PM's request to reduce spacing.This is used in workqueue and job list forms.*/
.x-toolbar-kta-toolbar-editor-ui {
    padding: 0px 0 0px 8px;
}

/*/* This is required to wrap the label inner text when it has a long text and to align in middle*/
.x-form-item-label-inner {
    word-break: break-word;
    vertical-align: middle;
    word-wrap: break-word;
}

/*The padding is set as per PM's request and this cant be set from Themer and so setting in this css*/
.x-tab-default-top {
    padding: 4px 12px 4px 12px;
}

/*Align radio button list control to center:974257*/
.kta-touch-radiobuttonlist .x-form-cb-wrap {
    vertical-align: middle;
}

.kta-chart .x-panel-body-default {
    border: none !important;
}

.kta-chart .x-legend-vertical .x-legend-item {
    border: none !important;
    text-align: left !important;
}

.kta-chart .x-legend-horizontal .x-legend-item {
    border: none !important;
    text-align: left !important;
}

.kta-chart .x-panel-header-default {
    border: none;
    background: transparent;
}

.kta-chart .x-panel-header-default-top {
    box-shadow: none;
    -webkit-box-shadow: none;
}

.kta-table .x-grid-td {
    vertical-align: top;
}

/*Summary control header padding*/
.kta-summary .x-panel-header-default-horizontal {
    padding: 2px;
}

/*Actionbuttons i.e Job Action Button and Activity Action Button margin changed to 0*/
.kta-Actionbutton .x-btn-text.x-btn-icon-left > .x-btn-icon-el-default-small
{
    margin: 0px;
}

/*Resource tree/Explorer tree group font icons*/
.kta-resourcetree .workspaceGroup:before {
    content: "\e8d3" !important;
}

/*Resource tree/Explorer tree user font icons*/
.kta-resourcetree .workspaceWorker:before {
    content: "\e7fd" !important;
}

.kta-resourcetree .x-grid-cell-treecolumn .x-tree-icon-parent-expanded:before {
    content: "\e2c8"
}

.kta-resourcetree .x-grid-cell-treecolumn .x-tree-icon-parent:before {
    content: "\e2c7"
}

.kta-resourcetree .x-grid-cell-treecolumn .x-tree-icon, .resourcetree-icons:before {
    font-family: Kofax-Action-Icons;
    font-size: 1.5em;
    vertical-align: sub;
    background-image: none;
    color: #828282;
}

/*View Capture Folder/Documents Explorer tree user font icons*/
.kta-viewdocuments-tree .x-grid-body {
    border-width: 1px 0px 1px 1px;
}

.kta-viewdocuments-tree .atala-document-container {
    border-top-style: solid;
    border-top-width: 1px;
    border-right-style: none;
    border-right-width: 1px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-style: none;
    border-left-width: 1px;
}

.kta-viewdocuments-tree .x-grid-cell-treecolumn .x-tree-icon-parent-expanded:before {
    content: "\e2c8"
}

.kta-viewdocuments-tree .x-grid-cell-treecolumn .x-tree-icon-parent:before {
    content: "\e2c7"
}

.kta-viewdocuments-tree .x-grid-cell-treecolumn .x-tree-icon-leaf:before {
    content: "\e24d"
}

.kta-viewdocuments-tree .x-grid-cell-treecolumn .icon-file_pdf-leaf:before {
    content: "\e908"
}

.kta-viewdocuments-tree .x-grid-cell-treecolumn .icon-unsupported_mime_type-leaf:before {
    content: "\e915"
}

.kta-viewdocuments-tree .x-grid-cell-treecolumn .x-tree-icon {
    font-family: Kofax-Action-Icons;
    font-size: 1.5em;
    vertical-align: sub;
    background-image: none;
    color: #828282;
}

.kta-viewdocuments-tree .x-grid-item.x-grid-item-selected.kfx-grid-row-first-selected .x-grid-cell .x-tree-icon {
    color: #0064be !important;
}

.kta-viewdocuments-tree .icon-file_pdf-leaf {
    height: 24px;
}

.kta-viewdocuments-tree.x-splitter {
    border-color: #cacacda6;
}

/*Custom Toolbar hover background color on buttons*/
.kta-custom-toolbarcontrol .x-btn-over.x-btn-default-toolbar-small {
    background-color: rgba(0,0,0,0.05);
}

/*Custom Toolbar over background color on disabled buttons */
.kta-toolbarcontrol-button.x-btn.x-btn-disabled.x-btn-default-toolbar-small {
    background-color: transparent;
}

/*Workaround from sencha to allow disabled buttons to have tooltips showing */
.disabled-tooltip-fix.x-item-disabled, .disabled-tooltip-fix.x-item-disabled * {
    pointer-events: auto !important;
}

/*Resource tree/Explorer tree group font icons*/
.workspaceGroup:before {
    content: "\e8d3" !important;
}

/*Resource tree/Explorer tree user font icons*/
.workspaceWorker:before {
    content: "\e7fd" !important;
}

/*External user font icons*/
.workspaceExternalUser:before {
    content: "\e98c" !important;
}

/*Loaned user font icons*/
.workspaceLoanedUser:before {
    content: "\e98b" !important;
}

.resourcetree-icons:before {
    font-family: Kofax-Action-Icons;
    vertical-align: sub;
    background-image: none;
    color: #828282;
}

/*Invalid field icon should use font icons and so setting font content to it. This is changed as part of 1112272*/
.x-form-invalid-icon-default, .x-form-invalid-icon-default:before {
    font-family: Kofax-Action-Icons;
    background: none !important;
    font-size: 17px;
}

/*Icon of invalid KTA field is shifted down-1442312*/
/*Controls are always aligned to top irrespective of label text. So error icon should also be aligned to top*/
.x-form-error-wrap-side
{
    vertical-align:top;
}

@-moz-document url-prefix() {
    /*icon font size is 17 but height is 16. So to fit correctly increasing height by 2px.*/
    .x-form-invalid-icon-default {
        height: 18px;
    }
}

/* Background shouldnt be set to none for fieldInvalid and so settting color separately*/
    .fieldInvalid, .x-form-invalid-icon-default, .x-form-invalid-icon-default:before {
        color: #d8675a;
        content: "\e000" !important;
    }

/* Required to align the control to top*/
.x-form-text-field-body-default {
    vertical-align: top;
}

.kta-no-border-default {
    width: 100% !important;
}

.kta-no-border-default > .x-form-trigger-wrap-default {
    border: 0px !important;
    border-style: none !important;
}

/* Added to fix border issue (bug 1136120) for input fields when zoomed out in chrome browser, this fix can be remvoed once the bug is fixed in chrome rendering engine.
   We are using thin instead of 1px, which will be applied to all themes suppored in KTA.
   Ref: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc
*/
.x-form-trigger-wrap-default {
    border-width: thin;
}

/****Bug 1218883****
 In ExtJS grids, a column which isn't in edit mode gives the class "unselectable".
 This results in the hyperlink column getting the default cursor instead of a pointer. 
 *******************/
a:hover {
    cursor: pointer;
}

.x-btn-kta-navigation-toolbar-ui-toolbar-small {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}


.work-queue-first-column-class > div {
    padding-left: 1px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 0px !important;
}

.work-queue-other-column-class > div {
    padding-left: 10px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 0px !important;
}

.kta-label-class > label > span:after{
    content: "*" !important;
    color: red !important;
}

.kofax-label {
    display: inline-table;
}

/* when fieldcontainer is disabled, the items within get disabled twice, i.e opacity gets applied twice, making them almost not visible, to avoid this unset the opacity on fieldcontainer items when disabled  */
.x-form-fieldcontainer.x-item-disabled .x-field.x-item-disabled {
    opacity: unset;
}

/* For the workqueue/workload control when the Alternate Row Color option is set to true by default no style is applied
   If the user requires to set the background color for an alternate row then with the below CSS class it is achieved by updating his own style.
*/
.KTAWorkqueue-Table .x-grid-item-alt {
}

.kta-actionIconList {
    background-color: transparent;
    border-color: transparent;
}

 .kta-actionIconList .x-btn-default-toolbar-small {
    border-color: transparent;
 }

.kta-actionsListColumn div {
    padding: 0;
}

.iconListButton:hover {
    background: Rgba(0,0,0,0.05);
}

.iconListButton .x-btn-icon-el {
    font-size:18px;
    width:24px;
    line-height:18px;
}

.kta-actionIconList .x-btn-default-toolbar-small {
    padding: 2px;
}

/* tree list items do not support icon, they support only iconCls and below are needed to resize image and vertical centering*/
.kta-nav-vertical .x-treelist-row:not(.menuBarsItemRow) .x-treelist-item-icon {
    /* give the div some size(18px) and resize the image to fit within */
    width: 18px;
    height: 18px;
    background-size: contain;

    /* vertically center without having to rely on display:flex */
    top: 50%;
    transform: translateY(-50%);
}

.kta-nav-vertical .x-treelist-item-icon {
    cursor: pointer; /* set cursor pointer to icons too */
}

.kta-nav-vertical .x-treelist-row-over.menuBarsItemRow {
    background-color: unset; /* remove any hover styles for menu bars item */
}

.kta-nav-vertical .firstLevelTreeListItemRow {
    /* to get some left margin on top level tree list items.
       setting margin/padding on treelist/items interferes with the desired behavior of having items occupy full width 
       and hover/select left borders aligned to left side of treelist without any gap */
    padding-left: 5px;
}
/********************************DESKTOP CONTROLS - END**********************************************/
/****************************************************************************************************/