/* Region
-------------------------------------------- */
.viewRgn {
    display: flex;
    flex-direction: column;
    padding: var(--region-view-padding);
    gap: var(--region-view-gap-row);
}

.xRgn {
    display: flex;
    flex-direction: column;
    border-width: var(--region-border-width);
    border-style: var(--region-border-style);
    border-color: var(--region-border-color);
    border-radius: var(--region-border-radius);
    background-color: var(--region-background-color);
    box-shadow: var(--region-shadow);
}

.xRgnNavContainer {
    flex-direction: column;
}

/* Region Header
-------------------------------------------- */
.xRgnHdr {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: var(--region-header-padding);
    border-top-left-radius: var(--region-border-radius);
    border-top-right-radius: var(--region-border-radius);
    font-family: var(--region-header-font-family);
    font-size: var(--region-header-font-size);
    font-style: var(--region-header-font-style);
    font-weight: var(--region-header-font-weight);
    line-height: var(--region-header-line-height);
    letter-spacing: var(--region-header-letter-spacing);
    text-transform: var(--region-header-text-transform);
    background-color: var(--region-header-background-color);
    color: var(--region-header-text-color);
}

.xRgn[collapsed] .xRgnHdr {
    border-bottom-left-radius: var(--region-border-radius);
    border-bottom-right-radius: var(--region-border-radius);
}

.xRgnHdr.fixed {
    z-index: 2;
}

.xRgnHdr > span {
    cursor: pointer;
    order: 1;
    flex-grow: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.xRgnHdr > a {
    order: 2;
}

.xRgnHdr:hover {
    background-color: var(--region-header-background-color--hover);
    color: var(--region-header-text-color--hover);
}

.xRgnGridHeaderContainer {
    padding: 0;
}


.fixed {
    position: sticky;
}

.fixed:not(.top, .bottom, .left, .right) {
    top: 0;

}
.top {
    top: 0;
}

.bottom {
    bottom: 0;
}

/* Region Header Buttons
-------------------------------------------- */
.xRgnHdrBtns {
    display: flex;
    order: 3;
    gap: var(--region-header-button-gap-column);
}

.xRgnHdrBtns a {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: var(--region-header-button-padding);
}

.xRgnHdrBtns a:hover {
    background-color: var(--layer-accent--hover);
}

.xRgnHdrBtns a::before {
    font-family: var(--font-family--icon);
    font-size: var(--region-header-button-icon-size);
    color: var(--region-header-button-icon-color);
}

/* Header Buttons Help
-------------------------------------------- */
a#help {
    border-width: var(--region-header-button-help-border-width);
    border-style: var(--region-header-button-help-border-style);
    border-color: var(--region-header-button-help-border-color);
    border-radius: var(--region-header-button-help-border-radius) ;
    background-color: var(--region-header-button-help-background-color);
    color: var(--region-header-button-help-icon-color)
}

a#help:hover {
    border-color: var(--region-header-button-help-border-color--hover);
    background-color: var(--region-header-button-help-background-color--hover);
    color: var(--region-header-button-help-icon-color--hover)
}

a#help:active {
    border-color: var(--region-header-button-help-border-color--active);
    background-color: var(--region-header-button-help-background-color--active);
    color: var(--region-header-button-help-icon-color--active)
}

a#help::before {
    content: var(--icon-help);
}

/* Header Buttons HS
-------------------------------------------- */
a#hs {
    border-width: var(--region-header-button-hs-border-width);
    border-style: var(--region-header-button-hs-border-style);
    border-color: var(--region-header-button-hs-border-color);
    border-radius: var(--region-header-button-hs-border-radius) ;
    background-color: var(--region-header-button-hs-background-color);
    color: var(--region-header-button-hs-icon-color);
}

a#hs:hover {
    border-color: var(--region-header-button-hs-border-color--hover);
    background-color: var(--region-header-button-hs-background-color--hover);
    color: var(--region-header-button-hs-icon-color--hover);
}

a#hs:active {
    border-color: var(--region-header-button-hs-border-color--active);
    background-color: var(--region-header-button-hs-background-color--active);
    color: var(--region-header-button-hs-icon-color--active);
}

a#hs::before {
    content: var(--region-header-button-hs-icon--expanded);
}

[collapsed] a#hs::before {
    content: var(--region-header-button-hs-icon--collapsed);
}

/* Sub-header
-------------------------------------------- */
.xSubHdr > td {
    padding: var(--region-header-padding)
}


/* Toolbar
-------------------------------------------- */
[collapsed] > .xRgnNavContainer > .xRgnTb {
    display: none !important;
}

