.u12-data-protection-notice {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

/*
  Use id="u12a" to increase specificity!

  Because this component is imported from Common,
  we need to ensure it will be styled as intended
  regardless of which project it features in.
*/

/*
  Do not reference the web fonts directly, for example:
  'font-family: Helvetica Neue Lt'...
  This will break our asynchronously-loaded web font solution.
  Instead, rely on the 'twtr-font' class (and 'mtc-font' for MTC Legacy)
  to bootstrap the font stack.
*/

#u12a {
  display: none;
  box-sizing: border-box;
  width: 100%;
  background-color: #657786;
  max-height: 40vh;
  overflow-y: auto;
  padding-top: 1.5rem;
  padding-right: 5%;
  padding-bottom: 1.5rem;
  padding-left: 5%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Visible scrollbar */
#u12a::-webkit-scrollbar {
  -webkit-appearance: none;
}

#u12a::-webkit-scrollbar:vertical {
  width: 11px;
}

#u12a::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid #657786; /* should match parent background, can't be transparent */
  background-color: #fff;
}

#u12a.is-active {
  display: block;
}

#u12a .u12a-eu-cookie-notice__item {
  width: 100%;
}

@media (min-width: 900px) {
  #u12a .u12a-eu-cookie-notice__item {
    display: flex;
    align-items: center;
    max-height: 100%;
  }
}

@media (min-width: 900px) {
  #u12a .u12a-eu-cookie-notice__content {
    display: flex;
    width: 75%;
    max-width: 1020px;
    align-items: center;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1400px) {
  #u12a .u12a-eu-cookie-notice__content {
    width: 55%;
  }
}

#u12a .u12a-eu-cookie-notice__copy {
  text-align: center;
}

@media (min-width: 900px) {
  #u12a .u12a-eu-cookie-notice__copy {
    text-align: left;
  }
}

#u12a .u12a-eu-cookie-notice__copy p {
  color: #fff;
  font-size: 18px;
}

#u12a .u12a-eu-cookie-notice__copy a {
  color: #fff;
  text-decoration: underline;
}

@media (min-width: 900px) {
  #u12a .u12a-eu-cookie-notice__copy p:last-child {
    padding-bottom: 0;
  }
}

@media (min-width: 900px) {
  #u12a .u12a-eu-cookie-notice__choice {
    margin-left: 15px;
  }
}

#u12a .u12a-eu-cookie-notice__choice-list {
  text-align: center;
  padding-left: 0;
}

@media (min-width: 900px) {
  #u12a .u12a-eu-cookie-notice__choice-list {
    text-align: left;
  }
}

#u12a .u12a-eu-cookie-notice__choice-list li {
  display: inline-block;
  list-style: none;
  margin-right: 1.5rem;
}

#u12a .u12a-eu-cookie-notice__choice-list li:not(:last-child) {
  margin-bottom: 10px;
}

#u12a .u12a-eu-cookie-notice__choice-list li:last-child {
  margin-right: 0;
}

@media (min-width: 900px) {
  #u12a .u12a-eu-cookie-notice__choice-list li {
    margin-right: 0;
  }
}


/*
  Buttons
*/
#u12a .u12a-eu-cookie-notice__button {
  min-width: 120px;
  background-color: transparent;
  border-radius: 18px;
  padding-top: 9px;
  padding-right: 24px;
  padding-bottom: 9px;
  padding-left: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  border-color: transparent;
}

#u12a .u12a-eu-cookie-notice__button:hover {
  cursor: pointer;
  text-decoration: underline;
}

#u12a .u12a-eu-cookie-notice__button--accept {
  background-color: white;
  color: #1a76cc; /* contrast ratio 4.0+ */
}

.u12a-eu-cookie-notice__hidden {
  display: none;
}

#u12 .u12-data-protection-notice__item--a {
  display: none;
}

#u12 .u12-data-protection-notice__item--a.is-active {
  display: block;
}

/*
  Use id="u12b" to increase specificity!

  Because this component is imported from Common,
  we need to ensure it will be styled as intended
  regardless of which project it features in.
*/

/*
  Do not reference the web fonts directly, for example:
  'font-family: Helvetica Neue Lt'...
  This will break our asynchronously-loaded web font solution.
  Instead, rely on the 'twtr-font' class (and 'mtc-font' for MTC Legacy)
  to bootstrap the font stack.
*/

