* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
        body {
            margin: 0;
            padding: 0;
            background-color: #121212; 
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: sans-serif;
            color: #888;
        }
        .form-container {
            width: 100%;
            max-width: 700px;
            padding: 10px;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            min-height: 400px;        
            color: black;
        }
        iframe {
            width: 100%;
            height: 800px;
            border: none;
            border-radius: 8px;
            color: white;
        }
    /* Footer Styling */
        footer {
            text-align: center;
            position: fixed;
            bottom: 1rem;
        }

        .footer-text {
            font-size: x-small;
            letter-spacing: 0.5px;
        }
        .hide{display: none !important;}
        .loader-wrapper{
            position: absolute;
              top: 50%;
                left: 50%;
                transform: translate(-50%, -50%); 
        }
        /* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  width: 32px;
  aspect-ratio: 1;
  --_g: no-repeat radial-gradient(farthest-side,#000 90%,#0000);
  background: var(--_g), var(--_g), var(--_g), var(--_g);
  background-size: 40% 40%;
  animation: l46 1s infinite;
}
@keyframes l46 {
  0%  {background-position: 0 0      ,100% 0,100% 100%,0 100%}
  40%,
  50% {background-position: 100% 100%,100% 0,0    0   ,0 100%}
  90%,
  100%{background-position: 100% 100%,0 100%,0    0   ,100% 0}
}