/********************* Start ************ Customize icon background color ****************************************/
:not(.x-form-type-checkbox).fieldSelected .extraIcon {
    background-color: #fff6df;
}

.readonlyField.fieldInvalid.extraIcon {
    background-color: #F0F0F0;
}

.readonlyField.extraIcon {
    background-color: #F0F0F0;
}
/***********************End**************************************/


/********************* Start ************ Apply custom icons to the toolbar tool buttons ****************************************/
.x-tool-restore {
    font: 16px/1 Kofax-Action-Icons;
    background: none;
}

.x-tool-restore:before {
        content: "\e90a";
}
/***********************End**************************************/


/********************* Start ************ Checkbox changes in caputure other than capture table checkbox ****************************************/
:not(.cebpm-table-field).cebpm-capture-field .x-form-checkbox-default {
    width: 28px;
    border-left: 4px transparent solid;
}

:not(.cebpm-table-field).cebpm-capture-field.fieldSelected .x-form-checkbox-default {
    border-left: 4px #eeb111 solid;
}
/***********************End**************************************/


/********************* Start ************ Popup window close button customized to white color ****************************************/
/*This is required to display the window close icon in white on new theme*/
.x-window .x-tool-tool-el {
    color: white !important;
}
/***********************End**************************************/


/********************* Start ************ Spinner up/down padding overrides ****************************************/
/* Below settings are required to have enough space between the numeric up down arrows of number field as per bug 1101425*/
.x-form-spinner-down-default {
    padding-top: 4px;
}

/* Below settings are required to have enough space between the numeric up down arrows of number field as per bug 1101425*/
.x-form-spinner-up-default {
    padding-bottom: 4px;
}
/***********************End**************************************/


