/* BODY */
body {
    font-family: Verdana, "Lucida Sans", Arial, sans-serif; 
    font-size: 100%; 
    color: black; 
    background-color: lightblue; 
}
* { box-sizing: border-box; }


/* TEXT  */
/* indented text */
.m1em { margin-left: 1em; margin-right: 1em; } /* indent 1em */
.m2em { margin-left: 2em; margin-right: 2em; } /* indent 2em */
.m3em { margin-left: 3em; margin-right: 3em; } /* indent 3em */
.m4em { margin-left: 4em; margin-right: 4em; } /* indent 4em */
@media screen and (max-width: 600px) {.m1em, .m2em, .m3em, .m4em{margin-left: 1em; margin-right: 1em}}


/* HEADER  */
.head {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    padding: 8px; 
    color: white; 
    background-color: #9933cc;
    z-index: 2;
    display: grid;
}

.cred {
  position: fixed;
  top: 50px;
  left: 25%;
  width: 50%;
  max-height: 95vh;
  overflow: auto;
  display: block;
  background-color: cornsilk;
  border: solid 8px grey;
  padding: 64px;
  z-index: 10;
}

.credDiv {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.credName, .credForm {
  background-color: lightgreen;
  border: solid 1px black;
  border-radius: 3%;
  padding: 8px;
}
.credForm {background-color: lightgray;}

/* containers to click to move to a position on the map */
.toField, .toRisk{
  height: 20px; 
  width: 200px;
  overflow: auto;
  padding: 0 8px; 
  font-size: 85%; 
  color: black; 
  background-color: green;
}
.toRisk {background-color: orange;}

.title {text-align: center;}

/* fields menu */
.fldSearch, .fields {
    position: fixed;   
    top: 77px;
    left: 8px;
    width: 400px;
    height: 400px;
    overflow: auto;
    background-color: green; 
    color: black; 
    border: solid 2px grey;
    border-radius: 5px; 
    padding: 8px;
    text-align: left;
    z-index: 3;
    display: block;
}
.fields {border-bottom: 8px solid lightblue;}
.fldSearch {top:40px; background-color: lavender; display: block;}
.fields div:hover {background-color: #0099cc; }

/* sites menu */
.sites {
    position: fixed;   
    top: 480px;
    left: 8px;
    width: 400px;
    max-height: 400px;
    overflow: auto;
    background-color: yellow; 
    color: black; 
    border: solid 2px grey;
    border-radius: 5px; 
    padding: 8px;
    text-align: left;
    z-index: 3;
    display: none;
}
.sites div:hover {background-color: #0099cc; }

.hide {display: none}

.mapForm {
    position: fixed; 
    top: 40px; 
    left: 40%; 
    width: 20%;
    display: block; 
    background: white; 
    padding: 8px; 
    border: solid 1px black;
    z-index: 2;  
}

/* Set the size of the div element that contains the map */
.map {
   position: fixed;
   top: 20px;
   left: 0;
   width: 100%;
   height: 97vh;
   z-index: 1;
}

.forms {
  position: fixed;
  top: 40px;
  right: 0;
  max-width: 740px;
  max-height: 600px;
  overflow: auto;
  display: block;
  background-color: cornsilk;
  padding: 0 0 16px 16px;
  z-index: 2;
}

.fldRow, .risRow, .sitRow, .pipRow, .samRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-right: 10px;
}

.fldRow label {width: 220px;}
.risRow label {width: 140px;}
.sitRow label {width: 100px;}
.pipRow label {width: 150px;}
.samRow label {width: 100px;}

/* info container */
.info {
    position: fixed;
    bottom: 1px;
    left: 16px;
    padding: 9px;
    text-align: center;
    color: black;
    background-color: lightblue;
    border-radius: 6%;
    z-index: 3;
}

.input {font-size: 16px; background-color: cornsilk;}
.submit {
  left: 45%;
  width: 100px;
  margin: 16px;
  font-size: 20px;
}

/* marker styles */
/* field = green */
.field {
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  padding: 4px;
  position: relative;
  background-color: green;
}

.field::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid green;
}

/* pump = red */
.pump {
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  padding: 4px;
  position: relative;
  background-color: red;
}

.pump::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid red;
}

/* risk = orange */
.risk {
  border-radius: 8px;
  color: #000000;
  font-size: 14px;
  padding: 4px;
  position: relative;
  background-color: orange;
}

.risk::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid orange;
}

/* water = blue */
.water {
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  padding: 4px;
  position: relative;
  background-color: blue;
}

.water::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid blue;
}

/* note = purple */
.note {
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  padding: 4px;
  position: relative;
  background-color: purple;
}

.note::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid purple;
}

/* place = yellow */
.site {
  border-radius: 8px;
  color: black;
  font-size: 14px;
  padding: 4px;
  position: relative;
  background-color: yellow;
}

.site::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid yellow;
}

/* info = white */
.instr {
  border-radius: 8px;
  color: black;
  font-size: 14px;
  padding: 4px;
  position: relative;
  background-color: white;
}

/* line */
.line {
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  padding: 4px;
  position: relative;
  background-color: blue;
  border: 8px solid white;
}