/* light green : 128, 189, 38 #80BD26
   dark green : 81, 135, 31   #51871F
   dark grey : 102,102, 92    #66665C
   light grey : 170, 171, 162 #AAABA2  */
   
/**************************************************************
 **                                                          **
 ** COLOURS :                                                **
 ** settings need to be set both for light and dark themes   **
 **                                                          **
 **************************************************************/

/* general page settings */
html {
    font-family : Arial, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* font-size is set in @media filter - body */
    height:100% ;
    width:100% ;
    padding: 0px ;
    margin: 0 ;
}

header /* official light-green */
{ 
    color: white ;
    background-color: rgb(128, 189, 38) ;  
    position: fixed ;
    top: 0px ;
    left: 0px ;
    right: 0px ;
    min-height: 50px ;
} 

header img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
    width: 32px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);    
}

img.networkColor {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

main {
    color: rgb(102,102, 92) ; /* official dark-grey  */
    background-color: white ;
}

::placeholder {
    font-style: italic ;
    font-size: 0.95em ;
  }

  input[type=text],input[type=number],input[type=password], input[type=email],input[type=date],input[type=time], textarea {
    height: 30px;           /* overwrite the Skeleton height property */
    margin-bottom: .5rem;   /* overwrite the Skeleton height property */
    border-radius: 4px ;    /* Skeleton only has this for text input - extend to other fields */
}

select {
    margin-bottom: .5rem; /* overwrite the Skeleton height property */        
}

/*#fleet {
    height: 65px ;
    width: 100px ;
}*/

code {
    font-size: 1em;
    display:block; 
    max-width:370px; 
    overflow-x: auto;
    -ms-overflow-style: none;  /* hide lateral scrollbar - IE and Edge */
    scrollbar-width: none;  /* hide lateral scrollbar - Firefox */

}
code::-webkit-scrollbar {
    display: none; /* hide lateral scrollbar - Safari */
}

pre.signupLink {
    background-color: white ; 
    padding: 5px ; 
    border-radius: 3px ;
    height: 50px ;
    line-height: 50px ;
}
  
footer {
    background-color: rgb(170, 171, 162) ; /* official light-grey */
}

td.activeTab { 
    background-color: white ; /* same as main */ 
    color: black ;
    border-color: rgb(102,102, 92) ; /* official dark-grey - contrasting to light-grey */
}

.activeTab img { /* light mode: active (white) tab must have un-altered image */
    filter: none ;
    height: 36px ;
}

td.inactiveTab { 
    background-color: rgb(102,102, 92) ; /* official dark-grey - contrasting to footer background */ 
    color: white ;
    /* no border color */
}

.inactiveTab img { /* light mode: inactive (dark) tab must have white (altered) image */
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
    height: 36px ;
}

fieldset {
	margin-left: auto; /* centers the fieldset in a DIV */
	text-align: left;	/* text in fieldset will align left */
	padding: 0.5em;		/* whitespace margin between content and border of fieldset */
	border-radius: 5px;
   border: 1px solid grey
}

.vertical-align-inputs {
    display: flex; 
    flex-direction: row; 
    align-items: baseline;
}

.errMsg {
    border: 2px solid red ; /* colored box for error messages */
    margin: 5px ;
    padding: 10px 5px 5px 10px ;
    background-color : rgba(255,228,225) ;
    border-radius: 5px ;
    display: block ;   

 }

 .warnMsg {
    border: 2px solid rgb(255,165,0) ; /* colored box for warning messages */
    margin: 5px ;
    padding: 10px 5px 5px 10px ;
    background-color : rgba(255,230,180) ;
    border-radius: 5px ;
    display: block ;     
 }

 .okMsg {
    border: 2px solid rgb(81 135 31) ; /* colored box for confirmation messages */
    margin: 5px ;
    padding: 10px 5px 5px 10px ;
    background-color : rgb(215, 250, 165);
    border-radius: 5px ; 
    display: block ;   
 }

 div.noMsg {
    display: none ;
}

/* buttons have dedicated CSS if they need coloring */
/* if a button is labelled in error, remove the padding. Was observed during testing */
button.errButtonMsg {
    color: red ;
    background-color : rgba(255,228,225, 0.75) ;
}
 
button.warnButtonMsg {
    background-color : rgba(255,228,181, 0.5) ;
}
 
/* if a button is labelled OK, remove the padding. Was observed during testing */
button.okButtonMsg {
    background-color : rgba(164, 228, 69, 0.4) ;
}
 

div.splashScreenColor {
    background-color: #B4F27B;
    color: rgb(102,102, 92) ; /* official dark grey */
    border: 2px solid rgb(102,102, 92) ; /* official dark grey */
}

div.swapFlight {
    border-bottom: 1px solid rgb(170, 171, 162) ;
    margin: 5px ;
    padding: 10px 5px 5px 10px ;
    background-color : rgba(170, 171, 162, 0.1) ;
    border-radius: 5px ;
    font-size: 0.85em ; 
 }

#Roster {
    padding: 0px 5px ;
} 

