/********************************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=8.0.1.0.0.340);
    cursor: pointer;
}

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

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

.ellipsis-edit-disabled {
    background-image: url(../Images/ellipsis-disable.png?productVersion=8.0.1.0.0.340);
    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;
}

.KTAWorkqueue-Table .x-grid-row {
    height: 47px !important;
}

.KTAJoblist-Table .x-grid-row {
    height: 47px !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 to next line in Auto layout for a cell with None selected
   note: we have updated the selector to only target elements right under cell, as we dont want the internal fields to have the styles applied, they dont need it and can cause issues.
   for example, display: inline-table is causing issues when it is applied for radio button list items. vertical orientation was not working.  
*/
.kta-cell .kta-form-control.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-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: 30px;
}

/* 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;
    padding-left:7px;
}

/* 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: "\e409";
    font-family: 'Kofax-Action-Icons-colored';
    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: "\e5cf";
    font-family: 'Kofax-Action-Icons-colored';
    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: "\e409";
    font-family: 'Kofax-Action-Icons-colored';
    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: "\e5cf";
    font-family: 'Kofax-Action-Icons-colored';
    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;
}

.x-toolbar-badge {
    background-color: grey;
    color: white;
    text-align: center;
    border-radius: 20px;
    height: 20px;
    width: 20px;
    font-size: 13px !important;
    top: 5px !important;
}

/*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: 30px;
    padding-top: 7px;
}

/* 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 {
    height: 37px;
    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;
}

 /*Removed the overrides form new icons*/
/*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-colored;
    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-colored;
    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;
}

/*Removed the overrides form new icons*/
/*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-colored;
    color: #32332C;
}

/*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-colored;
    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;
}

.kta-cardlist-control .cardlist-root {
    width: 100%;
    /* to fit as many cards as possible in single row, occupying full width. any left over space is filled either by - a. increasing width of cards or b. including more cards */
    display: inline-grid;
    grid-template-columns: repeat(auto-fill,minmax(350px, 1fr));
}
.kta-cardlist-control .cardlist-root .cardlist-item {
    margin: 20px;

    /* inline grid is supported in most browsers, except in some very old browser versions. 
       just in case if grid isnt supported(user using old browser version), below styles will at least ensure the items show up wrapped and approply sized, 
       although will still have the problem of cards showing up with irregular widths, cards with larger content will take up more width */
    display: inline-block;
    min-width: 350px;
}
.kta-cardlist-control .cardlist-root .cardlist-item .e-icons {
    /* use same color and size for icons as rest of KTA */
    font-size: 24px !important;
    color: #32332c !important; 
}
.kta-cardlist-control .cardlist-root .cardlist-item .e-card {
    /* for some reason, the card's top border appears very thin/nonexisting, this is observed in plain SF example/fiddle too. 
       it could be as expected(maybe a material theme aspect), but we decided to have top border to make it not appear cut off */
    border-top: 1px solid #F5F5F5;
}
.kta-cardlist-control .cardlist-root .cardlist-item .e-card-header img {
    max-width: 50%;
    height: 30px;
}
.kta-cardlist-control .cardlist-root .cardlist-item .e-avatar {
    background-color: red; 
    float: right;
}

.kta-resourcetree .x-tree-icon-leaf {
    margin-top: -3px !important;
    line-height: 1em !important;
    color: #32332C;
    font-size: 19px;
}

.kta-resourcetree .x-tree-icon-parent {
    margin-top: -3px !important;
    line-height: 1em !important;
    color: #32332C;
    font-size: 19px;
}

.kta-resourcetree .x-tree-icon-parent-expanded {
    margin-top: -3px !important;
    line-height: 1em !important;
    color: #32332C;
    font-size: 19px;
}

.resourcetree-icons .icon-supervisor_account::before {
    font-size: 19px;
}

.resourcetree-icons .icon-person::before {
    font-size: 19px;
}

.resourcetree-icons .icon-external_user::before {
    font-size: 19px;
}

/*SyncFusion Control Css*/
/*This css is used when the label align is on left*/
.dragdrop-grid-column-container {
    display: flex;
    vertical-align: top;
}

/*This css is used when the label align is on top*/
.dragdrop-grid-row-container {
    display: inline-block;
    vertical-align: top;
    width: 100%
}

/* To hide file size and status */
.e-file-name, .e-file-type, .e-file-size, .e-file-status, .e-upload-progress-wrap {
    display: none !important;
}

/* To show scroll for the upload file lists. 
  Note: the max-height is set dynamically at code depending on the height set at designer for the control. */
.e-upload-files { 
    overflow: auto;
}

