* {
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
}

html, body {
   background-color: #DBE9F4;
   margin:  auto;
   max-width: 100%;
   overflow: auto;
   overflow-x: scroll;
   overflow-y: scroll;
   height: 100%;
   padding: 0.06%;
}

button {
   margin: 5px;
}


.highlight {
   background-color: #FFFAA0; /*pastelyellow */
}

.highlighthover {
   /* background-color: white; /*pastelyellow */
   border: solid 2px red;
   border-style: groove;
   outline: solid 2px blue;
}

#mapid {
   height: 97%;
   margin:  auto;
   max-width: 99%;
   overflow-x: scroll;
   overflow-y: scroll;
}

/* reduce these maybe ... */
.subrowMain {   
   display: flex;
   font-size: 250%;
   border: 1px 9px 1px 9px;
   padding: 1px 9px 55px 9px;
}
.subrowMain > a {
   min-width : 10ch;
   font-size: 35px;
}
/* ... reduce these maybe */


.infopage {
   z-index: 5;
   position: fixed;

   min-height: 90%;
   max-height: 120%;

   top: 5%;
   width: 70%;
   left: 15%;

/*   background-color: rgba(170,211,223,0.95); */
   background-color: rgba(250,250,250,0.9);
   border-style : solid;
   border: solid 1px darkblue;
   border-radius : 0.5em;
}

.abovemap {
   z-index: 5;
   position: fixed;
   top: 1%;
   left: 1%;
}




.XschoolList {
   z-index: 5;
   position: fixed;

   min-height: 70%;
   max-height: 99%;

   top: 1%;
   width: 12%;
   left: 1%;
   float: left;

   background-color: rgba(170,211,223,0.95);
   border-style : solid;
   border: solid 3px darkblue;
   border-radius : 0.5em;
   display: none;

   overflow: auto;
   overflow-x: scroll;
   overflow-y: scroll;

   justify-content: left;
}

.infoScreen {
   z-index: 5;
   position: fixed;

   min-height: 70%;
   max-height: 120%;

   top: 5%;
   width: 70%;
   left: 15%;

   background-color: rgba(170,211,223,0.95);
   border-style : solid;
   border: solid 1px darkblue;
   border-radius : 0.5em;
   display: none;

   overflow: auto;
   overflow-x: scroll;
   overflow-y: scroll;
}


   #overlay {
     position: fixed;
     display: none;
     width: 25%;
     max-width: 330px;
     height: 75%;
     top: 2%;
     right: 0%;
     background-color: rgba(170,211,223,0.85);
     z-index: 5;
     border-style : groove;
     cursor: auto;
     border-radius: 7px;
     overflow-y: scroll;
     resize: vertical;
   }


h3 {
   text-align: center;
   font-size: 24px;
   font-weight: normal;
   padding-bottom: 10px;
}

/* .reihe {
   display: flex;
   width: 16%;
   flex-wrap: wrap;
   justify-content: left;
    padding:3%;
}  */
.reihe1 {
   /* display: flex; */
   width: 76%;
   justify-content: left;
   padding:5%;
}

.reihe1 ul {
   text-align: left;
      list-style-type: none;
    margin: 0px;
    padding:0;
}

.spalte1 {
   display: flex;
   flex: 1;
   flex-direction: column;
   justify-content: space-between;
   min-height: 300px;
   height: 90%;
   min-width: 400px;
   margin : 1% 1% ;
   flex-wrap: wrap;
}

.spalte2{
   flex: 1;
   flex-direction: column;
   min-width: 400px;
   margin : 1% 1% ;
   flex-wrap: wrap;
}

.spaltemiddle{
   flex: 1;
   justify-content: center;
   align-items: center;
   align-content: center;

   flex-direction: column;
   min-width: 400px;
   margin : 1% 31% ;
   flex-wrap: wrap;
}

label {   /* vertical-align: top; */
   align: top;
   white-space: nowrap;
   margin: 0% 1%; 
}

select {  /* timer, language select */
   float: left;
   min-width: 33%;
   width: auto;
   height: 3%;
   border-style : solid;
   cursor: auto;
   margin : 1% 63% 1% 3%;
   border-radius: 3px;
   border-color: darkgrey;
}


.maplibregl-canvas-container.maplibregl-interactive{
   cursor: -webkit-grab;
   cursor: -moz-grab;
   cursor: grab;
   cursor: url(/images/curse.png) 7 5, auto;
   cursor: url(/images/curse.cur) 7 5, auto;
}


/*popup next country and message popups:*/
#showcountry{
   padding: 0.5em;
   line-height: 1.3em;
   text-align : center;
}

.maplibregl-popup-content {
   background-color:  #e6e6ff;
   border: solid 2px blue;
   opacity: 96%;
   overflow-wrap: normal;
   overflow: auto;
   text-align : center;
   vertical-align: middle;
   overflow-x: auto;
}

.nextCountry {
   min-width : 10ch;
   font-size: 2.9em;
}

.messagePop {
   min-width : 30ch;
   font-size: 1.4em;
}

ul{
   list-style : none;
   margin:  auto;
   /*padding: 0; */
}
li {
   margin:  10px  0;
   font-size: 1.2em;
}


#question:hover { 
  cursor : pointer;
}