css
/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Asap', sans-serif;

    /*
     * BEAUTIFUL BLUE BACKGROUND
     */
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 210, 255, 0.35) 0%,
            rgba(0, 210, 255, 0.10) 25%,
            transparent 45%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(0, 140, 255, 0.40) 0%,
            rgba(0, 140, 255, 0.10) 30%,
            transparent 50%
        ),
        linear-gradient(
            135deg,
            #031b3d 0%,
            #063b73 30%,
            #0066a8 60%,
            #008fd0 85%,
            #00b4e8 100%
        );

    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    min-height: 100vh;

    overflow-x: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
   ========================================================= */

body::before {
    content: "";

    position: fixed;

    width: 700px;
    height: 700px;

    top: -350px;
    left: -200px;

    background: rgba(0, 220, 255, 0.12);

    border-radius: 45%;

    transform: rotate(25deg);

    filter: blur(5px);

    pointer-events: none;

    z-index: 0;
}

body::after {
    content: "";

    position: fixed;

    width: 800px;
    height: 800px;

    right: -350px;
    bottom: -400px;

    background: rgba(0, 190, 255, 0.15);

    border-radius: 50%;

    filter: blur(15px);

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   LOGIN FORM
   ========================================================= */

.login {
    overflow: hidden;

    background-color: #ffffff;

    padding: 40px 30px 30px 30px;

    border-radius: 10px;

    /*
     * CENTER LOGIN BOX
     */
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    width: 400px;

    box-sizing: border-box;

    -webkit-transform: translate(-50%, -50%) !important;
    -moz-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
    -o-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.30),
        0 5px 15px rgba(0, 80, 140, 0.20);

    z-index: 1000;
}


/* =========================================================
   LOGIN WAVES
   ========================================================= */

.login::before,
.login::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    border-top-left-radius: 40%;
    border-top-right-radius: 45%;
    border-bottom-left-radius: 35%;
    border-bottom-right-radius: 40%;

    z-index: -1;
}

.login::before {
    left: 15%;
    bottom: -45%;

    background-color: rgba(69, 105, 144, 0.15);

    -webkit-animation: wawes 6s infinite linear;
    -moz-animation: wawes 6s infinite linear;
    animation: wawes 6s infinite linear;
}

.login::after {
    left: 15%;
    bottom: -55%;

    background-color: rgba(2, 128, 144, 0.20);

    -webkit-animation: wawes 7s infinite;
    -moz-animation: wawes 7s infinite;
    animation: wawes 7s infinite;
}


/* =========================================================
   LOGIN INPUT
   ========================================================= */

.login > input {
    font-family: 'Asap', sans-serif;

    display: block;

    border-radius: 5px;

    font-size: 16px;

    background: white;

    width: 100%;

    border: 0;

    padding: 10px;

    margin: 15px 0;

    box-sizing: border-box;
}


/* =========================================================
   GOVERNMENT LABEL
   ========================================================= */

.government-label {
    font-size: 9px;

    margin-left: 45%;
}


/* =========================================================
   LOGIN TABLE
   ========================================================= */

.login-table {
    width: 100%;

    border-collapse: collapse;
}

.login-button-column {
    text-align: left;
}

