body {
    background-color: var(--background-micromedex); 
    min-height: 102%; 
    margin: 0;
    padding: 0; 
    width: auto;
    color:var(--text-primary);
    font-family: var(--allianceno1-regular);
    font-size: var(--div-font-size);}
#wrapper {
    background-color: var(--background-login);}
.login-wrapper .cds--text-input__field-wrapper {
    position:relative;
}
.login-wrapper .cds--text-input__invalid-icon {
	position: absolute;
	inset-inline-end: 2rem;
	fill: #f1c21b;
	inset-block-start: 23%;
}

.login-wrapper svg.cds--text-input__invalid-icon path[data-icon-path="inner-path"] {
	fill: black !important;
}

#wrapper-contentmask {
    position: relative;
    width: 100%;}
#marketingmessage, #document.mdx-logout article.support {
    display: none;}
#document.mdx-logout #content.content-homepage {
    background-image: none; padding-bottom: 0rem;}
#document.mdx-logout #content fieldset#myproducts {
    top: 0;
    background-color: var(--background-login);}
#section-02 fieldset {
    background-color: var(--background-login);
    border: none; 
    border-radius: 1rem; 
    width: 320px; 
    margin: 0 auto 4rem auto; 
    padding: 0 0 0 1rem; 
    position: relative; 
    top: 1.9rem;}
#submit-login input {
    margin: 0.2rem 0 1rem 0;}
#content.content-gateway {
    background-repeat: no-repeat, repeat;
    background-position: 99% 80%;
    background-image:url('../../../../presentation/images/theme/light/brand/Pill-pattern-full.svg');
}
#content {
    position: relative; 
    top: 0; 
    padding-bottom: 4rem;}
#content section {
    margin: auto; 
    padding: 0; 
    clear: both;}
#section-01 {
    background-color: var(--earthWhite); 
    height: 532px; 
    max-width: 448px; 
    border-radius: 1rem; 
    box-shadow: 2px 3px 40px 3px rgba(0, 0, 0, 0.06);}
#content fieldset {
    background-color: var(--layer-01);
    border: none; 
    margin: 0 auto 4rem auto;
    padding: 0 0 0 1rem; 
    position: relative; 
    top: 1.9rem;
    width: 100%;
    max-width: 22rem;
}
#content h2 {
    position: relative; 
    color: var(--text-primary); 
    font-family: var(--allianceno1-light); 
    font-size: var(--heading1-font-size); 
    font-style: var(--heading1-font-style); 
    font-weight: var(--heading1-font-weight); 
    line-height: var(--heading1-line-height); 
    letter-spacing: var(--heading1-letter-spacing);
    margin: 0px;}
#content fieldset p {
    color: var(--text-primary);
    font-size: var(--div-font-size); 
    font-style: var(--div-font-style); 
    font-weight: var(--div-font-weight); 
    line-height: var(--div-line-height); 
    letter-spacing: var(--div-letter-spacing);
    margin: 1rem 0.2rem 1rem 0.2rem;}
#formcontrols {
    position: relative; 
    top: 0.6rem;
    margin-bottom: 2.5rem;
}
#formcontrols .checkbox-group input {
    margin: 0.6rem 0.5rem 0.6rem 0; 
    transform: scale(1.3);}
#content fieldset label, #formcontrols .checkbox-group {
    display: block;
    color: var(--text-primary);
    font-family: var(--allianceno1-regular);
    font-size: var(--label1-font-size);
    font-style: var(--label1-font-style);
    font-weight: var(--label1-font-weight);
    line-height: var(--label1-line-height);
    letter-spacing: var(--label1-letter-spacing);
    margin: 0 0 0 0.2rem;
}
#submit-login input {
    margin: 0.2rem 0 1rem 0;}
input[type=text], input[type=password] {
    width: 20.5em;
    padding: 0.6875rem 1rem;
    font-size: 0.875rem;  
    outline: none;
    color: var(--text-primary);
    font-family: var(--allianceno1-regular);
    font-size: var(--div-font-size); 
    font-style: var(--div-font-style); 
    font-weight: var(--div-font-weight); 
    line-height: var(--div-line-height);
    letter-spacing: var(--div-letter-spacing);}
