.about-attr-reference a,#diagnosis-footer .diagnosis-footer a{
    color:inherit !important;
    font-size:inherit !important;
    font-family:inherit !important;
}
#container-f5476fa003,
#container-0844f3be00 {
  position: fixed;
  width: -webkit-fill-available;
  z-index: 10;
}

#header {
  position: fixed;
  width: -webkit-fill-available;
  z-index: 10;
}

#attr-sitemap .site-map-heading {
  text-align: center;
  font: normal normal bold 40px/45px Kanit;
  letter-spacing: 0px;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 1;
  margin-top: 5em;
  font-family: "Kanit-Bold";
  height: 100px;
}

#attr-sitemap #container-04d4c6ba83,
#container-2b63040620 {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/container-bg-sitemap.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  min-height: 787px;
  padding-bottom: 30px;
}

#attr-sitemap #text-9c9d74775e li:after,
#text-3b902de85c li:after {
  content: "";
  height: 13px;
  width: 21px;
  background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/diagnosing-aattr/open-arrow-right-Icon.png);
  display: inline-block;
  margin-left: 15px;
}

#attr-sitemap #text-3b902de85c li:nth-child(5):after {
    display: none;
}
#attr-sitemap #container-0adb8afb25 .aem-Grid--default--12 div#text-9c9d74775e,
.aem-Grid--default--12 div#text-3b902de85c {
  display: flex;
  align-items: center;
  max-width: 607px;
  height: 260px;
  margin: auto;
  border-radius: 30px 30px 30px 0px;
  background: #e2fcfd;
  justify-content: space-between;
  border:1px solid #E34AEE;
}
#attr-sitemap #text-9c9d74775e ul,
#text-3b902de85c ul {
  padding-left: 80px;
  padding-right: 70px;
  display: flex;
  flex-wrap: wrap;
}
#attr-sitemap #text-9c9d74775e li,
#text-3b902de85c li {
  margin-bottom: 10px;
  width: 50%;
}
#attr-sitemap #text-9c9d74775e a,
#text-3b902de85c a {
  text-align: left;
  font: normal normal normal 20px/26px Kanit Medium;
  letter-spacing: -0.4px;
  color: #00215f;
  opacity: 1;
  font-family: "Kanit-Medium";
  text-decoration: underline;
}
#attr-login .footer-ul-li li:nth-child(5){
    display:none;
}

#attr-sitemap .sitemap-only-mobile{
        display:none;
    }


/* form css */

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/arrow-dropdown.png");
  background-repeat: no-repeat;
  background-position-x: 99%;
  background-position-y: 5px;
}
select:focus {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/arrow-updown.png");
  background-repeat: no-repeat;
  background-position-x: 99%;
  background-position-y: 5px;
}
.cmp-dynamicform-v2
  .cmp-dynamicform__generated-form
  .has-error
  .cmp-dynamicform__control-label {
  color: #151515 !important;
}
p.cmp-dynamicform__generated-form-error {
  color: #cc0a0a !important;
  font-family: "Kanit-Light";
}
.text-danger {
  color: #151515 !important;
  position: relative;
  left: -3px;
}
.form-links {
  color: #000;
  text-decoration: underline;
}
/* ends */
#attr-sitemap #container-cd6cd83e60,
#attr-thankyou #container-cd6cd83e60 {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/container-bg-sitemap.png);
  background-repeat: no-repeat;
}

#attr-sitemap #attr-header-test .cmp-navigation__item {
  background-color: unset;
}

#attr-sitemap #attr-header-test {
  background: none;
}

#attr-thankyou #container-7ac9d074c5 {
  min-height: 697px;
}

#attr-sitemap .site-map-heading img {
  width: 240px;
  margin-bottom: 32px;
}

#attr-sitemap .site-map-heading h2 {
  font-size: 40px;
}
#attr-footer-section .footer-second-paragraph {
  font-family: "Kanit-Regular";
}

@media (min-width: 1441px) {
  #attr-sitemap #container-cd6cd83e60,
  #attr-thankyou #container-cd6cd83e60 {
    background-position: center center;
    background-size: cover;
  }
}

@media only screen and (min-width: 745px) and (max-width: 320px) {
  #attr-inform .azcl-columns__base {
    padding-top: 20%;
  }
}
@media only screen and (max-width: 334px) {
  #attr-inform .azcl-column-par2 {
    width: 300px;
  }
}
@media only screen and (max-width: 375px) {
  #attr-sitemap #container-cd6cd83e60,
  #attr-thankyou #container-cd6cd83e60 {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/mobile-sky-bg.png);
    background-position-y: -27px;
  }
}

@media only screen and (max-width: 991px) {
    
    #attr-sitemap .sitemap-only-desktop{
        display:none;
    }
    #attr-sitemap .sitemap-only-mobile{
        display:block;
    }
  #attr-sitemap .site-map-heading img {
    width: 100%;
  }

  #attr-inform #footer-style {
    top: 32px;
  }

  #attr-inform #stay-container-thank {
    margin-bottom: 10px;
    margin-top: 20px;
  }

  #attr-inform #container-cd6cd83e60 {
    max-height: 1200px;
    background-position: -200px 0px;
  }

  #attr-inform .azcl-columns__base {
    padding: 40px 10px 0px 10px;
  }

  #attr-sitemap .site-map-heading {
    margin-top: 10%;
  }

  #attr-sitemap #text-b459a4ff7b ul {
    padding-left: 29px;
    padding-right: 41px;
  }

  #attr-sitemap #text-b459a4ff7b li {
    text-align: center;
  }

  #attr-sitemap .site-map-heading p {
    margin-left: 5px;
    margin-right: 5px;
  }

  #attr-sitemap .site-map-heading h2 {
    margin-top: 30px;
    font-size: 30px;
    line-height: 35px;
        margin-left: 0.7em;
  }

  #attr-sitemap #container-1785d54ec7 {
    margin: 10px 15px 0px;
    min-height: 420px;
  }
  
    #attr-sitemap #container-0adb8afb25 .aem-Grid--default--12 div#text-9c9d74775e, .aem-Grid--default--12 div#text-3b902de85c{
        margin: 0 24px;
    }
    #attr-sitemap #text-9c9d74775e ul, #text-3b902de85c ul{
        display:block;
        padding: 0 35px;
    }
    #attr-sitemap #text-9c9d74775e li, #text-3b902de85c li {
        width: 100%;
    }
    #attr-sitemap #text-9c9d74775e li, #text-3b902de85c li {
        margin-bottom: 20px;
    }
}

/* css for 404 page  */

#page-404 #container-cd6cd83e60 {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/404-background.png);
  background-position-y: top;
}

#page-404 #attr-header-test .cmp-navigation__item {
  background-color: unset;
}

#page-404 #attr-header-test {
  background: none;
}

#page-404 #container-685f17e1b3 > .aem-Grid--default--12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 610px;
}

#page-404 #text-1932f7de8f > p {
  height: 486px;
}

#page-404 #text-1932f7de8f img {
  width: 574px;
  height: 486px;
  right: 0;
  position: absolute;
  margin-top: 20px;
}

#page-404 #container-685f17e1b3 {
  min-height: 610px;
}

#page-404 .sorry-text {
  margin-left: 57px;
  padding-left: 40px;
}

#page-404 .sorry-text h3 {
  color: var(--unnamed-color-ffffff);
  text-align: left;
  font: normal normal bold 29px/32px Kanit;
  letter-spacing: 0px;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 1;
}

#page-404 .sorry-text p {
  text-align: left;
  font: normal normal normal 16px/18px Kanit;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
  margin-top: 36px;
}

#page-404 .sorry-text p:last-child {
  margin-top: 20px;
}

#page-404 .sorry-text a {
  background: linear-gradient(white, white) padding-box,
    linear-gradient(to right, #f599fc 0%, #556aff 50%, #75f2fb 100%) border-box;
  border-radius: 21px;
  opacity: 1;
  border: 2px solid transparent;
  padding-left: 38px;
  padding-right: 38px;
  padding-top: 7px;
  padding-bottom: 7px;
  text-align: left;
  font: normal normal normal 16px/26px Kanit;
  color: #00215f;
  font-family: "Kanit";
}

#page-404 .mobile-only {
  display: none;
}

