:root {
  --side-farve: #9fdfbe;
  --opgave-grund1: #B7E7CE;
  --opgave-grund2: #DBF3E7;
  --opgave-grund3: #AFDA83;
  --opgave-valgt: #40bf7d;
  --opgave-grund-quest: #e7cfb6;
  --opgave-krav: #e7b6b6;
  --opgave-korrekt: 	#97bfe7;
  --opgave-knap : #7AF5F5;
  --opgave-knap-frem : #34DDDD;
}

html {
    font-family: Helvetica;
}
.spildiv .box, .spildiv .tilbox, .spildiv .linebox, .spildiv .pegeord { 
    background-color: var(--opgave-grund1);
    border: 1px solid var(--opgave-grund1);
    margin: 2px;
    vertical-align: middle;
}
 .spildiv .box,  .spildiv .tilbox, .spildiv #col3.bagsider .box  ,.spildiv .linebox, .spildiv .pegeord { 
    min-height: 1.2em;
}
#opgaver {
    background-color: var(--opgave-grund3);
}
.spildiv .tilbox {
    min-width: 50px;
    display: inline-block;
    text-align: center;
    transition-duration: 0.4s;    
}
.spildiv .pegeord, .spildiv .etord {
    transition-duration: 0.4s;    
    margin: 0.5em;
}
.spildiv .linebox {
    transition-duration: 0.4s;    
    padding: 0.8em;
    vertical-align: text-bottom;
    margin-left: 3em;
    margin-right: 3em;
}

.spildiv #col3.bagsider .bagside {
    background: coral;
}

.spildiv .dragover {
    border: 1px solid black;
}



.spildiv  button {
    outline: none;
    border: 2px solid var(--opgave-knap-frem);
    background-color: var(--opgave-knap);
    transition-duration: 0.4s;    
}
.spildiv  button:hover {
    background-color: var(--opgave-knap-frem);
}
.spildiv  button:active {
  transform: translateY(4px);
}

.spildiv .clearfix::after {
    content: '';
    clear: both;
    display: table;
}
.spildiv .a, .spildiv .q, .spildiv .par, .autokomm, .spildiv .kravbeskriv {
    border: 1px solid #aaaaaa;
    margin: auto;
    padding: 0.5em;
    max-width: 40em;
 }

 .spildiv .kravbeskriv {
     background-color: var(--opgave-krav);
 } 
 .spildiv .a {
     background-color: var(--opgave-grund1);
    white-space: pre-wrap;
    text-align: left;
 }
 .spildiv .q {
    background-color: var(--opgave-grund-quest);
    text-align: left;
 }
.spildiv .par {
    background-color: var(--opgave-grund2);
    margin: 1em;
    padding: 1em;
 }
 .spildiv .sprogspiludpeg {
     background-color: var(--opgave-grund1);
    white-space: pre-wrap;
    text-align: left;
    max-width: 50em;
    margin: auto;
    padding: 5px;   
 }
 .spildiv .leftcenter {
     display: inline-block;
    text-align: left;
 }
.spildiv  #col1, .spildiv  #col2, .spildiv  #col3, .spildiv  #colbred{
    width: 30%;
    max-width: 20em;
    border: 1px solid #aaaaaa;
    margin: 2px;
    float:left;
}

.sprogkombidndtabel {
    display: flex;
    justify-content: center;
}
    
.spildiv  #colbred {
    width: 62%;
    max-width: 40em;
}
.spildiv  #divmaal {
    width: 99%;
}

.spildiv #divkilde  {
    width: 99%;
    display:flex;justify-content:center;align-items:center;
    font-weight:bolder;
}
.divsixpack, .spildiv #divkilde {
    height: 100%;
}

.fiskedam {
    height:12em;
}
.fisk {
    width: fit-content;
    min-width: 7em;
    position: absolute;
}
.isigte {
    cursor: url('target.png'), auto;
}

.spildiv .muligheder {
    display: inline-block;
    background-color: var(--opgave-grund1); 
    padding: 3px;
}

.spildiv .muligheder span {
    background-color: var(--opgave-grund2);
    padding: 1px;
    cursor: pointer;
}

.spildiv .ordIsClicked, .muligheder span.ordIsClicked  { 
    background-color: var(--opgave-valgt); 
    transition-duration: 0.1s;    
}

#divkilde .drag {
    width:fit-content;
    min-width: 7em;
}

.spildiv .end {
text-align: right;
}
.spildiv .korrekt {
    background-color: var(--opgave-korrekt) !important;
    transition-duration: 0.1s;    
}

#facitmsg {
    background-color: var(--opgave-korrekt);
}
#rangliste caption, #rangliste th, #rangliste td {
    background: whitesmoke;
}
#rangliste {
    text-align: center;
}
table { 
    margin: 0 0  auto 0;
    text-align: left;
}

.spildiv .ord1 {
    border: 2px solid black;
}

.drag {
    /*cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
user-select: text;    
}
.nodrop {
    cursor: no-drop;
}
.score {
    cursor: pointer;
}

#kortbord {
/*    text-align: center;
    max-height: 200px;
    min-height: 200px;*/
    display: table-cell;
}

#kort {
  width: 400px;
  height: 200px;
  margin: auto;
  cursor: pointer;
}

.kortvis {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  margin: auto;
  font-size: 1.2em;
}

.kortfor {
    background-color: var(--opgave-grund1);
}

.kortbag {
    background-color: var(--opgave-grund2);
}
#slutdiv {
    margin-top: 30px;
}

.noDisplay, .skjul {
    display: none;
}


.nobr {white-space: nowrap; }
.KKfejl {background-color:#FF99FF; }
.KKmuligfejl {background-color:#FFFF66;}
.KKkommentar {background-color:#99FF99;}
.autokomm {
     background-color: #faeaf6;
}

#spillet {
    max-width: 75em;
    margin: auto;
    line-height: 1.3;    
}

.bigger {
    transform: scale(2); 
}

.overskrift, h1 {
    font-size:larger;
    font-weight: bold;
    margin-right: 10px;
    margin-top: 15px;
    margin-bottom: 5px;
    }