.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #EFEFEF;
  min-height: 500px;
  color: black;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 1.2rem 1.4rem 1.6rem;
  text-decoration: none;
  font-size: 10pt;
  display: block;
}

.topnav button {
  color: white;
  padding: .4rem;
  height:2.7rem;
  text-align: left;
  text-decoration: none;
  font-size: 12pt;
  width:97%;
  margin:0 .5rem;
  display: block;
}

.topnav a.icon {
  font-size: 20pt;
  background: var(--gelb);
  color: white;
  display: block;
  height:4rem;
  width:4rem;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a.icon:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: rgb(80,45,85);
  color: white;
}

.abs {position:absolute;}
.akkti {font-family: var(--ssp);font-weight:700;line-height:20px;padding:17px 10px;background:white;float:left;margin:3px -2px 3px 0;}
.beh {margin-left:-0.3em;margin-right:-0.3em;} 
.blk {display:block;}
.clr {clear:both;}
.eingabe {border:double 8px darkred;padding:1em;line-height:7mm;max-width:150mm;float:left;}
.lsg {border:double 8px darkgreen;padding:1em;max-width:96mm;float:left;}
.ergn {margin-left:19mm;margin-top:6mm;background:gold;opacity:0.5;font-size:10pt;line-height:10pt;}
.ergn tr {height:44.5mm;}
.fll {float:left;}
.flr {float:right;margin-left:0mm;}
.h48 {min-height:28px;font-size:24px;padding:14px;}
.icon {margin:-0.1rem 0.1rem;width:auto;height:1.8rem;float:left;filter: invert(100%);  -webkit-filter:invert(100%); }
.inl {display:inline-block;}
.inst1 {background:#aaf;color:#333;}
.inst2 {background:#afa;color:#333;}
.korp {width:96mm;float:left;}
.korp h1 {margin:0.2em;border:0;}
.leg {padding:2px;display:inline-block;}
.lgnd {vertical-align:middle;}
.links {text-align:left;}
.lsn {font-size:120%;border:0px;background:transparent;}
.marg4 {margin:4px;}
.marg5 {min-width:30mm;margin-right:5mm;}
.margli {margin-left:1em;}
.margre {margin-right:1em;}
.plan tr td { border-bottom:solid #999 1em; }
.min {display:inline-block;min-width:400px;}

#nav button {text-align:left;width:100%; }
#Xnav h3 {color: #fff;border-top:2px solid silver;}


.navb {
  color: white;
  padding: .4rem;
  height:2.7rem;
  text-align: left;
  text-decoration: none;
  font-size: 12pt;
  width:93%;
  margin:0 .5rem;
  display: block;
  background:var(--dblau);
  clear:both;
}

button.navb:hover {background:var(--dgrau);cursor:pointer;opacity:0.7;}

.abut:hover {background:var(--hgr);cursor:pointer;opacity:1;}

h3.navsel {background:var(--blau);}
.navsel {background:var(--rot);color:white;text-align:left;width:97%;padding: .4rem;}

.navi {float:left;}
.navi li {text-align:left;width:100%; }

.op {margin:0px;padding:0px;}
.opa50 {opacity:0.5;}
.or {border:solid 1px transparent;}
button.or {border:solid 1px transparent;}
.op50:hover {opacity:1;}

.pad03 {min-width:3em;text-align:center;padding:1px;display:inline-block;margin:0 1em 0 0;}
.pd01 {font-size:80%;padding: 0.1em;line-height:7px;font-weight:300;}

.qua {min-width:54px;}
.qua40 {min-width:36px;}
.quart {margin-left:-0.6em;}
.quor {border:solid transparent 0px;width:28px;}

.rand {border-style:solid;}
table.raster td, table.raster th {border-bottom:solid 1px #444;font-size:9pt;}
table.raster a {text-decoration:none;}
table.raster2 td, table.raster2 th {border:solid 1px #aaa;}
.rel {position:relative;}

.schmalzent {width:32px;text-align:center;opacity:0.7;}
.schmalbut {width:34px;line-height:28px;height:28px;text-align:center;opacity:1;margin:-2px 0 0;padding:0;background:var(--grn);color:white;}
.sext {margin-left:0em;} 
.smart {max-width:768px;}
.smart2 {max-width:480px;}

.tblt {max-width:694px;}
.t1, .t2, .t3 { font-family: var(--ssp);font-weight:700;}
.t2 {font-size:110%;}
.t4 {font-family: var(--ssp);font-weight:500;}
.ti {font-size:110%;}
.ti80 {font-size:80%;line-height:1em;text-align:center;border-width:1px 0 0;}
.tib {background:var(--dgrau);float:left;}
.tst25 {width:21.5mm;padding:0.2em 0;} 
.tst29 {width:21.5mm;letter-spacing:0.8;font-size:1.1em;line-height:1em;padding:.5rem 0;} 
.tti {font-size:120%;font-weight:bold;}
.tts {min-width:24px;padding-right:2px;border-right:solid 4px var(--dblau);}

.unt {vertical-align:bottom;}
.utag, .item {margin:0.5em 0.2em; background:var(--hgrau); padding:0.2em;width:96mm;height:96mm;overflow:auto;float:left;}
.utag button {opacity:0.7;border-width:1px;}
.utag h3 {margin:0;padding:0.2em;}
.utag h4 {border-bottom-width:0px;}
.utag b {font-weight:700;font-family:var(--sfp);font-size:90%;}
.utag table {width:100%;}
.utag table td, .utag table th {padding:2px;vertical-align:top;}
.utag table td {text-align:left;}
.utag table th {text-align:right;}
.utag ul {margin:0px;}
.utag ul {padding-left:-1em;}

.w13 {width:5.5em;}
.w03 {width:3em;text-align:center;}
.w02 {width:1.4em;text-align:center;border:0;}
.w025 {width:2em;text-align:center;border:0;background:var(--hgrau);}
.w20 {width:20%;}
.w72 {width:72px;text-align:left;}
.w101 {width:121px;text-align:left;}
.w153 {width:153px;text-align:center;}
.w120 {width:220px;text-align:left;}
.w80 {width:80%;}
.w88 {width:100%;}
.w96 {width:96mm;}
.w96 h3 {margin:0.2em 0 0;}
.w99 {width:15.7mm;text-align:center;padding:0px;vertical-align:bottom;}
.w121 {width:121mm;}
.warnung {font-size:120%;text-align:left;background:var(--rrt);color:white;display:block;min-width:50mm;max-width:120mm;padding:4px;border:double 6px silver;clear:both;}
.zent {text-align:center;}

.dblau {
	background: var(--dblau);
	color: var(--hgrau);
}
.aus {background:var(--dblau);color:white;}
.dgr {background:#bbb;}
.wt {background:var(--gra);}
.dgra {background:var(--dgrau);}
.dur {color:var(--hgrau);background:var(--violett);}
.so, .glb {background:var(--glb);}
.gra {background:var(--gra);}
.grn {background:var(--grn);color:white;}
.gw {background:var(--blau);color:white;}
.hgr {background:var(--hgrau);}
.ja {background:var(--gruen);color:white;}
.sa, .moll {background:var(--gelb);color:white;}
.nein {background:var(--violett);color:white;}
.rrt {background:var(--rrt);color:white;}
.sf, .uf, .viol {background:var(--rot);color:white;}
.sf, .uf {background:var(--dgrau);color:white;}
.ft {background:#ffb;}

.EXT {background:var(--dgrau);color:white;}
.ANW {background:var(--violett);}
.DOK {background:var(--grn);color:white;}
.THE, .MAT {background:var(--gelb);color:black;}
.HUE, .HAU {background:var(--rot);color:white;}
.DAT {font-size:200%;}
.KOM {font-size:150%;padding:0.2em;margn.right:0.5em;}
.KOM, .kmn {background:#e66;color:black;margin:0 0.2em;opacity:0.7;}
//.ft, .sf, .uf {font-size:8pt;}

.palette {border-collapse:collapse;border:solid white 8px;background:white;border-left-width:0px;}
.palette td {padding:0;border-width:0;}

.tontaste {min-height:2.5em;width:3.5em;background:rgba(255, 255, 255, 0.7);background-image: url("../img/Ganze.png");background-repeat:no-repeat;background-size:auto 10mm;background-position:0px 0px;opacity:0.5;}

.tontaste:hover {opacity:1;}

.tongw {background:var(--gw);min-height:2.5em;width:3.5em;background-image: url("../img/Ganze.png");background-repeat:no-repeat;background-size:auto 10mm;background-position:0px 0px;opacity:0.5;}

.inha button {margin:0px;min-height:56px;font-size:18px;line-height:18px;color:var(—hgrau);float:left;}

div.bea {display:inline-block;background:var(--dgrau); color:var(--bgr);padding:4em;}
div.hover:hover {background:#efefef;cursor:pointer;opacity:0.7;}
div.panel {border:solid 3mm white;}
div.takt {display:inline-block; margin:8px;position:relative;}
div.tkt {margin-right:5mm;border-right:solid 3mm white;border-bottom:solid white 5mm;}

h1.ou {border-width:0px;}

div.whlfeld {position:absolute;text-align:center;width:30px;background:#efefef;border-radius:4px;display:block;}
.whlfeld:hover {background:rgb(204, 153, 153);opacity:0.3;}

img.tongew {background:var(--rot);border-radius:4px;opacity:0.5;}
img.tonhover {background:var(--dgrau);border-radius:4px;opacity:0.2;}
img.tonhover:hover, img.tongew:hover  {cursor:pointer;opacity:1;}

.btnhover {border:outset silver 2px;}
.btnhover:hover {cursor:pointer;opacity:0.5;}

table.lsg {background:var(--bgr); color:var(--dgrau);}
table.ptn {border-collapse:collapse; margin-right:0.5em;}
table.ptn td {border:solid 1px black;}

td.bild {position:relative;width:110px;}
td.lsg {width:3em;border-right:solid 2px var(--dblau);}
td.tslsg {width:3em;border-right:solid 4px var(--dblau);}

	
#myProgress {
  width: 100%;
  background-color: #ddd;
//  display:block;
}

#myBar {
  width: 1%;
  height: 3em;
  background:var(--blau);;
}