@media (min-width: 1441px) {
  #page-404 #container-cd6cd83e60 {
    background-size: 143%;
  }
}

@media only screen and (max-width: 375px) {
  #page-404 #container-cd6cd83e60 {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/mobile-bg.png);
  }
}

@media only screen and (max-width: 991px) {
  #page-404 #container-685f17e1b3 > .aem-Grid--default--12 {
    display: block;
  }

  #attr-sitemap #container-b82ed5bf8d {
    min-height: 700px;
  }
  #attr-sitemap .site-map-heading {
    margin-top: 35%;
    text-align:left;
  }
  #page-404 #attr-header-test {
    background: #001234;
  }

  #page-404 .mobile-only {
    display: block;
  }

  #page-404 #text-1932f7de8f > p {
    text-align: center;
  }

  #page-404 #text-1932f7de8f img {
    display: none;
  }

  #page-404 .sorry-text {
    margin-left: 0;
    padding-left: 0;
  }

  #page-404 #text-1932f7de8f > p {
    height: auto;
  }

  #page-404 .sorry-text h3,
  #page-404 .sorry-text p {
    text-align: center;
  }

  #page-404 .mobile-only {
    text-align: center;
    font: normal normal bold 155px/184px Kanit SemiBold;
    letter-spacing: 0px;
    color: #ffffff;
    margin-top: 80px;
    opacity: 0.98;
    font-family: "Kanit-SemiBold";
  }

  #page-404 #container-cd6cd83e60 {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/mobile-bg.png);
    background-repeat: no-repeat;
    background-size: 130%;
    background-position: -54px 0px;
  }

  #page-404 .sorry-subheading {
    width: 50%;
    margin-left: 90px;
    margin-right: 90px;
    margin-bottom: 43px;
  }
  #page-404 p.sorry-subheading {
    margin: 36px auto 43px !important;
  }
  #attr-sitemap
    #container-eb8db0eeaf
    .aem-Grid--default--12
    div#text-abb908b4ac {
    width: 343.3px;
  }
  #attr-sitemap #text-abb908b4ac ul {
    padding: 0 41px;
  }
  #attr-sitemap #text-abb908b4ac li {
    width: 100%;
  }
}

@media only screen and (min-width: 1200px) {
  #page-404 #container-685f17e1b3 {
    min-height: 665px;
  }
}

@media only screen and (min-width: 745px) and (max-width: 830px) {
  #attr-inform .sub-heading p {
    padding-right: 54px;
  }

  #attr-sitemap #container-1785d54ec7 {
    width: 400px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 745px) and (max-width: 320px) {
  #attr-inform .azcl-columns__base {
    padding-top: 20%;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  #attr-inform .azcl-column-par2 {
    margin-right: 15px;
  }
  #attr-sitemap #container-1785d54ec7 {
    max-width: 90%;
    margin: 0 auto;
  }
  .about-attr-reference {
    padding: 0px 15px;
  }
  .footer-container {
    margin: 0px 15px;
  }
  #attr-inform .azcl-columns__base {
    margin: 0px 15px;
  }
}
@media only screen and (min-width: 320px) and (max-width: 700px) {
  #page-404 #container-cd6cd83e60 {
    background-size: 117%;
  }
}

@media only screen and (min-height: 970px) {
  #page-404 #container-685f17e1b3 {
    min-height: 1132px;
    padding-top: 247px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1440px) {
  #page-404 #container-cd6cd83e60 {
    background-size: 208%;
  }
}

@media (max-width: 767px) {
  #attr-sitemap #attr-header-test {
    background: rgba(0, 18, 52, 0.9);
  }
}

/******************************  New Login Start  ******************************/

body#new-login {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: #000000;
}

#new-login *,
#new-login *::before,
#new-login *::after {
  box-sizing: border-box;
}

#new-login .root {
  display: block !important;
}

#new-login .us-healthcare li:first-child,
#new-login .bg-stay,
#new-login .footer-ul-li li:nth-child(5),
#new-login .open-menu,
#new-login .main-menu {
  display: none;
}

#new-login .top-menu ul.us-healthcare {
  max-width: 1070px;
}

#new-login .mobile-image {
  display: none;
}

/* Self-certification component */
#new-login .cmp-selfcertification.cmp-selfcertification--inpage {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
}

#new-login .cmp-selfcertification .modal-box {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#new-login
  .cmp-selfcertification.cmp-selfcertification--inpage
  label.control-label {
  display: none;
}

#new-login
  .cmp-selfcertification.cmp-selfcertification--inpage
  .form-control,
#new-login input#self-certification-text-field {
  display: block;
  float: none;
  width: 271px;
  max-width: 271px;
  height: 46px;
  margin: 0 0 20px;
  padding: 10px 20px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  outline: none !important;
  color: #b1aaaa;
  font-family: "Kanit-Regular";
  font-size: 14px;
  text-align: center;
}

#new-login
  .cmp-selfcertification.cmp-selfcertification--inpage
  .form-control::placeholder {
  color: #b1aaaa;
  font-family: "Kanit-Regular";
}

#new-login
  .cmp-selfcertification.cmp-selfcertification--inpage
  .cmp-selfcertification__continue {
  display: block;
  width: 142px;
  margin: 0;
  border-radius: 40px;
  background: #656efa;
  color: #ffffff;
  font-family: "Kanit-SemiBold";
  font-size: 16px;
  text-transform: uppercase;
}

#new-login .cmp-selfcertification #textField-error-invalid,
#new-login .cmp-selfcertification #textField-error {
  position: absolute;
  top: 48px;
  left: 0;
  width: 271px;
  max-width: 271px;
  margin: 0;
  color: #f55b5b !important;
  font-family: "Kanit-LightItalic";
  font-size: 14px;
  text-align: center;
}

html[lang="fr"]
  #new-login
  .cmp-selfcertification
  #textField-error-invalid,
html[lang="fr"] #new-login .cmp-selfcertification #textField-error {
  font-size: 9px;
}

/* Shared text styles */
#new-login .pink-text-heading {
  color: #ef90f8;
}

#new-login .banner-info-text-home,
#new-login .banner-subheading-home {
  color: #ffffff;
  font-family: "Kanit-SemiBold";
}

#new-login .login-sub-heading {
  color: #ffffff;
  font-family: "Kanit-SemiBold";
  text-align: center;
  text-transform: uppercase;
}

#new-login .card-one,
#new-login .card-two {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 1px solid #656efa;
  border-radius: 30px 30px 30px 0;
  background: #dde0ee;
  text-align: center;
}

#new-login .card-one {
  padding: 15px 24px 40px;
}

#new-login .card-two {
  padding: 25px 24px 40px;
}

#new-login .card-one-title,
#new-login .card-two-title {
  color: #00215f;
  font-family: "Kanit-Medium";
  font-size: 20px !important;
  line-height: 22px;
  text-transform: uppercase;
}

#new-login .card-one-title {
  margin-top: 5px;
}

#new-login .card-two-title {
  margin-top: 15px;
}

#new-login .card-one-icon {
  height: 129px;
  margin: auto;
}

#new-login .card-two-icon {
  height: 110px;
  margin: auto;
}

/* =========================================================
   DESKTOP AND LAPTOP
   ========================================================= */

