body {
    font-family: Arial;
  }

  .config-grid {
    /*display: inline-grid;
    grid-template-columns: auto auto auto auto auto auto;*/
    padding: 15px;
    padding-top:5px;
    grid-gap: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 75%;
    margin: auto;
    margin-bottom: 20px;
  }

  .slider-wrapper {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    margin:auto;
    height: 50px;
    margin-top: 10px;
  }

  .slider-container {
    position: relative;
    width: 80%;
    height: 50px;
    margin:auto;
  }

  .add-timer-btn {
    background: url(/plus-circle.svg) no-repeat;
    background-position: center;
    height:15px;
    width:15px;
    border:none;
    background-size: 94% 94%;
    margin-top: 2px;
  }

  .add-timer-btn:hover{
    filter: brightness(85%);
    cursor: pointer;
  }

  #timerTable{
    width: 840px;
  }

  #timerTable.data-table thead th{
    width: 400px;
  }

  .timer-cell-wrapper
  {
    width: 250px;
    overflow-x:auto;
  }

  #noMeasureDiv{
      top: 50%;
      position: absolute;
      left: 50%;
      translate: -50% -50%;
  }

  .timer-input{
    font-size:14px;
    text-align: center;
  }

  input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    outline: none;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
  }

  .slider-track {
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    z-index:0;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 5px;
  }

  input[type="range"]::-moz-range-track {
    -moz-appearance: none;
    height: 5px;
  }

  input[type="range"]::-ms-track {
    appearance: none;
    height: 5px;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1.7em;
    width: 1.7em;
    background-color: #3264fe;
    cursor: pointer;
    margin-top: -9px;
    pointer-events: auto;
    border-radius: 50%;
  }

  input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    height: 1.7em;
  /*  width: 1.7em;*/
    cursor: pointer;
  /*  border-radius: 50%;*/
    background-color: #3264fe;
    pointer-events: auto;
    border: none;
  }

  input[type="range"]::-ms-thumb {
    appearance: none;
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #3264fe;
    pointer-events: auto;
  }

  input[type="range"]:active::-webkit-slider-thumb {
    background-color: #ffffff;
    border: 1px solid #3264fe;
  }

/* .scroller {
    --scrollbar-color-thumb: auto;
    --scrollbar-color-track: none;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
/* @supports (scrollbar-width: auto) {
.scroller {
    scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
    scrollbar-width: var(--scrollbar-width);
} */

