@font-face { font-family: 'Roboto Black'; font-style: normal; font-weight: normal; src: local('Roboto Black'), url('assets/Roboto-Black.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Light'; font-style: normal; font-weight: normal; src: local('Roboto Light')url('assets/Roboto-Light.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: normal; src: local('Roboto'), url('assets/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: bold; src: local('Roboto'), url('assets/Roboto-Bold.ttf') format('truetype'); }

html,body,div,input,select,option { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 12pt; }
html,body { min-height: 100%; }
body { background: #505050; }

h1 { font-family: 'Roboto Light', Arial, Helvetica, sans-serif; margin-top: 1em; margin-bottom: 0.5em; line-height: 1.3em; font-size: 18pt; font-weight: normal; cursor: default; }

#wrapper { position: relative; padding: 1px; }
#window { display: none; position: relative; margin: 160px auto 0 auto; padding: 0 60px; max-width: 480px; background: linear-gradient(#e5f3ff, #4e8fc3); border-top: 1px solid #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
#logo { display: block; margin: 30px 0; height: 47px; background: url(img/wasp.png) center center no-repeat; }

#form { }
#form label { display: block; margin-bottom: 0.5em; }
#form label>span { display: inline-block; vertical-align: top; width: 60%; line-height: 1.8em; }
#form label>span:first-child { width: calc(40% - 20px); padding-right: 20px; font-family: 'Roboto Light'; text-align: right; color: #444; }
#form var,
#form input { display: block; width: calc(100% - 20px); height: 1.8em; padding: 0 10px; line-height: 1.8em; background: rgba(255, 255, 255, 0.3); border: 0; border-radius: 3px; }
#form var { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#submit { padding: 10px 0 30px 0; text-align: right; }
#submit input { display: inline-block; width: auto; padding: 0 2em; line-height: 1.8em; color: #116ab2; background: #fff; border: 0; border-radius: 1em; cursor: pointer; }
#uploadform { display: none; }

#spinner { display: none; height: 40px; padding: 90px; }
#spinner:after { content: ''; display: block; width: 40px; height: 40px; background-color: #fff; margin: 0 auto; animation: sk-rotateplane 1.2s infinite ease-in-out; }

#msg { display: none; padding: 90px; line-height: 1.2em; text-align: center; color: #fff; background-repeat: no-repeat; background-size: 3em; background-position: center 20px; }
#msg.success { background-image: url(img/msg-icon-success.svg); }
#msg.error { background-image: url(img/msg-icon-error.svg); }

#hint { display: none; position: absolute; left: 10px; bottom: 10px; right: 10px; padding: 15px 20px; line-height: 1.2em; color: #6c602f; background: #fff568; border: 1px solid #6d5f26; border-radius: 3px; }

#footnote { padding: 1em; font-family: 'Roboto Light'; font-size: 0.85em; text-align: center; color: #666; cursor: default; }
#footnote a { text-decoration: none; color: #666; cursor: pointer; }
#footnote a:hover { text-decoration: none; color: #fff; }

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

@media (max-width: 1100px) {
}

@media (max-width: 550px) {
  #login { padding-top: 0; }
  .cookiebar #login { padding-top: 60px; }
}