@media screen and (min-width: 992px) {

  #new-login .login-main,
  #new-login #Login-bg {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #new-login #Login-bg .cmp-container__backgroundImage--enabled {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(620px, 48vw, 790px) !important;
    min-height: 620px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center bottom !important;
  }

  #new-login #banner_text_right.cmp-container {
    position: absolute !important;
    top: clamp(65px, 7vw, 115px) !important;
    left: max(40px, calc((100% - 1120px) / 2)) !important;
    width: 390px !important;
    max-width: 390px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 3 !important;
  }

  #new-login #banner_text_right .login-right,
  #new-login .hero-banner-txt {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 390px !important;
    max-width: 390px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  #new-login h1 {
    margin: 0 0 28px !important;
    font-size: clamp(42px, 3.2vw, 53px) !important;
    line-height: 0.84 !important;
    text-align: left !important;
  }

  #new-login h1 .medium-heading {
    display: block !important;
    margin-top: 22px !important;
    font-size: clamp(31px, 2.4vw, 40px) !important;
    line-height: 1.02 !important;
  }

  #new-login .banner-info-text-home,
  #new-login .banner-subheading-home {
    width: 340px !important;
    max-width: 100% !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 20px !important;
    text-align: left !important;
  }

  #new-login .banner-info-text-home {
    margin: 0 0 14px !important;
  }

  #new-login .banner-subheading-home {
    margin: 0 0 22px !important;
  }

  #new-login div#self-fragment {
    position: absolute !important;
    top: clamp(380px, 31vw, 475px) !important;
    left: max(40px, calc((100% - 1120px) / 2)) !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    float: none !important;
    width: 271px !important;
    min-width: 271px !important;
    max-width: 271px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 5 !important;
  }

  #new-login div#self-fragment.cmp-container,
  #new-login div#self-fragment > .aem-Grid,
  #new-login div#self-fragment > .cmp-container,
  #new-login div#self-fragment .experiencefragment,
  #new-login div#self-fragment .cmp-experiencefragment,
  #new-login div#self-fragment .cmp-experiencefragment--self-certification,
  #new-login div#self-fragment .self-certification,
  #new-login div#self-fragment .cmp-selfcertification,
  #new-login div#self-fragment .cmp-selfcertification--inpage,
  #new-login div#self-fragment .modal-box,
  #new-login div#self-fragment form,
  #new-login div#self-fragment .cmp-selfcertification__form,
  #new-login div#self-fragment .cmp-selfcertification__actions {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 271px !important;
    min-width: 271px !important;
    max-width: 271px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    transform: none !important;
  }

  #new-login div#self-fragment .aem-Grid,
  #new-login div#self-fragment [class*="aem-GridColumn"] {
    width: 271px !important;
    min-width: 0 !important;
    max-width: 271px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #new-login div#self-fragment .cmp-selfcertification__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #new-login div#self-fragment .form-control,
  #new-login div#self-fragment input#self-certification-text-field {
    width: 271px !important;
    min-width: 271px !important;
    max-width: 271px !important;
    margin: 0 0 20px !important;
  }

  #new-login
    div#self-fragment
    .cmp-selfcertification__continue {
    align-self: flex-start !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    margin: 15px -5px !important;
  }

  #new-login .bottom-section-home {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    /*padding: 28px 24px 90px !important;*/
    background: #000 !important;
  }

  #new-login .login-sub-heading {
    margin: 0 0 20px !important;
    padding: 0 !important;
    font-size: 30px !important;
    line-height: 34px !important;
  }

  #new-login .bottom-section-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(880px, 100%) !important;
    max-width: 880px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #new-login .bottom-section-items {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #new-login .card-one,
  #new-login .card-two {
    min-width: 0 !important;
    min-height: 250px !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1250px) {
  #new-login #Login-bg .cmp-container__backgroundImage--enabled {
    height: 650px !important;
    min-height: 650px !important;
  }

  #new-login #banner_text_right.cmp-container {
    top: 58px !important;
    left: 32px !important;
  }

  #new-login div#self-fragment {
    top: 405px !important;
    left: 32px !important;
  }

  #new-login h1 {
    font-size: 43px !important;
    line-height: 38px !important;
  }

  #new-login h1 .medium-heading {
    font-size: 33px !important;
    line-height: 34px !important;
  }
}

@media screen and (min-width: 1600px) {
  #new-login #Login-bg .cmp-container__backgroundImage--enabled {
    height: 790px !important;
    min-height: 790px !important;
  }

  #new-login #banner_text_right.cmp-container {
    top: 115px !important;
  }

  #new-login div#self-fragment {
    top: 475px !important;
  }
}

/* =========================================================
   TABLET AND MOBILE
   Final order:
   heading over hero image -> centered text -> form -> convenient access
   ========================================================= */

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

  #new-login {
    padding-top: 0 !important;
  }

  #new-login #header,
  #new-login #mobile-menu {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
  }

  #new-login .main-menu {
    display: block !important;
    background: transparent !important;
  }

  #new-login .open-menu {
    display: none !important;
  }

  #new-login .top-menu ul.us-healthcare {
    justify-content: flex-end !important;
  }

  #new-login .login-main,
  #new-login #Login-bg,
  #new-login #Login-bg .cmp-container__backgroundImage--enabled {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #new-login #Login-bg .cmp-container__backgroundImage--enabled {
    background-image: none !important;
  }

  #new-login #banner_text_right,
  #new-login #banner_text_right.cmp-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  #new-login #banner_text_right .login-right,
  #new-login .login-right {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
    overflow: visible !important;
  }

  /*
   * Allows h1 and the two text blocks to be positioned
   * independently around the mobile image.
   */
  #new-login .hero-banner-txt {
    display: contents !important;
  }

  /* Mobile hero image */
  #new-login .mobile-image {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    transform: none !important;
  }

  /* Heading overlays the upper-left of the mobile hero image */
  #new-login h1 {
    position: absolute !important;
    top: 18px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 4 !important;
    display: block !important;
    width: auto !important;
    max-width: 310px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: clamp(34px, 9.7vw, 42px) !important;
    line-height: 0.95 !important;
    text-align: left !important;
    transform: none !important;
  }

  #new-login h1 .pink-text-heading {
    display: inline !important;
    color: #ef90f8 !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  #new-login h1 .medium-heading {
    display: block !important;
    width: 100% !important;
    margin: 26px 0 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: clamp(25px, 7vw, 31px) !important;
    line-height: 1.08 !important;
    text-align: left !important;
  }

  /* Centered descriptions below hero image */
  #new-login .banner-info-text-home,
  #new-login .banner-subheading-home {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: calc(100% - 40px) !important;
    max-width: 332px !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: "Kanit-SemiBold" !important;
    font-size: 16px !important;
    line-height: 20px !important;
    text-align: center !important;
    transform: none !important;
  }

  #new-login .banner-info-text-home {
    order: 2 !important;
    margin: 24px auto 20px !important;
  }

  #new-login .banner-subheading-home {
    order: 3 !important;
    margin: 0 auto 24px !important;
  }

  /* Licence form */
  #new-login div#self-fragment {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: calc(100% - 40px) !important;
    max-width: 332px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 48px !important;
    padding: 0 !important;
    float: none !important;
    transform: none !important;
    visibility: visible !important;
    z-index: 2 !important;
  }

  #new-login div#self-fragment.cmp-container,
  #new-login div#self-fragment > .aem-Grid,
  #new-login div#self-fragment > .cmp-container,
  #new-login div#self-fragment .aem-Grid,
  #new-login div#self-fragment [class*="aem-GridColumn"],
  #new-login div#self-fragment .experiencefragment,
  #new-login div#self-fragment .cmp-experiencefragment,
  #new-login div#self-fragment .cmp-selfcertification,
  #new-login div#self-fragment .cmp-selfcertification--inpage,
  #new-login div#self-fragment .modal-box,
  #new-login div#self-fragment form,
  #new-login div#self-fragment .cmp-selfcertification__form,
  #new-login div#self-fragment .cmp-selfcertification__actions {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 332px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    transform: none !important;
  }

  #new-login div#self-fragment .modal-box {
    display: block !important;
    border: 0 !important;
    background: transparent !important;
  }

  #new-login div#self-fragment .cmp-selfcertification__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #new-login div#self-fragment .form-control,
  #new-login div#self-fragment input#self-certification-text-field {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 332px !important;
    height: 46px !important;
    margin: 0 auto 20px !important;
    padding: 10px 15px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    transform: none !important;
  }

  #new-login
    div#self-fragment
    .cmp-selfcertification__continue {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    float: none !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  #new-login div#self-fragment #textField-error-invalid,
  #new-login div#self-fragment #textField-error {
    position: absolute !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 332px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Convenient access section */
  #new-login .bottom-section-home {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 40px !important;
    background: #000 !important;
  }

  #new-login .login-sub-heading {
    width: calc(100% - 40px) !important;
    max-width: 332px !important;
    margin: 25px auto 32px !important;
    padding: 0 !important;
    font-size: 27px !important;
    line-height: 30px !important;
    text-align: center !important;
  }

  #new-login .bottom-section-container {
    display: block !important;
    width: calc(100% - 40px) !important;
    max-width: 332px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #new-login .bottom-section-items {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 332px !important;
    column-gap: 0 !important;
    row-gap: 20px !important;
    margin: 0 auto !important;
    padding: 0 0 53px !important;
  }

  #new-login .card-one,
  #new-login .card-two {
    width: 100% !important;
    max-width: 332px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
	transform: translateY(-100px); !important
  }

  #new-login .card-one-title {
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 5px !important;
  }

  #new-login .card-two-title {
    margin-top: 0 !important;
    padding-top: 14px !important;
  }
}

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

  #new-login h1 {
    top: 16px !important;
    left: 20px !important;
    right: 20px !important;
    max-width: 285px !important;
    font-size: 38px !important;
    line-height: 38px !important;
  }

  #new-login h1 .medium-heading {
    margin-top: 25px !important;
    font-size: 27px !important;
    line-height: 29px !important;
  }

  #new-login .banner-info-text-home,
  #new-login .banner-subheading-home,
  #new-login div#self-fragment,
  #new-login .login-sub-heading,
  #new-login .bottom-section-container {
    width: calc(100% - 36px) !important;
  }
}

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

  #new-login h1 {
    top: 14px !important;
    left: 16px !important;
    right: 16px !important;
    font-size: 34px !important;
    line-height: 34px !important;
  }

  #new-login h1 .medium-heading {
    margin-top: 18px !important;
    font-size: 24px !important;
    line-height: 26px !important;
  }
}


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

  #new-login #header,
  #new-login #mobile-menu {
    position: relative !important;
    width: 100% !important;
  }

  #new-login label.menu-margin,
  #new-login .main-menu,
  #new-login label.menu-margin .main-menu,
  #new-login label.menu-margin .logo {
    display: none !important;
  }

  #new-login .open-menu {
    display: none !important;
  }

  #new-login div#self-fragment {
    margin: 0 auto 80px !important;
  }

  #new-login .bottom-section-home {
    padding: 20px 0 40px !important;
  }

  #new-login .login-sub-heading {
    margin: 0 auto 32px !important;
    padding: 0 !important;
  }
}


