body {
   font: 12pt Arial;
   width: 100%;
   min-height: 100%;
   margin: 0;
}

#wrapper {
   position: relative;
   min-height: 100vh;
}

a {
  text-decoration: none;
  color: #4444dd;
}
a:hover {
  text-decoration: none;
  color: #000099;
}
a:hover:visited {
  text-decoration: none;
  color: #000099;
}
a:active {
  text-decoration: none;
  color: #4444dd;
}
a:visited {
   text-decoration: none;
   color: #4444dd;
}

#header {
   padding: 0.5em;
   font-size: 22pt;
   background-image: linear-gradient(to right, white, #88bbff);
}
#header .red-dot {
   color: red;
}
#header .content {
   padding-bottom: 1rem;
}

.content {
   width: 70%;
   margin: 0 auto;
}
.main {
   padding-top: 1em;
   padding-bottom: 3em;
}

#footer {
   position: absolute;
   bottom: 0;
   right: 0;
   left: 0;
   padding: 0.2em 1em;
   text-align: right;
   border-top: 1px solid black;
}

/* Menü */
.menu-bar {
   color: black;
   background-image: linear-gradient(to right, white, #88bbff);
}
.menu {
   display: table;
   width: 100%;
}
.menu a {
   display: table-cell;
   padding: 12px;
   text-align: center;
   text-decoration: none;
   color: black;
}
.menu a:hover {
   background-color: #88bbff;
}
.menu a:visited {
   color: black;
}

.menu-icon {
   display: none;
   float: right;
   cursor: pointer;
   margin-left: 1rem;
}

.menu-icon .bar1, .bar2, .bar3 {
   width: 34px;
   height: 6px;
   margin: 4px;
   background-color: black;
   transition: 0.4s;
}

#searchIcon {
   height: 30px;
   float: right;
   cursor: pointer;
}

#searchbar {
   display: none;
}

#searchbar.show {
   display: flex;
   padding-bottom: 1rem;
}

#searchbar #searchInput {
   flex-grow: 1;
}

#searchbar #searchButton {
   background-color: white;
}

#searchbar #searchInput,
#searchbar #searchButton {
   font-size: 12pt;
   padding: 8px;
   border: 1px solid black
}

.expanded .bar1 {
   transform: rotate(-45deg) translate(-7px, 7px) ;
}

.expanded .bar2 {
   opacity: 0;
}

.expanded .bar3 {
   transform: rotate(45deg) translate(-7px, -7px) ;
}

.float-right {
   float: right;
}

img.scale-90 {
   max-width: 90%
}

.max-width-60 {
   max-width: 60em;
}

.padded {
   padding-left: 1em;
}

.text-centered {
   text-align: center;
}

/* Verlag */
.product {
   width: 100%;
   display: flex;
   flex-direction: row;
   margin-bottom: 2em;
}

.product-new {
   color: red;
   font-weight: bold;;
}

a.product-anchor {
   color: black;
}

.product-info {
   width: 100%;
}

.product-image {
   padding-left: 2em;
}

.product-image img {
   width: 150px;
   border: 1px solid black;
}

/* Diverses */
.border-top {
   border-top: 1px solid black;
}

.text-error,
.text-red {
   color: red;
}

.text-blue {
   color: blue;
}

.text-light-green {
   color: #697e2a;
}

.text-light-orange {
   color: #a86800;
}

table.list {
   width: 100%;
   border-collapse: collapse;
}

table.list tbody > tr {
   border-top: 1px solid black;;
}

table.list tbody td {
   text-align: center;
}

.full-width {
   width: 100%;
}

.full-width th {
   text-align: left;
}

.hidden {
   display: none;
}

a.disabled {
   color: #ccc;
   cursor: default;
}

.no-break {
   white-space: nowrap;
}

video {
   max-width: 100%;
}

/* Formulare */
.row * {
   box-sizing: border-box;
   font-size: 15pt;
}

.form-row {
   display: flex;
   align-items: stretch;
}

.form-element {
   width: 100%;
   margin-left: 0.5em;
}

