/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */
/* category property grid */

table.xCatGrid,
table.xCatGrid table.xCatGridInner {
    /* width is assigned in code depending on the GridSizeMode and GridWidth properties */
    table-layout: fixed;
    border-style: none;
    border-collapse: separate;
    border-spacing: 0px;
    background-color: var(--table-categorygrid-background-color);
    
    /* the category grid should have a solid background color by default */
}


/* no effect except perhaps in FF */
table.xCatGrid>tbody {
    width: 100%;
    overflow: auto;
}

table.xCatGrid tr.template,
table.xCatGridInner td.template {
    display: none !important;
}

table.xCatGrid tr[excl]:not([allow]),
table.xCatGrid td[excl]:not([allow]),
table.xCatGrid th[excl]:not([allow]) {
    filter: alpha(opacity=40) !important;
    opacity: .40 !important;
}

table.xCatGrid tr[allow]:not([selected]) td.xSys {
    filter: alpha(opacity=40) !important;
    opacity: .40 !important;
}

table.xCatGrid tr[error] {}

table.xCatGrid tr>th,
div.xTableHdr {
    padding: .75rem .125rem;
    font-weight: 600;
    text-align: left;
    border-bottom: solid 1px var(--border-normal);
    overflow: hidden;
    text-overflow: ellipsis;
}

table.xCatGrid>tbody>tr>th[last] {
    border-right-style: none;
}

table.xCatGridInner tr>td.propHdr[last] {
    border-bottom-style: none;
}

table.xCatGrid tr>th[required] {
    font-weight: bold;
}

table.xCatGrid[orientation="horizontal"][sortable] thead th[cid] {
    /* cursor: pointer; */
}

table.xCatGrid[orientation="horizontal"][sortable] thead th[cid]:hover {
    background-color: var(--layer);
}

table.xCatGrid[orientation="horizontal"] tr>td,
table.xCatGrid[orientation="vertical"] tr>td.xSys,
table.xCatGrid[orientation="vertical"] tr>td.xSubCat,
table.xCatGridInner tr>td {
    min-height: 2rem;
    padding: .5rem .125rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* set up a default, hidden border on each cell - that way simply enabling it will cause it to appear */
    border-color: var(--border-normal);
    border-width: 1px;
    border-style: none;
}

table.xCatGrid tr:last-child > td {
    border: 0;
}

table.xCatGrid tr[onmouseenter]:not([excl]) > td {
    cursor: pointer;
}

table.xCatGrid[orientation="horizontal"]>colgroup>col {
    /* set up a default, hidden border on each cell - that way simply enabling it will cause it to appear */
    border-width: 1px;
    border-style: none;
}

table.xCatGrid[orientation="horizontal"] thead>tr>th.xSort>div {
    position: relative;
    padding: 0;
    height: 100%;
}

/* BROWSER-SPECIFIC EXTENSIONS */
@-moz-document url-prefix() {
    table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] .xSort-controls {
        display: table;
    }

    table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] tr>td.xSort {
        height: 100%;
    }
}

/* END BROWSER-SPECIFIC EXTENSIONS */

table.xCatGrid[orientation="horizontal"] tr>td {
    border-bottom-style: solid;
}

table.xCatGrid[orientation="horizontal"] tr:not(.search-highlight)>td:not(.search-highlight) {
    background-color: var(--table-categorygrid-row-background-color);
}

table.xCatGrid[orientation="horizontal"] tr>td:focus {
    -webkit-box-shadow: inset 0 0 1px 1px #4D90FE;
    -moz-box-shadow: inset 0 0 1px 1px #4D90FE;
    box-shadow: inset 0 0 1px 1px #4D90FE;
    outline: none;
    border-radius: 2px;
}

table.xCatGrid a.expNewOptionButton,
table.xCatGrid a.expNewOptionButton_before,
table.xCatGrid a.expNewOptionButton_after,
table.xCatGrid a.expCloneOptionButton,
table.xCatGrid a.expCloneOptionButton_before,
table.xCatGrid a.expCloneOptionButton_after {
    height: 16px;
    width: 16px;
    display: inline-block;
    background-repeat: no-repeat;
}