@media screen and (min-width: 992px) {

  html[lang^="fr"] #new-login #license {
    position: absolute !important;
    top: 520px;
    left: max(40px, calc((100% - 1120px) / 2));
    right: auto;
    bottom: auto;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 271px !important;
    min-width: 271px !important;
    max-width: 271px !important;

    height: auto !important;

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

    transform: none !important;
    z-index: 10 !important;
  }

  html[lang^="fr"]
    #new-login
    #license
    #self-fragment {
    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 271px !important;
    min-width: 271px !important;
    max-width: 271px !important;

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

    transform: none !important;
  }
}

/* =========================================================
   FR MOBILE ONLY — LICENCE BLOCK ALIGNMENT FIX
   Keeps EN mobile and both desktop layouts unchanged.
   ========================================================= */
@media screen and (max-width: 991px) {

  /* Outer Experience Fragment moved by the mobile JS */
  html[lang^="fr"] #new-login #license,
body#new-login[data-language^="fr"] #license {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: calc(100% - 40px) !important;
    min-width: 0 !important;
    max-width: 332px !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto 80px !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    transform: none !important;
    z-index: 2 !important;
}

  /* Reset the inner AEM container to normal mobile flow */
  html[lang^="fr"] #new-login #license #self-fragment,
  html[lang^="fr"] #new-login #license #self-fragment.cmp-container,
  body#new-login[data-language^="fr"] #license #self-fragment {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 271px !important;
    min-width: 271px !important;
    max-width: 271px !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    transform: none !important;
  }

  /* Remove AEM grid widths/floats that pull the FR form sideways */
  html[lang^="fr"] #new-login #license #self-fragment > .aem-Grid,
  html[lang^="fr"] #new-login #license #self-fragment .aem-Grid,
  html[lang^="fr"] #new-login #license #self-fragment [class*="aem-GridColumn"],
  html[lang^="fr"] #new-login #license .selfCertification,
  html[lang^="fr"] #new-login #license .cmp-selfcertification,
  html[lang^="fr"] #new-login #license .cmp-selfcertification--inpage,
  html[lang^="fr"] #new-login #license .modal-box,
  html[lang^="fr"] #new-login #license .cmp-selfcertification__content,
  html[lang^="fr"] #new-login #license form,
  html[lang^="fr"] #new-login #license .form-group,
  html[lang^="fr"] #new-login #license .cmp-selfcertification__actions {
    position: relative !important;
    inset: auto !important;
    width: 271px !important;
    min-width: 271px !important;
    max-width: 271px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    transform: none !important;
  }

  html[lang^="fr"] #new-login #license .cmp-selfcertification__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* FR licence input */
  html[lang^="fr"] #new-login #license input#self-certification-text-field,
  html[lang^="fr"] #new-login #license .self-certification-text-field,
  html[lang^="fr"] #new-login #license .form-control {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    float: none !important;

    width: 271px !important;
    min-width: 271px !important;
    max-width: 271px !important;
    height: 46px !important;

    margin: 0 auto 20px !important;
    padding: 10px 15px !important;
    box-sizing: border-box !important;
    transform: none !important;
    text-align: center !important;
  }

  /* FR submit button */
  html[lang^="fr"] #new-login #license .cmp-selfcertification__actions > div {
    width: 142px !important;
    max-width: 142px !important;
    margin: 0 auto !important;
  }

  html[lang^="fr"] #new-login #license .cmp-selfcertification__continue {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    float: none !important;

    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;

    margin: 0 auto !important;
    transform: none !important;
  }

  /* Keep the long French validation message centred under the input */
  html[lang^="fr"] #new-login #license #textField-error,
  html[lang^="fr"] #new-login #license #textField-error-invalid {
    left: 0 !important;
    right: 0 !important;
    width: 271px !important;
    max-width: 271px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}


@media screen and (max-width: 991px) {
  #new-login .login-sub-heading {
    margin: 0 auto 110px !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 460px) {
  html[lang="fr"] #new-login .login-sub-heading {
    transform: translateY(-100px); !important
  }
}


/* =========================================================
   ATTR SITEMAP — FINAL OVERRIDES
   Added without removing any existing CSS
   Page ID: #attr-sitemap
   ========================================================= */

/* First AEM Text component: SITE MAP heading */
#attr-sitemap .site-map-heading {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 738px !important;
  height: auto !important;
  min-height: 45px !important;
  margin: 115px auto 40px !important;
  padding: 0 !important;
  text-align: left !important;
  transform: none !important;
}

#attr-sitemap .site-map-heading h2 {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-family: "Kanit-Bold", Kanit, sans-serif !important;
  font-size: 40px !important;
  line-height: 45px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  transform: none !important;
}

/* Hide only leftover heading media/empty paragraphs, not header elements */
#attr-sitemap .site-map-heading p:empty,
#attr-sitemap .site-map-heading .site-map-line,
#attr-sitemap .site-map-heading img {
  display: none !important;
}

/* Second AEM Text component: sitemap card */
#attr-sitemap .sitemap-content {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 48px !important;
  width: 100% !important;
  max-width: 738px !important;
  min-height: 300px !important;
  margin: 0 auto 80px !important;
  padding: 40px 38px 42px !important;
  float: none !important;
  clear: both !important;
  background-color: #dfe2f0 !important;
  border: 1px solid #656efa !important;
  border-radius: 30px 30px 30px 0 !important;
  box-sizing: border-box !important;
}

#attr-sitemap .sitemap-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#attr-sitemap .sitemap-group {
  width: 100% !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  text-align: left !important;
}

#attr-sitemap .sitemap-group:last-child {
  margin-bottom: 0 !important;
}

#attr-sitemap .sitemap-column-left .sitemap-group:first-child {
  margin-bottom: 20px !important;
}

/* Main links */
#attr-sitemap .sitemap-main-link {
  display: inline-block !important;
  max-width: 100% !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  color: #00215f !important;
  font-family: "Kanit-Bold", Kanit, sans-serif !important;
  font-size: 20px !important;
  line-height: 25px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

/* Child links */
#attr-sitemap .sitemap-sub-list {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 0 12px !important;
  list-style: none !important;
}

#attr-sitemap .sitemap-sub-list li {
  display: block !important;
  width: 100% !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