.col-25 {
   float: left;
   width: 25%;
   margin-top: 6px;
 }

.col-75 {
   float: left;
   width: 75%;
   margin-top: 6px;
}

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

.row input[type=text], select, textarea {
   width: 100%;
   padding: 0.4em;
   border: 1px solid #ccc;
   border-radius: 4px;
   background-color: white;
   resize: vertical;
 }

.row textarea {
   height: 240px;
}

.form-button-primary {
   box-sizing: border-box;
   padding: 6pt;
   border: 1px solid #9cf;
   background-color: #9cf;
   color: black;
   text-decoration: none;
   cursor: pointer;
   font-size: 14pt;
   text-align: center;
}

.form-button-primary:hover {
   background-color: #8be;
   color: black;
}

 .form-button-secondary {
   box-sizing: border-box;
   padding: 6pt;
   border: 1px solid #9cf;
   background-color: #fff;
   color: black;
   text-decoration: none;
   cursor: pointer;
   font-size: 14pt;
   text-align: center;
}
.form-button-secondary:hover {
   background-color: #eee;
   color: black;
}

.order-form img {
   width: 40px;
   padding-bottom: 0.5em;
}

.order-form span {
   align-self: center;
   margin-left: 0.6em;
}

.order-form span input {
   margin-right: 0.6em;
}

.order-form-row {
   display: flex;
   flex-direction: row;
}

/* Message Box */
#modal {
   display: none;
   position: fixed;
   left: 0px;
   top: 0px;
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   z-index: 1;
}

#modal.visible {
   display: block;
}

#modal button {
   display: none;
}

#modal button.visible {
   display: inline-block;
}

#modalContent {
   background-color: white;
   margin: 15% auto;
   padding: 1em;
   border: 1px solid black;
   width: 80%;
   text-align: center;
}

form[name="product"] input[name="new"] {
   color: red;
   font-weight: bold;
}

form[name="product"] input[name="name"] {
   font-weight: bold;
}

#loginBox {
   margin: auto;
   max-width: 400px;
}

#loginBox input {
   display: block;
   padding: 8px;
   box-sizing: border-box;
   width: 100%;
   font-size: 1.2rem;
}

#loginBox button {
   display: block;
   padding: 8px;
   box-sizing: border-box;
   width: 100%;
   font-size: 1.2rem;
   cursor: pointer;
}

#viewbox {
   display: none;
   position: fixed;
   text-align: center;
   box-sizing: border-box;
   z-index: 10;
   width: 90vw;
   padding: 2em;
   left: 5vw;
   top: 5vw;
   margin: auto;
   background-color: rgba(0, 0, 0, 0.6);
}

#viewbox.open {
   display: block;
}

#viewbox #viewboxClose {
   position: absolute;
   right: 0;
   top: 0;
   border: 0;
   font-size: larger;
   padding: 1em;
   cursor: pointer;
}

#viewbox img {
   max-width: 100%;
}

/* Breakpoints */
@media screen and (max-width: 1000px) {
   #header .long-title {
       display: none;
   }
   .menu {
       display: none;
   }
   .menu a {
       display: block;
       text-align: left;
   }
   .menu-icon {
       display: inherit;
   }
   .menu.expanded {
       display: block;
   }

   .content {
       width: 90%
   }
}

@media screen and (max-width: 580px) {
   .product {
      flex-direction: column-reverse;
   }

   .product-info {
      align-content: stretch;
   }

   .product-image {
      text-align: center;
      padding-left: 0;
   }

   .product-image img {
      width: 90%;
      max-width: 200px;
   }

   .float-right {
      float: none;
   }

   img.float-right {
      display: block;
   }

   .padded {
      padding-left: 0;
   }

   .form-button-primary {
      display: block;
      width: 100%;
   }

   .form-button-secondary {
      display: block;
      width: 100%;
   }

   .col-25, .col-75, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }

   .form-row {
      flex-direction: column;
   }

   .form-element {
      margin-left: 0;
   }

   .row input[type=text], select, textarea {
      margin-bottom: 0.3em;
   }
}