:root {
    --bakgrunn1: white;
    --bakgrunn2: #e4ecef;
    --bakgrunn3: whitesmoke;
    --bakgrunn4: antiquewhite;
    --formBg: rgba(170, 189, 170, 0.24);
    --appw:16em;
  }

  @media only screen and (max-device-width: 500px) {
    :root {
      --appw:85vw;
    } 
}  


#box {
  display:flex;
  flex-wrap: wrap;
}


#main {
    background-size: cover;
    position:relative;
    width: var(--appw);
    height: 20em;
    position: relative;  
    overflow: hidden;
}

#main, #manual {
  background-color: var(--bakgrunn2);
  margin: 0.2em;
  border: solid 1px gray;
  box-shadow: 2px 2px 2px gray;
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}


#manual {
  width: 20em;
  height: 30em;
}

#main.reglist {
  min-height:20em;
  height: auto;
  max-height: 40em;
  overflow: auto;
  padding-top:3em;
}

#main.aa {
  background-color: var(--bakgrunn3);
  border-radius: 0;
}


#main.bb {
  background-color: var(--bakgrunn3);
}

#main.cc {
  background-color: var(--bakgrunn2);
}

#main.dd {
  background-color: var(--bakgrunn4);
}

#main div {
  text-align: center;
  padding-top:10px;
}

div.header {
  position: absolute;
  height: 2em;
  width: 100%;
  top:0;
  left:0;
  text-align: center;
  font-size:1.5em;
  color:white;
  background-color: #5C92F5;
  padding-top:1em;
}
#main div.spinner div,
div.spinner div {
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: solid gray 5px;
  border-bottom-color: transparent;
  border-right-color: transparent;
  animation: spinner 800ms linear infinite;
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% {transform: rotate(360deg); }
}


#main div h4 {
  color:blue;
  font-size: 1.3em;
  text-align: center;
}

div label {
  color:rgb(60, 90, 4);
  font-size: 1.3em;
  position: relative;
}

#main div input {
  text-align:center;
  color:blue;
}


#main div input.wait {
  background-color: white;
  animation: cycle 2s alternate infinite;
}

@keyframes cycle {
  0% { background-color: rgba(190, 101, 101, 0.596); }
  100% { background-color: green; }
}



div.registrer label input {
  color:green;
  font-size: 1.3em;
  width: 9em;
}

#main label:before {
  content: attr(data-msg);
  position: absolute;
  right: 1em;
  top: 2.8em;
  color: red;
  font-size:0.8em;
  z-index:1000;
}

div.melding img {
  width: 5em;
  height: 5em;
}

.hidden, #manual.hidden {
  display:none;
}



#main div.studlist ol, li {
  position: relative;
  text-align: left;
  padding: 0;
  margin:0;
}

#expand {
  position: absolute;
  top:1.5em;
  right:0.2em;
  color:green;
  font-size: 2em;
}