* {
  font-family: 'Arial';
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

h1 {
    font-size:120%;
}
h2 {
    font-size:110%;
}

a { color:#166C23; }

.row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 4px 4px 0 0;
}

[class*="col-"] {
  margin: 0 0 4px 4px;
  flex: calc(100% - 4px);
  float: left;
  width: calc(100% - 4px);
}

@media only screen and (min-width: 768px) {
  .row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .col-1 {
    flex: calc(8.33% - 4px);
    width: calc(8.33% - 4px);
  }
  .col-2 {
    flex: calc(16.66% - 4px);
    width: calc(16.66% - 4px);
  }
  .col-3 {
    flex: calc(25% - 4px);
    width: calc(25% - 4px);
  }
  .col-4 {
    flex: calc(33.33% - 4px);
    width: calc(33.33% - 4px);
  }
  .col-5 {
    flex: calc(41.66% - 4px);
    width: calc(41.66% - 4px);
  }
  .col-6 {
    flex: calc(50% - 4px);
    width: calc(50% - 4px);
  }
  .col-7 {
    flex: calc(58.33% - 4px);
    width: calc(58.33% - 4px);
  }
  .col-8 {
    flex: calc(66.66% - 4px);
    width: calc(66.66% - 4px);
  }
  .col-9 {
    flex: calc(75% - 4px);
    width: calc(75% - 4px);
  }
  .col-10 {
    flex: calc(83.33% - 4px);
    width: calc(83.33% - 4px);
  }
  .col-11 {
    flex: calc(91.66% - 4px);
    width: calc(91.66% - 4px);
  }
  .col-12 {
    flex: calc(100% - 4px);
    width: calc(100% - 4px);
  }
}

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

.center {
  text-align: center;
}

.block {
  display: block;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

body {
  margin: 0px;
}

#flagge {
  background-image: linear-gradient(#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF,#166C23,#166C23,#166C23,#166C23,#166C23);
}

#flagge a {
  text-decoration: none;
}

#main-title {
  text-shadow: #FFFFFF 3px 3px 3px;
  color: #000000;
  margin: 4px;
  padding: 4px;
}

#sub-title {
  text-shadow: #FFFFFF 2px 2px 2px;
  color: #000000;
  margin: 4px;
  padding: 4px;
}

@media only screen and (min-width: 768px) {
  #main-title {
    font-size: 3em;
  }
  #sub-title {
    font-size: 2em;
  }
}

.content-box {
  border: 0.2em solid green;
  padding: 1em;
  /*background: -moz-linear-gradient(0% 100% 90deg,#CCD1C7, #FFFFFF);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#CCD1C7));*/
  background-color:#f1f7ed;
}

.Button {
  padding: 10px;
  width: 12em;
  margin-left: 2em;
}

input[type=checkbox] {
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  margin: 1em;
}

.nav {
  text-align: center;
  padding: 0.5em;
}

.nav a, .nav a:visited { /* Durch Gruppieren dieser Selektoren wird sichergestellt, dass die Hyperlinks auch nach dem Aufrufen das Erscheinungsbild einer Schaltfläche beibehalten. */
  display: block; /* Hiermit werden die Blockeigenschaften für Hyperlinks angegeben, sodass das gesamte umschließende LI-Element ausgefüllt wird. Hiermit wird angegeben, dass der gesamte Bereich auf einen Mausklick reagiert. */
  text-decoration: none;
  background-color: #166C23;
  color: #FFFFFF;
  padding: 0.5em
}

.nav input[type=submit] {
    border: 2px solid #166C23;
    color:#034C08;
    background: rgb(255, 247, 210);
    font-size: 1em;
    padding: 0.5em;
    display: block;
    width: 100%;
}

.nav a:hover, .nav a:active, .nav a:focus, .nav input[type=submit]:hover { /* Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geaendert. */
  background-color: #fdd400;
  color: #000000;
}

.nav a.defaultlink {
    color:#166C23;
    text-decoration:underline;
    background-color: transparent;
    display: inline;
    padding: 0em;
}
#faq li {
  margin: 10px;
}