#attr-sitemap .sitemap-sub-list li:last-child {
  margin-bottom: 0 !important;
}

#attr-sitemap .sitemap-sub-list a {
  display: inline !important;
  color: #00215f !important;
  font-family: "Kanit-Medium", Kanit, sans-serif !important;
  font-size: 18px !important;
  line-height: 23px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

#attr-sitemap .sitemap-content a:hover,
#attr-sitemap .sitemap-content a:focus {
  color: #00215f !important;
  text-decoration: underline !important;
}

/* Remove only old sitemap list icons */
#attr-sitemap .sitemap-content li::before,
#attr-sitemap .sitemap-content li::after {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  content: none !important;
  background: none !important;
}

/* Ensure adequate space before footer while preserving existing background */
#attr-sitemap #container-cd6cd83e60,
#attr-sitemap #container-04d4c6ba83,
#attr-sitemap #container-0adb8afb25 {
  padding-bottom: 80px !important;
}

@media screen and (max-width: 767px) {
  #attr-sitemap .site-map-heading,
  #attr-sitemap .sitemap-content {
    width: calc(100% - 32px) !important;
    max-width: none !important;
  }

  #attr-sitemap .site-map-heading {
    min-height: 35px !important;
    margin-bottom: 30px !important;
  }

  #attr-sitemap .site-map-heading h2 {
    font-size: 30px !important;
    line-height: 35px !important;
  }

  #attr-sitemap .sitemap-content {
    display: block !important;
    min-height: 0 !important;
    margin-bottom: 60px !important;
    padding: 28px 22px 34px !important;
  }

  #attr-sitemap .sitemap-column-left {
    margin-bottom: 20px !important;
  }

  #attr-sitemap .sitemap-group {
    margin-bottom: 22px !important;
  }

  #attr-sitemap .sitemap-main-link {
    font-size: 19px !important;
    line-height: 24px !important;
  }

  #attr-sitemap .sitemap-sub-list a {
    font-size: 17px !important;
    line-height: 22px !important;
  }
}


/* =========================================================
   ATTR SITEMAP — HEADER CLEARANCE FIX
   Keeps the heading and card below the fixed desktop header
   ========================================================= */
@media screen and (min-width: 992px) {
  #attr-sitemap .site-map-heading {
    margin-top: 115px !important;
  }

  #attr-sitemap .sitemap-content {
    margin-bottom: 95px !important;
  }
}

/* =========================================================
   ATTR SITEMAP — FINAL LAYOUT CORRECTION V3
   Keeps the two AEM Text components in normal vertical flow
   ========================================================= */

/* The page background remains black after the footer, removing white space. */
body#attr-sitemap {
  margin: 0 !important;
  background-color: #000000 !important;
}

/* Each separate AEM Text component must occupy its own full row. */
#attr-sitemap .text:has(.site-map-heading),
#attr-sitemap .text:has(.sitemap-content),
#attr-sitemap [class*="aem-GridColumn"]:has(.site-map-heading),
#attr-sitemap [class*="aem-GridColumn"]:has(.sitemap-content) {
  position: relative !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media screen and (min-width: 992px) {
  /* Match the reference: heading closer to the header. */
  #attr-sitemap .site-map-heading {
    margin: 68px auto 40px !important;
  }

  /* Ensure the card starts only after the heading component. */
  #attr-sitemap .sitemap-content {
    margin: 0 auto 75px !important;
  }

  /* Keep a controlled gap before the footer without creating excess height. */
  #attr-sitemap #container-cd6cd83e60,
  #attr-sitemap #container-04d4c6ba83,
  #attr-sitemap #container-0adb8afb25 {
    padding-bottom: 35px !important;
  }
}

@media screen and (max-width: 991px) {
  #attr-sitemap .site-map-heading {
    margin-top: 35px !important;
  }
}

/* =========================================================
   ATTR SITEMAP — FINAL FLOW FIX V4
   Forces the two AEM Text components into vertical document flow.
   ========================================================= */

html,
body#attr-sitemap {
  background-color: #000000 !important;
}

/* The sitemap content container contains the two separate Text components. */
#attr-sitemap #container-0adb8afb25,
#attr-sitemap #container-0adb8afb25 > .cmp-container,
#attr-sitemap #container-0adb8afb25 > .aem-Grid,
#attr-sitemap #container-0adb8afb25 .aem-Grid--default--12 {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

#attr-sitemap #container-0adb8afb25 > .aem-Grid,
#attr-sitemap #container-0adb8afb25 > .cmp-container > .aem-Grid,
#attr-sitemap #container-0adb8afb25 .aem-Grid--default--12 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  padding-top: 0 !important;
}

/* Reset AEM grid floats/widths on the two Text component wrappers. */
#attr-sitemap #container-0adb8afb25 .text,
#attr-sitemap #container-0adb8afb25 [class*="aem-GridColumn"] {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  clear: both !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Heading sits below the fixed header and above the card. */
#attr-sitemap .site-map-heading {
  position: relative !important;
  z-index: 2 !important;
  width: calc(100% - 40px) !important;
  max-width: 738px !important;
  min-height: 45px !important;
  margin: 68px auto 40px !important;
  padding: 0 !important;
}

#attr-sitemap .site-map-heading h2 {
  display: block !important;
  margin: 0 !important;
  color: #ffffff !important;
}

/* Card always follows the heading; never overlap the fixed header. */
#attr-sitemap .sitemap-content {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 2 !important;
  flex: 0 0 auto !important;
  width: calc(100% - 40px) !important;
  max-width: 738px !important;
  margin: 0 auto 70px !important;
  transform: none !important;
}

/* Preserve enough background below the card before the footer. */
#attr-sitemap #container-cd6cd83e60,
#attr-sitemap #container-04d4c6ba83 {
  min-height: 700px !important;
  padding-bottom: 45px !important;
}

/* Avoid a white strip after the footer/root. */
#attr-sitemap .root,
#attr-sitemap #attr-footer-section,
#attr-sitemap footer {
  margin-bottom: 0 !important;
  background-color: #000000 !important;
}

@media screen and (max-width: 991px) {
  #attr-sitemap .site-map-heading {
    width: calc(100% - 32px) !important;
    margin: 35px auto 30px !important;
  }

  #attr-sitemap .sitemap-content {
    width: calc(100% - 32px) !important;
    margin: 0 auto 55px !important;
  }
}

/* =========================================================
   ATTR SITEMAP — EN/FR FINAL BACKGROUND + FR LAYOUT FIX
   Added at the end so it overrides the older sitemap rules.
   ========================================================= */

/* Apply the new sitemap background only to the outer page background. */
#attr-sitemap #container-cd6cd83e60,
#attr-sitemap #container-04d4c6ba83 {
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/4.0%20site%20map%20bg.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center bottom !important;
}

/* The inner content container must not repeat the background image. */
#attr-sitemap #container-0adb8afb25,
#attr-sitemap #container-0adb8afb25 > .cmp-container {
  background-image: none !important;
  background-color: transparent !important;
}

/* Remove the old AEM cmp-text card behind the new sitemap-content card.
   :has() makes this work for EN and FR even when AEM generates a different text ID. */
#attr-sitemap .cmp-text:has(> .sitemap-content),
#attr-sitemap .cmp-text:has(.sitemap-content) {
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Fallback for the currently known sitemap text component ID. */
#attr-sitemap #text-9c9d74775e.cmp-text {
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Keep both AEM Text components in vertical flow. */
#attr-sitemap #container-0adb8afb25 > .aem-Grid,
#attr-sitemap #container-0adb8afb25 > .cmp-container > .aem-Grid,
#attr-sitemap #container-0adb8afb25 .aem-Grid--default--12 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}

#attr-sitemap #container-0adb8afb25 .text,
#attr-sitemap #container-0adb8afb25 [class*="aem-GridColumn"] {
  position: relative !important;
  inset: auto !important;
  float: none !important;
  clear: both !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Desktop EN and FR: place heading and block below the fixed header. */
#attr-sitemap .site-map-heading {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: calc(100% - 40px) !important;
  max-width: 738px !important;
  height: auto !important;
  min-height: 45px !important;
  margin: 160px auto 40px !important;
  padding: 0 !important;
  text-align: left !important;
  transform: none !important;
}

