html, body {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #f0f2f5 !important;
    }
    .task-login #logo {
        position: relative !important;
        top: 0 !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
        max-height: 80px !important;
    }
    #login-form {
        position: relative !important;
        top: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #layout, #layout-content {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }
    #login-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 100vh !important;
        width: 100% !important;
    }
    #login-box {
        background: #ffffff !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        padding: 30px 40px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
        width: 100% !important;
        max-width: 400px !important;
        text-align: center !important;
        color: #333333 !important;
    }
    #login-box .input-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        position: relative !important;
        margin-bottom: 10px !important;
    }
    #login-box .input-group-prepend,
    #login-box .input-group-text {
        display: flex !important;
        align-items: center !important;
        padding: 6px 10px !important;
        background-color: #f1f3f4 !important;
        color: #555555 !important;
        border: 1px solid #ced4da !important;
        border-right: 0 !important;
        border-radius: 4px 0 0 4px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }
    #login-box input,
    #login-box .form-control,
    #login-box .input-group > input,
    #login-box .input-group > .form-control {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        border-radius: 0 4px 4px 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
        color: #333333 !important;
        border: 1px solid #ced4da !important;
        -webkit-text-fill-color: #333333 !important;
    }
    #login-box input:-webkit-autofill,
    #login-box input:-webkit-autofill:hover,
    #login-box input:-webkit-autofill:focus,
    #login-box input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
        -webkit-text-fill-color: #333333 !important;
        background-color: #ffffff !important;
        caret-color: #333333 !important;
    }
    #login-box .form-group,
    #login-box .row {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }
    html.dark-mode #login-box {
        background: #ffffff !important;
        color: #333333 !important;
    }
    html.dark-mode #login-wrapper {
        background: #f0f2f5 !important;
    }
    html.dark-mode #login-box input,
    html.dark-mode #login-box .form-control,
    html.dark-mode #login-box .input-group-text,
    html.dark-mode #login-box .input-group-prepend {
        background-color: #ffffff !important;
        color: #333333 !important;
        -webkit-text-fill-color: #333333 !important;
        border-color: #ced4da !important;
    }
    html.dark-mode #login-box input:-webkit-autofill,
    html.dark-mode #login-box input:-webkit-autofill:hover,
    html.dark-mode #login-box input:-webkit-autofill:focus,
    html.dark-mode #login-box input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
        -webkit-text-fill-color: #333333 !important;
        caret-color: #333333 !important;
    }
    .login-disclaimer {
        margin-top: 15px !important;
        font-size: 12px !important;
        color: #666666 !important;
        text-align: center !important;
    }
    #login-footer {
        margin-top: 10px !important;
        font-size: 11px !important;
        color: #999999 !important;
        text-align: center !important;
    }