SPAN.badge {
    position: absolute ;
    z-index: 4 ;    /* above the button opening the chat window - but below the chat messages window itsself */
    top: -18px ;    /* should be negative (slightly more than half of height) */
    right: -14px ;  /* should be negative (half of width) */
    width: 28px ;
    height: 28px ; 
    border-radius: 50% ; 
    border: 1px solid white ;
    background-color: red;
    color: white ;
    filter: drop-shadow(2px 2px 3px grey) ;
    font-weight: bold ;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

div.expiredFlight {
    border-bottom: 1px solid rgb(170, 171, 162) ;
    margin: 10px 2px ;
    padding: 5px 2px;
    background-color : rgba(102,102, 92) ; /* same base color, less transparency -> higher contrast */ 
    color: white ;
    border-radius: 5px ;
    font-size: 1em ; 
    text-align: center ;
}

div.non_expiredFlight {
    border-bottom: 1px solid rgb(170, 171, 162) ;
    margin: 10px 2px ;
    padding: 5px 2px;
    background-color : rgba(170, 171, 162, 0.1) ; /* same base color, less transparency -> higher contrast */ 
    border-radius: 5px ;
    font-size: 1em ; 
    float: clear ;
    text-align: center ;
}

.expiredFlight div {
    display: flex ;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: 5px ;
}

.non_expiredFlight div {
    display: flex ;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: 5px ;
}

.nowrap {
    white-space: nowrap;
}

DIV.flightDutyButtonTH {
    float: left ;
    display: flex ;
    align-items: center ;
    background-color: rgb(128, 189, 38) ; /* official light-green */
    color: white ;
    font-size: 1.1em ;
    padding:3px;
    border-radius: 5px ;
    height: 34px ;
    min-width: 34px; /* keep it at least square, i.e. equal to height */
}

.flightDutyButtonTD {
    position: relative ; 
    bottom: 0px ;
    left: 0px ;
    float: left ;
    display: flex ;
    align-items: center ;
    justify-content: center ; /* this centers text in button */
    font-size: 1.1em ;
    padding:3px;
    border: 1px dotted rgb(210, 211, 202) ; /* light backdrop */
    border-radius: 5px ;
    margin: 0px 0px 0px 3px ; /* lateral separation to next DIV - let left side space, so TH doesn't have to */
    height: 34px ;      /* = 40px - 2* border width (border is outside the DIV ) */
    min-width: 34px;    /* keep it at least square, i.e. equal to height */
}

#chat {
    z-index: 5 ;
    border-radius: 10px ;
    /* do NOT set padding : that makes positioning of title, ... more difficult */
    min-width: 360px ; 
    max-width: 60% ;
    height: calc(90% - 100px) ; /* - combined height of footer and header */
    position: fixed;     /* make sure the overlay is fully centered, even if scrolling */
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-53%);
    overflow-y: none ;
    -ms-overflow-style: none;   /* hide scrollbar - IE and Edge */
    scrollbar-width: none;      /* hide scrollbar - Firefox */
    background-color: rgb(230, 230, 230) ; /* light grey */ 
    border: 2px solid rgb(81, 135, 31 ) ; /* official dark green */
    display: flex;              /* allows chat window (center piece) to flex */
    flex-direction: column;
}

#chatTitleBG {
    border-top-left-radius: 7px ; /* must be equal to #chat border radius - border width - 1px */
    border-top-right-radius: 7px ;
    height: 60px ;
    position: relative ;
    top: 0px ;
    left:0px ;
    width:100% ;
    background-color: rgb(102,102, 92 ) ;
}

#chatTitleBG img {
    height: 32px ;
    position: relative ;
}

