/*==============================================================================================*/
/* M S   O F F I C E :             Styles used for modal (popup) divisions                       */
/*==============================================================================================*/
/*         This is a copy of modalPopup.css, adjusted for use with Office Add-Ins               */

:root {
    --stnrdTabHeight: 24px;
    --frontTabHeight: 36px;
    --pop_div_radius: 7px;
    --zIndexBackground1:20000;
    --zIndexPopup1:21000;
    --zIndexCloseIcon:22000;
}

.modalContainer {
    position:   absolute;
    top:        var(--modalContainerTop);
    width:      100%;
    max-width:  305px;
}

.modal {
    position: absolute; left: 0; top: 0px;
    border-radius: var(--pop_div_radius);
    box-shadow: 8px 8px 4px black;
    width:      calc(100% - 35px);
    min-width:  var(--widStyleCtrlModal);            /* 245px */
    display: none; /* modal is hidden by default and gets visible only together with the .on class */ 
    background-color: white;
    padding: 0;
    z-index: var(--zIndexPopup1);
}

    .modal.on {
        display: block;
    }


/* covers the background, so that the user can only work with the overlay */
.modal-js-overlay {
    background: #444;
    opacity: 0.5;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: var(--zIndexBackground1);
}

/* close button (top right X) within the modal div */
.modal-js-close {
    position: absolute;
    top: -1px;
    right: 5px;
    background: rgba(128, 0, 0, 0.0);
    color: black;
    border-radius: 10px;
    height: 30px;
    width: 30px;
    text-align: center;     /* X is centered horizontally       */
    padding: 0px;           /* X is that many pixels from top   */
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    z-index:var(--zIndexCloseIcon);
}

div.titleBar {
    /* title bar of modal popup windows */
    color: white;
    background-color: #555; /* use neutral color, because of browser depencency */
    height:30px;
    margin-bottom: 10px;
    padding: 8px 10px;
    width:100%;
/*    cursor: move;        /* signal to user, that modal popup can be moved */
    border:0px dashed orange;
    border-top-left-radius:  var(--pop_div_radius);
    border-top-right-radius: var(--pop_div_radius);
}

img.aboutSbqLogo {
    cursor:pointer;
    float:left;
    margin:0px 10px 0px 10px;
    border:1px solid grey;
    border-radius:5px;
    width:32px;
}
img.aboutKbLogo, div.aboutKbLogo {
    cursor:pointer;
    float:right;
    margin-right:5px;
    width:40px;
}

img.fcbhLogo {
    cursor:pointer;
    width:95%;
    max-width:220px;
    max-height:64px;
}

#divScrollingContainer {
    border: 0px dashed cyan;
    margin: 0 7px 7px 7px;
    overflow-y: auto;
    width:      calc(100% - 14px);
    min-width:  calc(var(--widStyleCtrlModal) - 14px);
}

.divFlash {
    color:red;
    max-width:300px;
    text-align:left;
    font-size:0.9rem;
    background-color:rgba(227,227,227,1);
}

/*=======================*/
/*   M E N U E   T A B   */
/*=======================*/
.MenuTab {
    /* this is the container of all the tab headers */
    margin-left:   4px;
    margin-bottom: 4px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: var(--stnrdTabHeight) var(--frontTabHeight);  /* version for 2 rows, up to 6 tabs. Front tab row is higher than the other rows */
    /*  grid-template-rows: 20px 20px 30px;     /* version for 3 rows, up to 9 tabs. Front tab row is higher than the other rows */
    width:      calc(100% - 8px);
    min-width:  calc(var(--widStyleCtrlModal) - 8px);
}

    .MenuTab > div {
        /* this is for each single tab header */
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-left: 2px solid #eee;
        border-right: 2px solid #999;
        border-top: 2px solid #eee;
        font-family: var(--standardFont);
        font-size: 1.1em;
        margin-right: -1px;
        padding: calc(var(--stnrdTabHeight) * 0.15) 5px;
        text-align: center;
        vertical-align: middle;
        height: calc(var(--stnrdTabHeight) * 1.2);
        width: 100%;
    }

        .MenuTab > div.backRow {
            height: calc(var(--stnrdTabHeight) + 12px)  !important;
            background: rgb(200,200,200) !important;
        }

    .MenuTab > div:hover {
        background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(200,200,200,1)) !important;
        cursor: pointer;
    }

    .MenuTab div.inactiveMenu {
        /* active and inactive menues are controlled by javascript */
        background: rgba(227,227,227,1.0);
        border-bottom: 1px solid #999;
    }

    .MenuTab div.activeMenu {
        background: rgba(255,255,255,1.0) !important;
        border-bottom: 0px !important;
    }