/* Main : Toolbar
-------------------------------------------- */
.xTb {
    height: var(--toolbar-height);
    display: flex;
    justify-content: flex-end;
    padding: var(--toolbar-padding);
    border-width: var(--toolbar-border-width);
    border-style: var(--toolbar-border-style);
    border-color: var(--toolbar-border-color);
    background-color: var(--toolbar-background-color);
    box-shadow: var(--toolbar-shadow);
}

.xMainCfg > .xTb {
    position: sticky;
    top: 0;
    z-index: 1001;
    display: grid;
    grid-area: Toolbar;
    grid-template:
        "ToolbarBranding ToolbarText"
        "ToolbarBranding ToolbarButtons";
    grid-template-columns: auto 1fr;
    grid-gap: var(--toolbar-gap);
    height: var(--toolbar-height);
    padding: var(--toolbar-padding);
    border-width: var(--toolbar-border-width);
    border-style: var(--toolbar-border-style);
    border-color: var(--toolbar-border-color);
    background-color: var(--toolbar-background-color);
    box-shadow: var(--toolbar-shadow);
}

@media (max-width: 64rem) {
    .xMainCfg .xTb {
        --toolbar-height: 3.125rem;
        --toolbar-padding: 0;
        grid-template:
            ". ToolbarBranding ToolbarButtons .";
        /* grid-template-columns: var(--toolbar-height) auto var(--toolbar-height); */
        grid-template-columns: 24px auto 1fr 24px;
        grid-template-rows: auto;
        /* justify-content: space-between; */
    }
}

/* Toolbar branding
-------------------------------------------- */
/* Core start */
.xTbBranding { grid-area: ToolbarBranding; width: 100%; }
.xTbBranding a { height: 100%; display: flex;  width: max-content; cursor: pointer; }
/* Core end */

.xTbBranding a {
    align-items: center;
    padding: var(--toolbar-branding-logo-padding);
    background-color: var(--toolbar-branding-logo-background-color);
}

.xTbBranding a:hover {
    background-color: var(--toolbar-branding-logo-background-color--hover);
}

.xTbBranding img {
    height: var(--toolbar-branding-logo-height);
}

@media (max-width: 64rem) {
    .xMainCfg .xTbBranding {
        z-index: 203;
    }
    .xMainCfg .xTbBranding a {
        width: 100%;
        justify-content: center;
        align-items: center;
    }
}

/* Toolbar text
-------------------------------------------- */
/* Start core */
.xTbText { 
    grid-area: ToolbarText;
    display: flex;
    align-items: center;
    width: 100%;
}
/* End core */

.xTbText {
    justify-content: var(--toolbar-text-justification);
    margin: var(--toolbar-text-margin);
    padding: var(--toolbar-text-padding);
    background-color: var(--toolbar-top-background-color);
    color: var(--toolbar-text-color);
    font-family: var(--toolbar-text-font-family);
    font-size: var(--toolbar-text-font-size);
    font-style: var(--toolbar-text-font-style);
    font-weight: var(--toolbar-text-font-weight);
    letter-spacing: var(--toolbar-text-letter-spacing);
    line-height: var(--toolbar-text-line-height);
    text-transform: var(--toolbar-text-text-transform);
}

.xTbText b {
    color: var(--toolbar-text-label-color);
    font-family: var(--toolbar-text-label-font-family);
    font-size: var(--toolbar-text-label-font-size);
    font-weight: var(--toolbar-text-label-font-weight);
    font-style: var(--toolbar-text-label-font-style);
    text-transform: var(--toolbar-text-label-text-transform);
}

@media (max-width: 64rem) {
    .xTbText {
        display: none;
    }
}

/* Toolbar button bar
-------------------------------------------- */
/* Core start*/

/* Core end */

.xTbBtns {
    grid-area: ToolbarButtons;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--toolbar-buttonbar-button-gap);
    margin: var(--toolbar-buttonbar-margin);
    padding: var(--toolbar-buttonbar-padding);
}

.xMainCfg > .xTb .xTbBtns {
    gap: 0;
}

.xTbBtns > a {
    display: flex;
    align-items: center;
    text-overflow: ellipsis;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    gap: var(--toolbar-button-gap);
    width: var(--toolbar-button-width);
    height: var(--toolbar-button-height);
    padding: var(--toolbar-button-padding);
    border-width: var(--toolbar-button-border-width);
    border-style: var(--toolbar-button-border-style);
    border-color: var(--toolbar-button-border-color);
    border-radius: var(--toolbar-button-border-radius);
    background-color: var(--toolbar-button-background-color);
    color: var(--toolbar-button-text-color);
    font-family: var(--toolbar-button-font-family);
    font-size: var(--toolbar-button-font-size);
    font-style: var(--toolbar-button-font-style);
    font-weight: var(--toolbar-button-font-weight);
    letter-spacing: var(--toolbar-button-letter-spacing);
    line-height: var(--toolbar-button-line-height);
    text-transform: var(--toolbar-button-text-transform);
    text-decoration: none;
    line-height: 1;
}

.xTbBtns > a:hover {
    border-width: var(--toolbar-button-border-width--hover);
    border-style: var(--toolbar-button-border-style--hover);
    border-color: var(--toolbar-button-border-color--hover);
    border-radius: var(--toolbar-button-border-radius--hover);
    background-color: var(--toolbar-button-background-color--hover);
    color: var(--toolbar-button-text-color--hover);
}

