:root {
  --col-btnb:    #1c4668;
  --col-btnb:    #4289a9;
  --col-btnt:    white;
  --col-btnd:    #f6f6f6;
  --col-btnh:    #1c4668;
  --col-main:    #222222;
  --col-line:    #cdccc9;
  --col-bgr:     #fefcf7;
  --col-lbl:     #969696;
  --col-red:     #c20b1b;
  --col-blue:    #1c4668;
  --col-dark:    #002948;
  --col-medium:  #4289a9;
  --col-light:   #7ba7b9;
  --col-lighter: #a5ccdc;
  --col-li:      #f6f6f6;
  --col-switch:  #1ea1af;
}

@font-face { font-family: franklin-gothic-urw; src: url("https://use.typekit.net/af/9cb78a/0000000000000000000118ad/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/9cb78a/0000000000000000000118ad/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/9cb78a/0000000000000000000118ad/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; }

@font-face { font-family: franklin-gothic-urw; src: url("https://use.typekit.net/af/2e6f07/000000000000000000011ce6/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/2e6f07/000000000000000000011ce6/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/2e6f07/000000000000000000011ce6/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n5&v=3") format("opentype"); font-style: normal; font-weight: 500; font-display: swap; }

@font-face { font-family: franklin-gothic-urw; src: url("https://use.typekit.net/af/b825af/0000000000000000000118b1/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/b825af/0000000000000000000118b1/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/b825af/0000000000000000000118b1/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("opentype"); font-style: normal; font-weight: 700; font-display: swap; }

@font-face { font-family: franklin-gothic-urw; src: url("https://use.typekit.net/af/c7b613/0000000000000000000118b3/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n9&v=3") format("woff2"), url("https://use.typekit.net/af/c7b613/0000000000000000000118b3/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n9&v=3") format("woff"), url("https://use.typekit.net/af/c7b613/0000000000000000000118b3/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n9&v=3") format("opentype"); font-style: normal; font-weight: 900; font-display: swap; }

@font-face { font-family: franklin-gothic-urw-cond; src: url("https://use.typekit.net/af/bb00d4/00000000000000003b9b2244/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/bb00d4/00000000000000003b9b2244/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/bb00d4/00000000000000003b9b2244/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; }

@font-face { font-family: franklin-gothic-urw-cond; src: url("https://use.typekit.net/af/a2031c/0000000000000000000118b9/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/a2031c/0000000000000000000118b9/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/a2031c/0000000000000000000118b9/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("opentype"); font-style: normal; font-weight: 700; font-display: swap; }


body {
  display:              flex;
  min-height:           100vh;
  margin:               0 auto;
  flex-direction:       column;  
  font-family:          'franklin-gothic-urw-cond', 'Helvetica', 'Arial', sans-serif;
  font-weight:          400;
  font-size:            14px;
  background-color:     #f2f2f2;
}

header {
  position:             fixed;
  z-index:              10;
  height:               35px;
  width:                360px;
  background-color:     white;
}
.header-text {
  position:             relative;
  float:                left;
  width:                calc(360px - 125px - 20px);
  width:                calc(60% - 20px);
  height:               calc(100% - 10px);
  padding:              5px 10px;
  font-family:          'franklin-gothic-urw-cond', 'Helvetica', 'Arial', sans-serif;
  font-weight:          600;
  font-size:            20px;
  font-variant:         small-caps;
  //background-color:     lightgreen;
}
.header-logo {
  position:             relative;
  float:                left;
  width:                calc(125px - 20px);
  width:                calc(40% - 20px);
  height:               calc(100% - 10px);
  padding:              5px 10px;
  text-align:           right;
  //background-color:     lightblue;
}
.header-logo img {
  margin-top:           5px;
  width:                125px;
}
.header-line {
  position:             relative;
  float:                left;
  width:                100%;
  height:               10px;
  background:           linear-gradient(to right, #4289a9 0%, #1c4668 100%);
}



main {
	min-height:           5em;
	flex:                 1;
}

footer {
  position:             fixed;
  top:                  calc(100vh - 200px);
  background-color:     white;
  border:               0px;
  margin:               0px;
  padding:              0px;
  width:                100%;
  max-width:            360px;
  height:               200px;
  z-index:              10;
}

.container {
  position:             relative;
  float:                left;
  display:              flex;
  flex-wrap:            wrap;
  align-items:          center;
  justify-content:      center;
  width:                100%;
  height:               auto;
  margin-right:         auto;
  margin-left:          auto;
}

a {
  color:                #5b5b5b;
  text-decoration:      none;
}
a:hover {
  color:                #008ac9;
  text-decoration:      none;
}


input, select, textarea {
  display:              block;
  width:                100%;
  height:               32px;
  padding:              3px;
  font-family:          'franklin-gothic-urw-cond', 'Helvetica', 'Arial', sans-serif;
  font-size:            14px;
  font-weight:          400;
  line-height:          1.3;
  color:                #5b5b5b;
  background-color:     #fff;
  background-clip:      padding-box;
  border:               1px solid #ced4da;
  border-radius:        .25rem;
  transition:           border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

input.liste, select.liste {
  height:               auto;
  padding:              1px;
  line-height:          1;
}

input.chk-liste {
  width:                20px;
  height:               20px;
}

textarea {
  height:               auto;
  resize:               none;
}

input.eurolabel, input.sum, input.sum-label, input.readonly {
  color:                var(--col-lbl);
  background-color:     transparent;
  border:               0px;
  border-radius:        0px;
  padding-left:         0px;
  padding-right:        0px;
  text-align:           right;
  transition:           none;
}

input.sum, input.readonly {
  text-align:           left;
  color:                white;
}
input.sum-label {
  text-align:           right;
  color:                white;
}



.ce {text-align: center;}
.li {text-align: left;}
.re {text-align: right;}

.bold {font-weight: bold}
.bolder {font-weight: bolder}
.lighter {font-weight: lighter}


.index-frm, .edit-frm {
  position:             relative;
  float:                left;
  display:              flex;
  flex-wrap:            wrap;
  justify-content:      center;
  padding:              0px;
  width:                100%;
  height:               100%;
  max-width:            360px;
  background-color:     white;
  min-height:           100vh;
}

.index-btn {
  position:             relative;
  float:                left;
  padding:              10px;
  width:                100%;
  height:               40px;
  background-color:     mistyrose;
}


ul {
  position:             relative;
  float:                left;
  list-style:           none;
  width:                100%;
  margin:               0px;
  padding:              0px;
}

li {
  position:             relative;
  float:                left;
  width:                calc(100% - 30px);
  height:               auto;
  margin:               10px;
  padding:              5px;
  background-color:     var(--col-li);
  border-radius:        10px;
}
li.ix {
  width:                calc(50% - 30px);
}
li.ix-closed {
  width:                calc(50% - 30px);
  background-color:     #e0e0e0;
  background-image:     url("../pics/finished_dis.svg");
  background-repeat:    no-repeat;
	background-position:  center center;
  background-size:      80% auto;
}
li.ix-lager {
  width:                calc(50% - 30px);
  background-color:     #F7FFAA;
  background-image:     url("../pics/lager_dis.svg");
  background-repeat:    no-repeat;
	background-position:  center center;
  background-size:      80% auto;
}
li.ix-delivered {
  width:                calc(50% - 30px);
  background-color:     #f0fff0;
  background-image:     url("../pics/delivered_gn.svg");
  background-repeat:    no-repeat;
	background-position:  center center;
  background-size:      80% auto;
}
/*Farben für die Bestelliste*/
li.ix-yellow, li.ix-orange, li.ix-green, li.ix-red, li.ix-grey {
  width:                calc(50% - 30px);
  background-repeat:    no-repeat;
	background-position:  center center;
  background-size:      80% auto;
}
li.ix-green  {background-color: #f0fff0;}
li.ix-yellow {background-color: #FFFCCE;}
li.ix-orange {background-color: #FFE0A2;}
li.ix-red    {background-color: #fff0f0;}
li.ix-grey   {background-color: #e0e0e0;}


li.items {
  font-size:            0.875rem;
  font-weight:          400;
  //line-height:          0.5rem;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}
li.edit {
  margin:               5px 10px;
}
li.calculate, li.pruefung {
  margin:               5px 10px;
  background-color:     var(--col-lbl);
}
li.event {
  position:             relative;
  float:                left;
  width:                calc(50% - 20px);
  height:               auto;
  margin:               10px;
  padding:              0px;
  background-color:     var(--col-li);
  border-radius:        10px;
  aspect-ratio:         1/1;
  box-shadow:           0px 3px 6px 0px rgba(0,0,0,0.2);
}

li.ix img, li.ix-delivered img, li.ix-lager img, li.ix-failed img, li.ix-closed img, li.ix-billed img {
  height:               12px;
}

li.ix img.flock-bild, li.ix-delivered img.flock-bild, li.ix-lager img.flock-bild, li.ix-failed img.flock-bild, li.ix-closed img.flock-bild, li.ix-billed img.flock-bild {
  width:                auto;
  height:               50px;
  cursor:               pointer;
  object-fit:           cover;
  object-position:      top center;
}



.ix-date, .ix-name, .ix-drink, .ix-sum, .ix-red, .ix-status {
  position:             relative;
  float:                left;
  width:                calc(100% - 10px);
  text-align:           center;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}
.ix-drink {
  font-size:            16px;
}
.ix-name, .ix-sum ,.ix-status {
  color:                var(--col-medium);
  font-weight:          700;
}
.ix-nr, .ix-comment {
  font-size:            14px;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}

.ix-sportsfreund {
  position:             absolute;
  background-color:     #ff6600;
  padding:              5px;
  border-radius:        0px 10px 0px 10px;
  margin-top:           -5px;
  margin-left:          calc(100% - 30px);
}
.ix-teamsport {
  position:             absolute;
  background-color:     #c43335;
  padding:              5px;
  border-radius:        0px 10px 0px 10px;
  margin-top:           -5px;
  margin-left:          calc(100% - 30px);
}
.ix-kreutz {
  position:             absolute;
  background-color:     #888888;
  padding:              5px;
  border-radius:        0px 10px 0px 10px;
  margin-top:           -5px;
  margin-left:          calc(100% - 30px);
}
.ix-white {
  position:             absolute;
  background-color:     white;
  padding:              5px;
  border-radius:        0px 10px 0px 10px;
  margin-top:           -5px;
  margin-left:          calc(100% - 30px);
}

.ix-login {
  position:             absolute;
  background-color:     var(--col-blue);
  padding:              5px;
  border-radius:        10px 0px 10px 0px;
  margin-top:           61px;
  margin-left:          calc(100% - 35px);
  height:               20px;
  width:                20px;
  z-index:              10;
}
li.ix .ix-login img {
  height:               20px;
  width:                20px;
}

.list-bild {
  position:             relative;
  float:                left;
  align-items:          center;
  width:                30px;
}


.event-red, .event-blue, .event-green {
  background:           linear-gradient(to bottom, #edbfbf 0%, #d15b5a 100%);;
  color: 					      white;
  text-align:   			  center;
  border-radius:        10px 10px 0px 0px;
  border-bottom:        3px solid #963b31;
  width:                100%;
  font-family:          'franklin-gothic-urw', 'Helvetica', 'Arial', sans-serif;
  font-size:            28px;
  font-weight:          600;
}
.event-blue {
  background:           linear-gradient(to bottom, #2baede 0%, #167db2 100%);;
  border-bottom:        3px solid #0c278a;
}
.event-green {
  background:           linear-gradient(to bottom, #00ab50 0%, #007d45 100%);;
  border-bottom:        3px solid #006745;
}

.event-day {
  text-align:   			  center;
  width:                100%;
  font-family:          'franklin-gothic-urw', 'Helvetica', 'Arial', sans-serif;
  font-size:            30px;
  font-weight:          600;
}
.event-team, .event-name, .event-time {
  text-align:   			  center;
  width:                100%;
  font-size:            16px;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}
.event-name {
  color:   			        var(--col-blue);
  font-size:            16px;
}

.event-cancelled {
  position:             absolute;
  margin-top:           -110px;
  width:                100%;
}
img.cancelled {
  width:               80px;
}

.label, .label1, .label2, .label3, .label4, .label5, .label8, .label10, .label15, .label20, .label25, .label30, .label35, .label40, .label45, .label50, .label55, .label60, .label65, .label70, .label75, .label80, .label85, .label90, .label95,.label100, .label7x {
  position:             relative;
  float:                left;
  padding:              0px 5px;
  width:                100px;
  color:                var(--col-lbl);
}
.div1, .div2, .div3, .div4, .div5, .div8, .div10, .div15, .div20, .div25, .div30, .div35, .div40, .div45, .div50, .div55, .div60, .div65, .div70, .div75, .div80, .div85, .div90, .div95, .div100, .div7x,.divAuto {
  position:             relative;
  float:                left;
  padding:              0px 5px;
}
.sum1, .sum2, .sum3, .sum4, .sum5, .sum8, .sum10, .sum15, .sum20, .sum25, .sum30, .sum35, .sum40, .sum45, .sum50, .sum55, .sum60, .sum65, .sum70, .sum75, .sum80, .sum85, .sum90, .sum95,.sum100, .sum7x {
  position:             relative;
  float:                left;
  padding:              0px 5px;
  color:                white;
  height:               30px;
}

.label1, .div1, .sum1 {width: calc(1% - 10px);}
.label2, .div2, .sum2 {width: calc(2% - 10px);}
.label3, .div3, .sum3 {width: calc(3% - 10px);}
.label4, .div4, .sum4 {width: calc(4% - 10px);}
.label5, .div5, .sum5 {width: calc(5% - 10px);}
.label8, .div8, .sum8 {width: calc(8% - 10px);}
.label10, .div10, .sum10 {width: calc(10% - 10px);}
.label15, .div15, .sum15 {width: calc(15% - 10px);}
.label20, .div20, .sum20 {width: calc(20% - 10px);}
.label25, .div25, .sum25 {width: calc(25% - 10px);}
.label30, .div30, .sum30 {width: calc(30% - 10px);}
.label35, .div35, .sum35 {width: calc(35% - 10px);}
.label40, .div40, .sum40 {width: calc(40% - 10px);}
.label45, .div45, .sum45 {width: calc(45% - 10px);}
.label50, .div50, .sum50 {width: calc(50% - 10px);}
.label55, .div55, .sum55 {width: calc(55% - 10px);}
.label60, .div60, .sum60 {width: calc(60% - 10px);}
.label65, .div65, .sum65 {width: calc(65% - 10px);}
.label70, .div70, .sum70 {width: calc(70% - 10px);}
.label75, .div75, .sum75 {width: calc(75% - 10px);}
.label80, .div80, .sum80 {width: calc(80% - 10px);}
.label85, .div85, .sum85 {width: calc(85% - 10px);}
.label90, .div90, .sum90 {width: calc(90% - 10px);}
.label95, .div95, .sum95 {width: calc(95% - 10px);}
.label100, .div100, .sum100 {width: calc(100% - 10px);}
.label7x, .div7x, .sum7x {width: calc((100% / 7) - 10px);}
.divAuto {width: auto;}

/*
.label5, .div5, .sum5 {background-color: aliceblue;}
.label10, .div10, .sum10 {background-color: antiquewhite;}
.label15, .div15, .sum15 {background-color: aqua;}
.label20, .div20, .sum20 {background-color: aquamarine;}
.label25, .div25, .sum25 {background-color: azure;}
.label30, .div30, .sum30 {background-color: beige;}
.label35, .div35, .sum35 {background-color: bisque;}
.label40, .div40, .sum40 {background-color: burlywood;}
.label45, .div45, .sum45 {background-color:chartreuse;}
.label50, .div50, .sum50 {background-color: cornsilk;}
.label55, .div55, .sum55 {background-color: floralwhite;}
.label60, .div60, .sum60 {background-color: gainsboro;}
.label65, .div65, .sum65 {background-color: gold;}
.label70, .div70, .sum70 {background-color: lavender;}
.label75, .div75, .sum75 {background-color: khaki;}
.label80, .div80, .sum80 {background-color: lemonchiffon;}
.label85, .div85, .sum85 {background-color: lightblue;}
.label90, .div90, .sum90 {background-color: lightpink;}
.label95, .div95, .sum95 {background-color: yellowgreen;}
.label100, .div100, .sum100 {background-color: oldlace;}
*/

.img100 {
  position:             relative;
  float:                left;
  width:                100%;
  height:               auto;
}

.top1 {margin-top:1px;}
.top2 {margin-top:2px;}
.top3 {margin-top:3px;}
.top4 {margin-top:4px;}
.top5 {margin-top:5px;}
.top6 {margin-top:6px;}
.top7 {margin-top:7px;}
.top8 {margin-top:8px;}
.top9 {margin-top:9px;}
.top10 {margin-top:10px;}
.top15 {margin-top:15px;}
.top17 {margin-top:17px;}
.top20 {margin-top:20px;}
.top25 {margin-top:25px;}
.top30 {margin-top:30px;}
.top40 {margin-top:40px;}
.top50 {margin-top:50px;}
.top60 {margin-top:60px;}
.top70 {margin-top:70px;}
.top80 {margin-top:80px;}
.top90 {margin-top:90px;}
.top100 {margin-top:100px;}

.bot1 {margin-bottom:1px;}
.bot2 {margin-bottom:2px;}
.bot3 {margin-bottom:3px;}
.bot4 {margin-bottom:4px;}
.bot5 {margin-bottom:5px;}
.bot6 {margin-bottom:6px;}
.bot7 {margin-bottom:7px;}
.bot8 {margin-bottom:8px;}
.bot9 {margin-bottom:9px;}
.bot10 {margin-bottom:10px;}
.bot20 {margin-bottom:20px;}
.bot30 {margin-bottom:30px;}
.bot40 {margin-bottom:40px;}
.bot50 {margin-bottom:50px;}
.bot60 {margin-bottom:60px;}
.bot70 {margin-bottom:70px;}
.bot80 {margin-bottom:80px;}
.bot90 {margin-bottom:90px;}
.bot100 {margin-bottom:100px;}

.h20, .h25, .h30, .h35, .h40, .h45, .h50 {
  overflow:      hidden;
  text-overflow: ellipsis;
}
.h20 {height: 20px;max-height:20px;min-height:20px;}
.h25 {height: 25px;max-height:25px;min-height:25px;}
.h30 {height: 30px;max-height:30px;min-height:30px;}
.h35 {height: 35px;max-height:35px;min-height:35px;}
.h40 {height: 40px;max-height:40px;min-height:40px;}
.h45 {height: 45px;max-height:45px;min-height:45px;}
.h50 {height: 50px;max-height:50px;min-height:50px;}
.hAuto{height: auto;}
.wAuto{width:  auto;}

.pad0 {padding: 0px};
.pad1 {padding: 1px};
.pad2 {padding: 2px};
.pad3 {padding: 3px};
.pad4 {padding: 4px};
.pad5 {padding: 5px};

.font10{font-size:10px;}
.font12{font-size:12px;}
.font14{font-size:14px;}
.font16{font-size:16px;}
.font18{font-size:18px;}
.font20{font-size:20px;}
.font22{font-size:22px;}
.font24{font-size:24px;}
.font26{font-size:26px;}
.font28{font-size:28px;}
.font30{font-size:30px;}
.font35{font-size:35px;}
.font40{font-size:40px;}
.font45{font-size:45px;}
.font50{font-size:50px;}

.bgrGN{background-color:#f0fff0;}
.bgrGR{background-color:#b0b0b0;}
.bgrDGN{background-color:var(--col-switch);}
.bgrNone{background-color:transparent;}

.colWS{color:#ffffff;}
.colEE{color:#eeeeee;}
.colBL{color:#4289a9;}
.colRT{color:#c20b1b;}
.colLBL{color: var(--col-lbl);}

.bor-right  {border-right: 1px solid var(--col-line);}
.bor-left   {border-left: 1px solid var(--col-line);}
.bor-top    {border-top: 1px solid var(--col-line);}
.bor-bottom {border-bottom: 1px solid var(--col-line);}
.bor-none   {border:none;}

.nowrap {
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}
.pw-name {
  position:             relative;
  float:                left;
  padding:              5px;
  width:                calc(100% - 10px);
  color:                var(--col-blue);
  font-size:            30px;
  font-weight:          600;
  text-align:           center;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}
.input {
  position:             relative;
  float:                left;
  padding:              5px;
  width:                140px;  
}
.input-k {
  position:             relative;
  float:                left;
  padding:              5px;
  width:                60px;  
}
.input-report {
  position:             relative;
  float:                left;
  padding:              5px;
  width:                140px;  
}
.euro {
  position:             relative;
  float:                left;
  padding:              5px;
  width:                70px;
  text-align:           right;
}
.label-k {
  position:             relative;
  float:                left;
  padding:              5px;
  width:                50px;
  text-align:           left;
}
.pic {
  position:             relative;
  float:                left;
  padding:              5px;
  padding-left:         35px;
  width:                30px;  
}
.pic-sum, .label-sum {
  position:             relative;
  float:                left;
  padding:              5px;
  width:                30px;  
  padding-left:         0px;
}
li.calculate img.pic-sum {
  height:               20px;
}
li.pruefung img {
  height:               24px;
  padding:              5px 2.5px;
}

li.pruefung div {
  color:               white;
}

.sum-euro {
  position:             relative;
  float:                left;
  padding:              5px;
  width:                100px;
  text-align:           right;
}


input.sum-label, input.sum {
  font-size:            14px;
}
*/
/* H I S T O R Y *******************************/
.th-history {
  position:             relative;
  float:                left;
  width:                100%;
  text-align:           left;
  font-size:            0.8rem;
  font-weight:          600;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}
.td-front, .td-field, .td-old, .td-new {
  position:             relative;
  float:                left;
  width:                30%;
  text-align:           left;
  font-size:            0.8rem;
  font-weight:          200;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}
.td-front {
  position:             relative;
  float:                left;
  width:                10%;
  text-align:           left;
  font-size:            0.8rem;
  font-weight:          200;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}

.item-picture {
  position:             relative;
  float:                left;
  width:                100%;
}

/* B U T T O N L E I S T E *********************/

div.btn-leiste {
  position:             relative;
  float:                left;
  width:                100%;
  height:               40px;
}
button.btn-leiste {
  position:             relative;
  float:                left;
  width:                calc(100% - 20px);
  height:               100%;
  margin:               0px 10px;
  padding:              0px;
  background-color:     var(--col-btnb);
  color:                var(--col-btnt);
  font-family:          'Oswald', sans-serif;
  font-size:            0.875rem;
  font-weight:          400;
  line-height:          34px;
  letter-spacing:       1px;
  text-transform:       uppercase;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
  border:               0px;
  cursor:               pointer;
}
button.btn-leiste:hover {
  background-color:     var(--col-btnh);
}
input.btn-file {
  position:             relative;
  float:                left;
  width:                calc(100% - 20px);
  height:               40px;
  margin:               0px 10px;
  padding:              0px;
  background-color:     var(--col-btnb);
  color:                var(--col-btnt);
  font-family:          'Oswald', sans-serif;
  font-size:            0.875rem;
  font-weight:          400;
  line-height:          34px;
  letter-spacing:       1px;
  text-transform:       uppercase;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
  border:               0px;
  cursor:               pointer;
  border-radius:        0px;
}
input.btn-file:hover {
  background-color:     var(--col-btnh);
}



/************************************************
   PERSON.HTML
************************************************/

form.person {
  position:             relative;
  float:                left;
  display:              flex;
  flex-wrap:            wrap;
  justify-content:      center;
  padding:              0px;
  width:                100%;
  height:               100%;
  max-width:            360px;
  background-color:     white;
  min-height:           100vh;
}







/* F I L T E R *********************************/
.filter-label-aktiv, .filter-label-passiv {
  width:                100%;
  font-family:          'Oswald', sans-serif;
  font-size:            12px;
  font-weight:          400;
  line-height:          2.5;  
  cursor:               pointer;
  border:               0px;
  background-color:     transparent;
  color:                var(--col-main);
  overflow:             hidden;
  padding:              0px;
  white-space:          nowrap;
  text-align:           center;
}
.filter-label-aktiv {
  color:                var(--col-switch); 
}
.filter-btn {
  position:             relative;
  float:                left;
  width:                100%;
  padding:              0px;
}
.filter-btn button {
  width:                100%;
  max-width:            26px;
  font-family:          'Oswald', sans-serif;
  font-size:            12px;
  font-weight:          400;
  line-height:          2.5;  
  cursor:               pointer;
  border:               0px;
  background-color:     transparent;
  color:                var(--col-main);
  overflow:             hidden;
  padding:              0px;
  white-space:          nowrap;
}


/* F O O T E R *********************************/

.footer-name {
  position:             relative;
  float:                left;
  width:                calc(100% - 20px);
  height:               20px;
  margin:               0px;
  padding:              0px 10px;
  font-family:          'Oswald', sans-serif;
  font-size:            12px;
  font-weight:          200;
  color:                var(--col-main);
  text-align:           right;
}
.footer-btn-a, .footer-btn-p, .footer-btn-x {
  position:             relative;
  float:                left;
  width:                calc(100% / 6);
  height:               calc(100% - 5px);
  padding:              0px;
  border-top:           5px solid var(--col-line);
}
.footer-btn-a {
  border-top:           5px solid var(--col-red);
}

.footer-btn, .footer-btn-aktiv, .footer-btn-dis {
  width:                100%;
  height:               100%;
  font-family:          'Oswald', sans-serif;
  font-size:            12px;
  font-weight:          400;
  line-height:          2.5;  
  cursor:               pointer;
  border:               0px;
  background-color:     transparent;
  color:                var(--col-main);
  overflow:             hidden;
  padding:              0px;
  white-space:          nowrap;
}
.footer-btn-aktiv {
  color:                var(--col-red); 
}
.footer-btn-dis {
  color:                var(--col-line); 
}
.footer-btn img, .footer-btn-dis img, .footer-btn-aktiv img {
  width:                20px;
  cursor:               pointer;
  fill:                 var(--col-line);
}


/*  S W I T C H ********************************/

 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  margin-top: 5px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .2s;
  transition: .2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
}

input:checked + .slider {
  background-color: var(--col-switch);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--col-switch);
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 10px;
}

.slider.round:before {
  border-radius: 50%;
} 


/*  R A D I O   ********************************/

input[type=radio]#Green {
  width:                20px;
  height:               20px;
  accent-color:         var(--col-switch);
}

input[type=radio]#Red {
  width:                20px;
  height:               20px;
  accent-color:         var(--col-red);
}


/* Auswahl Größen *****************************/
.toggle-buttons input[type="radio"] {
	visibility: hidden;  
}

input.radio-size {
  position:             relative;
  float:                left;
  width:                0px;
  padding:              0px;
  margin:               0px;
}

.toggle-buttons label {
  display:              block;
  position:             relative;
  float:                left;
	border:               0px solid #333;
  background-color:     white;
  font-family:          'franklin-gothic-urw-cond', 'Helvetica', 'Arial', sans-serif;
  font-weight:          400;
  font-size:            16px;
  text-align:           center;
}

.toggle-buttons input:checked + label {
	background:           var(--col-btnb);
	color:                var(--col-btnt);
	box-shadow:           none;
}

input:hover + label,
input:focus + label {
	background:           var(--col-btnh);
  color:                white;
}

.toggle-size, .toggle-color {
	position: relative;
}

.toggle-size input, .toggle-color input {
	position:             absolute;
	width:                0px;
	height:               0px;
	top:                  0;
	left:                 0;
	border-radius:        5px;
}

.toggle-size label, .toggle-color label {
  width:                calc(100% / 6 - 14px);
	padding:              5px;
	margin:               2px;
	border-radius:        5px;
  aspect-ratio:         2.2 / 1;
  cursor:               pointer;
}
.toggle-color label {
  font-size:            10px;
  width:                calc(100% / 5 - 14px);
  aspect-ratio:         1;
}
.toggle-color img {
  width:                95%;
}

.toggle-size label:first-of-type {
  //margin-left:          0px;
}

.toggle-size label:last-of-type {
  //margin-right:          0px;
}

button {
  position:             relative;
  float:                left;
  width:                100%;
  height:               40px;
  margin:               0px;
  padding:              0px;
  background-color:     var(--col-btnb);
  color:                var(--col-btnt);
  font-family:          'Oswald', sans-serif;
  font-size:            0.875rem;
  font-weight:          400;
  line-height:          34px;
  letter-spacing:       1px;
  text-transform:       uppercase;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
  border:               0px;
  cursor:               pointer;
}
button:hover {
  background-color:     var(--col-btnh);
}


button.btn-100 {width: calc(100% - 5px); margin-right: 2.5px; margin-left: 2.5px;}
button.btn-90  {width: calc(90%  - 5px); margin-right: 2.5px; margin-left: 2.5px;}
button.btn-80  {width: calc(80%  - 5px); margin-right: 2.5px; margin-left: 2.5px;}
button.btn-70  {width: calc(70%  - 5px); margin-right: 2.5px; margin-left: 2.5px;}
button.btn-60  {width: calc(60%  - 5px); margin-right: 2.5px; margin-left: 2.5px;}
button.btn-50  {width: calc(50%  - 5px); margin-right: 2.5px; margin-left: 2.5px;}
button.btn-40  {width: calc(40%  - 5px); margin-right: 2.5px; margin-left: 2.5px;}
button.btn-30  {width: calc(30%  - 5px); margin-right: 2.5px; margin-left: 2.5px;}
button.btn-20  {width: calc(20%  - 5px); margin-right: 2.5px; margin-left: 2.5px;}
button.btn-10  {width: calc(10%  - 5px); margin-right: 2.5px; margin-left: 2.5px;}



@media(min-width:300px) {
  .filter-bestellung-1 {position:relative;float:left;width:230px;}
  .filter-bestellung-2 {position:relative;float:left;width: calc(100% - 230px - 30px);}
  .filter-bestellung-3 {position:relative;float:left;width:30px;}
}

@media(min-width:980px) {
  .index-frm {
    width:              980px;
    max-width:          980px;
  }
  header {
    width:              980px;
  }
  footer {
    width:              980px;
    max-width:          980px;
  }
li.ix, li.ix-yellow, li.ix-orange, li.ix-green, li.ix-red, li.ix-grey {
  width:                calc(25% - 30px);
}
li.ix-closed {
  width:                calc(25% - 30px);
  background-color:     #e0e0e0;
  background-image:     url("../pics/finished_dis.svg");
  background-repeat:    no-repeat;
	background-position:  center center;
  background-size:      80% auto;
}
li.ix-delivered {
  width:                calc(25% - 30px);
  background-color:     #f0fff0;
  background-image:     url("../pics/delivered_gn.svg");
  background-repeat:    no-repeat;
	background-position:  center center;
  background-size:      80% auto;
}
li.ix-lager {
  width:                calc(25% - 30px);
  background-color:     #F7FFAA;
  background-image:     url("../pics/lager_gn.svg");
  background-repeat:    no-repeat;
	background-position:  center center;
  background-size:      80% auto;
}
.font12{font-size:12px;}
.font14{font-size:14px;}
.font16{font-size:16px;}
.font18{font-size:18px;}
.font20{font-size:20px;}
.font22{font-size:22px;}
.font24{font-size:24px;}
.font26{font-size:26px;}
.font28{font-size:28px;}
.font30{font-size:30px;}
.font35{font-size:35px;}
.font40{font-size:40px;}
.font45{font-size:45px;}
.font50{font-size:50px;}

.h20 {height: 20px;max-height:20px;min-height:20px;}
.h25 {height: 25px;max-height:25px;min-height:25px;}
.h30 {height: 30px;max-height:30px;min-height:30px;}
.h35 {height: 35px;max-height:35px;min-height:45px;}
.h40 {height: 40px;max-height:40px;min-height:40px;}
.h45 {height: 45px;max-height:45px;min-height:45px;}
.h50 {height: 50px;max-height:50px;min-height:50px;}
.h55 {height: 55px;max-height:55px;min-height:55px;}
.h60 {height: 60px;max-height:60px;min-height:60px;}
 
  /**********************************************
     PERSON.HTML
  **********************************************/
  form.person {
    width:              980px;
    max-width:          980px;
  }
  
  
  
  
}