/* Login Page Styles */

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);}
#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/lighttheme/common/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; 
    width: 320px; 
    margin: 0 auto 4rem auto; 
    padding: 0 0 0 1rem; 
    position: relative; 
    top: 1.9rem;}
#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;}
#formcontrols .checkbox-group input {
    margin: 0.6rem 0.5rem 0.6rem 0; 
    transform: scale(1.3);}
#content fieldset label, #formcontrols .checkbox-group {
    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: 21em; 
    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: 3px 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, input[type=password]:focus {
    border: 3px solid var(--blue60); 
    color: var(--text-secondary);}
#document.mdx-cko input[type=text], 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 .arrow-right, #myproducts-buttons button .arrow-right {
    height: 16px; 
    width: 16px;
    background-image: url('../../../../presentation/images/theme/lighttheme/icons/ArrowRight_icon-on-color.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;
}

/* Media Queries */
@media all and (max-width: 567px) {
    #contact-support01.flex-container {flex-direction: column;}
    div#contact-support01 .flex-item-left {
      padding-right: 0;
      border-bottom: 1px solid var(--gray50);
      border-right: none;}
    div#contact-support01 .flex-item-right {padding-left: 0;}
}
@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 all and (min-width: 650px){
    #content {background-color: var(--background-login);}
    #section-01 {height: 593px;}
}
@media screen and (min-width: 672px){
  #content h2 { 
    font-size: var(--heading1-med-font-size);
    line-height: var(--heading1-med-line-height);}
}
@media screen and (min-width: 1312px){
  #content h2 { 
    font-size: var(--heading1-xlg-font-size);
    line-height: var(--heading1-xlg-line-height);}
  #wrapper-aside .support {
    font-size: 1rem;
    line-height: 1.5rem;}
  #wrapper-aside .legal-01 {
    font-size: 0.875rem;
    line-height: 1.125rem;
    letter-spacing: 0.01rem;}
}
@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);}
 }