:root {
    /* Fonts */
    --hxgn-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --hxgn-font-semibold: -apple-system, BlinkMacSystemFont, "Segoe UI Semibold", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /* Teal Color */
    --hxgn-teal: #49c3a5;
    --hxgn-dark-teal: #006450;
    /*Red Color*/
    --hxgn-red: #eb0029;
    --hxgn-dark-red: #7a232e;
    /* Standard Colors */
    /** Background Colors **/
    --hxgn-bg-white: #FFFFFF;
    --hxgn-bg-gray: #F7F7F7;
    --hxgn-highlight-blue: #335CA5;
    /** Header Colors **/
    --hxgn-header-black: #000000;
    --hxgn-header-grey: #242425;
}

body {
    min-height: 700px;
    min-width: 405px;
    background: var(--hxgn-red);
    background: -moz-linear-gradient(top, var(--hxgn-teal) 0%, var(--hxgn-teal) 60%, var(--hxgn-dark-teal) 100%);
    background: -webkit-linear-gradient(top, var(--hxgn-teal) 0%, var(--hxgn-teal) 60%, var(--hxgn-dark-teal) 100%);
    background: linear-gradient(to bottom, var(--hxgn-teal) 0%, var(--hxgn-teal) 60%, var(--hxgn-dark-teal) 100%);
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    /* padding: 0; */
    /* color: #333333; */
    font-family: var(--hxgn-font-family);
}

#titlebar {
    padding: 0px 20px;
    height: 45px;
    background: var(--hxgn-bg-white)
}

    #titlebar > img.brand-logo {
        height: 20px;
    }

.hxgn-logo-bug-gray {
    height: 30px;
}

.hxgn-button-primary {
    cursor: pointer;
    min-height: 30px;
    width: auto;
    min-width: 130px;
    position: relative;
    display: block;
    padding: 4px 10px;
    overflow: hidden;
    border-width: 0;
    outline: none;
    box-shadow: 0 1px 4px rgb(0 0 0 / 60%);
    background-color: var(--hxgn-bg-gray);
    transition: background-color 0.3s;
    border: 1px solid transparent;
    color: var(--hxgn-bg-white);
    background-color: var(--hxgn-highlight-blue);
    font: 400 16px Arial;
}

.login-wrapper {
    background-color: #ffffff;
    width: 436px;
    overflow: hidden;
    height: max-content;
    -moz-height: max-content;
    -webkit-box-shadow: 5px 5px 5px 0px rgb(0 0 0 / 50%);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px 0px rgb(0 0 0 / 50%);
}

.content-warpper {
    padding: 30px
}

.form-group {
    border: none;
}

.form-input {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #ced4da;
    padding: 0;
    outline: none;
}

    .form-input:focus {
        color: #495057;
        box-shadow: none;
        border-bottom-width: 2px;
    }

.branding > img.product-logo {
    height: 60px;
    margin-right: 14px;
}

.branding > img.brand-logo {
    height:16px;
}

.content {
    margin-top: 60px;
}

.required:after {
    content: " *";
    color: red;
}

#copyright {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Semibold", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 10px;
    margin-top: 30px;
    color: #333333;
}

.error-msg {
    font-weight: bold;
    font-size: 14px;
    color: var(--hxgn-dark-red);
    -webkit-animation: flash linear 1s 1;
    animation: flash linear 1s 1;
    display: block;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

@-webkit-keyframes flash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.1;
    }

    100% {
        opacity: 1;
    }
}