#attr-sitemap .site-map-heading h2 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-family: "Kanit-Bold", Kanit, sans-serif !important;
  font-size: 40px !important;
  line-height: 45px !important;
  font-weight: 700 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

#attr-sitemap .sitemap-content {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 48px !important;
  width: calc(100% - 40px) !important;
  max-width: 738px !important;
  min-height: 300px !important;
  margin: 0 auto 70px !important;
  padding: 40px 38px 42px !important;
  float: none !important;
  clear: both !important;
  background-color: #dfe2f0 !important;
  border: 1px solid #656efa !important;
  border-radius: 30px 30px 30px 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* French text wraps more, so allow the card to grow naturally. */
html[lang^="fr"] #attr-sitemap .sitemap-content,
body#attr-sitemap[data-language^="fr"] .sitemap-content {
  height: auto !important;
  min-height: 350px !important;
  padding-bottom: 46px !important;
}

html[lang^="fr"] #attr-sitemap .site-map-heading,
body#attr-sitemap[data-language^="fr"] .site-map-heading {
  
}

/* Ensure enough space before the footer. */
#attr-sitemap #container-cd6cd83e60,
#attr-sitemap #container-04d4c6ba83 {
  min-height: 700px !important;
  padding-bottom: 45px !important;
}

/* Mobile background and stacking for both languages. */
@media screen and (max-width: 991px) {
  #attr-sitemap #container-cd6cd83e60,
  #attr-sitemap #container-04d4c6ba83 {
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/4.0_site%20map%20bg_mobile.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
    min-height: 0 !important;
    padding-bottom: 55px !important;
  }

  #attr-sitemap .site-map-heading,
  html[lang^="fr"] #attr-sitemap .site-map-heading,
  body#attr-sitemap[data-language^="fr"] .site-map-heading {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin: 45px auto 30px !important;
  }

  #attr-sitemap .site-map-heading h2 {
    font-size: 30px !important;
    line-height: 35px !important;
  }

  #attr-sitemap .sitemap-content,
  html[lang^="fr"] #attr-sitemap .sitemap-content,
  body#attr-sitemap[data-language^="fr"] .sitemap-content {
    display: block !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 55px !important;
    padding: 28px 22px 34px !important;
  }

  #attr-sitemap .sitemap-column-left {
    margin-bottom: 22px !important;
  }
}


html {
  scroll-padding-top: 130px; /* desktop */
}

@media screen and (max-width: 991px) {
  html {
    scroll-padding-top: 80px; /* adjust to mobile header height */
  }
}


/* ==========================================================================
   NEW LOGIN — FINAL DESKTOP / ZOOM-OUT RESPONSIVE FIX
   ========================================================================== */

@media screen and (min-width: 992px) {
  html,
  body#new-login,
  #new-login .root,
  #new-login #Login-bg,
  #new-login #Login-bg > .aem-Grid,
  #new-login #Login-bg > .aem-Grid > [class*="aem-GridColumn"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body#new-login {
    overflow-x: hidden !important;
    background: #000 !important;
  }

  #new-login #Login-bg .cmp-container__backgroundImage--enabled {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(620px, 48vw, 980px) !important;
    min-height: 620px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #new-login #banner_text_right.cmp-container {
    position: absolute !important;
    top: clamp(58px, 7vw, 145px) !important;
    left: clamp(32px, calc((100vw - 1440px) / 2 + 72px), 12vw) !important;
    width: clamp(390px, 27vw, 560px) !important;
    min-width: 390px !important;
    max-width: 560px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
  }

  #new-login #banner_text_right .login-right,
  #new-login #banner_text_right .hero-banner-txt {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #new-login h1 {
    margin: 0 0 clamp(24px, 2vw, 38px) !important;
    font-size: clamp(43px, 3.3vw, 72px) !important;
    line-height: 0.88 !important;
    text-align: left !important;
  }

  #new-login h1 .medium-heading {
    display: block !important;
    margin-top: clamp(20px, 1.5vw, 34px) !important;
    font-size: clamp(33px, 2.45vw, 54px) !important;
    line-height: 1.04 !important;
  }

  #new-login .banner-info-text-home,
  #new-login .banner-subheading-home {
    width: clamp(340px, 24vw, 490px) !important;
    max-width: 100% !important;
    padding: 0 !important;
    font-size: clamp(18px, 1.25vw, 27px) !important;
    line-height: 1.28 !important;
    text-align: left !important;
  }

  #new-login div#self-fragment {
    position: absolute !important;
    top: clamp(405px, 31vw, 610px) !important;
    left: clamp(32px, calc((100vw - 1440px) / 2 + 72px), 12vw) !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: clamp(271px, 19vw, 380px) !important;
    min-width: 271px !important;
    max-width: 380px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    transform: none !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
  }

  #new-login div#self-fragment.cmp-container,
  #new-login div#self-fragment > .aem-Grid,
  #new-login div#self-fragment > .cmp-container,
  #new-login div#self-fragment .aem-Grid,
  #new-login div#self-fragment [class*="aem-GridColumn"],
  #new-login div#self-fragment .experiencefragment,
  #new-login div#self-fragment .cmp-experiencefragment,
  #new-login div#self-fragment .cmp-selfcertification,
  #new-login div#self-fragment .cmp-selfcertification--inpage,
  #new-login div#self-fragment .modal-box,
  #new-login div#self-fragment form,
  #new-login div#self-fragment .cmp-selfcertification__form,
  #new-login div#self-fragment .cmp-selfcertification__actions {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #new-login div#self-fragment .form-control,
  #new-login div#self-fragment input#self-certification-text-field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: clamp(46px, 3.2vw, 62px) !important;
    margin: 0 0 clamp(20px, 1.4vw, 30px) !important;
    padding: 10px 20px !important;
    font-size: clamp(14px, 0.95vw, 19px) !important;
    box-sizing: border-box !important;
  }

  #new-login div#self-fragment .cmp-selfcertification__continue {
    width: clamp(142px, 10vw, 205px) !important;
    min-width: 142px !important;
    max-width: 205px !important;
    min-height: clamp(42px, 3vw, 58px) !important;
    margin: 15px 0 0 !important;
    font-size: clamp(16px, 1vw, 20px) !important;
  }

  #new-login .bottom-section-home {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(330px, 25vw, 560px) !important;
    margin: 0 !important;
    padding: clamp(18px, 2vw, 34px) 24px clamp(70px, 6vw, 130px) !important;
    background: #000 !important;
    box-sizing: border-box !important;
  }

  #new-login .login-sub-heading {
    margin: 0 auto clamp(20px, 1.5vw, 34px) !important;
    padding: 0 !important;
    font-size: clamp(28px, 1.9vw, 42px) !important;
    line-height: 1.12 !important;
    text-align: center !important;
  }

  #new-login .bottom-section-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(1120px, calc(100% - 40px)) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #new-login .bottom-section-items {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: clamp(20px, 1.6vw, 34px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #new-login .card-one-wrapper,
  #new-login .card-two-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #new-login .card-one,
  #new-login .card-two {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: clamp(230px, 17vw, 350px) !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1439px) {
  #new-login #Login-bg .cmp-container__backgroundImage--enabled {
    height: clamp(620px, 48vw, 790px) !important;
    min-height: 620px !important;
  }

  #new-login #banner_text_right.cmp-container {
    top: clamp(58px, 7vw, 115px) !important;
    left: max(32px, calc((100% - 1120px) / 2)) !important;
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;
  }

  #new-login div#self-fragment {
    top: clamp(405px, 31vw, 475px) !important;
    left: max(32px, calc((100% - 1120px) / 2)) !important;
    width: 271px !important;
    min-width: 271px !important;
    max-width: 271px !important;
  }

  #new-login .bottom-section-container {
    width: min(880px, calc(100% - 40px)) !important;
    max-width: 880px !important;
  }

  #new-login .card-one,
  #new-login .card-two {
    min-height: 250px !important;
  }
}

