/* IMPORTANT NOTES
================================================== */
/*
1. For any of the following properites, use variables from CC/Content/Themes/HMSPMS/variables.fonts.css:
- All colors (text, buttons, links, backgrounds, borders, focus styles, etc).
- All font properties (family, size, line height, weight)
2. There are different sets of variables, do not mix variables from different sets as it could result in accesibility/contrast and styling issues in this theme or the white label themes.
3. Icon images should be either spark icons or svg image mask so the color can be customized for white labels unless it's a logo.
4. Margin and padding should use rem units, this allows to scale the size based on font size, which could be different on white label themes. Convertion of common px units to rem:
3px: .1875rem
6px: .375rem
12px: .75rem
16px: 1rem
24px: 1.5rem
32px: 2rem
*/
/* #end IMPORTANT NOTES */

/**************************************************************
GLOBAL RESET
**************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

*, html {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

    *, *:before, *:after {
        box-sizing: inherit;
        -webkit-box-sizing: inherit;
        -moz-box-sizing: inherit;
    }

/* Login CSS */

.login-background {
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    top: 0;
}

    .login-background::before {
        background: var(--loginBackground);
        bottom: 0;
        content: '';
        display: block;
        height: 5000px;
        left: 10%;
        position: fixed;
        top: 100%;
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        width: 15000px;
        z-index: -1;
    }

    .login-background::after {
        background: var(--loginBakcgroundGradient);
        content: '';
        display: block;
        left: 0;
        height: 100%;
        top: 0;
        position: fixed;
        width: 100%;
        z-index: -1;
    }

body.login {
    font-family: var(--fontFamily);
    font-size: var(--fontSize);
    line-height: var(--lineHeight);
    background: var(--loginBodyBackground) !important;
    overflow: auto !important;
}

.login-container {
    background: var(--backgroundWhite);
    padding: 24px;
    max-width: 900px;
    border-radius: var(--borderRadius);
    margin: 2.5rem auto;
    margin-top: 6.25rem;
    border: 1px solid #E1E2E5;
    box-shadow: 0px 1px 12px 0px #12131514;
}

.login-logo img {
    width: 100%;
    max-width: var(--loginLogoWidth);
    height: auto !important;
    margin: 0 auto;
    margin-bottom: 1.875rem;
    display: block;
}

.login-logo h1 {
    font-weight: var(--fontWeightBold);
    color: var(--backgroundDark2);
    font-size: 1.7rem !important;
    font-family: Roboto Condensed,sans-serif !important;
}

/* Typography */
.login p {
    margin: .75rem 0 1rem 0;
}
#login-buttons {
    display: flex;
    justify-content: space-between;
}

.login-name h1 {
    display: none;
}

.login h1 {
    font-size: var(--fontSizeHeadingLarge);
    font-family: var(--fontFamily);
    line-height: var(--lineHeightHeading);
    text-align: center;
    margin-bottom: 1rem;
}

.login h3 {
    font-size: var(--fontSizeHeading);
    line-height: var(--lineHeightHeading);
}

/* Form */
.login-form {
    margin-top: 1.875rem;
}

/* Lang */
.login-lang ul {
    border-top: 1px solid var(--borderLightGray);
    padding-top: 1.25rem;
    margin-top: 1.875rem;
    list-style: none;
}

.login-lang li {
    font-size: var(--fontSizeSmall);
    display: inline-block;
    padding: .375rem .75rem;
}

    .login-lang li a {
        color: var(--textColorLink);
        text-decoration: underline;
        cursor: pointer;
        -webkit-transition: 1s ease;
        -moz-transition: 1s ease;
        -o-transition: 1s ease;
        transition: 1s ease;
    }

        .login-lang li a:hover {
            color: var(--textColorLinkHover);
        }

        .login-lang li a:active {
            color: var(--textColorLinkActive);
        }

/* Password rules */
ul#LoginCntrl_PasswordRulesBl {
    font-size: var(--fontSizeSmall) !important;
    font-style: normal !important;
}

    ul#LoginCntrl_PasswordRulesBl li {
        line-height: inherit;
        margin: 0 0 .5rem 1rem;
    }

/* Terms */
.login-terms {
    background: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    font-size: var(--fontSizeSmall);
    border: 0px;
    box-shadow: none;
}

    .login-terms p {
        color: var(--loginBackgroundText);
    }
/**************************************************************
INPUTS
**************************************************************/
label {
    display: block;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 96%;
    min-height: 50px;
}

.login input[type="submit"],
.login input[type="reset"],
.login input[type="button"] {
    padding: .875rem 1.875rem;
    text-transform: none;
}

.login-forgotpass a {
    margin: 0 0.25rem;
    font-size: var(--fontSizeSmall);
    color: var(--textColorLink);
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    transition: 1s ease;
}

    .login-forgotpass a:hover {
        color: var(--textColorLinkHover);
    }

    .login-forgotpass a:active {
        color: var(--textColorLinkActive);
    }

.login_buttons {
    display: flex;
    justify-content: space-between;
}

/**************************************************************
MOBILE
**************************************************************/
@media screen and (max-width: 640px) {
    .login h1 {
        font-size: var(--fontSizeHeading);
    }

    .login h1,
    .login h3 {
        text-align: center;
    }

    .login-container {
        padding: 1.5rem;
        border-radius: 0;
        margin: 0;
        margin-top: .1875rem;
    }
}

.login .buttonsContainer {
    float: right;
    padding: 1rem 1rem 1rem 0;
}

.login-container:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

.width100 {
    width: 100%;
}

.bottomPadding10, .bottomPadding10 td {
    padding-bottom: .75rem;
}

#RedirectMessageContainer span {
    color: var(--textColorWarning);
    font-size: var(--fontSizeLarge);
}

.fieldLabel_150 {
    width: 150px;
}

    .fieldLabel_150 label {
        display: inline;
    }

.marginBottom5 {
    margin-bottom: .375rem;
}

.marginTop10 {
    margin-top: .75rem;
}

#LoginCntrl_ViewCookiePolicyHpl {
    color: var(--textColorInfo);
}

.ui-check-circle-button {
    background: none;
    text-indent: 0;
    text-decoration: none !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-block;
    font-size: 20px !important;
    line-height: 1 !important;
    border-radius: 0 !important;
}

    .ui-check-circle-button:focus {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    .ui-check-circle-button::before {
        font-family: 'spark-icon-fill';
        content: '\f178';
    }

.trademark-sup {
    font-size: 60%;
    line-height: 0;
    position: relative;
    top: -.5em;
    vertical-align: baseline;
}
p#login_buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 2px;
}
.footer-parent {
    padding-left: 1rem;
    display: block !important;
    font-size: 16px !important;
}
.footer-1 {
    display: inline-block;
    background-image: url(images/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 50px;
    width: auto;
    min-width: 50px; /* Adjust based on your logo aspect ratio */
    vertical-align: middle;
    margin-right: 5px;
}

.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-content {
    flex: 1; 
}

.secondaryButton {
    background: var(--buttonSecondaryBackground) !important;
    color: var(--buttonSecondaryColor) !important;
    border: var(--buttonSecondaryBorder) !important;
    border-bottom-width: var(--buttonBorderBottomWidth) !important;
}