/* Define the styles to display the items horizontally in the file list container. */
.drag-drop-file-name {
    position: relative;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drag-drop-file-size {
    color: silver;
    padding-left: 10px;
    width: 20%;
}

.drag-drop-upload-ready-status {
    color: green;
    padding-left: 10px;
    width: 30%;
}

.drag-drop-upload-error-status {
    color: red;
    padding-left: 10px;
    width: 30%;
}

.drag-drop-file-name, .drag-drop-file-size, .drag-drop-upload-ready-status, .drag-drop-upload-error-status {
    font-family: inherit;
    display: inline-block;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* set the borders to none for the upload file list */
.e-upload-files, .e-upload-file-list {
    border-top: none !important;
    border-bottom: none !important;
    background: white;
}

/* set the min-height for the upload file list */
.e-upload .e-upload-files .e-upload-file-list, .e-bigger.e-small .e-upload .e-upload-files .e-upload-file-list {
    min-height: 40px;
}

.e-upload .e-upload-files .e-upload-file-list {
    border-top: 1px solid rgba(0,0,0,.12);
}

.e-file-delete-btn {
    padding: unset !important;
}

.e-file-remove-btn {
    padding: unset !important;
}

.e-file-abort-btn {
    padding: unset !important;
}

/* To specify font size and color of browse button */
.e-upload .e-file-select-wrap .e-btn, .e-upload .e-upload-actions .e-btn, .e-bigger.e-small .e-upload .e-file-select-wrap .e-btn, .e-bigger.e-small .e-upload .e-upload-actions .e-btn {
    font-family: none;
    text-transform: none;
    box-shadow: none;
    border-color: #cacacd;
    background-color: #efeff6;
    font: 400 14px/normal Noto Sans, sans-serif;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* To specify style for the button browse. */
.e-btn:hover, .e-css.e-btn:hover {
    border-color: #a6a6a6;
}

/* To specify the position of the remove button */
.e-upload .e-upload-files .e-file-remove-btn.e-icons, .e-upload .e-upload-files .e-file-delete-btn.e-icons, .e-upload .e-upload-files .e-file-abort-btn.e-icons, .e-upload .e-upload-files .e-file-pause-btn.e-icons, .e-upload .e-upload-files .e-file-play-btn.e-icons, .e-upload .e-upload-files .e-file-reload-btn.e-icons, .e-bigger.e-small .e-upload .e-upload-files .e-file-remove-btn.e-icons, .e-bigger.e-small .e-upload .e-upload-files .e-file-delete-btn.e-icons, .e-bigger.e-small .e-upload .e-upload-files .e-file-abort-btn.e-icons, .e-bigger.e-small .e-upload .e-upload-files .e-file-pause-btn.e-icons, .e-bigger.e-small .e-upload .e-upload-files .e-file-play-btn.e-icons, .e-bigger.e-small .e-upload .e-upload-files .e-file-reload-btn.e-icons {    
    top: 50%;
}

/* The actions buttons are not used for this control. So hide them */
.e-upload-actions {
    display: none;
}
.filterIconBlueColor {
    color: #00558c;
}

.x-form-item-default.x-item-disabled {
    opacity: 0.5;
}

/* The following classes are required to support the Copilot Chat control */
.chat-control .e-listview .e-list-item {
    padding: 0 !important;
}

.chat-control .e-listview .e-list-container {
    overflow: auto !important;
    height: 100%;
}

.chat-control .e-list-item {
    height: auto !important;
    cursor: pointer !important;
}

.chat-control .settings {
    display: flex;
}

.chat-control .chat-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: radial-gradient(circle farthest-side at 100% 100%, #5B6DC3 0%, #884FAD 55%) 0% 0% no-repeat padding-box;
    border: 1px solid;
    border-color: #d1d1d1;
    padding: 6px 0 6px 6px;
}

.chat-control .chat-header-icon {
    font-size: 22px;
    line-height: 1.4em;
    color: #fff;
}

.chat-control .chat-title {
    color: #fff;
    font-size: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    margin-left: 10px !important;
    padding-right: 50px !important;
}

.chat-control .no-provider-label {
    color: darkgrey;
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
}

.chat-control .message-chat-user,
.chat-control .name-chat-user {
    font-size: 14px;
    line-height: 20px;
}

.chat-control .message-chat-user {
    float: right;
    clear: right;
    border-radius: 5px;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #CACACD;
    color: #32323c;
    overflow-wrap: anywhere;
}

.chat-control .name-chat-user {
    color: #a9a9a9;
    padding-top: 3px;
    font-weight: 500;
    float: right;
}

.chat-control .message-copilot,
.chat-control .message-copilot-error,
.chat-control .name-copilot {
    font-size: 14px;
    line-height: 20px;
}

.chat-control .message-copilot,
.chat-control .message-copilot-error {
    border-radius: 5px;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #ABE2FF;
    color: #32323c;
    float: left;
    clear: left;
    min-height: 26px;
    overflow-wrap: anywhere;
}

.chat-control .message-copilot-error {
    color: red;
}

.chat-control .name-copilot {
    color: #a9a9a9;
    padding-top: 3px;
    font-weight: 500;
    float: left;
}

.chat-control .content-copilot,
.chat-control .content-chat-user {
    margin: 2px;
    display: inline-block;
    flex: 1;
    font: 400 14px/normal Noto Sans, sans-serif;
}

.chat-control .content-copilot {
    margin-right: 62px;
}

.chat-control .content-chat-user {
    margin-left: 62px;
}

.chat-control .image-chat-user-span {
    margin: 5px;
    width: 2.7em !important;
    height: 2.7em !important;
}

.chat-control .image-copilot-span {
    margin-left: 10px;
    margin-top: 2px !important;
    font-size: 20px !important;
    width: 2em !important;
    height: 2em !important;
    background-color: #884FAD !important;
}

.chat-control .image-chat-user,
.chat-control .image-copilot {
    padding-top: 5px;
    width: 60px;
}

/********************************DESKTOP CONTROLS - END**********************************************/
/****************************************************************************************************/