.forgot-password-column {
    text-align: right;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.login-button {
    font-family: 'Asap', sans-serif;

    cursor: pointer;

    color: #ffffff;

    font-size: 13px;

    text-transform: uppercase;

    width: 80px;

    border: 0;

    padding: 10px 0;

    margin-top: 0;

    margin-left: -5px;

    border-radius: 5px;

    background-color: #f45b69;

    font-weight: 100;

    -webkit-transition: background-color 300ms;
    -moz-transition: background-color 300ms;
    transition: background-color 300ms;
}

.login-button:hover {
    background-color: #e94d5c;
}


/* =========================================================
   FORGOT PASSWORD LINK
   ========================================================= */

.forgot-password-link {
    color: #7e7e7e;

    font-weight: 100;

    text-decoration: none;

    font-size: 13px;
}

.forgot-password-link:hover {
    text-decoration: underline;
}


/* =========================================================
   CONTACT INFORMATION
   ========================================================= */

.contact-label {
    font-size: 9px;
}

.sales-email {
    color: rgb(59, 60, 138);

    text-decoration: none;
}

.sales-email:hover {
    text-decoration: underline;
}


/* =========================================================
   SEPARATOR
   ========================================================= */

.line {
    position: relative;

    height: 1px;

    width: 100%;

    margin: 30px 0;

    background-color: #aab0b2;

    font-size: 13px;
}

.line::before {
    content: 'or passwordless auth with';

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    background-color: #b6d4db;

    color: #aab0b2;

    padding: 0 15px;

    white-space: nowrap;
}


/* =========================================================
   iDSAYA TABLE
   ========================================================= */

.sso-table {
    width: 100%;

    border-collapse: collapse;
}

.sso-button-column {
    text-align: center;
}

.what-is-idsaya-column {
    text-align: center;
}


/* =========================================================
   iDSAYA BUTTON
   ========================================================= */

.idsaya-sso-button {
    font-family: 'Asap', sans-serif;

    cursor: pointer;

    color: #ffffff;

    font-size: 16px;

    width: 200px;

    border: 0;

    padding: 10px 0;

    margin-top: 10px;

    margin-left: -5px;

    border-radius: 5px;

    background-color: #00a7e1;

    font-weight: 100;

    -webkit-transition: background-color 300ms;
    -moz-transition: background-color 300ms;
    transition: background-color 300ms;
}

.idsaya-sso-button:hover {
    background-color: #0095c9;
}


/* =========================================================
   WHAT IS iDSAYA
   ========================================================= */

.what-is-label {
    font-size: 9px;

    font-weight: 100;
}

.idsaya-link {
    color: #000000;

    font-size: 9px;

    text-decoration: none;
}

.idsaya-link:hover {
    text-decoration: underline;
}


/* =========================================================
   FORGOT PASSWORD DIALOG
   ========================================================= */

.customHeader .ui-dialog-titlebar {
    background-color: #b6d4db;

    color: #a3b3b5;
}


/* =========================================================
   FORGOT PASSWORD GRID
   ========================================================= */

.forgot-password-grid {
    width: 100%;
}

.email-label {
    font-family: 'Asap', sans-serif;
}

.forgot-email-input {
    width: 200%;

    margin-bottom: 3px;
}


/* =========================================================
   FORGOT PASSWORD BUTTONS
   ========================================================= */

.forgot-submit-button {
    margin-top: 10px;

    color: #313131;

    font-size: 16px;

    font-family: 'Asap', sans-serif;
}

.forgot-close-button {
    margin-left: -125px;

    margin-top: 10px;

    color: #313131;

    font-size: 16px;

    font-family: 'Asap', sans-serif;
}


/* =========================================================
   LOADING OVERLAY
   ========================================================= */

.loading-overlay {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 100%;

    background: rgba(255, 255, 255, 0.85);

    display: none;

    align-items: center;
    justify-content: center;

    z-index: 99999;
}

.loading-overlay.active {
    display: flex;
}

.loading-container {
    display: flex;

    align-items: center;
    justify-content: center;
}

.loading-container img {
    width: 200px;
    height: 200px;
}


/* =========================================================
   PRIMEFACES OVERRIDES
   ========================================================= */

.ui-inputfield {
    font-family: 'Asap', sans-serif;
}

.ui-button {
    font-family: 'Asap', sans-serif;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    text-decoration: none;

    color: rgba(255, 255, 255, 0.6);

    right: 10px;
    bottom: 10px;

    font-size: 12px;
}


/* =========================================================
   WAVES ANIMATION
   ========================================================= */

@-webkit-keyframes wawes {

    from {
        -webkit-transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes wawes {

    from {
        -moz-transform: rotate(0);
    }

    to {
        -moz-transform: rotate(360deg);
    }
}

@keyframes wawes {

    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* =========================================================
   MOBILE / SMALL SCREEN
   ========================================================= */

@media screen and (max-width: 500px) {

    .login {
        width: calc(100% - 30px);

        padding: 30px 20px 25px 20px;
    }

}

/* =========================================================
   CUSTOM PRIMEFACES UPLOAD BUTTON
   ========================================================= */

/*
 * Container for the custom upload icon.
 */
.custom-upload-container {
    position: relative;
    display: inline-block;

    width: 50px;
    height: 50px;

    cursor: pointer;
}


/*
 * Your existing upload_butn.png image.
 */
.custom-upload-image {
    position: absolute;

    top: 0;
    left: 0;

    width: 50px;
    height: 50px;

    z-index: 1;

    cursor: pointer;
}


/*
 * PrimeFaces fileUpload component.
 *
 * IMPORTANT:
 * We don't use display:none here.
 * The PrimeFaces choose button must remain clickable.
 */
.custom-upload-control {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 50px !important;
    height: 50px !important;

    z-index: 10 !important;

    opacity: 0 !important;

    cursor: pointer !important;

    overflow: hidden !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}


/*
 * PrimeFaces button bar.
 */
.custom-upload-control .ui-fileupload-buttonbar {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 50px !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}


/*
 * PrimeFaces Choose button.
 *
 * This is the actual clickable area.
 */
.custom-upload-control .ui-fileupload-choose {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 50px !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    cursor: pointer !important;

    border: 0 !important;

    background: transparent !important;
}


/*
 * Hide PrimeFaces button text.
 */
.custom-upload-control .ui-button-text {
    display: none !important;
}


/*
 * Hide PrimeFaces icon.
 */
.custom-upload-control .ui-icon {
    display: none !important;
}


/*
 * Hide PrimeFaces upload content.
 */
.custom-upload-control .ui-fileupload-content {
    display: none !important;
}


/*
 * Hide selected file list.
 */
.custom-upload-control .ui-fileupload-files {
    display: none !important;
}


/*
 * Hide individual file rows.
 */
.custom-upload-control .ui-fileupload-row {
    display: none !important;
}

/* =========================================================
   SOURCE FILE LABEL
   ========================================================= */

.source-file-label {
    font-weight: bold;
}


/* =========================================================
   REQUIRED STAR
   ========================================================= */

.required-star {
    color: red;
    font-weight: bold;
    margin-left: 3px;
}


/* =========================================================
   EXCEL FORMAT MESSAGE
   ========================================================= */

.excel-format-label {
    color: #777;
    font-size: 12px;
    margin-left: 5px;
}

/* Growl message - use flex layout */
.ui-growl-item-container .ui-growl-item {
    display: flex !important;
    align-items: flex-start !important;
    padding: 15px !important;
}

/* Icon */
.ui-growl-item-container .ui-growl-icon {
    position: static !important;
    float: none !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 10px 0 0 !important;
}

/* Message area */
.ui-growl-item-container .ui-growl-message {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
}

/* Title */
.ui-growl-item-container .ui-growl-title {
    display: block !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    line-height: 40px !important;
}

/* Detail message */
.ui-growl-item-container .ui-growl-message p {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}