@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Source+Sans+Pro:400,600&display=swap');
/* On fontsize-base = 16px:

1.125rem = 18px
1.250rem = 20px
1.313rem = 21px
1.375rem = 22px
1.500rem = 24px
1.625rem = 26px

*/
:root {
  --fontsize-base: 16px;
}
/* .fontsize2 system*/
/* font calculations */
/*  TOC

*COLORS
 - standards 
 - color slots
 - html, body, globals
 - sections
 - text  
 - boxes 
 - buttons
 - scorepanel
 - misc
*MARGINS & PADDINGS 
 - section margins
 - text
 - boxes
*TEXT
- textsizes
*NAVBAR
*FOOTER
*MISC
 - patterns
 - border
 - shadows
 - breakpoints
*QUIZAPP
*TEMATISK

 */
/*
@margin-bottom-headings: 0.6em;
*/
/*@shadow-text-standard: 
0 0 10px white,
0 0 30px white,
0 0 30px white;
*/
/* margin between q_text and options */
#spa_loginpanel {
  background-color: #111111;
  font-family: 'Source Sans Pro', sans-serif;
  color: #333333;
  font-weight: 400;
  line-height: 1.2em;
  font-size: 1.125rem;
  z-index: 9999;
}
#spa_loginpanel p {
  font-family: 'Source Sans Pro', sans-serif;
  color: #333333;
  font-weight: 400;
}
#spa_loginpanel .panel {
  border-radius: 0;
  color: #333333;
  margin-top: 3.9375rem;
}
@media (max-width: 768px) {
  #spa_loginpanel .panel {
    margin-top: 15px;
  }
}
#spa_loginpanel .margin-top-login {
  margin-top: 3rem;
}
@media (max-width: 768px) {
  #spa_loginpanel .margin-top-login {
    margin-top: 2rem;
  }
}
#spa_loginpanel .margin-bottom-login {
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  #spa_loginpanel .margin-bottom-login {
    margin-bottom: 2rem;
  }
}
#spa_loginpanel h1 {
  font-family: 'Montserrat', sans-serif;
  color: #FF5000;
  font-weight: 700;
  font-size: 3rem;
}
#spa_loginpanel h1.ingress {
  font-family: 'Montserrat', sans-serif;
  color: #FF5000;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 1.7rem;
  font-weight: 400;
  color: #333333;
}
@media (max-width: 768px) {
  #spa_loginpanel h1 {
    font-size: 2.2rem;
  }
  #spa_loginpanel h1.ingress {
    font-size: 1.3rem;
  }
}
#spa_loginpanel a {
  color: #333333;
  text-decoration: none;
}
#spa_loginpanel a:hover {
  text-decoration: underline;
  color: #333333;
}
@media (max-width: 768px) {
  #spa_loginpanel a {
    text-decoration: underline;
  }
}
#spa_loginpanel #message-section,
#spa_loginpanel #message-section a {
  font-size: 1.25rem;
  line-height: 1.3em;
  color: #787878;
}
#spa_loginpanel #problems-section h4 {
  color: #333333;
}
#spa_loginpanel #logo-section .spama-lenke {
  display: inline-block;
  margin-top: 5px;
}
#spa_loginpanel #logo-section .spama-logo {
  width: 100px;
}
.btn-microsoft,
.btn-microsoft-login,
.btn-microsoft-logout,
.btn-microsoft-gotocourse {
  height: 41px;
  display: block;
  cursor: pointer;
}
.btn-microsoft-login {
  width: 228px;
  background: url('login.svg') 0 0;
}
.btn-microsoft-login:hover {
  background: url('login.svg') 0 -41px;
}
.btn-microsoft-logout {
  width: 110px;
  background: url('logout.svg') 0 0;
}
.btn-microsoft-logout:hover {
  background: url('logout.svg') 0 -41px;
}
.btn-microsoft-gotocourse {
  width: 162px;
  height: 45px;
  margin-bottom: 5px;
  background: url('goto_course.svg') 0 0;
}
.btn-microsoft-gotocourse:hover {
  background: url('goto_course.svg') 0 -45px;
}