#chatTitle {
    position: absolute ;
    top: 50%;
    transform: translateY(-50%);    
    left: 60px ;                 /* 2x margin + width back-button icon */
    height: 30px ;
    width: calc( 100% - 62px ) ; /* full width - left & right margins - image width - margin between textarea and button */
    color: white ;
    font-size: 22px ;
}

#chatMessages {
    position: relative ;
    flex: 1 ;           /* let center DIV flex with fixed title/text entry DIV's */
    overflow-y: auto ;  /* make it scrollable */
    touch-action: pan-y; /* let iOS make the chat window scrollable */
}

#chatEntry {
    border-bottom-left-radius: 7px ; /* must be equal to #chat border radius - border width - 1px */
    border-bottom-right-radius: 7px ;
    height: 90px ; /* height of the text-area + top & bottom margin */
    position: relative ;
    bottom: 0px ;
    left:0px ;
    width:100% ;
    background-color: rgb(170, 171, 162 ) ;
}

#chatEntry textarea {
    border: 1px solid rgb(81, 135, 31 ) ; /* same as the chat window */
    border-radius: 10px ;
    position: absolute ;
    top: 50%;
    transform: translateY(-50%);    
    left: 10px ;
    height: 70px ;
    width: calc( 100% - 62px ) ; /* full width - left & right margins - image width - margin between textarea and button */
    background-color: white ;
    color: black ;
}

#chatEntry img {
    width: 32px ;
    position: absolute;
    top: 50%;
    right: 10px ;
    transform: translateY(-50%);    
}


DIV.clickable {
    background-color: rgb(128, 189, 38) ; /* official light green */
    border: 2px solid rgb(128, 189, 38) ; /* equal to background: this hides border - but maintains button size of clickable div */
    color: white ;
}

.flightDutyButtonTD img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%); 
    display: block ; /* required to 'fit" image in DIV and center it */
    margin-left: auto ; 
    margin-right: auto ;
    width: 34px ;
}

div.clearDiv {
    clear: both ;
}

/* container holding all elements for 1 chat message: text, buttons, read/delivered flags, ... */ 
/* these hold the common settings for own or other authors */
div.chat_container { 
    width: 80% ;
    background-color: inherit;
    margin: 1px 15px 0px 5px; /* small top margin for 1st/last message; small lateral margin. Right: bigger margin to steer clear of scroll bar */  
    padding-bottom: 16px ; /* creates room to show ball flags */
    display: flex ;  /* needed to have the internal components float to right */
    flex-direction: row ;
    align-items: center;
}

div.chat_other { 
    float: left ;
}

div.chat_self {
    float: right ;
}

fieldset.chat {
    position: relative ;
    left: 0px ;
    width: 100% ;
    border-radius: 5px ;
    color: white ;
    margin: 5px 0px 0px 0px ;
    padding: 2px ;
}

div.chat_other fieldset.chat {
    background-color: rgb(81, 135, 31) ;
}

div.chat_other fieldset.chat a {
    color: rgb(100, 250, 250) ; /* hypernlink on dark-green background */
}

div.chat_self fieldset.chat {
    background-color: white;
    border: 1px solid rgb(102, 102,92);
    color: black ;
}

legend.chat_author {
    position: relative ;
    top: 0px ;
    left: 0px ;
    font-size: 12px ;
    background-color: rgb(128, 189, 38) ;
    color: white ;
    border-radius: 3px ;
    padding: 1px 5px ;
}


SPAN.chatBadge {
    position: absolute ;
    bottom: -18px ; /* should be negative (slightly more than half of height) */
    width: 20px ;
    height: 20px ; 
    border-radius: 50% ; 
    border: 1px solid white ;
    color: white ;
    filter: drop-shadow(1px 1px 2px grey) ;
    font-weight: bold ;
    font-size: 12px ;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

SPAN.chatCrewCount {
    right: 56px ; 
    background-color: rgb(102,102, 92 ); /* official dark grey */
}

SPAN.chatDelivered {
    right: 36px ; 
    background-color: green ;
}

SPAN.chatRead {
    right: 16px ; 
    background-color: rgb(128, 189, 38); /* official light green */
}


div.chatbutton {
    top: 50% ;
    display: inline-block ;
    flex-direction:column ;
    vertical-align: center ;
    width: 50px ;
    height: 50px ;
    margin: 5px 0px 0px 0px ;
}

div.chatbutton img {
    height: 30px ;
}


#hypernixfeed {
    color: rgb(81, 135, 31) ; /* official dark-green */
    background-color: inherit ;
}

