@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=88ed457b-8c18-40b5-aec4-64c14b281f3f");
@font-face {
    font-family: "Frutiger Next LT W06 Light";
    src: url("../fonts/35f2fcd5-0bd6-4974-8b4b-a0667bc609b9.eot?#iefix");
    src: url("../fonts/35f2fcd5-0bd6-4974-8b4b-a0667bc609b9.eot?#iefix") format("eot"), url("../fonts/3af5fe69-53e3-4d72-b3d4-ebd14b3ec87a.woff2") format("woff2"), url("../fonts/a7b40a14-dbca-49ff-8668-a2808421455b.woff") format("woff"), url("../fonts/5439c10b-467e-4feb-b866-7b1b588bdc08.ttf") format("truetype"), url("../fonts/a1a93a97-03d2-4309-8393-3e4c9a452ff6.svg#a1a93a97-03d2-4309-8393-3e4c9a452ff6") format("svg");
}

@font-face {
    font-family: "Frutiger Next LT W06 Regular";
    src: url("../fonts/67c5c787-2e85-4a14-b474-e045dce6d7f4.eot?#iefix");
    src: url("../fonts/67c5c787-2e85-4a14-b474-e045dce6d7f4.eot?#iefix") format("eot"), url("../fonts/53aac456-34d2-412d-a0c4-ac46d05ecd5b.woff2") format("woff2"), url("../fonts/fa580d72-d04a-4adc-aa9a-33ac2e393df8.woff") format("woff"), url("../fonts/21373612-77c3-4b00-a1b8-34d7de44e13a.ttf") format("truetype"), url("../fonts/f3671f7c-a50d-437c-ac33-b46441e968a9.svg#f3671f7c-a50d-437c-ac33-b46441e968a9") format("svg");
}

@font-face {
    font-family: "Frutiger Next LT W06 Medium";
    src: url("../fonts/8c11db31-604a-4fff-90ea-5ccd389b7260.eot?#iefix");
    src: url("../fonts/8c11db31-604a-4fff-90ea-5ccd389b7260.eot?#iefix") format("eot"), url("../fonts/22247daf-16bb-4393-9c8c-f680636cc14e.woff2") format("woff2"), url("../fonts/226dc050-0441-41e6-8d1b-11b9747812a2.woff") format("woff"), url("../fonts/8d86c89e-f099-49b3-b4cd-97907ba7124e.ttf") format("truetype"), url("../fonts/8524e4cf-1990-4ac9-a0de-c793c3fd5972.svg#8524e4cf-1990-4ac9-a0de-c793c3fd5972") format("svg");
}

@font-face {
    font-family: "Frutiger Next LT W06 Bold";
    src: url("../fonts/8f26a17a-e1da-46c7-b773-cbd67d02492f.eot?#iefix");
    src: url("../fonts/8f26a17a-e1da-46c7-b773-cbd67d02492f.eot?#iefix") format("eot"), url("../fonts/27892399-803e-45e6-b843-dbe5a2dffd33.woff2") format("woff2"), url("../fonts/5ba2524a-fcfc-4951-896b-479275183f3d.woff") format("woff"), url("../fonts/8e8d3882-9803-4f76-925e-edf27f6f2674.ttf") format("truetype"), url("../fonts/5c54ff47-57b9-4f85-8861-19dad1f2fadc.svg#5c54ff47-57b9-4f85-8861-19dad1f2fadc") format("svg");
}