#content input[type=text], input[type=password] {
    border: 0 solid var(--earthWhite);
    border-bottom: 1px solid var(--gray50);
    background-color: var(--layer-02);}
#content input[type=text].warning, #content input[type=password].warning  {
    border: 3px solid var(--red60)!important; 
    color: var(--gray60);}
#content input[type=text]:focus, #content input[type=password]:focus {
    border: 3px solid var(--blue60); 
    color: var(--text-secondary);}
#document.mdx-cko input[type=text], #document.mdx-cko input[type=password] {
	width: 21em;}
::-ms-input-placeholder {
    color: var(--gray60);} /* Edge 12-18 */
::placeholder {
    color: var(--gray60);}
#submit-login .error {
    color: var(--red60);
    font-family: var(--allianceno1-regular);
    font-size: var(--label1-font-size);
    font-style: var(--label1-font-style);
    font-weight: var(--label1-font-weight);
    line-height: var(--label1-line-height);
    letter-spacing: var(--label1-letter-spacing);
    width: 18rem;
    margin-top: 0.25rem;
    display: block;
    padding-left: 0.188rem;}
#submit-login button, #myproducts-buttons button{
    margin: 1.5rem 0rem; 
    padding: 0.75rem 0.81rem; 
    width: 18rem; 
    border: none; 
    font-family: var(--allianceno1-regular);
    font-size: var(--div-font-size); 
    font-style: var(--div-font-style);
    font-weight: var(--div-font-weight); 
    line-height: var(--div-line-height); 
    letter-spacing: var(--div-letter-spacing);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    align-self: stretch;
    justify-content: space-between;
    fill: var(--button-fill);
    color: var(--button-color);
    background-color: var(--button-primary-background);
    cursor: pointer;
}
#myproducts-buttons button{
    position: relative; top: -1rem;}
#submit-login button:hover, #myproducts-buttons button:hover {
    background-color: var(--button-primary-hover);
}
#submit-login button:focus, #myproducts-buttons button:focus {
    background-color: var(--button-primary-focus);
    outline: 2px solid var(--button-primary-focus-border);
    outline-offset: 2px; 
}
#submit-login button:active, #myproducts-buttons button:active {
    background-color: var(--button-primary-active);
    outline:none;
}

#submit-login button:disabled, #myproducts-buttons button:active {
    background-color: var(--button-disabled-background);
    color: var(--button-disabled-color);
    cursor: default;
}

#section-01.idp-login {
    height: auto;
    padding: unset;
}

#content.content-gateway {
    display: flex; flex-direction: column;
}

#react-login-form {
    min-width: 320px;
    width: 448px;
}



#submit-login button .arrow-right, #myproducts-buttons button .arrow-right {
    height: 16px; 
    width: 16px;
    background-image: url('../../../../presentation/images/theme/light/icon-button/ArrowRight_icon-on-color.svg');}

#submit-login button:disabled .arrow-right, #myproducts-buttons button:disabled .arrow-right {
    height: 16px;
    width: 16px;
    background-image: url('../../../../presentation/images/theme/light/icon-button/ArrowRight_button-login-disabled.svg');}

#submit-login button span {
    padding: 0 0 0 0px!important;}
a.link{
    color: var(--icon-primary); 
    font-style: normal; 
    font-weight: 500;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-decoration-color: var(--icon-primary);}
a.link label{ cursor: pointer;}
#content a:focus, #wrapper-aside a:focus{
    outline-color: var(--link-border-focus);}
.clearer {
    clear: both; line-height: 0; font-size: 0;} /* Check if really required */
#content .grouping {
    border-top: 1px solid var(--gray20); 
    width: 18rem; 
    padding-top: 1.3rem; 
    margin-top: 2rem;}
#content .grouping a {
    font-family: var(--allianceno1-regular);
    font-size: var(--div-font-size); 
    font-style: var(--div-font-style); 
    font-weight: var(--div-font-weight); 
    line-height: var(--div-line-height);
    letter-spacing: var(--div-letter-spacing); 
    text-decoration: var(--link-text-decoration-line);
    color:var(--link-primary);}