/* set padding for statistics table */
table {
   background-color: white ;
   border-spacing: 0 ;
   border-collapse: collapse ;
    font-size: 14px ;
}

thead {
   border-spacing: 10px ;
   background-color: rgb(128, 189, 38) ;
   border: none ;
}


/* make sure the title row has spaced cells */
th {
   padding: 2px 5px 2px 5px ;
   color: white ;
}

/*tbody {
    font-size: 14px ;
}*/
   
/* alternate row backgrounds */
tr:nth-of-type(odd) {
   background-color: rgba(170, 171 , 162, 0.2) ;
}

/* split out border spec's in separate propoerties for iOS mobile Safari */
td {
   color: rgb(102, 102 , 92) ; /* dark grey */
   padding: 2px 10px 2px 10px ;
   border-style: solid ;
   border-width: 1px ;
   border-color: rgb(81, 135, 31) ;
}

td.alignMid {
   text-align: center ;
}

td.alignRight {
   text-align: right ;
}


@media (prefers-color-scheme: dark) {
    header { /* official dark green */
        color: black ;
        background-color: rgb(81, 135, 31) ;  
        position: fixed ;
        top: 0px ;
        left: 0px ;
        right: 0px ;
        min-height: 50px ;
    } 

    header img {
        filter: none;   /* cancel transformation, keep all other settings */
    }

    img.networkColor {
        filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    }    

    main {
        color: #FFF5EE; /* seashell ; */
        background-color: black ;    
    }

    input[type=text],input[type=number],input[type=password], input[type=email],input[type=date],input[type=time], textarea {
        background-color: inherit ;
        color: white;
        border: 1px solid white ;
        height: 30px;           /* overwrite the Skeleton height property */
        margin-bottom: .5rem;   /* overwrite the Skeleton height property */
        border-radius: 4px ;    /* Skeleton only has this for text input - extend to other fields */
    }
    select {
        background-color: inherit ;
        color: white;
        border: 1px solid white ;
        height: 30px; /* overwrite the Skeleton height property */
        margin-bottom: .5rem; /* overwrite the Skeleton height property */        
    }

    ::placeholder {
        color: rgb(155, 155, 155);
        font-style: italic ;
        font-size: 0.95em ;
        opacity: 1; /* Firefox */
    }

    /* Statistics table : 
       alternate row backgrounds */
    /* set padding for statistics table */

    table {
        background-color: black ;
        border-spacing: 0 ;
        border-collapse: collapse ;
        font-size: 14px ;
    }

    tr:nth-of-type(odd) {
    background-color: rgba(170, 171, 162, 0.3) ; /* official light-grey */
    }

    /* split out border spec's in separate propoerties for iOS mobile Safari */
    td {
    color: white ; 
    padding: 2px 10px 2px 10px ;
    border-style: solid ;
    border-width: 1px ;
    border-color: rgb( 81, 135, 31 ) ; /* official dark green */
    }

    pre.signupLink {
        background-color: rgb(102,102, 92 ) ; /* official dark grey */
        color: white ;
        padding: 5px ; 
        border-radius: 3px;
        height: 50px ;
        line-height: 50px ;
    }
  
    footer { /* official dark-grey */
        background-color: rgb(102,102, 92); 
    }    

    td.activeTab { 
        background-color: black ; /* same as main */ 
        color: white ;
        border-color: rgb(170, 171, 162); /* official light-grey - contrasting to light-grey */
    }

    .activeTab img { /* dark mode: active (black) tab must have altered (white) image */
        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
        height: 36px ;
    }

    td.inactiveTab { 
        background-color: rgb(170, 171, 162) ; /* official light-grey - contrasting to footer background */ 
        color: black ;
        /* no border color */
    }  
    
    .inactiveTab img { /* dark mode: inactive (lighter) tab must have un-altered image */
        filter: none ;
        height: 36px ;
    }
    
    .errMsg {
        border: 2px solid red ; /* colored box for error messages */
        margin: 5px ;
        padding: 10px 5px 5px 10px ;
        background-color : rgb(215, 100, 90);
        border-radius: 5px ;
        display: block ;  
     }

     .warnMsg {
        border: 2px solid rgb(255,165,0) ; /* colored box for warning messages */
        margin: 5px ;
        padding: 10px 5px 5px 10px ;
        color: rgb(102,102, 92) ; /* official dark-grey  */
        background-color : gba(255,230,180) ;/*rgb(225, 160, 50); ;*/
        border-radius: 5px ;   
        display: block ;  
     }

     .okMsg {
        border: 2px solid white ; /* colored box for confirmation messages */
        margin: 5px ;
        padding: 10px 5px 5px 10px ;
        color: white ; 
        background-color : rgb(155, 190, 100);
        border-radius: 5px ;   
        display: block ;  
     }

     /* buttons have dedicated CSS if they need coloring */
    /* if a button is labelled in error, remove the padding. Was observed during testing */
    button.errButtonMsg {
        background-color : rgb(215, 100, 90);
    }
    
    button.warnButtonMsg {
        background-color : rgba(255, 220, 105, 0.85);
    }
    
    /* if a button is labelled OK, remove the padding. Was observed during testing */
    button.okButtonMsg {
        color: white ; 
        background-color : rgb(155, 190, 100);
    }

    div.splashScreenColor {
        background-color: rgb(90, 90, 90) ; 
        color: white ; 
        border: 2px solid rgb(128, 189, 38) ; /* official light grey */
    }

    div.swapFlight {
        border-bottom: 1px solid rgb(170, 171, 162) ;
        margin: 5px ;
        padding: 10px 5px 5px 10px ;
        background-color : rgba(170, 171, 162, 0.7) ; /* same base color, less transparency -> higher contrast */ 
        border-radius: 5px ;
        font-size: 0.85em ; 
    }

    div.expiredFlight {
        border-bottom: 1px solid rgb(170, 171, 162) ;
        margin: 10px 2px;
        padding: 5px 2px;
        background-color : rgba(81, 135, 31) ; /* official dark green */ 
        border-radius: 5px ;
        font-size: 0.85em ; 
    }
    
    div.non_expiredFlight {
        border-bottom: 1px solid rgb(170, 171, 162) ;
        margin: 10px 2px ;
        padding: 5px 2px;
        background-color : rgba(170, 171, 162, 0.7) ; /* same base color, less transparency -> higher contrast */ 
        border-radius: 5px ;
        font-size: 0.85em ; 
    }

    .non_expiredFlight tr {
        background-color : rgba(170, 171, 162, 0) ; /* same as div.non_expiredFlight in dark mode - transparency must be 0 after debugging */
        clear: both ;
    }

    .flightDutyButtonTD {
        /* background-color: rgb(200, 201, 192) ; official dark grey */
        border-color: rgb(200, 201, 192) ; /* official dark grey */
        color: black ;
    }

    #overlayMsg table tr td {
        color: inherit ;    /* if not, overlay delayed flights would have incorrect color */
    }

    #chatTitleBG {       
        background-color: rgb(190, 191, 192) ; /* slightly darker grey */
    }

    #chatTitle {
        color: black ;
    }

    #chatEntry {
        background-color: rgb(190, 191, 192) ;
    }

    legend.chat_author {
        background-color: rgb(178, 239, 88) ;
        color: rgb(92,92,82);
    }

    SPAN.chatBadge {
        border: 1px solid white ;
        color: white ;
        filter: drop-shadow(2px 2px 3px grey) ;
    }

    SPAN.chatCrewCount {
        background-color: rgb(102,102, 92 ); /* official dark grey */
    }

    SPAN.chatDelivered {
        background-color: rgb(170,171,162); /* official light grey*/
    }

    SPAN.chatRead {
        background-color: rgb(128,189,38);  /* official light green */
    }

    DIV.clickable {
        background-color: rgb(230, 231, 232); /* lighter than official light grey */
        border: 2px solid rgb(170, 171, 162) ;
        color: black ;
    }

    .flightDutyButtonTD img {
        filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);  /* reset the filtering */
    }
        
    #hypernixfeed {
        color: rgb(128, 189, 38) ; /* official light-green */
        background-color: inherit ;
    }
}

