SELECT.ISCSEL {
    background: none;
    appearance: none; 
    border: none; 
    text-align: center; 
    font-size: max(12px, 0.8vw);
    height: 30px; 
    width: 70px; 
    color: white; 
}

SELECT.MODESEL {
    background: tan;
    appearance: none; 
    border: 1px solid black; 
    text-align: center; 
    font-size: max(10px, 0.8vw);
    height: 30px; 
    width: 70px; 
    color: black; 
}

SELECT.ISCSEL:hover {
    background: yellow;
    color: black;
}
div.CIRCLE {
    font-size: 14px;
    width: 67px; 
    height: 19px; 
    border-radius: 5%;
    background: #A0A0B0; 
    position: absolute;
    text-align: center;
    vertical-align: top;
    display: block;
 }
div.CIRCLE2 {
    font-size: 14px;
    width: 65px; 
    height: 35px; 
    border-radius: 5%;
    background: #A0A0B0; 
    text-align: center;
    position: absolute;
    display: block;
 }
div.CIRCLE3 {
    font-size: 14px;
    width: 67px; 
    height: 52px; 
    border-radius: 5%;
    text-align: center;
    background: #A0A0B0; 
    position: absolute;
    display: block;
 }
div.CIRCLE5 {
    font-size: 14px;
    width: 67px; 
    height: 85px; 
    text-align: center;
    border-radius: 5%;
    background: #A0A0B0; 
    position: absolute;
    display: block;
 }
div.RECT {
    font-size: 14px;
    width: 60px; 
    height: 15px; 
    border-radius: 15%;
    color: white;
    text-align: center;
    background: #CCCCCC; 
    position: absolute;
    display: block;
 }
div.RECT p {
    background: none;
    font-size: 14px;
    margin: 0;
    font-size: 14px;
    font-family: arial;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }
div.KEY {
    background: none;
    width: 185px; 
    height: 35px; 
    position: absolute;
    display: flex;
    z-index: 4;
 }
div.KEY p {
    background: none;
    display: flex;
    margin: 0px;
    font-size:14px;
    font-family: arial;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
div.cityname {
    margin: 0;
    color: black;
    background: white;
    width: 75px;
    opacity: 100;
    font-size: 12px;
    text-align: center;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    margin-right: -50%;
    transform: translate(-50%, -50%) }
div.tooltip {
    display: none;
    position: absolute;
    text-align: left;
    padding: 10px;
    border: 2px ridge grey;
    font-family: arial;
    background: #CCCCCC;
    z-index: 200;
    top: 50;
    left: 50;
}
/* Colors from: https://www.rapidtables.com/web/color/RGB_Color.html */

/*#4682B5;   steel blue */


div.HUB1, select.HUB1 {
    background: #001080;   /* dark blue */
    color: #FFFFFF;
}
div.HUB2, select.HUB2 {
    background: #B22222;  /* Firebrick Red */ 
    color: #FFFFFF;
}
div.F3, select.F3 {
    background: #0000FF;   /* primary blue */
    color: #FFFFFF;
}
div.F4. select.F4 {
    background: #0000FF;
    color: #FFFFFF;
}
div.F5, select.F5 {
    background: #0000FF;
    color: #FFFFFF;
}
div.F6, select.F6 {
    background: #0000FF;
    color: #FFFFFF;
}
div.F7, select.F7 {
    background: #0000FF;
    color: #FFFFFF;
}
div.LOCALLINK, select.LOCALLINK {
    background: #CD5C5C;   /* Peach */
    color: #FFFFFF;
}
div.REF050C, select.REF050C {
    background: #DF7C00;   /* Orange */
    color: #FFFFFF;
}
div.L10M, select.L10M {
    background: #2E8B57;    /* Green */
    color: #FFFFFF;
}
div.L6M, select.L6M {
    background: #F58B75;   /* Some Color */
    color: #FFFFFF;
}
div.L443500, select.L443500 {
    background: linear-gradient(135deg,#001080 0 50%,#F19CBB 50% 100%);  /* HUB1 / Pink */
    color: #FFFFFF;			               
}					               
div.L446325, select.L446325 {				               
    background: linear-gradient(135deg,#001080 0 50%,#0000FF 50% 100%);  /* HUB1 / Primary Blue */
    color: #FFFFFF;		      	               
}				      	               
div.L446775, select.L446775 {
    background: #00CCCC;  /* Turquoise */
    color: #FFFFFF;			               
}					               
div.L448625, select.L448625 {
    background: linear-gradient(135deg,#B22222 0 50%,#BA55D3 50% 100%);   /* Medium Orchid */
    color: #FFFFFF;
}
div.DARI, select.DARI {
    color: #FFFFFF;
    background: #cc00ac;   /* Pink */
}
div.NEAR900, select.NEAR900 {
    color: #FFFFFF;
    background: #6B00A2;   /* Light Indigo */
}
div.NEWENG2, select.NEWENG2 {
    color: #000000;
    background: #FFE5CC;   /* Peachy Tan */
}
div.NEWENG3, select.NEWENG3 {
    color: #000000;
    background: #FFCCCC;   /* Light Pink */
}
div.NOTLINKED, select.NOTLINKED {
    color: #FFFFFF;
    background: #AB7543;   /* Brown */
}
div.OFFAIR, select.OFFAIR {
    color: #AAAAAA;
    background: #000000;   /* Black */
}
div.ERROR, select.ERROR {
    color: #AA0000;
    background: #CCCCCC;   /* Grey */
}
div.AUX, select.AUX {
    color: #0000B0;
    border: 1px solid black;
    background: WHITE;      /* Grey */
}
div.GRAY, select.GRAY {
    color: #AA0000;
    background: GRAY;      /* Grey */
}


/* {
  box-sizing: border-box;
}*/

.flex-container {
  background: none;
  display: flex;
  flex-wrap: wrap;
  font-size: 300em;
  text-align: center;
}

.flex-item {
  font-size: 300em;
  background: #ffffff;
  padding: 5px;
  flex: 30%;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item {
    flex: 100%;
  }
}
div.sitepopup {
    position: fixed;
    display: none;
    border: 1px solid black;
    background: #EEEEEE;
    font-size: 18px; 
    color: black;
    width: 400px;
    top: 100px;
    left: 50%;
    margin-left:-200px;
    text-align: left;
    padding: 20px;
    padding-bottom: 50px;
}
a.sitepopup {
    text-decoration: none;
    border: 1px solid black;
    background: darkgrey;
    color: black;
    padding: 8px;
    text-align: center;
    font-size: 18px;
}
select.sitepopup {
    background: none;
    border: 1px solid black;
    height: 40px;
    width: 80px;
    font-size: 18px;
}
DIV.modebutton {
display: flex;
    font-size:16px;
    color:blue;
    text-align:left;
    background:white;
}
DIV.modebutton:hover {
    background:yellow;
}
DIV.banner {
    position: absolute;
    background:white;
    display: inline-block;
    color:black;
    font-size:20px;
    text-align:left;
}