@media all {   
   #wrapper {
      background-image: radial-gradient(circle, #0C1416, #212526, #0C1416);
      margin: 0 auto 0 auto;
   }
   
   header { 
      height: 50px;
      border-bottom: 2px solid #006cf0;
   }

   main {
      list-style:none;
      overflow: auto;
   }
   
   header .material-icons {
      opacity: 1;
      font-size: 1.8em;
      color: #22aadd;
      padding: 6px 25px;
   }
   
   header .material-icons:hover {
      color: #006cf0;
   }
   
   #loading {
      font: normal 1em Barlow Condensed;
      color: #fff;
      background: #343434;
      background-image: url(../public/images/static/icons/loader/loader.gif);
      background-repeat: no-repeat;
      background-size: 60px 60px;
      background-position: center;        
      padding: 15px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -webkit-box-shadow: 0px 0px 5px 3px #22aadd;
      -moz-box-shadow: 0px 0px 5px 3px #22aadd;
      box-shadow: 0px 0px 5px 3px #22aadd;
   }
   
   #loading-icon {
      font: normal 1.5em sans-serif;
      color: #158c1c;    
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -webkit-box-shadow: 0px 0px 5px 3px #22aadd;
      -moz-box-shadow: 0px 0px 5px 3px #22aadd;
      box-shadow: 0px 0px 5px 3px #22aadd;
   }
   
   #input-search {
      cursor: auto;
   }
   
   /*
    * Material-Icons - Fonts
    */
   .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

   .topnav {
      float: right;
      margin-top: -40px;
      margin-right: 40px;
   }
      
    .input-upload,
    .input-search {
        width: 500px;
        font-family: Barlow Condensed, sans-serif;
        color: #006CF0;
        margin-top: 25px;
        cursor: auto;
    }
    
    .submit-upload,
    .submit-search {
        font: normal 1.2em Barlow Condensed;
        color: #fff;
        background: #202D30;
        width: 200px;
        opacity: 0.5;
        border-radius: 8px;        
    }
    
    .submit-upload:hover,
    .submit-search:hover {
        opacity: 1;
        box-shadow: 0px 0px 10px 0px #22aadd;
    }
    
    .error-search { /* fehlermeldung wenn suche fehlschlägt */
        font: normal 1.2em Barlow Condensed;
        color: #D8706E;
        position: absolute;
        top: 250px;
        left: 50%;
        margin-left: -250px;
        width: auto;
        text-align: center;
        background-color: #343434;       
        border-radius: 8px;
        padding: 15px;
        -webkit-box-shadow: 0px 0px 5px 3px #22aadd;
        -moz-box-shadow: 0px 0px 5px 3px #22aadd;
        box-shadow: 0px 0px 5px 3px #22aadd;
    }
    
    /**
     * Cookie-Hinweis
     */
    #cookie { /* Cookie <div> */
      position: absolute;
      top: 50px;
      left: 0px;
      padding: 15px 0px 15px 0px;
      background: #21252f;
      -webkit-box-shadow: 0px 0px 5px 3px #006cf0;
      -moz-box-shadow: 0px 0px 5px 3px #006cf0;
      box-shadow: 0px 0px 5px 3px #006cf0;
      z-index: 999999;
   }
    
   #cookie .cookie-title { /* Titel */
      font: normal 1.2em Helvetica;
      color: #006CF0;
      margin: 0;
      padding-top: 3px;
   }
    
   #cookie .cookie-content { /* Inhalt des Hinweises */
      font: normal 1em Helvetica;
      color: #fff;
   }
    
   #cookie-button { /* Button zum bestätigen des Hinweises */
        font: normal 16px Helvetica;
        color: #fff;
        background: #202D30;
        width: 200px;
        height: 45px;        
        opacity: 0.5;
        border-radius: 8px;
   }
    
   #cookie-button:hover { /* Effekte des Buttons */
      opacity: 1;
      -webkit-box-shadow: 0 0 12px #22aadd;
      -moz-box-shadow: 0 0 12px #22aadd;
      box-shadow: 0 0 12px #22aadd;     
   }
}

/**
 * !!! TESTEN !!! PRÜFEN !!! ?? ppi !!! ?? device-width ?
 * Regeln für Windows Tablets mit einer Auflösung von 1280px
 * und einer waagrechten Ausrichtung des Geräts
 */
@media only screen and (width: 962px) {
   main {
      height: 560px;
   }
   
   object {
      width: 100%;
      height: 660px;
   }
   
   .tabs {
      margin-top: 28px;
      height: 725px;
      width: 100%;
   }    
}

@media only screen and (width: 1280px) {
   main {
      height: 550px;
   }
   
   object {
      width: 100%;
      height: 560px;
   }
   
   .tabs {
      margin-top: 28px;
      height: 617px;
      width: 100%;
   } 
}

@media only screen and (width: 1366px) {
   main {
      height: 518px;
   }
   
   object {
      width: 100%;
      height: 520px;
   }
   
   .tabs {
      margin-top: 28px;
      height: 585px;
      width: 100%;
   }  
}

@media only screen and (width: 1536px) {
   main {
      height: 625px;
   }
   
   object {
      width: 100%;
      height: 640px;
   }
   
   .tabs {
      margin-top: 28px;
      height: 695px;
      width: 100%;
   }     
}

@media only screen and (width: 1600px) {
   main {
      height: 695px;
   }
   
   object {
      width: 100%;
      height: 700px;
   }
   
   .tabs {
      margin-top: 28px;
      height: 770px;
      width: 100%;
   }  
}

@media only screen and (min-width: 1900px) { 
   main {
      /*
         Menuleiste - inaktiv
         Leseleiste - aktiv
      */
      height: 890px;
      
      /*
         Vollbild
      */
      /*height: 970px;*/
   }
   
   object {
      width: 100%;
      height: 790px;
   }
   
   .tabs {
      height: 845px;
      width: 100%;
   }
   
   #etiketten {
      display: flex;
      width: 50%;
      height: 140px;
      border: 1px solid #fff;
      border-radius: 8px;
      background: #fff;
      margin: 250px auto 0px auto;
      box-shadow: 0px 8px 16px 0px #006CF0;
   }
   
   .etiketten {
      margin: 39px auto 0px auto;
      width: 100%;
      height: 30px;
      padding: 15px;
      font: normal 14px QuickSand;
      border-top: 1px dotted #000;
      border-bottom: 1px dotted #000;
   }
   
   .etiketten input[type="text"] {
      width: 50%;  
   }
}