#faq div {
  margin-left: 0em;
  padding: 0.5em;
  margin-top: 10px;
  border-radius: 0px;
  background-color: rgba(255, 247, 210, 1);
}

#parts {
  border-collapse: collapse;
}

#parts td {
  border: 0.1em solid black;
  border-collapse: collapse;
  background-color: #FCFCFC;
  padding: 0.25em;
}

#parts div {
  margin-left: 2em;
  margin-top: 10px;
  border-radius: 10px;
  background-color: rgba(255, 204, 0, 0.3);
}

#parts td.invisible_td {
  border:0;
  background-color: rgba(255, 255, 255, 0);
}

#header,
#results {
  width: 1000px;
  border: 1px solid black;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: #FCFCFC;
}

#container {
  width: 1015px;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}

#header th,
#results td {
  border: 1px solid black;
  border-spacing: 0;
  border-collapse: collapse;
  padding: 0.25em;
}

#results tr:hover {
  background-color: #166C23;
  color: #FFFFFF;
  cursor: pointer;
}

#xmlHeader,
#xmlResults,
#profilHeader,
#profilResults {
  width: 350px;
}

#xmlContainer,
#profilContainer {
  width: 365px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

#jsonHeader,
#jsonResults,
#histHeader,
#histResults,
#costHeader,
#costResults {
  width: 750px;
}

#jsonContainer,
#histContainer,
#costContainer {
  width: 765px;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}

#winProfil,
#officeProfil {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}

.winOrder,
.officeOrder {
  width: 700px;
  border: 1px solid black;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: #FCFCFC;
}

.winOrder th,
.winOrder td,
.officeOrder th,
.officeOrder td {
  border: 1px solid black;
  border-spacing: 0;
  border-collapse: collapse;
  padding: 0.25em;
  vertical-align: top;
}

#pdf {
  background-color: white;
  border: 1px solid black;
}

#footer
{
  text-align: center;
  font-weight: lighter;
  font-size: 75%;
}

#pic {
  width: 640px;
  height: 480px;
  border: 1px solid #aaa;
  text-decoration: none;
}

#picbig {
  width: 800px;
  height: 480px;
  border: 1px solid #aaa;
  text-decoration: none;
}

#picxxl {
  width: 1000px;
  height: 480px;
  border: 1px solid #aaa;
  text-decoration: none;
}

#datenschutz {
  font-size: 75%;
}

.logo {
  text-align: center;
}

.notices {
  height: 100px;
  overflow: auto;
  border-width: 1px;
  border-style: groove;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #FFFFFF;
  display: inline-block;
}

.upgrade-notification {
  border-width: 2px;
  border-style: solid;
  border-color: red;
  padding: 5px;
  background-color: #FFFFFF;
  display: inline-block;
}

.service-icon {
  max-width: 100%;
  height: auto;
}

.sachsen-logo {
  width: auto;
  max-height: 125px;
}

.cs-logo {
  width: auto;
  max-height: 75px;
}

.disabled {
  position: relative;
  display: inline-block;
}

.disabled span {
  position: absolute;
  top: 25%;
  left: 20%;
  border-radius: 5px;
  background-color: grey;
  white-space: nowrap;
  padding: 5px;
}

.disabled span p {
  color: black;
}

.red {
  color: red;
}

.green {
  color: green;
}

table.schools {
    border-spacing:2px;
}
/*not good, td != link …
 table.schools tr td:hover {
    background-color:#fdd400;
}*/
table.schools tr td {
    height:71px;
    padding:2px;
    vertical-align:middle;
    border:2px solid green;
}
table.schools tr td:nth-child(2) {
    padding-left:0.67em;
}

ul.language-selector {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

@media only screen and (min-width: 768px) {
  ul.language-selector {
    justify-content: flex-end;
  }
}

.flag {
  max-width: 3rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

@media only screen and (min-width: 768px) {
  .flag {
    margin-left: 0;
  }
}