* {
            box-sizing: border-box;
        }

        html,
        body,
        .app {
            width: 100%;
            height: 100%;
        }

        body {
            margin: 0;
            background: #eeeff4;
            color: #1f2937;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 400;
        }

        .app {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .login-card {
            width: min(450px, 100%);
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 14px 48px rgba(34, 35, 58, .18);
            padding: 40px 55px 45px;
        }

        .login-card h1 {
            margin: 0 0 24px;
            font-size: 24px;
            line-height: 1.1;
            text-align: center;
        }

        .form-group {
            margin-bottom: 16px;
        }

        label {
            display: inline-block;
            margin-bottom: 6px;
            font-weight: 600;
        }

        .form-control {
            width: 100%;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            color: #111827;
            font-size: 16px;
            padding: 11px 12px;
        }

        .form-control:focus {
            border-color: #2554ff;
            box-shadow: 0 0 0 3px rgba(37, 84, 255, .12);
            outline: none;
        }

        .password-control {
            display: flex;
            gap: 8px;
        }

        .password-control .form-control {
            flex: 1;
        }

        .password-toggle {
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            background: #f8fafc;
            color: #1f2937;
            cursor: pointer;
            min-width: 64px;
            padding: 0 12px;
        }

        .warning {
            color: #8b0000;
            font-weight: 600;
            line-height: 1.5;
        }

        .static {
            min-height: 118px;
            padding-top: 10px;
        }

        .centered {
            text-align: center;
        }

        .errorfield {
            border-color: #8b0000;
            border-width: 2px;
        }

        .remember-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 18px 0;
        }

        .remember-row input {
            width: 22px;
            height: 22px;
        }

        .remember-row label {
            margin: 0;
        }

        .login-button {
            width: 100%;
            border: 1px solid #1833ff;
            border-radius: 6px;
            background: #fff;
            color: #1833ff;
            cursor: pointer;
            font-size: 20px;
            font-weight: 600;
            padding: 12px 16px;
        }

        .login-button:hover,
        .login-button:focus {
            background: #1833ff;
            color: #fff;
            outline: none;
        }

        .login-link-row {
            min-height: 24px;
            margin-top: 20px;
            text-align: center;
        }

        .link {
            color: #1f2937;
            cursor: pointer;
            display: none;
            font-weight: 600;
        }

        .link:hover {
            color: #1833ff;
        }

        .busy {
            position: fixed;
            inset: 0;
            z-index: 999;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, .75);
            text-align: center;
        }

        .lds-spinner {
            display: inline-block;
            position: relative;
            width: 80px;
            height: 80px;
        }

        .lds-spinner div {
            transform-origin: 40px 40px;
            animation: lds-spinner 1.2s linear infinite;
        }

        .lds-spinner div:after {
            content: " ";
            display: block;
            position: absolute;
            top: 3px;
            left: 37px;
            width: 6px;
            height: 18px;
            border-radius: 20%;
            background: #fff;
        }

        .lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; }
        .lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; }
        .lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -.9s; }
        .lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -.8s; }
        .lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -.7s; }
        .lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -.6s; }
        .lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -.5s; }
        .lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -.4s; }
        .lds-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -.3s; }
        .lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -.2s; }
        .lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -.1s; }
        .lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }

        @keyframes lds-spinner {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }

        @media only screen and (max-width: 600px) {
            .app {
                padding: 18px;
            }

            .login-card {
                padding: 30px 25px;
            }
        }