#login {
      height: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f0f0f0;
      font-family: sans-serif;
    } 
   
   .login-box {
      min-width: 250px;
      width: 50%;
      padding: 2rem;
      background: white;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      text-align: center;
      border: 1px solid #666;
      position: relative;
    }
    #responder {
     position:absolute;
     top:9px;
     right:9px;    
    }
/* HTML: <div class="loader"></div> */
.loader {
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 6px solid #0074d9;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}

.centerit {
  text-align: center;
}

#topfix {
 position: fixed;
 z-index: 100000;
 background: #252525;
 top: 0;
 left: 0;
 width: 100%;
 min-height: 33px;
}
#topinner {
 padding: 16px 14px;
 height: 50px;
}
#topinner * {
  display: inline-block;
  vertical-align: middle;
}
.logoutbtn {
  float: right;
  margin-top: -10px;
}
.username {
 font-weight: bold;
 color: #fff;
 margin-top: -10px;
 font-size: 85%;
}
#topinner button {
 margin-right: 6px;
}
#topnext {
 height: 55px;
}
#maincontent {
 width: 94%;
 margin: 2rem auto;
 max-width: 1000px;
}
#maincontent p {
 line-height: 1.5;
}
.xl {
 font-size: 200%;
}
#menue {
 position: fixed;
 z-index: 100000000;
 top: 3px;
 right: 12px;
 width: 260px;
 padding: 20px;
 background-color: #252525;
 display: none;
 border-bottom-left-radius: 24px;
 border-bottom-right-radius: 24px;
}

#menue a {
 display: block;
 padding: 7px;
 color: #fff;
 padding: 6px;
 border: 1px solid #fff;
 margin: 12px 0;
}

#menue a:hover {
 background: #fff;
 color: #252525;
}