
* {
   font: 18px  Arial, Helvetica, sans-serif;
   line-height: 18px;
   text-decoration: none;
}

html, body {
   height: 99.4%;
   /*padding: 0.2%; */
   background-color: #DBE9F4;
   /*margin:  auto;*/
   max-width: 100%;
}

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

.overlay {
   z-index: 2;
   position: fixed;

   background: #fff;
   opacity: 95%;

   top: 2%;
   bottom: 1%;
   cursor: auto;
   overflow: auto;

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

   width: 70%;
   left: 15%;
   border-style : solid;
   border-color : #878360;
   border-radius : 0.5em;
}

.kopf {
   display: flex;
   justify-content: space-between;
   width 100%;
   flex-wrap: wrap;
}
.kopf > div {
   flex-basis: 19%;
}

.reihe {
   display: flex;
   width 100%;
   flex-wrap: wrap;
}

h2 {
   font-size: 24px; 
   font-weight: normal;
   margin: 21px 40px;
}
h3 {
    font-size: 34px; 
   font-weight: normal;
   margin: 21px 40px;
}
h3 > a {
    font-size: 29px; 
   font-weight: normal;
   margin: 21px 40px 5px 1px;
}

button {
   margin: -1px 0px 0px 20px;
}



.spalte{
   display: flex;
   flex: 1;
   flex-direction: column;
   flex-wrap: wrap;

   min-width : 200px;
   margin: 1% 5%;
   padding: 1% 1%;
   left: 8%;
}

.spalte > a {
   display: flex;
   flex: 2;
   flex-direction: column;
   margin: 1px;
   padding: 7px;
}

.spalte > a:hover  {
   background-color:  #FFFfbf77; 
}

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

.subrow {
   display: flex;
   flex: 2;
/*   border: 1px 9px 1px 9px;
   padding: 1px 9px 15px 9px;  */
}
.subrow > a {
   min-width : 10ch;
}
.links > a {
   display: flex;
   flex: 2;
/*   flex-direction: column;
   /*margin: 4px; padding: 2px; */
   margin: 1px;
   padding: 7px;
}
.sublinks > a {
   display: flex;
   flex: 2;
   flex-direction: column;
   margin: 1px;
   padding: 7px 60px;
}

img {
   display: flex;
   flex: 1;
   margin: 1px 9px;
   padding: 1px;
}


a:hover {
   background-color:  #fffaa0;
}

.mapboxgl-canvas-container.mapboxgl-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;
}

#showcountry{
   padding: 0.5em;
   line-height: 1.3em;
}

.mapboxgl-popup-content {
   background-color:  #e6e6ff;
   border: solid 2px blue;
   overflow-wrap: normal;
   overflow: auto;
   font-family: 'Open Sans', sans-serif;
   text-align : center;
   vertical-align: middle;
   overflow-x: auto;
}

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

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


.learnmode {
   padding: 10px;
   margin: 15px;
}




ul{
   list-style : none;
}

form {
   margin: 21px 20px;
   min-width: 400px;
   padding: 1em;
   border: 1px solid #ccc;
   border-radius: 1em;
}

form label {
  margin-left: 1em;
  margin-right: 1em;
}
form li + li {
  margin-top: 1em;
}

label {
  display: inline-block;
  width: 90px;
  text-align: right;
}


p {
   margin: 10px;
   margin-top: 10px;
   font: 24px  Arial, Helvetica, sans-serif;
}

/* p span { display: block; }    */

p .toggle {
   font: 12px  Arial, Helvetica, sans-serif;
   overflow-wrap: normal;
}

.exampleout {
   margin: 10px 20px;
   font: 8px  Arial, Helvetica, sans-serif;
   overflow-wrap: normal;
}


.nbrlist:hover {
   /* background-color:  yellow; */
   background-color:  #ffff99;
}