table.xCatGrid a.expNewOptionButton_before,
table.xCatGrid a.expNewOptionButton_after,
table.xCatGrid a.expCloneOptionButton_before,
table.xCatGrid a.expCloneOptionButton_after {
    margin-right: 2px;
}

table.xCatGrid a.expNewOptionButton {
    background-image: url('btnNewOption.min.svg');
}

table.xCatGrid a.expNewOptionButton_before {
    background-image: url('btnNewOption_before.min.svg');
}

table.xCatGrid a.expNewOptionButton_after {
    background-image: url('btnNewOption_after.min.svg');
}

table.xCatGrid a.expCloneOptionButton {
    background-image: url('btnCloneOption.min.svg');
}

table.xCatGrid a.expCloneOptionButton_before {
    background-image: url('btnCloneOption_before.min.svg');
}

table.xCatGrid a.expCloneOptionButton_after {
    background-image: url('btnCloneOption_after.min.svg');
}





/*  */
table.xCatGrid[orientation="vertical"] tr>td.xSubCat {
    border-bottom-style: solid;
    border-top-style: solid;
}

table.xCatGrid[orientation="vertical"] table.xCatGridInner {
    width: 100%;
}

table.xCatGrid[orientation="vertical"] table.xCatGridInner tr>td {
    border-right-style: solid;
}

table.xCatGrid[orientation="vertical"] table.xCatGridInner tr>th.xFiller {
    visibility: hidden;
    border-style: none;
}

table.xCatGrid[orientation="vertical"] table.xCatGridInner tr.xWrapped>th {}

table.xCatGrid>tbody:not([data-grouptype='header'])>tr:hover,
table.xCatGrid>tbody:not([data-grouptype='header'])>tr.hovered {
    background-color: var(--layer);
}

table.xCatGrid[orientation="vertical"]>tbody>tr>td {
    padding: 0;
}

table.xCatGrid tr>td[hide] *,
table.xCatGrid tr>td[hideincompat] *,
table.xCatGrid tr>td[noSel] *,
table.xCatGrid tr>th[noSel] *,
table.xCatGrid table.xCatGridInner tr>td[hide] *,
table.xCatGrid table.xCatGridInner tr>td[hideincompat] * {
    display: none;
}

table.xCatGrid th[hide],
table.xCatGrid th[hideincompat],
table.xCatGrid td[hideincompat],
table.xCatGrid tr[hide],
table.xCatGrid tr[hideincompat] {
    display: none;
}

table.xCatGrid tr>th.xNum,
table.xCatGrid tr>td.xNum {
    text-align: right;
    width: 30px;
    text-overflow: clip;
    border-right-style: none;
}

table.xCatGrid tr>th table.xCatGrid tr>td {
    padding: 1px 0 !important;
}

table.xCatGrid tr>th.xSel,
table.xCatGrid tr>td.xSel {
    width: 20px;
    text-align: left;
    text-overflow: clip;
}

table.xCatGrid tr>td[hide] {}

table.xCatGrid tr>td[err] {}

table.xCatGrid tr>td.xCtl {
    padding: 0;
}

table.xCatGrid tr>td.xSys {}

table.xCatGrid tr>td.xBtn {
    /* for IE 8 */
    text-overflow: clip;
}

.xSubCat>span {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: -10px;
    margin-left: 10px;
}

table.xCatGrid tr>td.xCtl>textarea {
    font-family: Tahoma, Arial, sans-serif;
    font-weight: normal;
    font-size: 11px;
}