/**************************************************************
 **                                                          **
 ** SCREEN SIZE :                                            **
 ** settings need to be set both wide and narrow screens     **
 **                                                          **
 **************************************************************/

@media (min-width:400px) {
    body {
        font-size:16px ;
    }
}

@media (max-width:400px) {
    body {
        font-size: 15px;
    }
}

main {    
    position: fixed ;
    top: 50px ; /* equal to height of header */
    bottom: 80px ; /* equal to height of footer */
    left: 0px ;
    right: 0px ;
    padding: 40px 0px ;
    overflow-x: hidden ;
}

footer {
    position: fixed ;
    bottom: 0px ;
    left: 0px ;
    right: 0px ;
    min-height: 80px ;
}

div.tabLayout {
    display: flex ;
    flex-flow: row wrap ;
    justify-content: center ;
    padding: 0px 10px ; /* vertical padding must be 0, or tabs start to shift downward */
}

div.tabColumn {
    flex-flow: column wrap ;
    justify-content: center ;
    min-width: 370px ;
    max-width: 100% ;
}

table.tabMenu {
    width:100% ;    /* tabMenu must span full page width*/
    table-layout: fixed ;
    border-spacing: 6px 2px ;
    border-collapse: separate;
}

td.activeTab {
    position: relative ; /* elevate tab slightly to 'snap' it to the <main> section */
    top: -2px ;          
    text-align: center ;
    font-weight: bold ;
    height: 50px ; /* 10px less than footer height */
    border-radius: 0px 0px 10px 10px ;
    border-style: solid;
    border-width: 0px 1px 1px 1px ;
}
  