.xRgnTb {
    background-color: var(--region-toolbar-background-color);
    border-width: var(--region-toolbar-border-width);
    border-style: var(--region-toolbar-border-style);
    border-color: var(--region-toolbar-border-color);
    overflow: hidden;
}

.xRgnTb.fixed {
    z-index: 1;
}

.xRgnTb > .xTbBtns {
    justify-content: flex-start;
    align-items:center;
    padding: var(--region-toolbar-padding);
}

@media (max-width: 64rem) {
    .viewRgn {
        --region-view-padding: 0;
        --region-view-gap: 0;
    }

    .xRgn {
        --region-border-width: 0 0 var(--border-width) 0;
        --region-border-radius: 0;
        --region-shadow: 0;
    }

    .xRgnTb > .xTbBtns::before {
        content: none;
    }
}

/* Region Navigation Container
-------------------------------------------- */
.xRgnNavContainer {
     display: flex;
}

.xRgnNavContainer.fixed {
     z-index: 2;
}

.xRgn .xInner {
    display: block;
    padding: var(--region-inner-padding);
}

.xRgn[layout="Grid"] .xInner{
    padding: 0;
}

.xRgn .xInner > tbody {
    display: block;
}

.xRgn .xInner > tbody > tr {
    display: flex;
    flex-direction: row;
    gap: var(--region-inner-gap-column);
}

.xRgn .xInner > tbody > tr > td.col {
    display: flex;
    flex-direction: column;
    gap: var(--region-inner-gap-row);
    flex: 1;
}

@media (max-width: 64rem) {
    .xRgn .xInner > tbody > tr {
        flex-direction: column;
        gap: var(--region-inner-gap-row);
    }
}

/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */

.xRgnTb img {
    border-style: none;
    padding: 2px;
    float: left;
}

.xRgnTb input {
    border-style: none; padding: 2px; float: left;
}

.xRgn[hide] {
    display: none;
}

.xRgn[msg] {
    padding: 15px;
}

.xRgn[ghost] {
    filter: alpha(opacity=40); opacity: .40;
}

.xRgn[ghost] .xInner {
    margin: 0 !important;
    height: 75px;
}

.xRgn[ghost] .xInner .col {
    vertical-align: middle;
    text-align: center;
}

.xRgn[ghost] .xInner a {
    color: black;
    text-decoration: none;
    text-transform: uppercase;
}

div .xRgn.xRgnStart > .xRgnHdr {
    margin-top: 0;
    border-top-style: none;
}

.xRgnHdrGL {
    height: 25px;
    padding: 0;
}

.xRgnHdrGL > span {
    display: inline-block;
    padding: 4px 2px 5px 3px;
}

/* when collapsed, skip the header, but hide all its siblings */
.xRgn[collapsed] :is(.xRgnNav, .xRgnGridHeaderContainer),
.xRgn[collapsed] > :is(table.xInner, div.xInnerMargin) {
    display: none;
}

.xRgnHdrHid {
    display: none;
}

/* used buttons on the category header (such as 'Add Option', Help', etc) */ /* .xRgnHdr>.xRgnHdrBtns { float: right; cursor: default; } */
/* used buttons on the category header (such as 'Add Option', Help', etc) */ /* .xRgnHdrGL>.xRgnHdrBtns { float: right; cursor: default; }*/
/* hyperlink / button in category header */
.xRgnHdrBtns > a img {
    padding: 5px 4px 4px 4px;
}
/* .xRgnHdrBtns > a span { display: inline-block; padding: 6px 3px 5px 0; } */
.xRgnHdrBtns > a#po {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAADFBMVEUAAAD///8AAAAAAADI23cLAAAABHRSTlMAAD1mfarqSQAAAEJJREFUeAFlylEOgEAIA9ER7n9nU9IU1+0X8wLPb4L+bKB2A+wWembQ0PsBVFcApg1pAm4IuMGwbUjrFKgNIDh3wQu5eQE6UdrgsQAAAABJRU5ErkJggg==);
}

.xRgnHdrBtns > a#po:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAADFBMVEUAAAD///8AAAAAAADI23cLAAAAA3RSTlMAAJlzpe8+AAAAQklEQVR4AWXKUQ6AQAwC0el6/zsbStKiy9+8QP0meGINZycgtuC/oYfuCXqfAeg2MM2CGwbcmsEdMF1l6DaA4LsLXrfUATgsQ9iuAAAAAElFTkSuQmCC) /*iconPopOut.png*/; 
}

