/**
 * Stylesheet for the app layout
 */

/*Define a 'navigation bar' and 'navigation content' for the app*/

    .stretch {
        position:absolute;
        top:0px;
        right:0px;
        bottom:0px;
        left:0px;
    }

    /* apply to body ...*/
    .noMargin {
        margin:0px;
    }

    body {
        margin:0px;
        min-height: 670px; /*better use spacer (height adjusted by Js) and no absolute positioned buttonbar but relative now*/
    }

    form {
        margin:0px;
    }

    /* APP layout */
    /*Define a 'content area' and a 'button bar' below;
     * They normally get rendered within an iFrame in the 'navigation content'*/

    /*******************************
    * NAV BAR
    ********************************/

    .appNavBar {
        border:0 none;
        width:930px; /* to have a more consistent look between Intranet/Extranet*/
        padding: 5px;
        background: var(--gray10);
        display: flex;
        align-items: center;
        justify-content: left;
    }

    .appNavBarExpandableCenter {
        flex-grow: 1;
    }

    .appNavBarToolNameLabel {
        color: var(--darkBlue100);
        font-family: sbn_serif, Arial, Helvetica, sans-serif;
        font-size: 20px;
        line-height: 25px;
        font-weight: bold;

        border:0 none;
        padding-left: 45px;
        padding-right: 40px;
    }

    /*******************************
    * CONTENT AREA
    ********************************/


    /* Because we have a min height of the iframe and we want the body to be always reflecting the right height
    and the bottom button bar (class: appBtnBar) is out of the flow with position fixed
    we need to set a min height of the body to the min iframe height
    */
    /* see above
    body {
        min-height: 670px;
    }*/

    /* To remember the scroll position the div element, this class is applied to should have the id: contentDiv */
    /* if we ever need an extra div within the content area then add the style : #contentDiv{width:100%;height:100%;overflow:auto;} and apply to the div (id:contentDiv)*/

    .appCntArea {
        width: 930px;
        position:relative;
        /* no height is set*/
        /*width:100%;*/
        border-width:0px;
        min-height:627px;
    }

    .removeOverflow {
        overflow:hidden;
    }

    .appBtnBar {

        width:930px; /* to have a more consistent look between Intranet/Extranet*/
        font-family: sbn_sans_serif, Arial, Helvetica, sans-serif;
        background-color:var(--darkBlue100);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /*The buttons of the buttonbar;
     *Right now all buttons are images*/
    .appBtnBarBtn {
        margin:4px 3px 4px 3px; /* top right bottom left */

    }

    .appBtnBarGroupLeft {
            float:left;
            margin-left:3px;
        }

    .appBtnBarGroupRight {
        float:right;
        margin-right:3px;
    }

    /*****************
    Impressum
    ******************/

    .appImpBar {
        width:930px; /* to have a more consistent look between Intranet/Extranet*/
        background-color:var(--gray10);
        padding: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .appImpBarGroupLeft {

    }

    .appImpBarGroupRight {

    }

    a.impLink {
        line-height:12px;
        font-family: sbn_sans_serif, Arial, Helvetica, sans-serif;
        font-size:10px;
        color: var(--darkBlue100);
        text-decoration: none;
        margin-right: 10px;
    }