/*==============================================================================================*/
/*                             Styles used for modal (popup) division                           *
/*==============================================================================================*/
/* The modal window to be presented */

:root {
    --zIndexBackground1:20000;
    --zIndexPopup1:21000;
    --zIndexCloseIcon:22000;
}

.modalContainer {
    position: absolute;
    top: var(--modalContainerTop);
    width: 100%;
    max-width: var(--maxHeaderWidth);
    display: flex;
    justify-content: center;
    background-color: transparent;
}

.modal {
    position: absolute;
    min-width: 300px;
    display: none;          /* modal is hidden by default and gets visible only together with the .on class */
    background-color: white;
    padding: 0;
    width: var(--widStyleCtrlModal);
    z-index: var(--zIndexPopup1);
}

    .modal.on {
        display: block;
    }

div.modalLVinside {
    margin:15px 15px;
    display:grid;
    grid-template-columns:20% 14% 66%;
}

/* for VERY WIDE screens only */
@media screen and (min-device-width: 801px) {

    div.titleBar {
        cursor: move; /* allow modal popups to be moved by user */
    }
    .modal.left {
        position: relative;
        left: -200px;
    }
    .modal.right {
        position: relative;
        right: -200px;
    }
}

/* for WIDE SCREEN only */
@media screen and (min-device-width: 601px) {

    body {
        --stnrdTabHeight: 20px;
        --frontTabHeight: 30px;
    }

    .modal {
        border-radius: 10px;
        box-shadow: var(--stdBoxShadow);
    }

    div.titleBar {
        border-top-left-radius:  10px;
        border-top-right-radius: 10px;
    }
}
/* for SMARTPHONES only */
@media screen and (max-device-width: 600px) {

    body {
        --stnrdTabHeight: 24px;
        --frontTabHeight: 36px;
    }

    .modal {
        border-radius: 5px;
        box-shadow: 8px 8px 4px black;
    }

    div.titleBar {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
}


/* 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: 0px;
    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 */
    margin-bottom: 10px;
    padding: 4px 10px;
    width:100%;
}

img.aboutSbqLogo {
    float:left;
    margin:0px 10px 0px 10px;
    border:1px solid grey;
    border-radius:5px;
    width:32px;
}
img.aboutKbLogo {
    cursor:pointer;
    float:left;
    margin-right:10px;
    width:32px;
}
img.fcbhLogo {
    cursor:pointer;
    max-width:225px;
    max-height:64px;
    width:95%;
}

#divScrollingContainer {
    /* used on modalSt */
    border: 0px dashed cyan;
    margin: 7px;
    overflow-y: auto;
    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);
    padding-left:3px;
}


/*=======================*/
/*   M E N U E   T A B   */
/*=======================*/
.MenuTab {
    /* this is the container of all the tab headers */
    margin-left: 7px;
    margin-bottom: 5px;
    display: grid;
    grid-template-columns: repeat(3, 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(var(--widStyleCtrlModal) - 14px);
}

    .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: var(--frontTabHeight) !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;
    }