/********************* Start ************ Button focus ****************************************/
/*1101793-Required to set auto focus on button*/
.x-btn-focus.x-btn-default-small {
    border-color: #1c64b4;
    background-image: none;
    background-color: #efeff6;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
/***********************End**************************************/


/********************* Start ************ Grid selection customization****************************************/
.x-grid-cell-selected.validCell, .x-grid-cell-selected.invalidCell {
    background-color: #fff6df;
    border-left: 4px #eeb111 solid !important;
}

.grid-header.x-panel-header-text-default:focus {
    background-color: #fff6df;
    border-left: 4px #eeb111 solid;
}
/***********************End**************************************/


/********************* Start ************ Capture table changes****************************************/
.cebpm-table-field .x-grid-item {
    line-height: 1.4em !important;
}

.cebpm-table-field .x-grid-cell-inner {
    padding: 1px 1px 2px 1px;
}

.cebpm-table-field .x-form-text-default {
    padding: 0px 0px 0px 0px;
}

.cebpm-table-field .x-form-field {
    padding-left: 3px;
}

.cebpm-table-field .x-column-header-inner {
    padding-top: 0px;
    padding-bottom: 0px;
}

.cebpm-table-field .x-panel-header-default-horizontal {
    padding: 5px 15px 5px;
    font-weight: bold;
}

.cebpm-table-column-row-header {
    height: 16px;
    width: 16px;
    background-image: -webkit-linear-gradient(top, #f9f9f9, #e6e3e3);
}
/***********************End**************************************/


/********************* Start ************ Capture toolbar buttons padding****************************************/
/*Specific override of styles for TC*/
.tctoolbar .x-btn-default-toolbar-small {
    padding-top: .1em;
    padding-left: 0em;
    padding-right: 0em;
    padding-bottom: .1em;
}
/***********************End**************************************/


/********************* Start ************ Capture multithumbnailspanel changes****************************************/
.multithumbnailspanel .x-grid-cell-inner-row-expander {
    padding: 8px 8px 7px 4px;
}

.multithumbnailspanel .x-grid-cell, .multithumbnailspanel .x-grid-td {
    border-bottom: 1px solid black;
}
/***********************End**************************************/


/********************* Start ************ Capture Combo box padding changes****************************************/
.document-type-combobox .x-form-text-default {
    padding: 2px 5px 2px 5px;
}
/***********************End**************************************/


/********************* Start ************ Tree panel, menu item, grid line, button etc: line height changes ****************************************/
.batch-tree-panel .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-treelist-item-text {
    line-height: 1.5; /* 1.2 times the element font, this is recommended/widely-used, we can set to normal but that could lead to browser inconsistencies */
}

.batch-tree-panel .x-grid-cell-inner-treecolumn {
    padding: 5px 10px 2px 4px;
}

.batch-tree-panel .x-tree-elbow-img {
    line-height: 2.2;
}

.batch-tree-grid .x-grid-cell-inner {
    padding: 3px 10px 0px;
}

.batch-tree-grid .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-treelist-item-text {
    line-height: 1.5; /* 1.2 times the element font, this is recommended/widely-used, we can set to normal but that could lead to browser inconsistencies */
}
/***********************End**************************************/


/********************* Start ************ toolbar items focus outline changes****************************************/
.x-tool-default:focus {
    outline: 1px solid #1c64b4;
    outline-offset: 2px;
}
/***********************End**************************************/


/********************* Start ************ Navigation toolbar padding changes ****************************************/
.x-nav.kta-nav-horizontal {
    padding: 10px 0px 10px 15px;
}
/***********************End**************************************/


/********************* Start ************ background color override of selected control other than checkbox ****************************************/
:not(.x-form-type-checkbox).fieldSelected .x-form-trigger-wrap {
    background-color: #fff6df;
}
/***********************End**************************************/


/********************* Start ************ Navigation toolbar changes ****************************************/
/* the menu overflow handler on the navmenu toolbar has the font color set to black & border color set to white, 
   this which makes the menu icon invisible and have a white border appear always(even when not focused)
   we cannot configure this on themer(these appear to be inherited from base toolbar and there is no way to override this for individual uis), 
   there is a sass variable but that will apply the style for every toolbar which is not desireable, so override it here */
.x-toolbar-kta-navigation-toolbar-ui .x-toolbar-more-icon {
    color: #fff;
}

.x-toolbar-kta-navigation-toolbar-ui .x-box-menu-after {
    border-color: transparent; /* we could just set border: none, but doing so is shifting the menu to next row in toolbar and this appears less impactful */
}

/* Required to auto adjust buttons in toolbar based on height */
.kta-toolbarcontrol, .kta-toolbarcontrol-button {
    padding: 0px;
}

/*  when you resize a nav menu toolbar to smaller size, a menu button gets shown at the end to show rest of buttons (currently this happens only when form is responsive)
    the overflow menu items on the toolbar control inherit their heights from toolbar buttons 
    (which actually sounds wrong, menu items should not inherit styles from buttons and ideally sencha should fix it)
    
    currently, we are specifying a height of 20 on nav menu toolbar buttons, this is to fit the buttons within the toolbar height which has a default height of 30(buttons in this theme have 32 height)
    the overflow menu items are inheriting this and are looking squished
    to avoid this, specify height via css instead (as recommended by sencha), doing this for workspace theme only(classic theme and others do not need this, they have lesser heights)
*/
.x-nav .x-nav-button {
    height: 20px;
}

/*
    Some desired styles for vertical navigation menu treelist. Ideally these should be set using themer, but are not available(under treelist ui).
    You can remove if these are made available in themer.
*/

.kta-nav-vertical .x-treelist-item-text {
    margin-left: 22px; /* treelist ui in themer has icongap setting, but it does not seem to be working */
}

.x-treelist-kta-navigation-treelist-secondary-ui .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
    margin-left: 3px; /* theme has this set to 10px which makes menu items without icons appear aligned away(to right side) from menu items with icons */
}

.kta-nav-vertical .x-treelist-item-text, 
.kta-nav-vertical .x-treelist-item-icon, 
.kta-nav-vertical .x-treelist-item-expander {
    line-height: 32px; /* theme has line-height set to very less value, and there is no way to set the line-height for the treelist ui, set this to same value as triton theme, i.e 32px */
}

/* hover and selected secondary/alternative-emphasized styles from UX style guide */
.x-treelist-kta-navigation-treelist-secondary-ui .x-treelist-row-over {
    border-left: 4px solid #828282;
}

.x-treelist-kta-navigation-treelist-secondary-ui .x-treelist-item-selected > .x-treelist-row {
    border: 1px solid #1c64b4;
    border-left: 4px solid #1c64b4;
}
.x-treelist-kta-navigation-treelist-secondary-ui .x-treelist-item-selected > .x-treelist-row .x-treelist-item-text {
    color: #1c64b4;
}

/* selected primary navigation styles from UX style guide, some border styles are not needed for primary */
.x-treelist-kta-navigation-treelist-ui .x-treelist-item-selected > .x-treelist-row {
    border-left: 4px solid #eeb111;
}
.x-treelist-kta-navigation-treelist-ui .x-treelist-item-selected > .x-treelist-row .x-treelist-item-text {
    color: #eeb111;
}

/* remove above set hover and selected styles for menu bars item */
.kta-nav-vertical .x-treelist-item-selected > .x-treelist-row.menuBarsItemRow,
.kta-nav-vertical .x-treelist-row-over.menuBarsItemRow {
    border-left: unset;
}

/***********************End**************************************/