@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  src: url(../../res/josefin-sans.ttf) format('truetype');
}

 html,body
 {
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
 }
 body
 {
   background-color: #002f6d;
   background-image: url(../../res/k-background.png);
   background-repeat: repeat;
   font-family: sans-serif;
   font-size: 14px;
 }
 
 #kp-logo
 {
   position: absolute;
   top: -50px;
   left: 50%;
   transform: translateX(-50%);
   width: 128px;
   height: 128px;
   z-index: 15;
 }
 #kp-logo svg
 {
   width: 128px;
   height: 86px;
 }
 #kp-logo span
 {
   font-family: 'Josefin Sans', sans-serif;
   font-size: 24px;
   display: block;
   position: absolute;
   top: 100px;
   left: 50%;
   transform: translateX(-50%);
   white-space: nowrap;
 }
 
 #submit-button
 {
   position: absolute;
   bottom: -33px;
   left: 50%;
   transform: translateX(-50%);
   width: 60px;
   height: 60px;
   border: 3px solid #fff;
   border-radius: 50%;
   background-color: #002f6d;
   color: #fff;
   z-index: 15;
 }
 #submit-button svg
 {
   position: absolute;
   top: 15px;
   left: 15px;
   width: 30px;
   height: 30px;
 }
 
 #spinner-overlay
 {
   box-sizing: border-box;
   z-index: 10;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255,255,255,0.7);
 }
 #spinner-overlay img
 {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 50px;
   height: 50px;
   transform: translateX(-50%) translateY(-50%);
 }

@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))
{
 #spinner-overlay
 {
  background-color: rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(0.5em);
  backdrop-filter: blur(0.5em);
 }
}

 #login-box
 {
   position: fixed;
   top: 50%;
   left: 50%;
   width: 400px;
   max-width: 90%;
   transform: translateX(-50%) translateY(-50%);
   background-color: #fff;
   border-radius: 12px;
 }
 
 .login-box
 {
   position: relative;
   border-radius: 12px;
   padding: 85px 12px 40px 12px;
 }
 .login-box form
 {
   display: block;
   padding: 0;
 }
 .login-box form::after
 {
   content: "";
   display: block;
   clear: both;
 }


 label
 {
   box-sizing: border-box;
   display: block;
   width: 80%;
   margin: 2px auto;
   padding: 0;
   font-size: 12px;
 }
 input
 {
   box-sizing: border-box;
   display: block;
   width: 80%;
   margin: 2px auto 12px auto;
   padding: 8px;
   font-size: 14px;
   border: 1px solid #002f6d;
   border-radius: 0.25em;   
 }
 
 #twofacode
 {
   width: 40%;
   font-size: 20px;
   margin: 12px auto;
   text-align: center;
 }
 
 #forgot-password
 {
   display: block;
   font-size: 12px;
   color: #00f;
   text-decoration: underline;
   cursor: pointer;
   float: right;
   margin-right: 10%;
 }
 
 .login-message
 {
   box-sizing: border-box;
   width: 80%;
   margin: 6px auto 12px auto;
   color: #a00;    
 }
 .login-message:empty
 {
   margin: 0;
   height: 0;
 }