.xTbBtns > a.xSel {
    border-width: var(--toolbar-button-border-width--selected);
    border-style: var(--toolbar-button-border-style--selected);
    border-color: var(--toolbar-button-border-color--selected);
    border-radius: var(--toolbar-button-border-radius--selected);
    background-color: var(--toolbar-button-background-color--selected);
    color: var(--toolbar-button-text-color--selected);
}

.xTbBtns > a.xSel:hover {
    border-width: var(--toolbar-button-border-width--selected--hover);
    border-style: var(--toolbar-button-border-style--selected--hover);
    border-color: var(--toolbar-button-border-color--selected--hover);
    border-radius: var(--toolbar-button-border-radius--selected--hover);
    background-color: var(--toolbar-button-background-color--selected--hover);
    color: var(--toolbar-button-text-color--selected--hover);
}

.xTbBtns > a span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: none;
}

/* @media (max-width: 64rem) {
    .xMainCfg .xTbBtns {
        --toolbar-buttonbar-padding: 0;
        flex-direction: column;
        z-index: 202;
    }

    .xMainCfg .xTbBtns::before {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        content: var(--icon-menu);
        cursor: pointer;
        color: var(--text-secondary);
        z-index: 201;
        font-family: var(--font-family--icon);
        font-size: var(--toolbar-link-icon-size);
        background-color: var(--toolbar-background-color)
     }

     .xMainCfg .xTbBtns::after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        content: '';
        z-index: 200;
        background-color: var(--toolbar-background-color);
        box-shadow: none;
     }

     .xMainCfg .xTbBtns:active::before {
        color: var(--interactive-secondary--hover);
     }

     .xMainCfg .xTbBtns:active::after {
        box-shadow: var(--toolbar-shadow);
     }


     .xMainCfg .xTbBtns a {
        position: absolute;
        display: flex !important;
        height: var(--toolbar-height);
        left: 0;
        right: 0;
        top: calc( 0rem - var(--toolbar-height));
        z-index: 199;
        background-color: var(--toolbar-button-background-color);
        color: var(--toolbar-button-text-color);
        transition: top 150ms ease-in-out;
        border-width: 0 0 0.0625rem;
        border-style: var(--toolbar-border-style);
        border-color: var(--toolbar-border-color);
    }


    .xMainCfg .xTbBtns:active a:hover {
        background-color: var(--toolbar-button-background-color--hover);
        color: var(--toolbar-button-text-color--hover);
    }

    .xMainCfg .xTbBtns:active a:nth-child(1) { top: calc( var(--toolbar-height) * 1 ); }
    .xMainCfg .xTbBtns:active a:nth-child(2) { top: calc( var(--toolbar-height) * 2 ); }
    .xMainCfg .xTbBtns:active a:nth-child(3) { top: calc( var(--toolbar-height) * 3 ); }
    .xMainCfg .xTbBtns:active a:nth-child(4) { top: calc( var(--toolbar-height) * 4 ); }
    .xMainCfg .xTbBtns:active a:nth-child(5) { top: calc( var(--toolbar-height) * 5 ); }
    .xMainCfg .xTbBtns:active a:nth-child(6) { top: calc( var(--toolbar-height) * 6 ); }
    .xMainCfg .xTbBtns:active a:nth-child(7) { top: calc( var(--toolbar-height) * 7 ); }
    .xMainCfg .xTbBtns:active a:nth-child(8) { top: calc( var(--toolbar-height) * 8 ); }
    .xMainCfg .xTbBtns:active a:nth-child(9) { top: calc( var(--toolbar-height) * 9 ); }
    .xMainCfg .xTbBtns:active a:nth-child(10) { top: calc( var(--toolbar-height) * 10 ); }
    .xMainCfg .xTbBtns:active a:nth-child(11) { top: calc( var(--toolbar-height) * 11 ); }
    .xMainCfg .xTbBtns:active a:nth-child(12) { top: calc( var(--toolbar-height) * 12 ); }
    .xMainCfg .xTbBtns:active a:nth-child(13) { top: calc( var(--toolbar-height) * 13 ); }
    .xMainCfg .xTbBtns:active a:nth-child(14) { top: calc( var(--toolbar-height) * 14 ); }
    .xMainCfg .xTbBtns:active a:nth-child(15) { top: calc( var(--toolbar-height) * 15 ); }

    .xMainCfg .xTbBtns > a span {
        display: block;
    }
} */


@media print {
    .xTb { display: none; }
}

/* Toolbar mask
-------------------------------------------- */
/* Start core */
.xTbMask { grid-area: Toolbar; visibility: hidden; opacity: 0; transition: visibility .3s, opacity .3s ease-out; z-index: 1002;}
.xTbMask.active { opacity: 1; visibility: visible; transition: opacity .3s ease-in; transition-delay: .2s; }
/* End core */

.xTbMask {
    position: sticky;
    top: 0;
    background-color: var(--toolbar-mask-background-color);
}

/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */
.xTbLock {
    width: 12px;
    background-image: url(btnLock3.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

.xTbLock:hover {
    background-image: url(btnLock3.png);
    background-repeat: no-repeat;
}

a#b6,
a#b24[err],
a#b14[err] {
    color: white;
    background-color: red;
}



.xTbMsg {
    font-weight: bold;
    white-space: nowrap;
    color: Crimson;
}

.xTbBtns >.xSrcCtl {}
.xTbBtns > .xSrcCtl > .xSrcLabel {}

/* Should use global spinner */
/* .xTbMask.xTbPostback > .content > .spinner:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    top: 50%;
    left: 50%;
    border-width: 3px;
    border-style: solid;
    border-color: #2180c0 #ccc #ccc;
    border-radius: 100%;
    animation: rotation .7s infinite linear;
} */