@media screen and (min-width: 2200px) {
  #new-login #Login-bg .cmp-container__backgroundImage--enabled {
    height: clamp(900px, 47vw, 1450px) !important;
    min-height: 900px !important;
  }

  #new-login #banner_text_right.cmp-container {
    top: clamp(120px, 6vw, 190px) !important;
    left: clamp(100px, 8vw, 250px) !important;
    width: clamp(560px, 24vw, 780px) !important;
    min-width: 560px !important;
    max-width: 780px !important;
  }

  #new-login h1 {
    font-size: clamp(70px, 3vw, 105px) !important;
  }

  #new-login h1 .medium-heading {
    font-size: clamp(52px, 2.25vw, 78px) !important;
  }

  #new-login .banner-info-text-home,
  #new-login .banner-subheading-home {
    width: clamp(490px, 21vw, 680px) !important;
    font-size: clamp(26px, 1.1vw, 36px) !important;
  }

  #new-login div#self-fragment {
    top: clamp(610px, 29vw, 870px) !important;
    left: clamp(100px, 8vw, 250px) !important;
    width: clamp(380px, 17vw, 540px) !important;
    min-width: 380px !important;
    max-width: 540px !important;
  }

  #new-login .bottom-section-container {
    width: min(1500px, calc(100% - 80px)) !important;
    max-width: 1500px !important;
  }
}

@media screen and (max-width: 991px) {
  #new-login #Login-bg .cmp-container__backgroundImage--enabled {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* =========================================================
   LOGIN VALIDATION MESSAGE FIX — DESKTOP AND LAPTOP
   ========================================================= */

@media screen and (min-width: 992px) {

  /* Keep validation text in normal document flow */
  #new-login
    .cmp-selfcertification
    #textField-error-invalid,
  #new-login
    .cmp-selfcertification
    #textField-error {

    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 271px !important;
    min-width: 271px !important;
    max-width: 271px !important;

    margin: -10px 0 14px !important;
    padding: 0 2px !important;

    color: #f55b5b !important;
    font-family: "Kanit-LightItalic", Kanit, sans-serif !important;
    font-size: 14px !important;
    line-height: 18px !important;
    text-align: left !important;

    clear: both !important;
    transform: none !important;
  }

  /* Keep the form elements vertically aligned */
  #new-login
    div#self-fragment
    .cmp-selfcertification__actions {

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Input spacing */
  #new-login
    div#self-fragment
    .form-control,
  #new-login
    div#self-fragment
    input#self-certification-text-field {

    margin: 0 0 20px !important;
  }

  /* Submit button will now remain below the validation message */
  #new-login
    div#self-fragment
    .cmp-selfcertification__continue {

    position: relative !important;
    top: auto !important;
    left: auto !important;

    margin: 0 -5px !important;
    clear: both !important;
  }
}

/* ==========================================================================
   FR LOGIN — FINAL MOBILE-ONLY GREY GAP + VALIDATION SPACING FIX
   This block intentionally preserves the original mobile content order:
   information text -> instruction text -> licence form.
   Keep at the absolute end of the stylesheet.
   ========================================================================== */

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

  /*
   * Preserve the original FR mobile order.
   * Existing text blocks use order 2 and 3, so the licence form must remain 4.
   */
  html[lang^="fr"] body#new-login #license,
  body#new-login[data-language^="fr"] #license {
    order: 4 !important;
  }

  /*
   * Remove only the unwanted light/grey gap.
   * The old 80px outside margin exposed the parent container background.
   */
  html[lang^="fr"] body#new-login
    #Login-bg
    .cmp-container__backgroundImage--enabled,
  body#new-login[data-language^="fr"]
    #Login-bg
    .cmp-container__backgroundImage--enabled {
    background-color: #000000 !important;
  }

  html[lang^="fr"] body#new-login #license,
  body#new-login[data-language^="fr"] #license {
    margin: 0 auto !important;
    padding: 0 0 28px !important;
    background-color: #000000 !important;
  }

  html[lang^="fr"] body#new-login #license #self-fragment,
  html[lang^="fr"] body#new-login #license #self-fragment.cmp-container,
  body#new-login[data-language^="fr"] #license #self-fragment,
  body#new-login[data-language^="fr"] #license #self-fragment.cmp-container {
    margin: 0 auto !important;
    padding: 0 !important;
    background-color: transparent !important;
  }

  html[lang^="fr"] body#new-login .bottom-section-home,
  body#new-login[data-language^="fr"] .bottom-section-home {
    margin-top: 0 !important;
    border-top: 0 !important;
    background-color: #000000 !important;
  }

  /*
   * Keep the French validation message between the input and button.
   */
  html[lang^="fr"] body#new-login
    #license
    .cmp-selfcertification
    #textField-error-invalid,
  html[lang^="fr"] body#new-login
    #license
    .cmp-selfcertification
    #textField-error,
  body#new-login[data-language^="fr"]
    #license
    .cmp-selfcertification
    #textField-error-invalid,
  body#new-login[data-language^="fr"]
    #license
    .cmp-selfcertification
    #textField-error {
    position: static !important;
    inset: auto !important;

    display: block !important;
    width: 271px !important;
    min-width: 271px !important;
    max-width: 271px !important;
    height: auto !important;

    margin: 0 auto 8px !important;
    padding: 0 4px !important;

    color: #f55b5b !important;
    font-family: "Kanit-LightItalic", Kanit, sans-serif !important;
    font-size: 9px !important;
    line-height: 12px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;

    transform: none !important;
  }

  html[lang^="fr"] body#new-login
    #license
    .cmp-selfcertification__actions,
  body#new-login[data-language^="fr"]
    #license
    .cmp-selfcertification__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  /*
   * Leave enough space below the validation message.
   */
  html[lang^="fr"] body#new-login
    #license
    .cmp-selfcertification__continue,
  body#new-login[data-language^="fr"]
    #license
    .cmp-selfcertification__continue {
    position: relative !important;
    inset: auto !important;
    float: none !important;

    margin: 10px auto 0 !important;
    align-self: center !important;
    transform: none !important;
  }
}

/* ==========================================================================
   ATTR SITEMAP — FINAL MOBILE HEADING VISIBILITY FIX
   Applies only from 0px to 990px.
   Works for both EN and FR.
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================================== */

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

  /* Use only the authored mobile sitemap markup at this breakpoint. */
  #attr-sitemap .sitemap-only-desktop {
    display: none !important;
  }

  #attr-sitemap .sitemap-only-mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /*
   * Keep the AEM Text component that contains the heading visible.
   * This supports different generated component IDs in EN and FR.
   */
  #attr-sitemap .text:has(.site-map-heading),
  #attr-sitemap [class*="aem-GridColumn"]:has(.site-map-heading),
  #attr-sitemap .cmp-text:has(.site-map-heading) {
    position: relative !important;
    inset: auto !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

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

    float: none !important;
    clear: both !important;
    transform: none !important;
  }

  /*
   * The old 35px/45px top margin placed SITE MAP behind the fixed
   * mobile header. Move the heading below the header.
   */
  #attr-sitemap .site-map-heading,
  html[lang^="fr"] #attr-sitemap .site-map-heading,
  body#attr-sitemap[data-language^="fr"] .site-map-heading {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: calc(100% - 32px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 35px !important;

    margin: 125px auto 26px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    color: #ffffff !important;
    text-align: left !important;
    transform: none !important;
  }

  /*
   * Support both an H2 heading and a non-empty paragraph heading,
   * because the EN and FR AEM Text components may not use identical tags.
   */
  #attr-sitemap .site-map-heading h2,
  #attr-sitemap .site-map-heading p:not(:empty),
  html[lang^="fr"] #attr-sitemap .site-map-heading h2,
  html[lang^="fr"] #attr-sitemap .site-map-heading p:not(:empty),
  body#attr-sitemap[data-language^="fr"] .site-map-heading h2,
  body#attr-sitemap[data-language^="fr"] .site-map-heading p:not(:empty) {
    position: relative !important;
    inset: auto !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    height: auto !important;

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

    color: #ffffff !important;
    font-family: "Kanit-Bold", Kanit, sans-serif !important;
    font-size: 30px !important;
    line-height: 35px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;

    text-align: left !important;
    text-transform: uppercase !important;
    transform: none !important;
  }

  /* Keep the card directly below the now-visible heading. */
  #attr-sitemap .sitemap-content,
  html[lang^="fr"] #attr-sitemap .sitemap-content,
  body#attr-sitemap[data-language^="fr"] .sitemap-content {
    position: relative !important;
    inset: auto !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: calc(100% - 32px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto 55px !important;
    padding: 28px 22px 34px !important;

    float: none !important;
    clear: both !important;
    transform: none !important;
  }
}