::-webkit-scrollbar-thumb {
    background: #888;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  ::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar {
    width: 10px;
  }


  #scaleSvg
  {
    width : calc(100% - 10px);
    height: 50px;
    position: absolute;
    left: 5px;
    z-index:1;
  }

  #slider-1, #slider-2
  {
    position: absolute;
    left: 0px;
  }

  .touDiv{
    width:50%;
    margin:auto;
    text-align:left;
    background:whitesmoke;
    line-height:25px;
    height: calc(100vh - 650px);
    overflow: auto;
  }

  .touDiv-title{
    width:50%;
    background:whitesmoke;
    margin:auto;
    padding-top:5px;
    padding-bottom:5px;
  }

  .scroll-content{
    overflow: auto;
    height: calc(100% - 20px - 3em);
  }

  #Contentwrapper {
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
    width: 75%;
    display: grid;
    border: 1px solid #676767;
    box-shadow: 4px 4px 4px #676767;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    grid-template-columns: 50% 50%;
  }

  #container {
    position: relative;
    padding: 3px;
    border: 2px solid #676767;
    background-color:rgba(255,255,255,1);
    border-radius: 4px;
    font-family:Arial;
    font-size: 1em;
  }

  .sapostext-div {
    width: 45%;
    text-align: center;
    margin: auto;
  }

  .sapos-access-div {
    margin: auto;
  }

  #mapOld {
    width: 90%;
    min-width: 450px;
    margin: 10px;
    min-height: 60vh;
    border: 2px solid #676767;
    display: inline-block;
    vertical-align: top;
    position: relative;
    height: 400px;
  }

  #map {
      order:1;
      width: 100%;
      display: inline-block;
      position: relative;
      height: calc(100% - 2px);
      align-self: center;
  }

  #measureMap {
    width: calc(50% - 1px);
    height: calc(100% - 2em);
    margin: auto;
    border: 1px solid #676767;
    display: inline-block;
    align-content: center;
    position: relative;
  }

  #mapLoaderDiv {
    width: 100%;
    /* min-width: 450px; */
    /* margin: 10px; */
    /* border: 2px solid #676767; */
    vertical-align: center;
    position: relative;
    height: 100%;
    align-content: center;
    /* max-height: 100%; */
    /* max-height: 700px; */
  }

  .no-close .ui-dialog-titlebar-close {
      display: none;
  }

  #aliasDialog
  {
    width:450px;
  }

  #measurementSetup{
    width: calc(50% - 1px);
    background: #676767;
    /* padding: 2px; */
    margin: auto;
    color: white;
    height:2em;
    align-content: center;
    display: flex;
    border: 1px solid #676767;
    gap: 3px;
    flex-wrap:wrap;
  }

  #measurement-table{
      display: grid;
      grid-template-rows: 50% 50%;
      width:100%;
      height:100%
  }

  #saposFilter{
      width: calc(100% - 2px);
      background: #676767;
      margin: auto;
      color: white;
      height: 100%;
      align-content: center;
      border:1px solid black;
  }

  #saposFilter select, #saposFilter button, #saposFilter
  {
    font-size:15px;
  }

  #showMapBtn{
    cursor:pointer;
    background: cornflowerblue;
    border-radius: 7px;
    color: white;
    padding: 2px;
    border-style: groove;
  }

  #showMapBtn:hover{
    filter: brightness(85%);
  }

  #dialog
  {
      text-align:center;
      width:300px;
      height:150px;
      background-color:white;
      border:1px solid black;
      padding:10px;
  }

  .search-input
  {
    outline: 0;
    border-width: 0 0 1px;
    border-color: darkslategrey;
    background-color:#ededf0;
    font-size: 17px;
  }

  .search-input:focus
  {
    border-color: cornflowerblue;
  }

  .linux-output-grid {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    padding: 30px;
    padding-top: 15px;
    grid-gap: 10px;
  }

  .text-input {
      width:100px;
      text-align:center;
  }

  .linux-output-grid-hidden {
    display:none;
    grid-template-columns: auto auto auto;
    padding: 30px;
    grid-gap: 10px;
  }

  .linux-output-grid div:hover {
    background: #eff0f1;
  }

  .linux-output-grid div a:hover{
    cursor: pointer;
  }

  .link-td
  {
  }

  .checkbox-td
  {
  }

  .overview-tr
  {
  }


  #measurement-point-table tr.selected:not(.error-row) td, #measurement-polyline-table tr.selected:not(.error-row) td
  {
    background:cornflowerblue;
  }


  #measurement-point-table tr.error-row.selected td, #measurement-polyline-table tr.error-row.selected td
  {
    background:orangered;
  }


  #measurement-point-table tr:not(.error-row):hover td, #measurement-polyline-table tr:not(.error-row):hover td{
    background-color:cornflowerblue;
  }

  #measurement-point-table tr.error-row:hover td, #measurement-polyline-table tr.error-row:hover td{
    background-color:orangered;
  }

  /*#measurement-point-table tr.hovered-error-row td,#measurement-polyline-table tr.hovered-error-row td{
    background-color:orangered;
  }*/

  #downloadPolylineBtn{
    font-size: 14px;
    margin-top: 5px;
  }

  #measurement-point-table td, #measurement-polyline-table td{
    border-spacing:0 3px;
  }

  #measurement-point-table td{
    text-align:center;
  }

  #measurement-point-table tbody{
    /* max-height:150px; */
    overflow-x:clip;
  }
  #measurement-point-table tbody tr:hover{
    cursor: pointer;
  }

  #measurement-point-table, #measurement-polyline-table{
      height:100%;
  }

  #measurement-table.mobile-measure-grid{
      grid-template-rows: 50% 5% 45%;
  }
  /*
  #measurement-point-table tbody tr:not(.hovered-error-row):hover td{
    background-color:cornflowerblue;
  }

  #measurement-point-table tbody tr:not(.error-row):hover td{
    background-color:cornflowerblue;
  }

  #measurement-point-table .hovered-error-row td, #measurement-polyline-table .hovered-error-row td {
    background-color:orangered;
  }

  #measurement-point-table tbody .error-row:hover td, #measurement-polyline-table tbody .error-row:hover td{
    background-color:orangered;
  }

  #measurement-point-table .hovered-measurement td {
    background-color:cornflowerblue;
  }*/

  #posTable .hovered-measurement td {
    color: white;
    background-color:cornflowerblue;
  }

  #measurement-polyline-table tbody{
    /* max-height:150px; */
    overflow-x:clip;
  }
  #measurement-polyline-table tbody tr:hover{
    cursor: pointer;
  }

  /*#measurement-polyline-table tbody tr:not(.hovered-error-row):hover td{
    background-color:cornflowerblue;
  }*/

  #measurement-polyline-table .hovered-measurement td {
    background-color:cornflowerblue;
  }

  #measurement-polyline-table, #measurement-point-table {
    font-size:13px;
  }

  #measurement-polyline-table tbody td, #measurement-point-table tbody td, #measurement-point-table thead th, #measurement-polyline-table thead th{
    padding:5px;
  }

  #fpMapTable {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-template-rows:100%;
    width: 100%;
    justify-content: center;
    height: calc(100% - 4px);
    width:90%;
    margin: auto;
  }

  .big-table-mobile #fpMapTable {
      display:grid;
  }

  .layerBtn {
    background: url(/layers_olblue_white_bold_bold.svg) no-repeat;
    background-position: center;
    height:40px;
    width:40px;
    right:10px;
    top:10px;
    position:absolute;
    border:none;
  }

  .katBtn {
    background: url(/kataster-simple1.svg) no-repeat;
    background-size: 90% 90%;
    background-position: center;
    height:40px;
    width:40px;
    right:10px;
    top:60px;
    position:absolute;
    border:none;
  }

  .katBtn:hover {
    background: url(/kataster-hover.svg) no-repeat;
    background-size: 90% 90%;
    background-position: center;
  }

  .layerBtn:hover{
    background: url(/layers_olDarkblue_white_bold.svg) no-repeat;
    background-position: center;
  /*  filter: brightness(90%);*/
  }

  .w-250{
    width:250px;
    text-align:center;
  }

  #new-nmea-div, #old-nmea-div {
    display:grid;
    grid-template-columns:10% 30% 30%;
    margin-left:20%;
    align-items: center;
    justify-items: center;
  }

  #new-nmea-div input, #old-nmea-div input{
    width:20px;
  }

  #new-nmea-div p, #old-nmea-div p{
    margin-block-start: 0px;
    margin-block-end: 0px;
  }

  .overview-table tbody .overview-tr:hover{
    cursor: pointer;
    transform: scale(1.015);
  }

  .config-grid div:hover {
    background: #eff0f1;
  }

  .config-grid div a:hover{
    cursor: pointer;
  }

  .dev-div {
      font-size:2.0em;
      font-weight: bold;
      padding:10px;
      white-space:pre-line;
      position: relative;
  }

  .linux-output-table {
      display:inline;
      margin-left: auto;
      margin-right: auto;
  }

  .linux-output-table-hidden {
      display:none;
  }


  #ContentwrapperNew {
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
    width: 75%;
    display: grid;
    border: 2px solid #676767;
  /*   box-shadow: 4px 4px 4px #676767; */
    margin: auto;
    margin-top: auto;
    margin-bottom: auto;
  /*  margin-top: 10px;*/
    margin-bottom: 10px;
    grid-template-columns: 50% 50%;
    max-width: 1000px;
    height: 50vh;
    max-height: 550px;
    overflow: auto;
  }

  #userDevsFlex {
    margin: auto;
    text-align: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    width: 500px;
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: auto auto auto;
  }

  .hidden-list{
    display:none;
  }

  .markerlist-item{
    background: #333333;
    color: white;
    border: 1px solid;
    min-width: 75px;
  }

  .markerlist-item:hover{
    background: #30a3b7;
  }

  .markerlist{
    list-style-type: none;
    z-index: 100;
  }

  .dev-flex {
    margin: auto;
    text-align: center;
    justify-content: center;
    padding: 10px;
    width: 500px;
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: auto auto auto;
  }

  .dev-flex-item {
    border: 1px solid black;
    width: 100px;
    text-align: center;
    background: #C0C0C0;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    flex: 1 0 27%;
    margin: 5px;
  /*  max-width: 27%;*/
  }

  .selected-dev-flex-item {
    border: 3px solid black;
    width: 100px;
    text-align: center;
    background: white;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    flex: 1 0 27%;
    align-content: center;
    margin: 4px;
  /*  max-width: 27%;*/
  }

  .dev-box {
    border: 1px solid black;
    width: 520px;
    margin: auto;
    padding: 10px 20px 20px 20px;
    position: absolute;
    right: 50px;
    top: 100px;
    background-color: #ededf0;
  }

  #fwWarning {
    width: 800px;
    margin: auto;
    font-weight: bold;
    padding: 10px;
  }

  /* .userdata-mobile{
      height: calc( 100vh - 320px );
  } */

  #inactiveWarning {
    color: black;
    font-weight: bold;
    width: 800px;
    margin: auto;
    padding: 5px;
  }

  .loader {
    border: 10px solid #f3f3f3; /* Light grey */
    border-top: 10px solid #3D2AE8; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    margin:auto;
  }

  #sendLoader.loader {
    border: 20px solid #f3f3f3; /* Light grey */
    border-top: 20px solid #3D2AE8; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
    position:absolute;
    left: calc(50% - 40px);
    top: calc(50% - 40px);
  }

  .alert-icon {
    background: url(/alert-circle.svg) no-repeat;
    background-position: inherit;
    border: none;
    background-size: 96% 98%;
    height: 1em;
    width: 1em;
    display: inline-block;
    translate: 1px 6px;
  }

  .alert-icon-yellow {
    background: url(/alert-circle-yellow.svg) no-repeat;
    background-position: inherit;
    border: none;
    background-size: 96% 98%;
    height: 1em;
    width: 1em;
    display: inline-block;
    translate: 1px 6px;
  }

  .alert-icon-red {
    background: url(/alert-circle-red.svg) no-repeat;
    background-position: inherit;
    border: none;
    background-size: 96% 98%;
    height: 1em;
    width: 1em;
    display: inline-block;
    translate: 1px 6px;
  }

  #measureMapLoader{
      top: 50%;
      position: absolute;
      left: 50%;
      translate: -50% -50%;
  }

  #measureTableLoader{
      margin:auto;
  }

  .overview-menu{
      display: flex;
      text-align: center;
      justify-content: center;
      flex-wrap: wrap;
  }

  .map-loader {
    border: 10px solid #f3f3f3; /* Light grey */
    border-top: 10px solid cornflowerblue; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    margin: auto;
  }

  .profile-loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3D2AE8; /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    margin:auto;
    margin-top:5px;
  }

  .sapos-loader {
    border: 10px solid #f3f3f3; /* Light grey */
    border-top: 10px solid #3D2AE8; /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
    margin:auto;
    margin-top:10px;
  }

  .search-loader {
    border: 10px solid #f3f3f3; /* Light grey */
    border-top: 10px solid #3D2AE8; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    margin:auto;
    margin-top:10px;
  }

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

  #device-overview th:hover {
      cursor:pointer;
  }

  #summary-table th {
      width:25%;
  }

  #head {
  background-color: #676767;
  font-size:1em;
  color:#fff;
  text-align:center;
  width:100%;
  }

  footer {
      text-align:center;
      background-color: #676767;
      color:white;
      padding: 10px 0px 10px 0px;
      width:100%;
      margin-top:30px;
      position: absolute;
      bottom: 0px;
  }


  .headline{
  padding-left: 0.1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-right: 0.2em;
  text-align:center;
  font-size:2.0em;
  font-weight: bold;
  display:inline-block;
  width:40%;
  color:white;
  min-height:60px;
  }

  .headline-mobile{
  padding-left: 0.1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-right: 0.2em;
  text-align:center;
  font-size:2.0em;
  font-weight: bold;
  display:inline-block;
  width:100%;
  color:white;
  min-height:60px;
  }

  #main{
      height:100%;
  }

  #mainHeadline{
    text-align:center;
    font-size:3.5em;
    font-weight: bold;
    display:inline-block;
    color:white;
    /* min-height:80px; */
    text-decoration: none;
    align-content: center;
    align-content: center;
    height: 100%;
  }

  #show-umd{
    display:none;
  }

  .show-umd{
    cursor:pointer;
    border: 1px solid;
    border-radius: 3px;
    padding: 5px 11px;
    background-color: #e0e0e0;
    display:none;
    margin-top: 1vh;
  }

  .btn-cancel, .btn-apply{
    border: 1px solid;
    border-radius: 3px;
    padding: 5px 11px;
    background-color: #e0e0e0;
    margin-left: 10px;
    color:black;
  }

  .btn-cancel:hover, .btn-apply:hover, .btn:hover, .default-btn:hover{
    border: 1px solid black;
    border-radius: 3px;
    padding: 5px 11px;
    background-color: #676767;
    margin-left: 10px;
    color:white;
    cursor:pointer;
  }

  .btn-apply:disabled, .btn-cancel:disabled, .btn:disabled{
      border: 1px solid #999999;
      border-radius: 3px;
      background-color: #cccccc;
      color: #666666;
  }

  .btn-apply:disabled:hover, .btn-cancel:disabled:hover{
      cursor:auto;
  }

  .btn:disabled:hover{
      cursor:auto;
  }

  #showlegendsdiv p{
    cursor:pointer;
    padding-top:5px;
    color: #00b3e1;
    align-content: center;
  }

  #showlegendsdiv:hover{  color: #00b3e1;}
  #showlegendsdiv:hover > .show-legends svg { cursor:pointer; }
  /*extend table  */
  #show-umd:checked ~ #showlegendsdiv { color: #00b3e1; }

  #userManagementHeadline{
  text-decoration: none;
  }

  #userManagementHeadline:visited{
  color: black;
  }

  .wrapper {
      min-height: calc(100% - 69px);
      width:100%;
      height:100%;
  }

  .wrapper-mobile {
      min-height: calc(100% - 1em - 20px);
      width:100%;
      height:100%;
  }


  html {
      height:100%;
      width:100%;
  }

  body
  {
      margin:0;
      padding:0;
      background-color: #ededf0;
      height: 100%;
      overflow: clip;
  }

  .reg-link
  {
    font-size:14px;
    color: black;

  }

  .reg-buttons button, .reg-buttons input{
      height:80%;
  }

  .reg-link:visited
  {
    color:black;
  }

  .data-table {
    margin-left: auto;
    margin-right: auto;
    border-collapse:separate;
    border-spacing:0 5px;
  /*  min-width:500px;*/
    max-width:800px;
    max-height: 400px;
    text-align:center;
  }

  #posTable.data-table {
      max-width:100%;
      max-height: 100%;
    }

  .data-table thead{
    display:block;
    /* max-width:1100px; */
  }

  .data-table tbody{
    display:block;
    /* max-width:1100px; */
    /* max-height: 400px; */
    overflow-y:auto;
    overflow-x:auto;
  }

  .data-table th
  {
    padding: 10px;
    border-right: solid 1px #ededf0;
    border-left: solid 1px #ededf0;
    background: #676767;
    color: white;
  }

  .data-table td
  {
      padding:10px;
      background-color: white;
      border-right: solid 1px #ededf0;
      border-left: solid 1px #ededf0;
      text-align: left;
      overflow-x: clip;
  }

  .overview-table
  {
    margin-left: auto;
    margin-right: auto;
    border-collapse:separate;
    border-spacing:0 5px;
    border-collapse: separate;
  }

  .overview-wrapper
  {
    overflow: auto;height: calc( 100vh - 240px );
  }

  .overview-table thead
  {
      display:block;
  }

  .overview-table tbody
  {
      display:block;
      overflow-y: auto;
      overflow-x: hidden;
      max-height: 50vh;
  }

  .overview-table td
  {
      padding:5px;
      background-color: white;
      border-right: solid 1px #ededf0;
      border-left: solid 1px #ededf0;
      text-align: center;
  }

  .overview-table th
  {
      padding:5px;
      border-right: solid 1px #ededf0;
      border-left: solid 1px #ededf0;
      background: #676767;
      color: white;
  }


  .config-table
  {
      width:35vw;
      margin-left:auto;margin-right:auto;
      border-collapse: separate;
      border-spacing: 1px 0;
  }

  /*#timer-table.config-table
  {
      width:60vw;
  }*/

  .timer-grid
  {
    display: grid;
    grid-template-columns: 60px auto;
    text-align: left;
    margin-left: 10px;
    margin-right: 10px;
    gap: 0px 5px;
  }

  .user-table
  {
    width:520px;
    margin-left:auto;
    margin-right:auto;
    border-collapse: separate;
    border-spacing: 0.1em 0.5em;
  }

  .user-input {
      width:100px;
  }

  .user-table td button
  {
      margin-left:auto;margin-right:auto;
  }

  .user-table th
  {
      background-color: #C0C0C0;
      font-size:1em;
  }


  .user-table tbody:before {
    line-height:0.3em;
    content:".";
    color:#ededf0;
    display:block;
  }

  #loadProfileDiv button
  {
      padding:3px;
      font-size:14px;
  }

  #loadProfileDiv select
  {
      padding:3px;
      font-size:14px;
      border: 1px solid black;
      border-radius: 3px;
      background-color: #e0e0e0;
  }


  .config-table th
  {
      font-size:1em;
      padding:10px;
      border-right: solid 1px #ededf0;
      border-left: solid 1px #ededf0;
      background: #676767;
      color: white;
  }

  .config-table tbody:before {
    line-height:0.5em;
    content:".";
    color:#ededf0;
    display:block;
  }

  .config-table th
  {
     width:33%;
  }

  .left-td
  {
      padding:5px;
      text-align:left;
  }

  .config-table .center-td
  {
      padding:5px;
      text-align:center;
  }

  .user-table .center-td
  {
      text-align:center;
  }

  .config-table .center-td input
  {
      text-align:center;
      width:70px;
  }

  .config-table table td
  {
      padding-left:0px;
      padding-right:0px;
      padding-top:5px;
      padding-bottom:5px;
      text-align:left;
  }

  .content-div-mobile
  {
      text-align: center;
  }

  .content-div
  {
      text-align: center;
      overflow: hidden;
  }

  .content-div.user-container
  {
      text-align: center;
      overflow: auto;
  }

  .menuheight{
    height: 30px;
    line-height: 30px;
  }

  .raw-checkbox{
      text-align: center;
  }
  /* RS for menu*/
  /*Strip the ul of padding and list styling*/
  ul.head {
    list-style-type:none;
    margin-top:2em;
    padding:0;
    display:inline;
    font-weight:bold;
    font-size:0.8em;
  }

  /*Create a horizontal list with spacing*/
  ul.head li {
    float: left;
    margin-right: 1px;
    text-transform: uppercase;
    border-right:1px solid #676767;
  }

  /*Style for menu links*/
  ul.head li a , .status, .ddMenu{
    display:block;
    padding:5px;
    text-align: left;
    color: #000;
    background-color:#C0C0C0;
    min-width:25px;
    text-decoration: none;
  }

  /*Hover state for top level links*/
  ul.head li a:hover {
    text-decoration:underline;
    background: #eff0f1;
  }

  ul.head li a:hover span{
    margin-top:20px;
  }

  ul.head li a.active {
    background: #eff0f1;
  }

  /*Hover state for dropdown links*/
  ul.head li:hover ul a:hover {
    text-decoration:underline;
    background: #e5e5e5;
  }

  /*Hide dropdown links until they are needed*/
  ul.head li ul {
    display: none;
  }

  /*Make dropdown links vertical*/
  ul.head li ul li {
    display: block;
    float: none;
  }

  /*Prevent text wrapping*/
  ul.head li ul li a {
    width: auto;
  }

  ul.head li ul.hidden li a{
    height: 20px;
    line-height: 20px;
    min-width: 20px;
    border:1px solid #676767;
  }

  ul#list li.active{
    color:#00b4e2;
    cursor:pointer;
  }

  /*#optionsLabel:hover{
    background:#C0C0C0;
  }*/

  #optionsLabel{
    display:block;
    font-weight:bold;
    padding-top:5px;
    cursor:pointer;
  /*   padding-left:0px; */
    font-size:1.2em;
  }

  #optionsInput{
    margin-top:1px;
    margin-bottom:5px;
    display:none;
    cursor:pointer;
  }

  #optionsList{
    list-style-type:none;
    margin: 0;
    padding: 0;
  }

  #optionsList li{
  /*   width:200px; */
    background: #676767;
    border: 1px solid black;
  }

  #optionsList li a
  {
    color:white;
    text-decoration:none;
    font-size:1em;
    width:100%;
    display:block;
    padding:5px;
  }

  #optionsList li:hover
  {
    background:#C0C0C0;
  }

  .user-btn{
      font: bold 12px Arial;
      text-decoration: none;
      background-color: white;
      color: #333333;
      padding: 3px 5px 3px 3px;
      border-top: 1px solid #CCCCCC;
      border-right: 1px solid #333333;
      border-bottom: 1px solid #333333;
      border-left: 1px solid #CCCCCC;
  }

  .reload-div{
      padding:10px;
      float:right;
      position:absolute;
      display: inline-block;
      white-space: pre-wrap;
      right:10px;
  }

  .logo-div{
    float:right;
    position:absolute;
    display: inline-block;
    right:10px;
    top:5px;
  }

  .logo-div-mobile{
    float: right;
  }

  .language-div{
      padding:10px;
      float:right;
      position:absolute;
      display: inline-block;
      white-space: pre-wrap;
      right:10px;
      top:45px;
  }

  .user-div-mobile{
      text-align:left;
      /* padding:10px; */
      float:left;
  /*     margin-right:20%; */
      /* white-space: pre-line; */
      left:10px;
      z-index: 10;
      top: 5px;
      width:20%;
      padding:5px;
  }

  .user-div{
      text-align:left;
      padding:10px;
      float:left;
      position:absolute;
  /*     margin-right:20%; */
/*       white-space: pre-line; */
      left:10px;
      z-index: 10;
  }

  .btn{
    border: 1px solid;
    border-radius: 3px;
    padding: 5px 11px;
    background-color: #e0e0e0;
    margin: 10px;
    cursor: pointer;
  }

  .btn-hidden{
      margin:10px;
      font-size:1.5em;
      padding:5px;
      display:none;
  }

  .btn-mobile{
      border: 1px solid;
      padding: 5px 11px;
      background-color: #e0e0e0;
      cursor: pointer;
      width: inherit;
    }

  .btn-hidden-mobile{
      margin:10px;
      font-size:1.5em;
      display:none;
  }

  .group-grid{
      display: inline-grid;
      grid-template-columns: auto auto auto;
      grid-gap: 12px;
  }

  .device-headline{
    color:black;
  }

  .device-headline:visited {
    color: black;
  }

  .device-headline:active {
    color: blue;
  }

  .regText{
    font-weight:bold;
    white-space: nowrap;
    text-align: left;
  }

  .regText-mobile{
    font-weight:bold;
    white-space: nowrap;
    text-align: left;
    width:50%;
  }

  .search-rec{
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
    width:125px;
    text-align: center;
  }

  .search-fu{
    padding:2px;
    margin-left:10px;
    margin-top:10px;
    margin-bottom:10px;
  }

  .regButton-mobile-left{
    font-size:40px;
    background: white;
    border: 1px solid grey;
    background:grey;
    border-radius: 39px 0px 0px 39px;
    display: table;
    text-align:center;
  }

  .regButton-mobile-left a{
    display: table-cell;
    vertical-align: middle;
    color:white;
  }

  .regButton-mobile-right{
    font-size:40px;
    background: white;
    border: 1px solid grey;
    background:grey;
    border-radius: 0px 39px 39px 0px;
    display: table;
    text-align:center;
  }

  .regButton-mobile-right a{
    display: table-cell;
    vertical-align: middle;
    color:white;
  }

  .th-status{
    width: 100px;
  }

  .th-fw{
    width: 160px;
  }

  .th-lastcall{
    width: 180px;
  }

  .th-sn{
    width: 146px;
  }

  .th-user{
    width: 146px;
  }

  .th-type{
    width: 70px;
  }

  .th-sr{
    width: 160px;
  }

  .th-rem{
    width: 210px;
    max-width: 210px;
  }

  .th-sd{
    width: 120px;
    max-width: 120px;
  }

  .dev-update{
    width:65px;
    display:none;
  }

  .th100{
    width: 100px;
  }

  .th200{
    width: 200px;
  }

  .th150{
    width: 150px;
  }

  .th170{
    width: 170px;
  }

  .sticky {
    position: sticky;
    top:0px;
    z-index:1;
  }

  .user-table-log{
    display:block;
    width:700px;
    max-height:400px;
    overflow-y:auto;
    margin-top: 30px;
  }

  .f100, .f100-1, .f100-2, .f100-3, .f100-4, .f100-5{
    min-width: 90px;
    max-width: 90px;
    padding:5px;
  }

  .sapos-server-select{
      width: 170px;
  }

  .dev-user{
    margin:auto;
    font-weight:bold;
    padding:5px;
    font-size:20px;
  }

  .user-dev-info{
    margin:auto;
  }

  .user-dev-info td, input{
    text-align:left;
  }

  .user-table-man{
    max-height:520px;
  }

  /* .user-table-man th{
    min-width:80px;
    max-width: 80px;
  } */

  .user-table-man-body{
    display:block;
    max-height:400px;
    overflow-y:auto;
  }

  .menu-link-box.mobile{
      background: rgb(194, 216, 232);
  }

  .menu-link-box.mobile.selected{
      background: #333399;
  }

  .registerTable {
    text-align:center;
    margin: auto;
    overflow: auto;
    height: 100%;
    display: block ruby;
    overflow-y: auto;
  }

  .registerTable tbody{
      width: 100%;
      display: inline-table;
  }

  /* @media all and (min-height: 800px) {
      .config-container {  display: grid;
          grid-template-rows: 0.4fr 0.6fr 0.6fr 3.3fr 3.4fr 0.5fr 0.5fr 0.4fr;
      }
      .config-header #mainHeadline{
          font-size: 5vh;
      }
  } */

  /* .measurement-table-wrapper-mobile #measurementSetup button, .measurement-table-wrapper-mobile #measurementSetup input,
  .measurement-table-wrapper-mobile #measurementSetup select, .measurement-table-wrapper-mobile #measurementSetup label{
    margin: auto;
  } */
  @media (orientation: landscape) {
    #floatleft {
      float:left;
    }

    #floatleft input{
      width:5em;
      float:left;
    }

    #mapLoaderDiv{
      border-right: 1px solid black;
    }

    #map{
      border-right: 1px solid black;
    }

    #floatleft p{
      width:4em;
      float:left;
    }

    .config-main-mobile { grid-area: 3 / 2 / 7 / 8; }

      .middle-grid{
        grid-template-columns: 100%;
        height:100%;
        height: 100%;
        display: flex;
        flex-wrap:wrap;
        grid-template-columns: 20% 80%;
        resize:no;
        flex-direction: column;
      }

      .regText-mobile{
        font-size: 2.2vh;
        margin-bottom: 1.2vh;
      }
      .reg-exist-mobile { grid-area: 4 / 1 / 6 / 8; }
      .reg-main-mobile { grid-area: 4 / 3 / 7 / 6; }
      .reg-menu-mobile { grid-area: 2 / 1 / 8 / 3; }
      .reg-disclaimer-mobile { grid-area: 2 / 3 / 3 / 6; }
      .reg-title-mobile { grid-area: 3 / 1 / 4 / 8; }
      .reg-exist-mobile { grid-area: 5 / 3 / 6 / 6; }

      .menu-link-box{
        position:relative;
        height:100%;
        width:100%;
      }

      .reg-main #termsGeoMichel, .reg-main #termsAlpos {
          width:160%;
          translate: -20% 0;
          overflow:auto;
      }

      .sapos-main{
          grid-template-columns: 50% 50%;
          min-height:350px;
          overflow-y: auto;
      }

      .sapos-main-mobile{
          grid-template-columns: 50% 50%;
          min-height:350px;
          overflow-y: auto;
      }

      .content-div-mobile {
        height: 100vh;
        width:100vw;
        display:grid;
        grid-template-columns: 34% 33%;
        grid-template-rows: 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    }

      .register-grid{
        display:grid;
        grid-template-columns: 100%;
        height:90%;
        width:90%;
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        grid-template-rows: 30% 70%;
      }

      .wrapper-mobile{
        min-height:100%;
        width:100%;
      }

      #firmware-update-table.data-table.main-table.mobile
    {
    width:90vw;
    }

      .reg-buttons-mobile{
          flex-direction: column;
      }
      #measurement-table.mobile-measure-grid{
          grid-template-rows: 5% 95%;
          grid-template-columns: 50% 50%;
          overflow: clip;
      }

      .mobile-measure-grid .data-table-container{
          grid-area: 1 /2 /3 /3;
          width: calc(100% - 1px);
          margin-left: auto;
      }

      .mobile-measure-grid #measureTableLoader
      {
          grid-area: 1 /2 /3 /3;
      }

      .data-table-container .data-table{
          max-height: 100%;
          /* display: contents; */
      }

      .data-table-container .data-table tbody{
          max-height: 100%;
      }

      .mobile-measure-grid .measurement-table-wrapper-mobile{
        display: grid;
        grid-template-rows: max-content auto;
        grid-template-columns: 100%;
        height: 100%;
        grid-area: 1/1/3/2;
      }
      .measurement-table-wrapper-mobile #measurementSetup, .measurement-table-wrapper #measurementSetup{
          width: calc(100% - 2px);
          height: auto;
      }
      .mobile-measure-grid #showlegendsdiv
      {
          display:none;
      }

      .measurement-table-wrapper-mobile #measureMap{
          width:calc(100% - 2px);
          height: 100%;
      }

      .menu-div-mobile{
        text-align: center;
        width: 100%;
        display: grid;
        margin: auto;
        grid-template-rows: 33% 34% 33%;
        /* grid-row-start: 2;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: 4;
        height:5vh; */
      }

      .menu-btn{
          z-Index:101;
      }

      .head-mobile{
        grid-row-start: 1;
        grid-row-end: 1;
        height:100%;
        grid-column-start: 1;
        grid-column-end: 4;
      }

      .sapos-access-div {
          order: 2
      }

      .sapostext-div {
          order: 2
      }

      .registerDiv-mobile{
        grid-row-start: 3;
        grid-row-end: 10;
        position:relative;
        grid-column-start:2;
        grid-column-end:2;
        padding-top:2vh;
        padding-bottom:2vh;
        width:100%;
        height: calc( 100% - 4vh );
      }

      .reg-buttons-mobile { grid-area: 2 / 6 / 8 / 8; }

      .slides-grid-parent{
        position:relative;
        display:flex;
        width:100%;
        height:100%;
        overflow:hidden;
      }

      .regInput-mobile input{
        padding:0px;
      }

      .regInput-mobile select{
        font-size:4vh;
        background: white;
        border: none;
        border-bottom: 1px solid #000000;
        margin-bottom:1vh;
        width:20vw;
      }

      .register-header{
        margin:auto;
        height:100%;
        width:100%;
        position:relative;
      }

      .slide-grid{
        grid-template-columns: 100%;
        text-align:center;
        background: white;
        grid-auto-rows: 7em;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        width:25vw;
  /*      border: 1px solid;
        border-radius: 20px;
        background: aliceblue;*/
        padding: 2vh;
        height: 80%;
        overflow:auto;
      }

      .h3-mobile{
        font-size:3vh;
        font-weight:bold;
        text-align:center;
      }

      .disclaimer-box
      {
        position:relative;
        width:100%;
        height:100%;
      }

      .disclaimer-center-box
      {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        width:50vw;
        border: 1px solid;
        border-radius: 20px;
        background: aliceblue;
        height:10vh;
      }

      .big-table-mobile #fpMapTable{
          display: grid;
          grid-template-columns: 50% 50%;
          grid-template-rows: 100%;
      }

      .config-grid-item{
        width: auto;
      }
  }

  .error-row:hover td {
      background-color:orangered;
  }

  .next-btn-mobile{
    /* border-radius: 5px; */
    font-size: 3vh;
  }

  .big-table-mobile #historyMap{
      display:none;
  }

  .big-table-mobile #leftMap{
      height:100%;
  }

  .big-table-mobile #rightMap{
      width: calc(100% - 3px);
  }

  .reg-button-flex button.next-btn, .reg-button-flex input.next-btn{
      border-radius: 5px;
      font-size: 20px;
      margin: auto;
      flex-grow:0;
      /* height:80% */
  }

  .reg-buttons input.next-btn, .reg-buttons button.next-btn{
      /* height:80% */
      width:200px;
  }



  .err-msg{
    font-weight:bold;
    color:red;
    padding-bottom: 5px;
  }

  .menu-link{
    color: rgb(51, 51, 153);
    font-size: 1.7vh;
    text-decoration: none;
    background: rgb(194, 216, 232);
    font-weight:normal;
    height:80%;
    padding: 0 1vw;
  }

  .menu-link.selected
  {
    color: white;
    font-weight: bold;
    background: #333399;
  }

  .terms
  {
  /*  max-width:50%;
    text-align:left;
    margin:auto;*/
    width:100%;
    text-align:left;
    margin: auto;
    height: 100%;
    display: block ruby;
  }

  .menu-link:visited{
    text-decoration:none;
  }

  .autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
  }

  .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
  }

  .autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
  }

  .autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
  }
  .autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
  }

  .btn.no-margin
  {
    margin:0px;
  }

  .default-btn {
    border: 1px solid;
    border-radius: 3px;
    padding: 5px 11px;
    background-color: #e0e0e0;
    margin: 10px 10px 0px 10px;
    cursor: pointer;
  }

  .hidden {
      visibility:hidden;
  }

  #fpMap {
    width: 100%;
    height: calc(100% - 2em);
    margin-left: 0px;
  }

  #fpMap:hover {
      cursor:pointer;
  }

  #fpMapTable .data-table {
    margin-left:0px;
    margin-right:0px;
    border-spacing: 0 0;
    text-align:center;
    table-layout:fixed;
    width: 100%;
  }

  #fpMapTable .data-table tr{
    width: 100%;
  }

  #fpMapTable .data-table td{
    text-align:center;
    padding: 10px;
    width: 100%;
  }

  #fpMapTable .data-table th{
    text-align:center;
    padding: 10px;
    width: 100%;
  }

  #fpMapTable .data-table tbody{
    overflow-y: auto;
    width: 100%;
    display: block;
    /* max-height: 460px; */
  }

  #posTable tbody{
    /* max-height: 600px; */
    border-spacing: 0 3px;
  }

  #historyTable tbody{
    /* max-height: 600px; */
    border-spacing: 0 3px;
  }

  #posTable button {
    margin-left: 4px;
    margin-right: 4px;
  }

  #posTable tbody tr:hover td {
    background:cornflowerblue;
    color:white;
  }

  #leftMap{
    border-width: 1px 0px 1px 0px;
    border-style: solid;
    border-color: black;
    color:white;
    background: #676767;
    order: 2;
    width: calc(100% - 2px);
  }

  #rightMap .data-table th, #rightMap .data-table td {
      border-left: solid 0px #ededf0;
  }

  #historyMap .data-table th, #historyMap .data-table td {
      border-right: solid 0px #ededf0;
  }

  #addPositionBtn{
      position: absolute;
      bottom: 10px;
      left: 10px;
      background: url(/plus-light.svg) no-repeat;
      background-color: rgba(0, 0, 0, 0);
      background-position-x: 0%;
      background-position-y: 0%;
      background-size: 90% 90%;
      background-position: center;
      height: 60px;
      width: 60px;
      border: none;
  }

  #addPositionBtn:hover{
      cursor:pointer;
      background: url(/plus-dark.svg) no-repeat;
      background-color: rgba(0, 0, 0, 0);
      background-position-x: 0%;
      background-position-y: 0%;
      background-size: 90% 90%;
      background-position: center;
  }

  #rightMap{
    margin-right:auto;
    border:1px solid black;
    order: 3;
    overflow-x:auto;
    position:relative;
  }

  #historyMap{
    margin-left:auto;
    border:1px solid black;
    order: 1;
    overflow-x:auto;
  }

  #fpInfo{
    width: auto;
    text-align: center;
    align-content: center;
    font-size:1.2em;
    margin-top: calc(30vh - 80px);
  }

  #fpLat, #fpLon{
    margin-top: 2px;
  }

  #sendConfigBtn, #exportCsvBtn, #updateFirmwareBtn, #cancelFirmwareUpdateBtn, #reset-btn, #exportKirchnerBtn, #exportFindPosCsvBtn{
    width:150px;
  }

  .config-buttons .btn-mobile{
      width: unset;
      flex-grow: 1;
      height: 5vh;
    }

  .edit-pos-btn{
    background:url(/edit.svg) no-repeat;
    background-size: 70% 70%;
    background-position: center;
  }

  .move-up-btn{
    background:url(/arrow-up.svg) no-repeat;
    background-size: 90% 90%;
    background-position: center;
  }

  .move-down-btn{
    background:url(/arrow-down.svg) no-repeat;
    background-size: 90% 90%;
    background-position: center;
  }

  .confirm-pos-btn{
    background:url(/check.svg) no-repeat;
    background-size: 90% 90%;
    background-position: center;
  }

  .delete-pos-btn{
    background:url(/delete.svg) no-repeat;
    background-size: 90% 90%;
    background-position: center;
  }


  .transfer-pos-btn{
    background:url(/arrow-right.svg) no-repeat;
    background-size: 90% 90%;
    background-position: center;
  }


  #posTable button, #historyTable button{
    width:25px;
    height:25px;
    cursor:pointer;
    border: none;
  }

  .config-grid-item {
    background-color: #C0C0C0;;
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 8px;
    font-size: 18px;
    text-align: center;
    width:195px;
    cursor:pointer;
  }

  .bit-grid {
    display: grid;
    grid-template-columns: 10% 90%;
    text-align: left;
    gap: 5px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .config-grid-item.selected {
    background-color: #eff0f1;
    border: 1px solid rgba(0, 0, 0, 0.8);
    font-size: 20px;
    text-align: center;
    width:195px;
    cursor:pointer;
  }

  .config-grid-item.disabled-grid-item{
    border: 1px solid #999999;
    background-color: #ccc;
    color: #666666;
    pointer-events: none;
  }

  .config-grid-item.no-service-grid-item{
    border: 1px solid #999999;
    background-color: #ccc;
    color: #666666;
    cursor:default;
  }

  .config-grid-item.no-service-grid-item:hover{
    border: 1px solid #999999;
    background-color: #ccc;
    color: #666666;
    cursor:default;
  }

  .admin-item.config-grid-item {
    color: #4287f5;
  }

  .admin-item.config-grid-item.selected {
    color: #4287f5;
  }

  #historyTable .data-table td{
    text-align: center;
    padding: 10px;
  }

  #historyTable .hovered-measurement td{
    background-color: red;
  }


  #historyTable tbody tr:hover td{
    background-color: red;
  }

  .coordTh{
    min-width:50px;
    max-width:50px;
  }

  .coordTh1{
    min-width:150px;
    max-width:150px;
  }

  .coordTh2{
    min-width:150px;
    max-width:150px;
  }

  .coordTh3{
    min-width:150px;
    max-width:150px;
  }

  .zss-button{
    margin-top:2em;
    border-radius: 3px;
    cursor:pointer;
  }

  .zss-button:hover{
    -webkit-filter: brightness(80%);
  }

  .range_container {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 35% auto;
  }

  .sliders_control {
    position: relative;
    min-height: 50px;
    text-align:left;
  }

  .form_control {
    position: relative;
    display: flex;
    justify-content: space-between;
    font-size: 24px;
    color: #635a5a;
  }

  input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
    pointer-events: all;
    width: 7px;
    height: 20px;
    background-color: #fff;
    border-radius: 20%;
    box-shadow: 0 0 0 1px #C6C6C6;
    cursor: pointer;
  }

  input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
    pointer-events: all;
    width: 7px;
    height: 20px;
    background-color: #fff;
    border-radius: 20%;
    box-shadow: 0 0 0 1px #C6C6C6;
    cursor: pointer;
  }

  input[type=range]::-webkit-slider-thumb:hover {
    background: #f7f7f7;
  }

  input[type=range]::-webkit-slider-thumb:active {
    box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
    -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
  }

  input[type="number"] {
    width: 50px;
    height: 30px;
    font-size: 16px;
    border: none;
  }

  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
     opacity: 1;
  }

  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    width: 100%;
    position: absolute;
    background-color: #C6C6C6;
    pointer-events: none;
  }

  #fromSlider {
    height: 0;
    z-index: 1;
  }

  .weekday-timer
  {
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  #table-div{
    overflow-y: auto;
    height: calc(100vh - 380px);
  }

  @keyframes movingUp {
    from {
      transform: none;
    }
    to {
      transform: translate3d(0, -50px, 0);
    }
  }

  @keyframes movingDown {
    from {
      transform: none;
    }
    to {
      transform: translate3d(0, 50px, 0);
    }
  }

  .moving-up{
    transform: translate(0px, -50px);
    animation-name: movingUp;
    animation-duration: 1s;
  }

  .moving-down{
    transform: translate(0px, 50px);
    animation-name: movingDown;
    animation-duration: 1s;
  }

  .user-div-logged-mobile{
    position: absolute;
    left: 3vw;
  }

  .options-list-mobile{
      position: absolute;
      top: 2.5em;
  }

  .reg-disclaimer {
    border:1px solid black;
    margin: auto;
    padding:5px;
  }

  #confirmUserBtn, #manageUserBtn {
      margin-left: 100px;
      font-size: 20px;
  }

  #resetSubBtn, #saveSubBtn {
    margin-left: 30px;
    margin-right: 30px;
    font-size: 16px;
    padding: 4px;
    margin-top: 10px;
    width: 150px;
  }

  #deleteUserBtn {
      margin-right: 100px;
      font-size: 20px;
  }

  .user-search-container input{
      margin:10px;
  }

  .w150{
      width:150px;
  }

  .reg-buttons-mobile button{
      width: 100%;
      height:100%;
  }

  @media (orientation: portrait) {
    .reg-disclaimer {
        border:1px solid black;
        max-width: 80%;
        margin: auto;
        padding:5px;
    }

    .firmware-menu{
      width: 96%;
      margin: auto;
    }

    .search-fu{
      max-width:45%;
    }

    .user-div-logged-mobile{
      display:none;
    }

    #fpMapTable{
      grid-template-columns: 100%;
      grid-template-rows: 50% 50%;
      width:100%;
    }

    #fpInfo{
      height:100%;
    }

    #head{
      font-size: 2vh;
    }
    .reg-exist-mobile { grid-area: 5 / 1 / 6 / 8; }
    .reg-title-mobile { grid-area: 4 / 1 / 5 / 8; }
    .reg-main-mobile { grid-area: 5 / 1 / 7 / 8; }
    .reg-menu-mobile { grid-area: 2 / 1 / 3 / 8; }
    .reg-disclaimer-mobile { grid-area: 3 / 1 / 4 / 8; }
   .reg-buttons-mobile { grid-area: 7 / 1 / 8 / 8; flex-direction: row;}
   .config-main-mobile { grid-area: 3 / 1 / 7 / 9; }

    #measurementSetup {
      display:grid;
      grid-template-columns: 20% 40% 20% 20%;
      grid-template-rows: 33% 34% 33%;;
      height: 6em;
    }

    .measurement-table-wrapper-mobile{
        width:100vw;
    }
  #firmware-update-table.data-table.main-table.mobile
  {
    width:100vw;
  }

  #measureMap{
      border: 1px solid #676767;
      width: calc(100% - 3px);
      height: calc(100% - 6em);
  }
    .mobile-start-label{
      order:1;
      align-self: center;
    }

    .mobile-end-label{
      order:5;
      align-self: center;
    }
    .mobile-start-input{
      order:2;
      align-self: center;
      max-width:100%;
    }
    .mobile-end-input{
      order:6;
      align-self: center;
      max-width:100%;
    }
    .mobile-type-label{
      order:3;
      align-self: center;
    }
    .mobile-type-select{
      order:4;
      width: 90%;
      align-self: center;
    }
    .mobile-hOffset-label{
        order:6;
        width: 90%;
        align-self: center;
      }
      .mobile-hOffset-input{
        order:7;
        width: 90%;
        align-self: center;
      }
    .mobile-show-btn{
      grid-area:3 / 2 / 3 / 4;
      height: 90%;
      width:90%;
      align-self: center;
      margin: auto;
    }
    #mapLoaderDiv{
      border-bottom: 1px solid black;
    }

    #map{
      border-top: 1px solid black;
    }

    #rightMap
      {
          order: 1;
          position: unset;
      }

      #addPositionBtn{
          left: 3%;
          top: 45%;
      }
      #leftMap {
          order: 2;
      }

      #posTable thead tr:first-child{
          display: none;
      }

      #ContentwrapperNew{
          height:100%
      }

      #map {
          order:2;
          width: 100%;
      }

      .sapos-access-div {
          order: 1
      }

      .sapostext-div {
          order: 1
      }

      .sapos-main{
          grid-template-rows: 50% 50%;
          /* min-height:600px; */
      }

      .sapos-main-mobile{
          grid-template-rows: 50% 50%;
          /* min-height:600px; */
      }

      .menu-div-mobile{
          display: flex;
      }

  }

  @media only screen and (max-width: 1300px) and (orientation: portrait){
      #posTable
      {
          max-width: 100vw;
          min-width: 100vw;
      }
      #rightMap
      {
          width: calc(100% - 2px);
      }

      #leftMap {
          width: calc(100% - 3px);
          height: 50%;
          border: 1px solid #676767;
      }

      .config-grid-mobile{
          width: 100%;
          z-index: 99;
          /* position: absolute; */
      }
  }

  @media only screen and (max-width: 1300px) and (orientation: landscape){
      /* #posTable
      {
          width: calc(50% - 2px);
      } */
      #rightMap
      {
          order: 3;
          width: calc(100% - 2px);
      }
      #leftMap {
          /* display:none; */
          order: 2;
          width: calc(100% - 2px);
          border-width: 1px;
      }

      #historyMap {
          display:none;
      }

      .config-grid-mobile{
          width: 100%;
          z-index: 99;
          position: absolute;
          top:50%;
          translate: 0 -50%;
      }

      #fpMapTable {
          display: grid;
          grid-template-columns: 50% 50%;
      }
  }

  /*@media (orientation: landscape) {
    .registerTable-mobile{
      width:95%;
      display:block;
      overflow: auto;
      height: calc( 100vh - 500px );
      overflow-x: clip;
    }
  }*/

  @media only screen and (max-width: 1300px){
    .reg-disclaimer {
      border:1px solid black;
      max-width: 90%;
      margin: auto;
      padding:5px;
    }

    #mainHeadline{
      font-size:2em;
    }

    /* .registerTable-mobile{
      width:95%;
      display:block;
      overflow: auto;
      height: calc( 100vh - 450px );
      overflow-x: clip;
    } */

    .regInput-mobile select{
      font-size:2vh;
    }

    #table-div{
      height: calc(100vh - 480px);
    }
  }

  @media all and (max-width: 1100px){

    #historyMap {
      order: 1;
      margin-left:0px;
      width: 49%;
      display:none;
    }

    /* #rightMap {
      order: 2;
      width: 99%;
      margin-right:0px;
      overflow-x:auto;
      max-height: 30vh;
    } */

    /* #leftMap {
      order: 3;
      width: 80%;
      border-width: 1px;
    } */

    #fpControls{
      height: 100%;
      overflow-y: auto;
    }

    #fpMapTable .data-table {
      table-layout:fixed;
      width: 100%;
    }

    #fpMapTable .data-table tr{
      padding: 10px 0px 10px 0px;
      width: 100%;
    }

    #fpMapTable .data-table th{
      padding: 10px 0px 10px 0px;
      width: 100%;
    }

    #fpMapTable .data-table td{
      padding: 10px 0px 10px 0px;
      width: 100%;
    }

    #fpMapTable .data-table tbody{
      overflow-x: unset;
      width: 100%;
      display: unset;
    }

    #historyMap {
      overflow-x:auto;
    }
  }

  @media all and (max-width: 900px) and (orientation: portrait){

    .smallselect{
      font-size:0.8em;
      width:100px;
    }

    .small{
      font-size:0.8em;
    }

    .touDiv{
      width:90%;
      height: calc(100vh - 550px);
    }

    .touDiv-title{
      width:90%;
    }

    .config-table{
      width:100%;
    }

    #saposFilter{
      width: 100%;
    }

    #map{
      width: 100%;
      margin: unset;
      min-width:unset;
    }

    .sapostext-div {
      width: 80%;
      text-align: center;
    }

    .sapos-access-div {
      width: 80%;
      text-align: center;
      margin-bottom: 2%;
    }

    #ContentwrapperNew{
      width:100%;
      display:block;
  /*     grid-template-columns: 100%; */
      max-height:unset;
      height:50vh;
    }

    .user-table-man{
      width:100%;
    }

    .user-table-man-body{
      max-height:100%;
    }

    .user-table-man-head{
      max-height:100%;
    }

    .user-dev-info td{
      font-size: 0.8em;
    }

    .user-dev-info input[type="checkbox"]{
      width:12px;
      height:12px;
    }

    .user-dev-info input{
      font-size:0.8em;
    }

    .dev-box{
      position:relative;
      top:0px;
      left:0;
      width:100%;
      margin:0;
      padding:0;
      background-color: #ededf0;
    }

    .f100-1, .f100-2{
      min-width: 25%;
      max-width: 25%;
      padding:5px;
    }

    .f100-3, .f100-4, .f100-5{
      min-width: 16%;
      max-width: 16%;
      padding:5px;
    }

    .user-table-man{
      max-height:100%;
    }

    .user-table-man th{
      font-size: 0.8em;
      padding:5px;
    }

    .user-table-man input{
      width:12px;
      height:12px;
    }

    .user-table td{
      font-size: 0.8em;
      width:50%;
    }

    .user-table th{
      font-size: 0.8em;
    }

    #userDevsFlex{
      width:100%;
    }

    .user-table{
      width:100%;
    }

    .th200{
      max-width: 100px;
      min-width: 100px;
    }

    .th100{
      min-width: 100px;
      max-width: 100px;
    }

    .th150{
      min-width: 60px;
      max-width: 60px;
    }

    .th170{
      min-width: 100px;
      max-width: 100px;
    }

    .btn-cancel{
      margin-left:0px;
    }

    .dev-div{
      font-size:1.5em;
    }

    #container-overview-table{
      overflow-x: auto;
    }

    .data-table-container,.log-table-container,.sentDataTable-container{
      overflow-x: auto;
    }

    .th-status{
      max-width: 30px;
      min-width: 30px;
    }

    .th-fw{
      max-width: 30px;
      min-width: 30px;
    }

    .th-lastcall{
      max-width: 70px;
      min-width: 70px;
    }

    .th-sn{
      max-width: 50px;
      min-width: 50px;
    }

    .th-user{
      max-width: 90px;
      min-width: 90px;
    }

    .th-type{
      max-width: 30px;
      min-width: 30px;
    }

    .th-sr{
      max-width: 50px;
      min-width: 50px;
    }

    .th-rem{
      max-width: 90px;
      min-width: 90px;
    }

    .th-sd{
      max-width: 70px;
      min-width: 70px;
    }

    .overview-table th{
      font-size: 0.6em;
    }

    .overview-table td{
      font-size: 0.6em;
    }

    #optionsList li a{
      font-size:1.5em;
    }

    #optionsLabel{
      font-size:1.7em;
      align-content: center;
    }

    #mainHeadline{
      font-size:2em;
    }

    .config-header-mobile #mainHeadline{
      font-size:2.5vh;
    }

    .user-div-logged{
      font-size:0.6em;
      position: absolute;
      left: 3vw;
    }

    .user-div {
      padding: 0px;
      margin-right: 0px;
    }

    .hideable{
      display:none;
    }

    .show-umd{
      display: block;
      width: 60px;
      margin-left: auto;
      margin-right: auto;
    }

    #showlegendsdiv{
      display:inline-block;
      align-content: center;
    }

    #showlegendsdiv p{ color: var(--second-color); }
    #show-legends:checked ~ #showlegendsdiv .show-legends svg { stroke: #00b3e1; }
    #show-legends:checked ~ #showlegendsdiv p{ color: #00b3e1; }

    #show-umd:checked ~ div .overview-table td.hideable {  display:table-cell; }
    #show-umd:checked ~ div .overview-table th.hideable {  display:table-cell; }
    #show-umd:checked ~ div .overview-table tr.hideable {  display:table-row; }

    #show-umd:checked ~ div .data-table td.hideable {  display:table-cell; }
    #show-umd:checked ~ div .data-table th.hideable {  display:table-cell; }
    #show-umd:checked ~ div .data-table tr.hideable {  display:table-row; }

    #floatleft {
      float:left;
    }

    #floatleft input{
      width:4em;
      float:left;
      margin-bottom:10px;
      margin-top:0;
      margin-right:3px;
      margin-left:0;
      z-index:100;
    }

    #floatleft p{
      width:4em;
      float:left;
      margin-bottom:10px;
    }

    #floatleft select{
      margin-bottom:10px;
      margin-left:3px;
    }

    #measureMap {
      border: 1px solid #676767;
      width: calc(100% - 3px);
    }

    #measurementSetup {
      width:100%;
    }

    input[name=regdate],input[name=supdate],input[name=remark]{
      margin-bottom: 2%;
      width:140px;
    }

    input[name=device]{
      margin-bottom: 2%;
      width:140px;
    }
    /* input[name=starttime],input[name=endtime]{
      margin-bottom: 2%;
    } */

    .logo{
      display: none;
    }

    .logo-media{
      display: inline-block;
    }

      .middle-grid{
        grid-template-columns: 100%;
        height:100%;
        height: 100%;
        display: flex;
        flex-wrap:wrap;
        grid-template-rows: 30% 70%;
        resize:no;
        flex-direction: row;
      }

      .menu-link-box{
        position:relative;
        height:100%;
        width:100%;
      }

      .wrapper-mobile{
        min-height:100%;
        width:100%;
      }

      .menu-div-mobile{
        text-align: center;
        width: 100%;
        /* display: grid; */
        margin: auto;
        grid-template-columns: 33% 34% 33%;
        grid-row-start: 2;
        grid-row-end: 2;
        /* height:5vh; */
      }


      .head-mobile{
        grid-row-start: 1;
        grid-row-end: 1;
        height:100%;
      }


      .registerDiv-mobile{
        grid-row-start: 3;
        grid-row-end: 10;
        position:relative;
        height:100%;
        width:100%;
      }

        .content-div-mobile {
        height: 100vh;
        width:100vw;
        display:grid;
        grid-template-rows:100vw;
        grid-template-rows: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    }

      .register-grid{
        display:grid;
        grid-template-columns: 100%;
        border:1px solid black;
        height:90%;
        width:90%;
        position:absolute;
        box-shadow: 5px 5px grey;
        left:50%;
        transform:translateX(-50%);
        background: white;
        grid-template-rows: 30% 70%;
      }

        .slides-grid-parent{
        position:relative;
        display:flex;
        overflow: auto;
        width:100%;
        height:100%;
      }

      .disclaimer-box
      {
        position:relative;
        width:100%;
        height:100%;
      }

      .regInput-mobile input{
        padding-right:2vw;
        width:35vw;
      }

      .regInput-mobile select{
        padding-right:2vw;
        width:35vw;
      }

      .regInput-mobile{
        text-align:left;
      }

      .registerTable-mobile{
          width:95%;
          display:block;
          overflow: auto;
          height: calc( 100vh - 500px );
          overflow-x: clip;
      }

      .terms-mobile{
        text-align: left;
        margin: auto;
        overflow: auto;
        display: block;
      }

      .register-header{
        margin:auto;
        height:20%;
      }

      .h3-mobile
      {
          font-size:2vh;
          font-weight:bold;
          text-align:center;
      }

      .menu-link-mobile{
        font-size:1.5vh;
        text-decoration:none;
        position: absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        background: rgb(194, 216, 232);
        color: rgb(51, 51, 153);
        font-weight: normal;
      }

      .disclaimer-center-box
      {
        width:80%;
        height:80%;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        border: 1px solid;
        border-radius: 20px;
        background: aliceblue;
        padding:1vh;
      }

      .slide-grid{
        grid-template-columns: 100%;
        text-align:center;
        background: white;
        grid-auto-rows: 7em;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        width:80%;
        border: 1px solid;
        border-radius: 20px;
        background: aliceblue;
        padding: 1vh;
      }

      .config-grid-item, .config-grid-item.selected {
        width: auto;
      }

      .config-grid {
        max-width: 95%;
      }

      #table-div{
        height: calc(100vh - 480px);
      }

      #optionsList {
        z-index: 99;
      }
  }

  .config-table#timer-table{
      width:1100px;
  }

  .config-grid-mobile .config-grid-item{
      font-size: 4vh;
      z-index: 99;
  }

  .user-table-man-head{
    display: block;
  }

  #table-div.mobile-table{
      height: calc(100vh - 1em - 200px);
  }

  /* #leftMap.mobile-map{
      width: 99%;
  } */

  .grid-opener {
    /* position: absolute; */
    width: 2.2em;
    height: 2.2em;
    right:20px;
    top:10px;
    background: url(/arrow-down-btn.svg) no-repeat;
    background-position: center;
    border:none;
    background-size: 100% 100%;
    cursor: pointer;
    margin-top: calc(5px + 0.1vh);
  }

  .menu-btn.mobile.grid-opener{
      background-size: 100% 100%;
  }

  #optionsList{
      position: absolute;
      z-index: 9999;
      text-align:left
  }

  #optionsList.options-list-mobile{
      text-align:center;
  }

  @keyframes menuMoveDown {
      from {
        transform: translate3d(0, -100%, 0);
      }
      to {
        transform: translate3d(0, 0, 0);
      }
  }

  .menu-move-down{
      z-index: 99;
      transform: translate(0px, 0px);
      animation-name: menuMoveDown;
      animation-duration: 0.5s;
  }

  @keyframes menuMoveUp {
      from {
        transform: translate3d(0, 0, 0);
      }
      to {
        transform: translate3d(0, -100%, 0);
      }
  }

  .menu-move-up{
      transform: translate(0px, 0px);
      animation-name: menuMoveUp;
      animation-duration: 0.5s;
      z-index: 99;
  }

  @keyframes rotate180 {
      100% { -moz-transform: rotate(180deg); }
  }

  .rotate{
      transform: rotate(180deg);
  }

  #ntrip_buttons{
    /* position: absolute; */
    /* bottom: calc(4em + 20px); */
    width: 100%;

  }
  /* @media all and (max-height: 799px){

      .config-header #mainHeadline{
          font-size: 5vh;
      }
  } */
  .config-container {  display: grid;
      display: grid;
      grid-auto-rows: 1fr;
      grid-template-rows: 0fr 0.7fr 0.7fr 3.5fr 3.6fr 0.6fr 0.6fr 0fr;
      grid-template-columns: 0.4fr 0.4fr 1.4fr 1.3fr 1.3fr 1.4fr 0.4fr 0.4fr;
      gap: 0px 0px;
      height: 100%;
      width: 100%;
  }
    .main-table { grid-area: 4 / 4 / 6 / 6; }
    .left-table { grid-area: 4 / 2 / 6 / 4; }
    .right-table { grid-area: 4 / 6 / 6 / 8; }
    .config-header { grid-area: 1 / 1 / 2 / 9; z-index: 100;align-content: center;}
    .device-name { grid-area: 2 / 3 / 3 / 7; font-size:2em; align-content: center;background-color: #ededf0; z-index: 101; font-weight: bold;}
    .menu-btn { grid-area: 2 / 7 / 3 / 8; align-content: center;}
    .config-tab-grid { grid-area: 3 / 1 / 4 / 9; }

    .config-tab-grid-mobile { grid-area: 3 / 1 / 7 / 9; z-index: 99;}
    .device-name.mobile{
      z-index: 0;
    }
    .mobile-top { grid-area: 3 / 1 / 5 / 9; }
    .mobile-bottom { grid-area: 5 / 1 / 7 / 9; }
    .title { grid-area: 1 / 4 / 2 / 6; }
    .free-ntrip { grid-area: 6 / 1 / 7 / 9; font-size: 2vh;}
    .config-buttons { grid-area: 7 / 1 / 8 / 9; font-size: 2vh;}
    .config-footer { grid-area: 3;
      background-color: #676767;
      color: #fff;
      text-align: center;
      font-size: 1em;
      align-content: center;
  }
  .footer { grid-area: 8 / 1 / 9 / 8;
      background-color: #676767;
      color: #fff;
      text-align: center;
      font-size: 1em;
      align-content: center;
  }
    .config-main { grid-area: 4 / 1 / 7 / 9; overflow: auto; }

    .config-main.expanded {grid-area: 3 / 1 / 7 / 9; overflow: auto;}

    .config-main-mobile { overflow: auto; }

    .big-table-mobile { grid-area: 3 / 2 / 7 / 8; }
    .main { grid-area: 1 / 1 / 8 / 9; }

    .config-main.ntrip { grid-area: 4 / 1 / 7 / 9; overflow: auto; }
    .config-main.ntrip.expanded { grid-area: 3 / 1 / 7 / 9; overflow: auto; }

    /* .config-main.ntrip { grid-area: 4 / 1 / 7 / 8; overflow: auto; } */

    .config-main-mobile.ntrip { grid-area: 4 / 1 / 7 / 8; overflow: auto; }

    .sapos-container {
      display: grid;
      grid-auto-rows: 1fr;
      grid-template-columns: 0.4fr 0.4fr 1.4fr 2.6fr 1.4fr 0.4fr 0.4fr;
      grid-template-rows: 0.9fr 0.6fr 0.6fr 2.9fr 3.2fr 0.5fr 0.5fr 0.5fr;
      gap: 0px 0px;
      height: 100%;
      width: 100%;
      overflow: auto;
    }
    .sapos-header { grid-area: 1 / 1 / 2 / 9; font-size: 2em; text-align: center; align-content: center;font-weight: bold;width: 100%;}

    .sapos-main { grid-area: 3 / 4 / 8 / 5; display: grid; border: 1px solid black; height:90%;}
    .sapos-main-mobile { grid-area: 3 / 1 / 9 / 8; display: grid;}

    .sapos-filter-mobile { grid-area: 2 / 1 / 3 / 8; }
    .sapos-filter { grid-area: 2 / 4 / 3 / 5; }

    .reg-container {
      display: grid;
      grid-auto-columns: 1fr;
      grid-auto-rows: 1fr;
      /* grid-template-columns: 0.4fr 0.4fr 1.8fr 1.8fr 1.8fr 0.4fr 0.4fr;  */
      grid-template-columns: 4% 4% 28% 28% 28% 4% 4%;
      grid-template-rows: 0.0fr 0.8fr 1fr 0.7fr 5.9fr 0.7fr 0.6fr 0.0fr;
      gap: 0px 0px;
      height: 100%;
      width: 100%;
      overflow: clip;
    }

    .header { grid-area: 1 / 1 / 2 / 8; }
    .footer { grid-area: 8 / 1 / 9 / 8; }
    .reset-link { grid-area: 6 / 1 / 7 / 8; }
    .reg-title { grid-area: 4 / 1 / 5 / 8; }
    .reg-exist { grid-area: 5 / 4 / 6 / 5; }
    .reg-menu { grid-area: 2 / 4 / 3 / 5; }
    .reg-main { grid-area: 5 / 4 / 7 / 5; }
    .reg-disclaimer { grid-area: 3 / 4 / 4 / 5; }
    .reg-exist-mobile { grid-area: 5 / 1 / 6 / 8; }
    .reg-main-mobile { overflow-y: auto; }
    .reg-buttons { grid-area: 7 / 4 / 8 / 4; }

    .reg-exist, .reg-exist-mobile { overflow:auto }

    .reg-title, .reg-title-mobile{
      text-align:center;
      align-content: center;
      font-weight: bold;
      font-size: 1.5em;
      }

  .reset-link {text-align: center;z-Index:10}

    .reg-main div{
      height: 100%;
      width:100%
  }

  .reg-disclaimer-mobile{
      align-content:center;
  }

  .reg-main-mobile div{
      height:100%
  }

    .reg-button-flex{
      display:flex;
      width:100%;
      height:100%;
    }

    .reg-button-flex button{
      flex-grow:1;
      font-size: 1em;
    }

    .reg-button-flex input{
      height:100%;
      flex-grow:1;
      font-size: 1em;
      text-align:center;
      text-wrap: wrap;
    }

    #menuDiv{
      width: 100%;
      height: 100%;
      align-content: center;
    }

    #menuDiv.reg-menu{
      display:flex;
    }

    .reg-menu a{
      align-content: center;
      display: inline-block;
      height:80%;
    }


    #menuDiv a{
      flex-grow: 1;
      text-align: center;
      margin:auto;
      width:100%;
    }

    #menuDiv text{
      margin:auto;
      font-size: 50%;
    }

    .menu-pipe{
      align-content: center;
      margin: .5vw;
    }

    #registerTable{
      margin: auto;
      height:100%
    }

    .reg-disclaimer-mobile p{
      /* height: 100%; */
      text-align: center;
      align-content: center;
      font-size:0.8em;
    }

    .menu-link-mobile {
      font-size: 1em;
      text-decoration: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: rgb(194, 216, 232);
      color: rgb(51, 51, 153);
      font-weight: normal;
    }

    .menu-link-mobile.selected {
      background: #333399;
      color: white;
      font-weight: bold;
    }

    #fpControls {
      height:100%;
    }

    #mapInputs{
      height: 2em;
      display:flex;
      width:100%;
    }

    #mapInputs label, #mapInputs input, #mapInputs select{
      flex-shrink:1;
      max-width:19%;
      align-self: center;
      margin-left: auto;
      margin-right: auto;
    }

    #downloadPolylineBtn.btn-mobile{
      font-size:2vh;
      margin-top: unset;
      width:150px;
    }

    .measurement-table-wrapper{
      width:50%;
      margin-left:auto;
      margin-right:auto;
    }

    .measurement-table-wrapper #measureMap{
      width:calc(100% - 2px);
      height: calc(100% - 4px);
      margin-left:auto;
      margin-right:auto;
      height: calc(100% - 2em - 4px);
    }

    .measurement-table-wrapper #measurementSetup{
      height:2em;
    }

    .data-table-container{
      margin-left:auto;
      margin-right:auto;
      overflow: auto;
      max-height: 100%;
    }

    #measurementSetup label, #measurementSetup input{
      align-self:center;
      flex-shrink: 1;
      height: auto;
    }

    .measurement-table-wrapper label:first-child{
      margin-left: auto;
    }

    .measurement-table-wrapper button:last-child{
      margin-right: auto;
    }

  #main{
      display:grid;
      height:100%;
      width:100%;
      grid-template-columns: 100%;
  }

  .config-footer span{
      margin-top: 15px;
      display: block;
      translate: 0 -50%;
  }

  .footer span{
      margin-top: 20px;
      display: block;
      translate: 0 -50%;
  }

  @media all and (max-height:900px){
      #main{
          grid-template-rows: 60px calc(100% - 90px) 30px;
      }
      .logo-div-mobile img{
          max-height: 40px;
      }
      #optionsList{
          top: 60px;
      }

      #mainHeadline{
          font-size:3em;
      }

      .logo-div{
          float: right;
          position: absolute;
          display: inline-block;
          right: 3px;
          top: 2px;
          height: 56px;
          background: url(/alberding_mit_Logo_white_bg.png) no-repeat;
          width: 245px;
          /* background-size: 99%; */
      }
  }

  @media all and (min-width:1000px)
  {
      .logo-div{
          background: url(/alberding_mit_Logo_white_bg.png) no-repeat;
          background-size: 98%;
          /* background-size: 67%; */
      }
  }

  @media all and (max-width:999px)
  {
      .logo-div{
          width: 20%;
          background: url(/logo1.png) no-repeat;
          background-size: auto 90%;
          background-position: right;
          translate: -2px 0px;
      }

      .user-div-logged{
          display:none;
      }
  }

  @media all and (min-height:901px){
      #main{
          grid-template-rows: 80px calc(100% - 110px) 30px;
      }
      .logo-div-mobile img{
          max-height: 60px;
      }
      #optionsList{
          top: 80px;
      }

      .logo-div{
          float: right;
          position: absolute;
          display: inline-block;
          right: 3px;
          top: 3px;
          height: 74px;
          width: 320px;
          /* background-size: 99%; */
      }
  }

  .config-header.mobile{
      display: grid;
      align-content: center;
      text-align: center;
      justify-content: space-between;
      grid-template-columns: 10% 80% 10%
  }

  #menuDiv span{
      display: block;
  }

  .logo-div-mobile{
    width:20%;
    background: url(/logo1.png) no-repeat;
      background-position-x: 0%;
      background-position-y: 0%;
      background-size: auto;
    background-size: auto 90%;
    background-position: right;
    translate: -2px 0px;

  }

  .config-header-mobile{
      display:flex;
      width:100%;
  }

  .config-header-mobile #headline{
      width:60%;
  }

  .logo-div-mobile img{
      float:right;
      padding: 5px;
  }

  .data-table td.download-td{
    min-width: 100px;
    max-width: 100px;
    text-align: center;
  }

  .download-btn{
    background: url(/download-btn.svg) no-repeat;
    background-size: auto 100%;
    height: 15px;
    width: 15px;
    cursor: pointer;
    border: none;
    margin-left: 5px;
    margin-right: 5px;
  }

  .su-change-table
  {
    margin: auto;
    text-align: left;
  }

  #changeSuPassword, #changeSuRemark
  {
    width:100px;
  }

#endMessageDiv{
    grid-area: 5 / 4 / 6 / 5;
}

#resetDiv{
    text-align: center;
}

#log-table td{
    white-space: break-spaces;
}

.pattern-error {
    background-color: lightpink;
}