td.inactiveTab {
    text-align: center ;
    font-weight: bold ;
    height: 45px ; /* 10px less than footer height, slightly less than active tab */
    border-radius: 0px 0px 10px 10px ;
    border-style: solid;
    border-width: 0px ;
}
  
/* image indicating network status */
img.network {
    width: 32px;
    position: absolute;
    top: 50%;
    right: 65px;
    transform: translateY(-50%);
}

img.chat {
    height: 40px ;
    position: relative;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

#overlayMsg {
    z-index: 10;         /* make sure it floats over all other items */
    text-align: center;  /* will center close button & text*/
    min-width:320px; 
    max-width:90%; 
    position: fixed;     /* make sure the overlay is fully centered, even if scrolling */
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 1.1em ;
}

#overlayMsg UL {
    text-align: left ;
    margin: 5px 30px ; 
    list-style: disc ; /* override skeleton.css - to make sure LI indentation is fixed */
}

#overlayMsg UL LI {
    margin-top: 2px ;
    margin-bottom: 0px ;
}

#overlayMsg table {
    margin: 20px ; 
    background-color: inherit ;
}

#overlayMsg table tr {
    background-color: inherit ;
}

#overlayMsg table tr td {
    text-align: left ;
    margin-left: 10px ;
    padding: 0px 10px 0px 10px ;
    border: none ;
}

div.splashScreen {
    z-index: 5 ;
    border-radius: 10px ;
    padding:10px ;
    max-width:80%;
    min-width: 300px ; 
    height: calc(90% - 130px) ; /* - combined height of footer and header */
    position: fixed;     /* make sure the overlay is fully centered, even if scrolling */
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-53%);
    overflow-y: scroll ;
    -ms-overflow-style: none;   /* hide scrollbar - IE and Edge */
    scrollbar-width: none;      /* hide scrollbar - Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.splashScreen::-webkit-scrollbar {
    display: none;
}
 

H1.splashScreen {
    text-align: center ;
    font-weight: bold ;
    font-size: 1.4em ;
}


/* required for the login/signup screen tooltip */
div.tooltip {
    position: relative;
    display: block;
    float: right ;	/* float up left to the corresponding input */ 
    margin: 1px 0px 0px 10px ; /* leave 10px margin to the left up-float */
    height: 24px ;
    padding: 1px 0px 0px 1px ; /* sum of padding and height equals the width -> square TT */
    border: 0 ; 
    box-shadow: none;
 }
 
 .tooltip .tooltiptext {
    visibility: hidden;
    width: 270px;
    background-color: rgb(177, 176, 176) ;
    color: #fff;
    font-size: 14px ;
    text-align: center;
    border-radius: 6px;
    border:1px solid rgb(0, 185, 0) ;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -215px;
    opacity: 0;
    transition: opacity 0.3s;
 }
 
 .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 77%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: darkGrey transparent transparent transparent;
 }
 
 .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
 }

 em {
    color: red ;
    font-size: 1.1em ;
 }