/*=================================================================================================
  Stylesheet F.LUX-Applets
  last edited: 2020 04 16
  =================================================================================================*/
  
  
/* fonts */

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 300;
    src: url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-300.eot);
    src: local("Nunito Sans Light"), local("NunitoSans-Light"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-300.eot?#iefix) format("embedded-opentype"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-300.woff2) format("woff2"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-300.woff) format("woff"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-300.ttf) format("truetype"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-300.svg#NunitoSans) format("svg")
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    src: url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-regular.eot);
    src: local("Nunito Sans Regular"), local("NunitoSans-Regular"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-regular.eot?#iefix) format("embedded-opentype"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-regular.woff2) format("woff2"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-regular.woff) format("woff"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-regular.ttf) format("truetype"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-regular.svg#NunitoSans) format("svg")
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 700;
    src: url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-700.eot);
    src: local("Nunito Sans Bold"), local("NunitoSans-Bold"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-700.eot?#iefix) format("embedded-opentype"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-700.woff2) format("woff2"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-700.woff) format("woff"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-700.ttf) format("truetype"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-700.svg#NunitoSans) format("svg")
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 900;
    src: url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-900.eot);
    src: local("Nunito Sans Black"), local("NunitoSans-Black"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-900.eot?#iefix) format("embedded-opentype"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-900.woff2) format("woff2"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-900.woff) format("woff"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-900.ttf) format("truetype"), url(/files/flux/fonts/nunito-sans/nunito-sans-v5-latin-900.svg#NunitoSans) format("svg")
}

/* all elements */

* {
  margin: 0;                                     /* Vorgaben für Außenabstand löschen */
  padding: 0;                                    /* Vorgaben für Innenabstand löschen */
  box-sizing: border-box;
  font-family: "Nunito Sans";
  }

/* form */

form {
	width: 300px;
    height: 2.4em;
    /*border: 1px solid gainsboro;*/
    font: 1em/2em Nunito Sans;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

output {
    position: relative;
    width: 30%;
    height: 2em;
    color: black;
    background-color: #DAE9DC;
    border-radius: 1em;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

/* slider */

output.sliderPhotons:after {
    content: " Teilchen";
    width: 30%;
}

output.sliderAngle:after {
    content: "\0000B0";
    width: 30%;
}

output.sliderR:after {
    content: " cm";
    width: 30%;
}

output.sliderLux:after {
    content: " lx";
    width: 30%;
}

output.sliderCd:after {
    content: " cd";
    width: 30%;
}

.slider {
    -webkit-appearance: none;
    width: 50%;
    height: 2.2em;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2.2em;
    height: 2.2em;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 2.2em;
    height: 2.2em;
    background: #4CAF50;
    cursor: pointer;
}
  
/* canvas */

canvas {
    background-color: #111111;                     /* Hintergrundfarbe #f0f0f0*/
    border: 1px solid #000000;                     /* Rand */
    font-family: Nunito Sans;
}

/* rows and columns */

.row::after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
    padding: 1px;
    border: 0px;
}

/* For desktop: */
.col-1 {width: 50%; height: 235px;}
.col-2 {width: 50%; height: 235px;}
.col-3 {width: 50%; height: 235px;}
.col-4 {width: 50%; height: 285px;}


@media only screen and (max-width: 586px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    
    .col-1 {height: 155px}
    
    canvas {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    canvas#cvgame {
        margin-bottom: 2px;
    }
    
    div#panel {
        width: 280px;
        height: 260px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (min-width: 587px) {
    /* For other screensizes */
    
    .col-4 {width: 100%}
    
    canvas#cvmodel {
        margin-top: 40px;
        display: block;
        margin-left: auto;
        margin-right: 0px;
    }
    
    canvas#cvgame {
        /*width: 500px;*/
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2px;
    }
    
    canvas#cvgraph {
        display: block;
        margin-left: 0px;
        margin-right: auto;
    }
    
    div#panel {
        width: 567px;
        height: 260px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}



/* Schaltfläche */
  
div#panel, div#panel1, div#panel2 {
  /*position: absolute;*/
  background-color: #DAE9DC;                     /* Hintergrundfarbe */
  border: 1px solid #000000;                     /* Rand */
  font-size: 1.5em;                               /* Schriftgröße */
  font-weight: bold;                          /* Fettdruck */
  }
  
/* Zeile einer Schaltfläche */
  
div#panel div , div#panel1 div, div#panel2 div {
  position: relative;
  }
  
/* Inline-Element einer Schaltfläche */
  
div#panel span, div#panel1 span, div#panel2 span {
  position: absolute;
  white-space: nowrap;                           /* Kein Zeilenumbruch bei Leerzeichen */
  font-family: Nunito Sans;
  font-size: 12px;
  }


/* Eingabefeld */

input[type="text"] {
  position: absolute;
  padding-left: 2px;                             /* Innenabstand links */
  height: 14px;                                  /* Höhe */
  border-radius: 0px;                            /* Abgerundete Ecken verhindern */
  font-family: Nunito Sans;                       /* Schriftart */
  font-size: 12px;                               /* Schriftgröße */
  font-weight: bold;                             /* Fettdruck */
  } 
  
/* Auswahlfeld */

select {
  position: relative;
  top: -10px;                                     /* Kleine Korrektur der Höhe */
  left: 10px;                                    /* Abstand zum linken Rand */
  height: 20px;                                  /* Höhe */
  border-radius: 0px;                            /* Abgerundete Ecken verhindern */
  font-family: sans-serif;                       /* Schriftart */
  font-size: 12px;                               /* Schriftgröße */
  font-weight: bold;                             /* Fettdruck */
  }