.xRgnHdrBtns > a#pd {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAADFBMVEUAAAD///8AAAAAAADI23cLAAAABHRSTlMAAD1mfarqSQAAAENJREFUeAFtz0EKwDAQQlGj979zG0Q7Dfk7H0wgWEcXwGtw1AYxQNGAbgSyA8ou0HtAdsH3qyCSf9iNN1Lgyyej228flTcBOulsI+wAAAAASUVORK5CYII=);
}

.xRgnHdrBtns > a#pd:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAADFBMVEUAAAD///8AAAAAAADI23cLAAAAA3RSTlMAAJlzpe8+AAAAQ0lEQVR4AW3PQQrAMBBCUaP3v3MbRDsN+TsfTCBYRxfAa3DUBjFA0YBuBLIDyi7Qe0B2wferIJJ/2I03UuDLJ6Pbbx+VNwE66Wwj7AAAAABJRU5ErkJggg==);
}

.xRgnHdrBtns > a#btnPin.pinned {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAACAgICSabkkAAAAAXRSTlMAQObYZgAAABlJREFUCNdjgAPmBwxMCSiI/wcDQwMCgQEAgTgF1aQMq6IAAAAASUVORK5CYII=');
}

.xRgnHdrBtns > a#btnPin.pinned:hover {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABlJREFUCNdjgAPmBwxMCSiI/wcDQwMCgQEAgTgF1aQMq6IAAAAASUVORK5CYII=');
}

.xRgnHdrBtns > a#btnPin {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAACAgICSabkkAAAAAXRSTlMAQObYZgAAABxJREFUCNdjgAMmMGL+wcDEwWDHAWQAEUQQGQAAT88DSqKGKT8AAAAASUVORK5CYII=');
}

.xRgnHdrBtns > a#btnPin:hover {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABxJREFUCNdjgAMmMGL+wcDEwWDHAWQAEUQQGQAAT88DSqKGKT8AAAAASUVORK5CYII=');
}

.xRgnHdrBtns a#am {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAk1BMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACEGrSNAAAAMHRSTlMAAAYICQoLDA0ODxAREhoeICIkJicoKis1Njc6Oz0+RElKS05QWltcXV5fYGRlZoA1fw6IAAAAkklEQVR42kXN2RKCMBBE0cENEBUjooILiksMJh3//+tMwljcl646DzPkS6Ra+I1cRJMmF8B21cQMV3B3BqHxuZwVTNnDTGh/IJWmiANI4ESuCpABOuDo4QCoAFmpZUI0fZp9FoByjXddvWAEf2nBPRji26YAdut23oMvVd3SzQCjqh4T2a/LBuWc2MjDIDb6w9APauQQAXSTXmoAAAAASUVORK5CYII=);
}

.xRgnHdrBtns a#am:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAvVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADTQ/BeAAAAPnRSTlMAAA8TFxkcHh8gISIkJicpKixBS0xRVFVWWV9hY2RpbICEhoiKkZSYm6mrt7m7xMfh4+bn6Orr7O3w+vv8/Q/le6QAAACVSURBVHgBTc1HFoJAEIThxiDmHBCDo2AWwxhAhLr/sWzHfj7/5beook9lfW8SZ3FEuW23D4zaO1tgD+ko4Lzw3KxDpOMvFJw45IGKTlzbgAZWxHmANhABS+LmQGigPomvJaL8OZ01DFAnxs33LkgG8hJAOgkUD0MXmPaCmgBXfUQt4n6QWfhZIgVOGZVYlCUgoiyBv95lJxR3uSO9ugAAAABJRU5ErkJggg==);
}

.xRgnTbCaption {
    white-space: nowrap;
    font-weight: bold;
    color: black;
    float: left;
    padding: 5px 8px 5px 3px;
}

.xRgnNav {
    height: 24px;
    line-height: 24px;
    background-color: gainsboro;
    overflow: hidden;
}

.xRgnNav > a {
    cursor: default;
    white-space: nowrap;
}

.xRgnNav > a.sel {
    background-color: lightgrey;
}

.xRgnNav > a:not(.dis):hover {
    background-color: darkgrey;
}

.xInner .col .xOB div[ct='odl'] {
    display: inline;
}

.xSelectedGL {
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
}

th.fixed,
.xRgnNav.fixed[fixed-nav-bar],
.xHGOuter.fixed[fixed-col-header] {
    z-index: 1;
}

.xRgnNavContainer.fixed.bottom {
    z-index: 1;
}

.xRgnGridHeaderContainer {
    overflow-x: hidden;
    overflow-y: hidden;
}