/* ### AP FIXED TOOLBAR AND SCROLLING AREA V1 ###*/
/* @@@ this file should be renamed */
/* !!! specific layout of toolbar areas is handled on a per page basis by scoped css*/


/* LOWER PAGE REGION */

.ap-scrollable-area {
    /* width: calc(100% - 260px); @@@ */
    height: calc(100vh - 126px);
    overflow: auto;
 }

/*this class provides a variable height non-scrolling title area for detail pages*/
.ap-detail-heading {
    position: sticky;
    top: 0;
    z-index: 1;
    opacity: 1;
    padding-left: 15px;
    padding-bottom: 2px;
    padding-top: 5px;
    background: #fff;
}

    body[data-theme=dark] .ap-detail-heading {
        background: #272b34;
    }

.ap-detail-heading-with-tabs {
    position: sticky;
    top: 0;
    z-index: 1;
    opacity: 1;
    height: 65px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-top: 24px;
    background-color: #fff;
}

    body[data-theme=dark] .ap-detail-heading-with-tabs {
        background: #272b34;
    }


.ap-data-table th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    opacity: 1;
    
    /*border: 1px dotted blue;*/
}


/* TOOLBAR REGION */

.ap-toolbar {
    -webkit-box-flex: initial;
    -moz-box-flex: inherit;
    -webkit-flex: auto;
    -ms-flex: auto;
    display: flex;
    flex: auto;
    background-color: #fff;
    height: 54px;
    flex-direction: row;
    gap: 10px;
    padding-right: 10px;
    padding-left: 10px;
    background-color: #fff;
    /*border: 1px dotted blue;*/
}

body[data-theme=dark] .ap-toolbar {
    background: #272b34;
}

/* this is also inherited by the paging component */
.ap-button-group {

    /*make it a flex container*/
    display: flex;
    flex: auto;
    height: 44px;
    flex-direction: row;
    gap: 5px;
    padding-right: 4px;
    padding-left: 4px;
    margin-top: 6px;
}

    .ap-button-group p {
        margin-top: auto;
        margin-bottom: auto;
        display: inline;
    }

    /*space icons and text within buttons in toolbar*/
    .ap-button-group .ap-tlb-button {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
    }