#content .grouping a:hover{
    color: var(--link-primary-hover);
}
#content .grouping a:visited{
    color: var(--link-visited);
}
#content .grouping a:active{
    color: var(--link-inverse);
}
#wrapper-aside .support {
    background-color: var(--sand);
    color: var(--text-primary);
    font-family: var(--allianceno1-regular);
    font-size: var(--p-font-size);
    font-style: var(--p-font-style);
    font-weight: var(--p-font-weight);
    line-height: var(--p-line-height);
    letter-spacing: var(--p-letter-spacing);
    margin: 0rem;
    padding: 1rem 2rem 1rem 2rem;}
#contact-support01 * {box-sizing: border-box;}
#contact-support01.flex-container {
    display: flex; 
    flex-direction: row;
    max-width: 70ch;
    margin-right: auto; 
    margin-left: auto; }
#contact-support01 .flex-item-left {
    flex: 50%; 
    padding-right: 2em; 
    border-right: 1px solid var(--gray50);}
#contact-support01 .flex-item-right {
    flex: 50%; 
    padding-left: 2em;}
#wrapper-aside .support a {
    white-space: nowrap; 
    display: inline-block; 
    padding-right: 0.4rem;
    text-decoration: var(--link-text-decoration-line);
    color:var(--link-primary);}
#wrapper-aside .support a:hover{
    color: var(--link-primary-hover);
}
#wrapper-aside .support a:visited{
    color: var(--link-visited);
}
#wrapper-aside .support a:active{
    color: var(--link-inverse);
}
#wrapper-aside .legal-01 {
    background-color: var(--background-micromedex);
    color: var(--text-secondary);
    font-family: var(--allianceno1-regular);
    font-size: var(--legal1-font-size);
    font-style: var(--legal1-font-style);
    font-weight: var(--legal1-font-weight);
    line-height: var(--legal1-line-height);
    letter-spacing: var(--legal1-letter-spacing);
    padding: 1.5rem 1.0rem 3.5rem 2rem;}
    
#wrapper-aside .legal-01 span {
     max-width: 80ch;
     display: block;
     margin-left: auto;
     margin-right: auto;
}

#login-form-label {
    color: #525252 !important;
}

#login-error-label {
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.32px !important;

}

/* Media Queries */
@media (min-width: 320px) {
    #content fieldset { 
        max-width: 19rem; 
        margin-top: 0; 
        margin-right: 16px; 
        margin-bottom: 2.5rem; 
        margin-left: 16px;
    }
   
    #react-login-form {
        width: 100%;
    }
}

@media (min-width: 380px) {
    #content fieldset {
        padding: 0 0 0 1rem; 
        margin-right: auto; 
        margin-left: auto;
    }
 
    #react-login-form {
        width: 380px;
    }
}

@media all and (min-width: 583px) {
    #section-01 {
        height: 550px;
    }

    #content fieldset {
        top: 2.6rem;
    }

    #wrapper-aside .support {
        padding: 1rem 2rem 1rem 3rem;
    }

    #wrapper-aside .legal-01 {
        padding: 1.5rem 2.0rem 3.5rem 3.1rem;
    }
}
@media (min-width: 567px) {
    #content fieldset {margin-bottom: 4rem;}
    #content {background-color: var(--background-login);}
    #section-01 {height: 593px;}
}

@media (min-width: 672px) {
    #content fieldset {max-width: 19rem;}
}

@media all and (min-width:1600px){
    #wrapper {
      margin: auto;
      max-width: 1600px;}
}
@media screen and (min-width: 1784px) {
    #content h2 {
        font-size: var(--heading1-max-font-size);
        line-height: var(--heading1-max-line-height);
        margin-left: auto;
        margin-right: auto;
        max-width: 302px;
    }
}

@media (max-width: 566px) {
    #contact-support01.flex-container {
        flex-direction: column;
    }
    #contact-support01 .flex-item-left {
        border-bottom: 1px solid var(--gray50);
        border-right: none;
        padding-right: 0;
    }
    #contact-support01 .flex-item-right {
        padding-left: 0;
    }
}