#u12b {
  box-sizing: border-box;
  width: 100%;
  background-color: #657786;
  max-height: 50vh;
  overflow-y: scroll;
  padding-top: 1.5rem;
  padding-right: 5%;
  padding-bottom: 1.5rem;
  padding-left: 5%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Visible scrollbar */
#u12b::-webkit-scrollbar {
  -webkit-appearance: none;
}

#u12b::-webkit-scrollbar:vertical {
  width: 11px;
}

#u12b::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid #657786; /* should match parent background, can't be transparent */
  background-color: #fff;
}

@media (min-width: 900px) {
  #u12b {
    display: flex;
    align-items: center;
    max-height: 100%;
    overflow-y: hidden;
  }
}

#u12b .u12b-opt-in__item {
  width: 100%;
}

@media (min-width: 900px) {
  #u12b .u12b-opt-in__content {
    display: flex;
    align-items: center;
    width: 100%;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1400px) {
  #u12b .u12b-opt-in__content {
    width: 100%;
  }
}

#u12b .u12b-opt-in__copy {
  text-align: center;
  margin-bottom: 2em;
  line-height: 1.2;
}

@media (min-width: 900px) {
  #u12b .u12b-opt-in__copy {
    text-align: left;
    margin-inline-end: 2em;
    margin-bottom: 0;
  }
}

#u12b .u12b-opt-in__copy p,
#u12b .u12b-opt-in__copy span {
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 18px;
}

#u12b .u12b-opt-in__copy b {
  font-weight: 700;
}

#u12b .u12b-opt-in__copy a {
  color: #fff;
  text-decoration: underline;
}

@media (min-width: 900px) {
  #u12b .u12b-opt-in__copy p:last-child {
    padding-bottom: 0;
  }
}

@media (min-width: 900px) {
  #u12b .u12b-opt-in__choice {
    margin-left: 15px;
  }

  html[dir="rtl"] #u12b .u12b-opt-in__choice {
      margin-right: 15px;
      margin-left: 0;
  }
}

#u12b .u12b-opt-in__choice-list {
  text-align: center;
  padding-left: 0;
}

@media (min-width: 900px) {
  #u12b .u12b-opt-in__choice-list {
    text-align: left;
  }
}

#u12b .u12b-opt-in__choice-list-item {
  display: block;
  list-style: none;
  width: 100%;
}

#u12b .u12b-opt-in__choice-list-item:not(:last-child) {
  margin-bottom: 10px;
}

#u12b .u12b-opt-in__choice-list-item:last-child {
  margin-right: 0;
}

@media (min-width: 900px) {
  #u12b .u12b-opt-in__choice-list-item {
    margin-right: 0;
  }
}


/*
  Buttons
*/
#u12b .u12b-opt-in__button {
  width: 100%;
  min-width: 300px;
  background-color: transparent;
  border-radius: 18px;
  padding-top: 11px;
  padding-right: 24px;
  padding-bottom: 11px;
  padding-left: 24px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  border-color: transparent;
}

#u12b .u12b-opt-in__button:hover {
  cursor: pointer;
  text-decoration: underline;
}

#u12b .u12b-opt-in__button--accept {
  background-color: white;
  color: #1a76cc; /* contrast ratio 4.0+ */
}

#u12b .u12b-opt-in__button--decline {
  color: #fff;
  border-color: #fff;
  border-style: solid;
  border-width: 1px;
}

/* default to hidden, remove id to show */
#x-cookie-notice-showmore {
  display: none;
}


/*
  If 2 notices are presented inside #u12
  style accordingly to account for collapsed
  margins and any other design flourishes
*/

.u12-data-protection-notice__item ~ .u12-data-protection-notice__item {
  margin-top: -1.5rem; /* collapse #u12b padding-top */
  padding-top: 1.5rem; /* offset with positive value (same as above). fixes issue where scrollbar gets cut-off when 2 components placed next to each other   CMSE-7400 */
}

@media (min-width: 900px) {
  .u12-data-protection-notice__item ~ .u12-data-protection-notice__item {
    padding-top: 0;
  }
}

.u12-data-protection-notice__item.is-active ~ .u12-data-protection-notice__item .u12b-opt-in__content {
  border-top: solid 1px #fff;
  padding-top: 3rem; /* re-introduce #u12b padding-top but double it to account for scrollbar clearance */
}

.u12-data-protection-notice__item.is-hidden {
  display: none;
}