:root {
  --takeda-connect: rgb(234, 46, 56);
  --white: #ffffff;
}
.floating--banner {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: -25vw;
  width: 25vw;
  height: 100%;
  padding: 16px;
  background-color: #f1f1f1;
  border: 1px solid #eeeeee;
}
.floating--banner h3 {
  background-color: var(--takeda-connect);
  text-align: center;
  padding: 5px 0;
  color: var(--white);
}
.floating--banner .takeda--connect a {
  display: block;
  width: max-content;
  background: var(--white);
  text-align: center;
  border-radius: 29px;
  padding: 6px 15px;
  font-weight: 500;
  color: var(--takeda-connect);
  border: 1px solid var(--takeda-connect);
  text-decoration: none;
}
.floating--banner .takeda--connect a:hover {
  background-color: var(--takeda-connect);
  color: var(--white);
  border: 1px solid var(--white);
}
.floating--banner .takeda--connect {
  background-color: var(--takeda-connect);
  padding: 20px;
  color: var(--white);
  border-top-right-radius: 18px;
  border-top-left-radius: 18px;
}
.floating--banner .takeda--connect .summary {
  margin: 15px 0;
}
.floating--banner .takeda--connect .title {
  font-size: 18px;
  font-weight: 500;
}
.floating--banner .img-rounded {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  vertical-align: bottom;
}
.floating--banner,
.floating--button {
  transition: right 300ms ease-in-out;
  z-index: 1030; /* Higher than the navlist component */
}
.floating--button {
  border-radius: 29px;
  border: 1px solid transparent;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 21px !important;
  padding: 6px 15px !important;
  color: var(--tg-primary-button-text-color, var(--primarytext, #ffffff));
  box-shadow: none;
}
.floating--button:hover {
  color: var(--tg-primary-button-color, var(--primary_btnd, #000000));
  border: 1px solid var(--tg-primary-button-color, var(--primary_btnd, #000000));
}
.floating--banner.visible {
  right: 0;
  overflow: auto;
}
.floating--container .floating--button {
  position: fixed;
  bottom: 5vh;
  transform: rotate(90deg);
  transform-origin: right center;
  right: 17px;
  width: max-content;
}
.floating--button .arrow--icon {
  margin-left: 9px;
  transition: transform 300ms ease-in-out;
  font-weight: 300;
}
.floating--banner.visible + .floating--button {
  right: calc(25vw + 17px);
}
.floating--banner.visible + .floating--button .arrow--icon {
  transform: rotate(180deg);
}
.floating--banner .login-block img {
  height: 300px;
  object-fit: cover;
  width: 100%;
}
.floating--banner .login-block .paragraph,
.floating--banner .login-block .takeda-banner-text {
  border-radius: 18px;
}
.floating--banner .login-block .media--image + .takeda-banner-text {
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.floating--banner .login-block .takeda-banner-text {
  background-color: #4298CA;
  color: #ffffff;
  padding: 16px;
  margin-bottom: 16px;
}
.floating--banner .login-block .takeda-banner-text h4 {
  font-size: 16px;
  margin: 0 0 15px;
}
.floating--banner .login-block .takeda-banner-text h4 a {
  color: #ffffff;
  text-decoration: none;
}
.floating--banner .login-block .takeda-banner-text .login {
  background-color: #FFFFFF;
  color: #4298CA;
  font-size: 14px;
  padding: 6px 16px;
  border-radius: 29px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  border: 1px solid #4298CA;
}
.floating--banner .login-block .takeda-banner-text .login:hover {
  color: #FFFFFF;
  background-color: #4298CA;
}
.floating--banner .login-block .paragraph .button {
  border: 1px solid;
}
.floating--banner .login-block .paragraph,
.floating--banner .login-block .paragraph h4 {
  margin-bottom: 15px;
}
.floating--banner .login-block a.login {
  border-radius: 29px;
}
.floating--banner .login-block a.login:hover {
  color: var(--white);
  border: 1px solid var(--white);
}

@media (max-width: 1289px) {
  .floating--banner {
    width: 50vw;
    right: -50vw;
  }
  .floating--banner.visible + .floating--button {
    right: calc(50vw + 17px);
  }
}
@media (max-width: 575px) {
  .floating--banner {
    width: 75vw;
    right: -75vw;
  }
  .floating--banner.visible + .floating--button {
    right: calc(75vw + 17px);
  }
}