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

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

.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 */
}

/* Sencha ticket (https://support.sencha.com/#ticket-59474) is raised for this and they are working on it. */
/* 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;
}

/* Sencha ticket (https://support.sencha.com/#ticket-59474) is raised for this and they are working on it. */
.x-treelist-kta-navigation-treelist-secondary-ui .x-treelist-item-selected > .x-treelist-row {
    border: 1px solid #1c64b4;
    border-left: 4px solid #1c64b4;
}

    /* Sencha ticket (https://support.sencha.com/#ticket-59474) is raised for this and they are working on it. */
    .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;
}

/*  replication steps: in workspacetheme, try to show a messagebox, you will notice the bottom border of button appears cut off(bug 1972336), see the comment for height style.
    this problem has been there since beginning. in next upgrade, please check if this problem can be solved with configuring themer app'ly or if just upgrade itself solves the problem.
*/
.x-window .x-toolbar-footer .x-box-inner {
    height: 33px !important; /* the buttons inside end up occupying 32.4, but the container height is only 32, set it to 33 so that button wont appear cut off */
}

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