table.xCatGrid tr>td.xCtl>input[type='text'],
table.xCatGrid tr>td.xCtl>.xInputPlaceholder,
table.xCatGrid tr>td.xCtl>textarea {
    margin: 0;
    border-style: none;
    padding: 1px 4px 1px 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

table.xCatGrid tr>td.xCtl>.xInputPlaceholder {
    padding: 2px 4px 1px 4px;
}

table.xCatGrid tr>td.xCtl>input[type='text'],
table.xCatGrid tr>td.xCtl>textarea {
    width: 100%;
}

table.xCatGrid[autolayout] tr>td.xCtl>.xInputPlaceholder {
    width: calc(100% - 2px);
    /*leave room for the cell focus border*/
    max-width: 152px;
}

table.xCatGrid[autolayout] tr>td.xCtl>.xHelper>input[data-dynamic][type=text],
table.xCatGrid[autolayout] tr>td.xCtl>.xHelper>input[data-dynamic][type=text]:not(focus):hover,
table.xCatGrid[autolayout] tr>td.xCtl>.xHelper>.xInputPlaceholder {
    width: 152px;
    /*leave room for the button and the cell focus border*/
}

table.xCatGrid tr>td.xCtl>input[type='text'][data-dynamic],
table.xCatGrid tr>td.xCtl>.xInputPlaceholder {
    /* make room for the cell focus inset */
    width: calc(100% - 2px);
    margin-left: 1px;
}

table.xCatGrid tr>td.xCtl>.xInputPlaceholder {
    height: 22px;
}

table.xCatGrid tr>td.xCtl>.xInputPlaceholder[inputtype=textarea] {
    height: 33px;
}

table.xCatGrid[banded='true'] tr>td.xCtl>input[type='text']:not(:focus),
table.xCatGrid[banded='true'] tr>td.xCtl>textarea {
    background-color: transparent;
}

table.xCatGrid[banded='true'] tr>td[noSel] {
    filter: alpha(opacity=70);
    opacity: .7;
}

table.xCatGrid tr>td>div.xComboBox>div.xComboEdit>div.xEdit {
    /* bump the text down a smidge so it lines up with the rest of the data.  also, ensures the edit field is the proper size in the box. */
    padding-bottom: 1px;
}

table.xCatGrid tr>td>div.xCalendar>input.xCal {
    width: 100%;
    margin: 2px 0 1px 0;
    border-style: none;
    padding: 1px 4px 1px 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

table.xCatGrid tr>td>div.xHelper,
table.xCatGrid tr>td>div.xInputPlaceholder {
    white-space: nowrap;
    display: flex;
    flex-direction: row;
}

table.xCatGrid tr>td[style*='text-align:Center;']>div.xHelper,
table.xCatGrid tr>td[style*='text-align:Center;']>div.xInputPlaceholder {
    margin: auto;
}

table.xCatGrid tr>td>div.xHelper>input[type='text'] {
    margin: 0;
    border-style: none;
    padding: 1px 4px 1px 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

table.xCatGrid tr>td>div.xHelper>.xInputPlaceholder {
    margin: 0 0 0 1px;
    padding: 1px 4px;
    box-sizing: border-box;
    width: 100%;
}

table.xCatGrid tr>td textarea {
    resize: vertical;
    width: 100%;
}

/* Ensure there is room to display the Revert button when a textarea property is overridden*/
table.xCatGrid tr>td>div.xHelper>textarea[overridden] {
    width: calc(100% - 20px);
}

table.xCatGrid tr>td>div.xHelper>input[type='text']:not(:focus) {
    background-color: transparent;
}

table.xCatGrid tr>td>div.xHelper>div.xIHBtn {
    width: 14px;
    height: 19px;
    display: inline-block;
    cursor: pointer;
    background-repeat: no-repeat;
    border: solid 1px transparent;
    outline-style: none;
}

table.xCatGrid tr>td>div.xHelper>div.xIHBtn:hover {
    border-color: #36a;
}

table.xCatGrid tr>td>div.xHelper[helper='revert']>input:not([overridden])+div,
table.xCatGrid tr>td>div.xHelper[helper='revert']>textarea:not([overridden])+div,
table.xCatGrid tr>td>div.xHelper[helper='revert']>div:not([overridden])+div {
    display: none;
}

table.xCatGrid tr>td>div.xHelper[helper='revert'] {
    min-width: 35px;
    /*This forces col width to be enough for both helper and a checkbox. */
}

table.xCatGrid tr>td>div.xHelper[helper='revert']>input[type=checkbox]+div {
    margin-left: 0;
}

table.xCatGrid tr>td>div.xHelper[helper='revert']>div+input[type="checkbox"] {
    float: left;
}