@font-face {
    font-family: 'microsonicsymbols';
    src:  url('../fonts/microsonicsymbols.eot?p7wdwu');
    src:  url('../fonts/microsonicsymbols.eot?p7wdwu#iefix') format('embedded-opentype'),
      url('../fonts/microsonicsymbols.ttf?p7wdwu') format('truetype'),
      url('../fonts/microsonicsymbols.woff?p7wdwu') format('woff'),
      url('../fonts/microsonicsymbols.svg?p7wdwu#microsonicsymbols') format('svg');
    font-weight: normal;
    font-style: normal;
  }

  i {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'microsonicsymbols' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :root {
    --main-dark-blue: #163161;
    --main02-dark-blue: #384875;
    --main-bright-blue: #eaf7fe;
    --main-akzent-blue: #61c3d9;
    --main-grey: #dadada;
    --main-red: #ea5153;
    --main-green:#25df00;
    --main-beige: #ede0b6;
    --main-akzent-hell: #e2f6ff;
    /*--debug-color:#f00;*/
  }


  body{
      background-color:var(--main-dark-blue);
      position:absolute;
      padding:0px;
      margin:0px;
      left:0px;
      top:0px;
      width:100%;
      height:100%;
      overflow:hidden;
  }



.loader {
    font-size: 10px;
    margin: 50px auto;
    text-indent: -9999em;
    width: 11em;
    height: 11em;
    border-radius: 50%;
    background: var(--main-dark-blue);
    background: -moz-linear-gradient(left, var(--main-dark-blue) 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, var(--main-dark-blue) 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, var(--main-dark-blue) 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, var(--main-dark-blue) 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, var(--main-dark-blue) 10%, rgba(255, 255, 255, 0) 42%);
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }
  .loader:before {
    width: 50%;
    height: 50%;
    background: var(--main-dark-blue);
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
  }
  .loader:after {
    background: #fff;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  @-webkit-keyframes load3 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes load3 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }


  .boxcontainer{
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
  }
  .box{
    position:relative;
    width:calc(100% - 40px);
    max-width:600px;
    background-color:#fff;
    padding:20px;
    height:auto;
    
    box-shadow: 0px 0px 10px #000;
    border-radius: 5px;
    transition: height 0.5s;
  }


  .boxcontent{
    display:none;
  }
  #box1{
    display:block;
  }

  #logo{
    position:absolute;
    right:20px;
    top:20px;
    background-size:100% auto;
    background-repeat: no-repeat;
    width:120px;
    height:30px;
    background-image:url("../icon/logo.png");
  }

  .textsite{
    font-family: "Frutiger Next LT W06 Medium", Helvetica, Arial, sans-serif;
    font-size:50px;
    color: var(--main-dark-blue);
  }

  .buttonsite > input[type="button"]{
    width:100%;
    font-family: "Frutiger Next LT W06 Medium", Helvetica, Arial, sans-serif;
    border:1px solid var(--main-dark-blue);
    color:var(--main-dark-blue);
    background-color:#fff;
    font-size:15px;
    border-radius: 0px;
    height:40px;
    line-height:40px;
    padding:0px;
    margin-top:30px;
    cursor:pointer;
  }

  .buttonsite > input[type="button"]:hover{
    background-color:var(--main-dark-blue);
    color:#fff;
  }

  .errorConnect{
    width:100%;
    color:#f00;
    margin-top:10px;
    font-family: "Frutiger Next LT W06 Light", Helvetica, Arial, sans-serif;
    font-size:15px;
    display:none;
  }

  .details{
    display: inline-block;
    width:100%;
    height:auto;
  }

  .sensordesc{
    width:100%;
    border-bottom:1px solid #ccc;
    float:left;
    padding-top:5px;
    padding-bottom:5px;
    font-family: "Frutiger Next LT W06 Light", Helvetica, Arial, sans-serif;
    font-size:12px;
    color:var(--main-dark-blue);
  }

  .sensordesc:nth-last-child(){
    border-bottom:none;
  }

  .sensorwert{
    float:right;
  }


  #messages{
    margin-top:10px;
  }
  .messagebox{
    margin:auto;
    position:relative;
    background-color:#fff;
    border-radius:5px;
    width:220px;
    padding:10px;
    height:auto;
    line-height:20px;
    font-size:12px;
    font-family: "Frutiger Next LT W06 Light", Helvetica, Arial, sans-serif;
    display:flex;
    align-items: center;
    justify-content:flex-start;
    margin-bottom:5px;
    opacity:0;
  }

  .msg_error{
    color:#F00;
  }

  .msg_success{
    color:rgb(0, 255, 34);
  }

  .msg_uebertragung{
    color:rgb(255, 155, 6);
  }

  .logo_messagebox{
    height:20px;
    width:20px;
    background-repeat:no-repeat;
    background-size: 100% auto;
    margin-right:10px;
  }

  .msg_pic_error{
    background-image:url("../icon/error.png");
  }

  .msg_pic_success{
    background-image:url("../icon/success.png");
  }

  .msg_pic_uebertragung{
    background-image:url("../icon/uebertragung.png");
  }

  #measurement{
    position:absolute;
    bottom:10px;
    left:50%;
    margin-left:-100px;
    background-color:#fff;
    border-radius:5px;
    width:200px;
    padding:20px;
    height:auto;
    line-height:40px;
    font-size:40px;
    font-family: "Frutiger Next LT W06 Light", Helvetica, Arial, sans-serif;
    text-align:center;
    display:none;
  }