/* ==========================================================================
   ATTR SITEMAP — FINAL XD MATCH
   Paste this block at the absolute end of the stylesheet.
   ========================================================================== */

body#attr-sitemap {
  margin: 0 !important;
  overflow-x: hidden !important;
  background: #000 !important;
}

#attr-sitemap .sitemap-only-desktop { display: block !important; }
#attr-sitemap .sitemap-only-mobile { display: none !important; }

/* Keep the heading and sitemap Text components in normal vertical flow. */
#attr-sitemap #container-0adb8afb25,
#attr-sitemap #container-0adb8afb25 > .cmp-container,
#attr-sitemap #container-0adb8afb25 > .aem-Grid,
#attr-sitemap #container-0adb8afb25 > .cmp-container > .aem-Grid,
#attr-sitemap #container-0adb8afb25 .aem-Grid--default--12 {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

#attr-sitemap #container-0adb8afb25 > .aem-Grid,
#attr-sitemap #container-0adb8afb25 > .cmp-container > .aem-Grid,
#attr-sitemap #container-0adb8afb25 .aem-Grid--default--12 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
}

#attr-sitemap .text:has(.site-map-heading),
#attr-sitemap .text:has(.sitemap-content),
#attr-sitemap [class*="aem-GridColumn"]:has(.site-map-heading),
#attr-sitemap [class*="aem-GridColumn"]:has(.sitemap-content),
#attr-sitemap .cmp-text:has(.site-map-heading),
#attr-sitemap .cmp-text:has(.sitemap-content) {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Heading */
#attr-sitemap .site-map-heading {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: calc(100% - 40px) !important;
  max-width: 800px !important;
  height: auto !important;
  min-height: 45px !important;
  margin: 175px auto 45px !important;
  padding: 0 !important;
  text-align: left !important;
  transform: none !important;
}

#attr-sitemap .site-map-heading h2,
#attr-sitemap .site-map-heading p:not(:empty) {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: "Kanit-Bold", Kanit, sans-serif !important;
  font-size: 40px !important;
  line-height: 45px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

#attr-sitemap .site-map-heading p:empty,
#attr-sitemap .site-map-heading .site-map-line,
#attr-sitemap .site-map-heading img {
  display: none !important;
}

/* Card */
#attr-sitemap .sitemap-content {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 48px !important;
  align-content: start !important;
  width: calc(100% - 40px) !important;
  max-width: 800px !important;
  height: auto !important;
  min-height: 378px !important;
  margin: 0 auto 55px !important;
  padding: 48px 46px 50px !important;
  background: #dfe2f0 !important;
  border: 1px solid #656efa !important;
  border-radius: 30px 30px 30px 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transform: none !important;
}

#attr-sitemap .sitemap-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#attr-sitemap .sitemap-group {
  width: 100% !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  text-align: left !important;
}

#attr-sitemap .sitemap-group:last-child { margin-bottom: 0 !important; }

#attr-sitemap .sitemap-main-link {
  display: inline-block !important;
  max-width: 100% !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  color: #00215f !important;
  background: transparent !important;
  font-family: "Kanit-Bold", Kanit, sans-serif !important;
  font-size: 20px !important;
  line-height: 25px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  box-shadow: none !important;
}

#attr-sitemap .sitemap-sub-list {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 0 12px !important;
  list-style: none !important;
}

#attr-sitemap .sitemap-sub-list li {
  display: block !important;
  width: 100% !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

#attr-sitemap .sitemap-sub-list li:last-child { margin-bottom: 0 !important; }

#attr-sitemap .sitemap-sub-list a {
  display: inline !important;
  color: #00215f !important;
  background: transparent !important;
  font-family: "Kanit-Regular", Kanit, sans-serif !important;
  font-size: 18px !important;
  line-height: 23px !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  box-shadow: none !important;
}

/* Prevent global states from making every item look active/highlighted. */
#attr-sitemap .sitemap-content a:visited,
#attr-sitemap .sitemap-content a:hover,
#attr-sitemap .sitemap-content a:focus,
#attr-sitemap .sitemap-content a:active {
  color: #00215f !important;
  background: transparent !important;
  text-decoration: underline !important;
  box-shadow: none !important;
}

#attr-sitemap .sitemap-content li::before,
#attr-sitemap .sitemap-content li::after {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  content: none !important;
  background: none !important;
}

/* Background section */
#attr-sitemap #container-cd6cd83e60,
#attr-sitemap #container-04d4c6ba83 {
  min-height: 0 !important;
  padding-bottom: 55px !important;
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/4.0%20site%20map%20bg.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center bottom !important;
}

#attr-sitemap #container-0adb8afb25,
#attr-sitemap #container-0adb8afb25 > .cmp-container {
  background: transparent !important;
}

html[lang^="fr"] #attr-sitemap .sitemap-content,
body#attr-sitemap[data-language^="fr"] .sitemap-content {
  height: auto !important;
  min-height: 398px !important;
}

/* Phone and tablet */
@media screen and (max-width: 991px) {
  #attr-sitemap .sitemap-only-desktop { display: none !important; }

  #attr-sitemap .sitemap-only-mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #attr-sitemap #container-cd6cd83e60,
  #attr-sitemap #container-04d4c6ba83 {
    min-height: 0 !important;
    padding-bottom: 36px !important;
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/4.0_site%20map%20bg_mobile.jpg") !important;
    background-position: center top !important;
  }

  #attr-sitemap .site-map-heading,
  html[lang^="fr"] #attr-sitemap .site-map-heading,
  body#attr-sitemap[data-language^="fr"] .site-map-heading {
    width: calc(100% - 32px) !important;
    max-width: 356px !important;
    min-height: 35px !important;
    margin: 125px auto 26px !important;
  }

  #attr-sitemap .site-map-heading h2,
  #attr-sitemap .site-map-heading p:not(:empty) {
    font-size: 30px !important;
    line-height: 35px !important;
  }

  #attr-sitemap .sitemap-content,
  html[lang^="fr"] #attr-sitemap .sitemap-content,
  body#attr-sitemap[data-language^="fr"] .sitemap-content {
    display: block !important;
    width: calc(100% - 32px) !important;
    max-width: 356px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 34px !important;
    padding: 32px 20px 36px !important;
    border-radius: 27px 27px 27px 0 !important;
  }

  #attr-sitemap .sitemap-column-left { margin-bottom: 24px !important; }
  #attr-sitemap .sitemap-group { margin-bottom: 24px !important; }

  #attr-sitemap .sitemap-main-link {
    margin-bottom: 6px !important;
    font-size: 18px !important;
    line-height: 23px !important;
  }

  #attr-sitemap .sitemap-sub-list { padding-left: 14px !important; }
  #attr-sitemap .sitemap-sub-list li { margin-bottom: 4px !important; }

  #attr-sitemap .sitemap-sub-list a {
    font-family: "Kanit-Regular", Kanit, sans-serif !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  #attr-sitemap .site-map-heading,
  #attr-sitemap .sitemap-content {
    max-width: 600px !important;
  }

  #attr-sitemap .sitemap-content {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }
}

/* =========================================================
   NEW LOGIN — DESKTOP CONVENIENT ACCESS CARDS
   Compact card height and vertically centre all card content.
   EN + FR desktop only. Tablet/mobile remain unchanged.
   ========================================================= */
@media screen and (min-width: 992px) {

  #new-login .bottom-section-home {
    min-height: 0 !important;
    padding: 18px 24px 58px !important;
  }

  #new-login .bottom-section-items {
    align-items: start !important;
  }

  #new-login .card-one-wrapper,
  #new-login .card-two-wrapper {
    height: auto !important;
    min-height: 0 !important;
  }

  #new-login .card-one,
  #new-login .card-two {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;

    margin: 0 !important;
    padding: 20px 24px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #new-login .card-one-icon,
  #new-login .card-two-icon {
    display: block !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    max-height: 105px !important;
    margin: 0 auto 12px !important;
    object-fit: contain !important;
  }

  #new-login .card-one-title,
  #new-login .card-two-title {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 22px !important;
    text-align: center !important;
  }
}