@import url('../fonts/quicksand.css');
* {margin:0;padding:0; font-family: 'Quicksand', sans-serif; outline: none;}
body {height:100vh;width:100%; overflow:hidden;}

:root { --MINT_green: #00ff62; --MINT_red: #ff4f4f; }





#Container {background-image: url('../pic/background.jpg');height:calc(100vh - 45px);width:100vw;background-repeat: no-repeat;background-size: cover;position:relative;overflow:hidden;}

/* Packages */
#PackagesContainer {background-color: rgba(0,0,0,0.5);height:calc(100vh - 45px);width:100vw;position:absolute;left:0;top:0; transition:all 300ms linear; transform:translateY(-100vh); visibility: hidden; z-index:99999; overflow:auto;}
#PackagesContainer.focus {transform:translateY(0); visibility: visible;}
#PackagesSuche {font-size:14px; margin-top:25px; width:90%; margin-left:auto; margin-right:auto;}
#PackagesSuche input {border:none; padding:8px 16px; width:calc(100% - 32px);}
#PackagesContent {width:calc(100% - 100px); padding:50px; height:auto;}

#PackagesContent .package {float:left; padding:8px; background-color:#1f1f1f; width:150px; cursor:pointer; transition:all 650ms ease-in-out; margin-right:8px; margin-bottom:8px; transform:translate(0,50px); opacity:0;}
#PackagesContainer.focus .package {transform:translate(0,0); opacity:1;}
#PackagesContent .package .icon {height:45px; width:45px; margin-left:auto; margin-right:auto; background-size:contain; background-repeat:no-repeat;}
#PackagesContent .package .name {margin-top:8px; color:white; text-decoration: underline; text-align:center;}
/* ---Packages--- */

/* CookieAlert */
#CookieAlert {position:fixed;z-index:9999999;bottom:0;left:0;width:100vw;height:40px;background-color:#ccc;display:none;}
#CookieAlert.active {display:block;}

/* ---CookieAlert--- */


/* Content */
#Content {width:100%; height:100vh; overflow-y:auto;} /* display:grid, weil dann das overflow-x auch die Breite des Containers mit veraendert */
/* ---Content--- */



/* Login */
#Login {position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#ccc;background-image:url('../pic/overlayBackground.jpg');background-repeat: no-repeat;background-size:cover;z-index:999999;color:white;overflow-y:auto;}
#Login .holder {width:50%; height:auto; padding-top:30px;padding-bottom:30px;margin-left:auto;margin-right:auto;background-color:black;margin-top:50px;padding-left:30px;padding-right:30px;display:none;max-width:500px;}
#Login.login .holder {display:block;}
#Login .avatar {background-color:#fb2525;width:100px;height:100px;margin-top:-75px;border-radius:50px;margin-left:auto;margin-right:auto;background-image:url('../pic/avatar.png');background-size:50%;background-repeat:no-repeat;background-position: center;}
#Login h1 {text-align:center;margin-top:20px;font-size:30px;}
#Login p {font-size:18px;margin-top:12px;margin-bottom:2px;}
#Login input {width:100%; background:none;border:none;border-bottom: 1px solid #fff;outline:none;padding-top:8px;padding-bottom:4px;color:white; font-size:16px;}
#Login input:focus {border-bottom: 1px solid #3cceff;}
#Login .submit {border:none; margin-top:20px; background-color:#fb2525; cursor:pointer;padding-bottom:8px;border-radius: 50px; border-bottom:none !important;}
#Login .submit:hover, #Login .submit:focus {background-color:#fc5a5a;}
#Login a {margin-top:16px;display:block;color:darkgrey;text-decoration:none;font-size:12px;text-align:right;}
#Login .error {color:#fb2525;font-weight:bold;margin-top:24px;}
/* ---Login--- */


/* Alerts */
#Alerts {position: absolute; bottom:55px;right:0px;width:40%;max-height:calc(100vh - 45px); z-index:9999999;overflow:hidden;}
#Alerts .alert {cursor:pointer;margin-left:100%;border:1px solid #333333; min-height:50px;width:calc(100% - 2px);background-color:rgba(94, 94, 94,0.8); color:white; transition:all 500ms ease-in; overflow:hidden;}
#Alerts .alert:hover {background-color:rgba(126, 126, 126, 0.8);transform:translate(-100%,0);}
#Alerts .alert.fadein {transform:translate(-100%,0);}
#Alerts .alert.fadeout {transform:translate(0,0) !important;}
#Alerts .alert .bild {margin-left:2px; width:50px;height:50px;vertical-align: middle;}
#Alerts .alert.warning .bild {background-image: url('/pic/warning.png');}
#Alerts .alert .text {word-break: break-all;user-select: none;-moz-user-select: none;float:right;top:0;width:calc(100% - 60px);}
/* ---Alerts--- */


/* Buttons */
/* .image - kann man ein background-image machen, welches positioniert wird */
/* .dark - dunkles Design */
/* .green - gruenes Design */
/* .red - rotes Design */
.MINT_button {background-color:#fff; border:1px solid #ccc; color:black; border-radius:6px; cursor:pointer; box-sizing:border-box; padding:6px 10px; text-decoration: none; box-shadow:1px 1px 2px 0px #696969;}
.MINT_button:hover {border:1px solid #9c9c9c; background-color:#e0e0e0;}
.MINT_button:active {box-shadow: none; transform:translate(2px,2px);}
.MINT_button.image {background-repeat: no-repeat;background-size: 20px 20px; background-position: 8px 5px; padding-left:35px;}

/* Farben */
.MINT_button.dark {background-color:#5a6268; border:1px solid #4b5053; color: #fff;}
.MINT_button.dark:hover {background-color:#6c757d; border:1px solid #5f6569;}

.MINT_button.green {background-color:#00c22a; border:1px solid #00c92b; color: #fff;}
.MINT_button.green:hover {background-color: #00ca4e; border:1px solid #00d351;}

.MINT_button.red {background-color:#dd0000; border:1px solid #e60000; color: #fff;}
.MINT_button.red:hover {background-color: #ee0000; border:1px solid #ff0000;}
/* ---Farben--- */

.MINT_button:disabled {background-color: #ebebe4 !important; box-shadow:none; border:1px solid #ccc; color:#545454; cursor:not-allowed;}
.MINT_button.dark:disabled {background-color: #505050 !important; border:1px solid #ccc; color:#dadada;}
/* ---Buttons--- */ 

/* Cover */
.MINT_cover {position:fixed;top:0;left:0; transition:opacity 200ms ease-out; width:100vw;height:100vh;background-color:rgba(255, 255, 255, 0.8);z-index:9999999;}
.MINT_cover .body {background-color: #333; animation: MINT_cover-fadein 300ms ease-in-out; padding:16px; color:white; margin-left:auto; margin-right:auto; min-width:250px; margin-top:50vh;transform:translateY(-50%);}
.MINT_cover .body .accept, .MINT_cover .body .decline {display:inline-block; text-align:center; width:40%;}
.MINT_cover .body .accept {margin-left:5%;}
.MINT_cover .body .decline {margin-left:10%;}
.MINT_cover.fadeout {opacity:0;}
/* ---Cover--- */

/* CoverWithContent */
.MINT_cover.content .body {width:80%; max-height:80vh; overflow-y:auto;}
.MINT_cover.content .body .content {padding:8px; margin-bottom:8px;}
/* ---CoverWithContent--- */

/* Confirm */
.MINT_cover.confirm .body {max-width:600px; width:50%;}
.MINT_cover.confirm .body .question {width:100%; min-height:50px; margin-bottom:20px;}
/* ---Confirm---*/


@keyframes MINT_cover-fadein {
  0% {
    transform:scale(0) translateY(0);
    margin-top:0;
  }
  100% {
    transform:scale(1) translateY(-50%);
    margin-top:50vh;
  }
}












#MINT_Spinner {position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(255, 255, 255, 0.8);display:none;z-index:999999;}
#MINT_Spinner.active {display:block;}

.MINT_spinner {
    display:table;
    border-spacing: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin:auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
  }
  
  .MINT_spinner > div {
    background-color: #333;
    height: 100%;
    width: 6px;
    display: table-cell;
    
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }
  
  .MINT_spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  
  .MINT_spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }
  
  .MINT_spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }
  
  .MINT_spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }
  
  @-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
    20% { -webkit-transform: scaleY(1.0) }
  }
  
  @keyframes sk-stretchdelay {
    0%, 40%, 100% { 
      transform: scaleY(0.4);
      -webkit-transform: scaleY(0.4);
    }  20% { 
      transform: scaleY(1.0);
      -webkit-transform: scaleY(1.0);
    }
  }