body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: #112b36;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    background:
        radial-gradient(ellipse at 80% 20%, #dff6f8, #f6f8f7 55%)
        #f6f8f7 !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

#top {
    color: #112b36;
    font-weight: bold;
}

#top a {
    color: #087e98;
}

#top img {
    margin: 18px 0;
}

/* Content */
#content {
    display: block;
    width: min(420px, calc(100% - 32px));
    margin: 64px auto 32px;
}

.ui-widget {
    font-size: 14px !important;
}

body .ui-inputfield {
    font-size: 1.4rem;
}

.EmptyBox10 { display: block; width: 100%; height: 10px; overflow: hidden; }

.EmptyBox20 { display: block; width: 100%; height: 20px; overflow: hidden; }

.Container100 { width: 100%; float: left; }

.Wid90 { width: 90%; }

.TexAlCenter { text-align: center; }

.CardLogin {
    padding: 24px 8px;
    display: block;
    background-color: #ffffff;
    color: #526a75;
}

body .ui-panel .ui-panel-content {
    border: 1px solid #dce7e9;
    border-radius: 20px;
    background-color: #ffffff;
    color: #112b36;
    padding: 20px;
    line-height: 1.5;
    box-shadow: 0 24px 70px -40px #163e4b35;
}

/* Alertflex brand refresh: shared by localized sign-in and session pages. */
body .ui-button {
    background: #087e98;
    border-color: #087e98;
    border-radius: 8px;
    color: #fff;
}

body .ui-button.ui-state-hover {
    background: #06657a;
    border-color: #06657a;
}

body .ui-inputfield.ui-state-focus {
    border-color: #087e98;
    box-shadow: 0 0 0 2px #0891b233;
}

body .ui-button.ui-state-focus {
    box-shadow: 0 0 0 3px #0891b24d;
}