#Privat-panel {
  margin-left: 0rem;
}
.menu {
  line-height: 1.5;
}
.menu__logo,
.menu__logo--inverted {
  width: 5rem;
}
@media only screen and (max-width: 40em) {
  .menu__login-button {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.subscription-text-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: initial;
}
.subscription-text-block__heading {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  color: #000;
}
.subscription-text-block__heading .Icon {
  margin-left: 0.5rem;
}
.subscription-text-block__usps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: initial;
  margin-bottom: 0.5rem;
}
@media all and (min-width: 28.125rem) {
  .subscription-text-block__usps {
    margin-bottom: 1rem;
  }
}
@media all and (min-width: 48em) {
  .subscription-text-block__usps--grid {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .subscription-text-block__usps--grid .subscription-text-block__usp-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 50%;
    text-align: left;
  }
}
.subscription-text-block__usps--row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.subscription-text-block__usps--row .subscription-text-block__usp-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}
.subscription-text-block__usp-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  padding: 0.5rem 0.25rem 0;
}
.subscription-text-block__usp-item p {
  margin: 0 !important;
}
.subscription-text-block__usp-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.75rem;
}
.subscription-text-block__usp-heading {
  font-family: "TeliaSans-Medium", Helvetica, Arial, sans-serif;
  font-weight: 700;
}
.subscription-text-block-checkout {
  display: flex;
  flex-direction: row;
}
.subscription-text-block-checkout__icon {
  margin-right: 1rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
#insurance-modal-description {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
}
#insurance-modal-heading {
  display: none;
}
.insurance-modal {
  background-color: white !important;
  position: relative;
  padding: 0 !important;
  margin: 5% auto;
  border: none;
}
.insurance-modal__no-margin {
  margin: 0 !important;
}
.insurance-modal__no-padding {
  padding: 0 !important;
}
.insurance-modal__content {
  padding: 0 1rem 1rem;
}
@media screen and (min-width: 48em) {
  .insurance-modal__content {
    padding: 0 6rem 6rem;
  }
}
.insurance-modal__card {
  position: relative;
  box-shadow: 0px 2px 8px #dcdce1;
  border-radius: 5px;
  border: 2px solid transparent;
  margin: 0 0 1rem !important;
  padding: 1.5rem 1rem;
  width: 100%;
}
.insurance-modal__card--selected {
  border: 2px solid #990ae3;
}
.insurance-modal__card .radio-button-with-label > .radio-button-with-label__label-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: initial;
}
.insurance-modal__insurance-heading-standalone {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}
.insurance-modal__insurance-heading {
  margin: 0;
  line-height: 1.5rem !important;
  font-size: 1rem !important;
}
.insurance-modal__card-content {
  margin-left: 1.85rem;
}
.insurance-modal__heading {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
  margin: 0 0 0.5rem !important;
  font-family: "TeliaSansHeading-Heading", Helvetica, Arial, sans-serif !important;
}
.insurance-modal__heading .Icon {
  margin-right: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
}
.insurance-modal__skip {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  height: 1.5rem !important;
  width: 1.5rem !important;
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 1;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
.insurance-modal__skip .svg-icon {
  height: 100%;
  width: 100%;
}
.insurance-modal__skip:hover,
.insurance-modal__skip:active,
.insurance-modal__skip:focus {
  color: #990ae3;
}
.insurance-modal__insurance-heading-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  margin-top: 1rem;
}
@media screen and (min-width: 48em) {
  .insurance-modal__insurance-heading-container {
    margin-top: 1.5rem;
  }
}
.insurance-modal__checkmark-icon {
  fill: #008241 !important;
  margin-right: 0.5rem;
  height: 28px !important;
  width: 28px !important;
}
.insurance-modal__insurance-includes {
  font-family: "TeliaSans-Medium", Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.insurance-modal__insurance-icon-container {
  display: flex;
  align-items: center;
}
.insurance-modal__insurance-icon {
  margin-right: 1rem;
}
.insurance-modal__insurance-icon-text-container {
  display: flex;
  flex-direction: column;
}
.insurance-modal__price {
  font-family: "TeliaSans-Medium", Helvetica, Arial, sans-serif;
}
.insurance-modal__description {
  margin-bottom: 1rem;
}
.insurance-modal__button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  margin-top: 1.5rem;
  width: 100%;
}
.insurance-modal__button-container .button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  height: 2.5rem;
  max-width: 14rem;
  width: 100%;
  text-transform: none !important;
  margin: 0;
}
.insurance-modal__button-container .telia-checkbox {
  margin-bottom: 1rem;
}
.insurance-modal__price-disclaimer {
  color: #48484b;
  font-size: 0.875rem;
}
.insurance-modal__usps {
  margin: 0.5rem 0 0.5rem 0;
}
.insurance-modal__card-description {
  margin-top: 1rem;
}
.insurance-modal__card-description a {
  color: #990ae3;
}
.insurance-modal__card-description p {
  font-size: 1rem;
  letter-spacing: 0.01875rem;
  line-height: 1.5rem;
  margin-bottom: 0.5rem;
  margin-top: 0;
}
.insurance-modal__ribbon-wrapper {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  min-width: 125px;
  top: -2px;
  right: 1.5rem;
}
.insurance-modal__ribbon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  font-family: TeliaSans-Medium, Helvetica, Arial, sans-serif;
  padding: 4px 9px;
  height: 22px;
  border-radius: 2px;
  font-size: 0.75rem;
  line-height: 0.875rem;
}
@media all and (min-width: 48em) {
  .insurance-modal__ribbon {
    font-size: 0.875rem;
  }
}

.hero-top > .hero-top-content {
  background-color: #fff;
  padding: 16px;
  padding-top: 32px;
  padding-bottom: 32px;
}
@media (max-width: 24em) {
  .hero-top > .hero-top-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width: 40em) {
  .hero-top > .hero-top-content {
    padding-top: 32px;
    padding-left: 48px;
    padding-right: 48px;
    padding-bottom: 40px;
  }
}
.hero-top > .hero-top-content--transparent {
  background-color: transparent;
}
.hero-top > .hero-top-content.right {
  left: unset;
}
@media (min-width: 70em) {
  .hero-top > .hero-top-content.right {
    max-width: 530px;
    position: absolute;
    padding-top: 28px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 30px;
    top: 25px;
    right: 45px;
  }
}
@media (min-width: 74em) {
  .hero-top > .hero-top-content.right {
    max-width: 550px;
    top: 35px;
    right: 50px;
  }
}
@media (min-width: 78em) {
  .hero-top > .hero-top-content.right {
    max-width: 560px;
    padding-top: 30px;
    padding-left: 42px;
    padding-right: 42px;
    padding-bottom: 36px;
    top: 40px;
    right: 55px;
  }
}
@media (min-width: 82em) {
  .hero-top > .hero-top-content.right {
    max-width: 570px;
    padding-top: 30px;
    padding-left: 44px;
    padding-right: 44px;
    padding-bottom: 36px;
    top: 45px;
    right: 65px;
  }
}
@media (min-width: 86em) {
  .hero-top > .hero-top-content.right {
    max-width: 600px;
    padding-left: 48px;
    padding-right: 48px;
    padding-top: 36px;
    padding-bottom: 36px;
    top: 50px;
    right: 75px;
  }
}
@media (min-width: 96em) {
  .hero-top > .hero-top-content.right {
    max-width: 612px;
    padding-left: 48px;
    padding-top: 42px;
    padding-right: 48px;
    padding-bottom: 42px;
    top: 55px;
    right: 88px;
  }
}
@media (min-width: 100em) {
  .hero-top > .hero-top-content.right {
    padding: 48px;
    top: 60px;
    right: 88px;
  }
}
@media (min-width: 105em) {
  .hero-top > .hero-top-content.right {
    max-width: 620px;
    padding-bottom: 55px;
    top: 70px;
  }
}
.hero-top > .hero-top-content.left {
  right: unset;
}
@media (min-width: 70em) {
  .hero-top > .hero-top-content.left {
    max-width: 530px;
    position: absolute;
    padding-top: 16px;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 16px;
    top: 16px;
    left: 50px;
  }
}
@media (min-width: 74em) {
  .hero-top > .hero-top-content.left {
    max-width: 550px;
    left: 55px;
  }
}
@media (min-width: 78em) {
  .hero-top > .hero-top-content.left {
    max-width: 560px;
    padding-top: 24px;
    padding-left: 42px;
    padding-right: 42px;
    padding-bottom: 24px;
    left: 60px;
  }
}
@media (min-width: 82em) {
  .hero-top > .hero-top-content.left {
    max-width: 570px;
    padding-top: 24px;
    padding-left: 44px;
    padding-right: 44px;
    padding-bottom: 24px;
    left: 66px;
  }
}
@media (min-width: 86em) {
  .hero-top > .hero-top-content.left {
    max-width: 600px;
    padding-left: 48px;
    padding-right: 48px;
    padding-top: 32px;
    padding-bottom: 32px;
    left: 74px;
    top: 32px;
  }
}
@media (min-width: 90em) {
  .hero-top > .hero-top-content.left {
    max-width: 640px;
  }
}
@media (min-width: 96em) {
  .hero-top > .hero-top-content.left {
    padding-left: 48px;
    padding-top: 32px;
    padding-right: 48px;
    padding-bottom: 32px;
    left: 88px;
  }
}
.hero-top {
  margin: 0 auto;
  position: relative;
}
.hero-top .breadcrumb-mobile {
  font-size: 1rem;
  display: block;
}
@media (min-width: 70em) {
  .hero-top .breadcrumb-mobile {
    display: none;
  }
}
.hero-top-ingress {
  font-size: 18px;
  line-height: 24px;
}
.hero-top img,
.hero-top video {
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-width: 100%;
  min-height: 140px;
  max-height: 300px;
}
@media (min-width: 45em) {
  .hero-top img,
  .hero-top video {
    min-height: 220px;
    max-height: 600px;
  }
}
@media (min-width: 105em) {
  .hero-top img,
  .hero-top video {
    min-height: 600px;
  }
}
.hero-top--small img,
.hero-top--small video {
  min-height: 100px;
  max-height: 150px;
}
@media (min-width: 45em) {
  .hero-top--small img,
  .hero-top--small video {
    min-height: 220px;
    max-height: 300px;
  }
}
@media (min-width: 105em) {
  .hero-top--small img,
  .hero-top--small video {
    min-height: 250px;
  }
}
@media (max-width: 70em) {
  .hero-top--small .hero-top-content {
    padding-bottom: 0;
  }
}
@media (min-width: 78em) {
  .hero-top--small .right {
    max-width: 560px !important;
    padding-top: 30px !important;
    padding-left: 42px !important;
    padding-right: 42px !important;
    padding-bottom: 36px !important;
    top: 40px !important;
    right: 55px !important;
  }
}
.hero-top video.hero-top-video--desktop {
  display: none;
}
.hero-top video.hero-top-video--mobile {
  min-height: 200px;
}
.hero-top .hero-top-content-container {
  position: relative;
  z-index: 1;
  padding: 0;
  margin: 0;
  line-height: 1;
}
@media (min-width: 46em) {
  .hero-top video.hero-top-video--mobile {
    display: none;
  }
  .hero-top video.hero-top-video--desktop {
    display: block;
  }
}
@media (min-width: 70em) {
  .hero-top {
    overflow: hidden;
  }
}
.hero-top {
  font-size: 0;
  width: 100%;
}
.hero-top .hero-top-heading {
  font-size: unset;
}
.hero-top .hero-top-heading h1 {
  margin: 0;
}
.hero-top .hero-top-heading h1,
.hero-top .hero-top-heading h1 > span,
.hero-top .hero-top-heading h1 > p {
  color: black;
  font-size: 42px;
  line-height: 1;
  font-family: "TeliaSansHeading-Heading", Helvetica, Arial, sans-serif;
}
@media (max-width: 36em) {
  .hero-top .hero-top-heading h1,
  .hero-top .hero-top-heading h1 > span,
  .hero-top .hero-top-heading h1 > p {
    font-size: 40px;
  }
}
@media (max-width: 32em) {
  .hero-top .hero-top-heading h1,
  .hero-top .hero-top-heading h1 > span,
  .hero-top .hero-top-heading h1 > p {
    font-size: 34px;
  }
}
@media (max-width: 24em) {
  .hero-top .hero-top-heading h1,
  .hero-top .hero-top-heading h1 > span,
  .hero-top .hero-top-heading h1 > p {
    font-size: 30px;
  }
}
@media (min-width: 46em) {
  .hero-top .hero-top-heading h1,
  .hero-top .hero-top-heading h1 > span,
  .hero-top .hero-top-heading h1 > p {
    font-size: 55px;
  }
}
@media (min-width: 70em) {
  .hero-top .hero-top-heading h1,
  .hero-top .hero-top-heading h1 > span,
  .hero-top .hero-top-heading h1 > p {
    font-size: 38px;
  }
}
@media (min-width: 74em) {
  .hero-top .hero-top-heading h1,
  .hero-top .hero-top-heading h1 > span,
  .hero-top .hero-top-heading h1 > p {
    font-size: 38px;
  }
}
@media (min-width: 78em) {
  .hero-top .hero-top-heading h1,
  .hero-top .hero-top-heading h1 > span,
  .hero-top .hero-top-heading h1 > p {
    font-size: 40px;
  }
}
@media (min-width: 80em) {
  .hero-top .hero-top-heading h1,
  .hero-top .hero-top-heading h1 > span,
  .hero-top .hero-top-heading h1 > p {
    font-size: 42px;
  }
}
@media (min-width: 84em) {
  .hero-top .hero-top-heading h1,
  .hero-top .hero-top-heading h1 > span,
  .hero-top .hero-top-heading h1 > p {
    font-size: 44px;
  }
}
@media (min-width: 86em) {
  .hero-top .hero-top-heading h1,
  .hero-top .hero-top-heading h1 > span,
  .hero-top .hero-top-heading h1 > p {
    font-size: 50px;
  }
}
@media (min-width: 90em) {
  .hero-top .hero-top-heading h1,
  .hero-top .hero-top-heading h1 > span,
  .hero-top .hero-top-heading h1 > p {
    font-size: 52px;
  }
}
@media (min-width: 96em) {
  .hero-top .hero-top-heading h1,
  .hero-top .hero-top-heading h1 > span,
  .hero-top .hero-top-heading h1 > p {
    font-size: 55px;
  }
}
.hero-top .hero-top-heading--large h1,
.hero-top .hero-top-heading--large h1 > span,
.hero-top .hero-top-heading--large h1 > p {
  font-size: 55px;
}
@media (max-width: 50em) {
  .hero-top .hero-top-heading--large h1,
  .hero-top .hero-top-heading--large h1 > span,
  .hero-top .hero-top-heading--large h1 > p {
    font-size: 46px;
  }
}
@media (max-width: 36em) {
  .hero-top .hero-top-heading--large h1,
  .hero-top .hero-top-heading--large h1 > span,
  .hero-top .hero-top-heading--large h1 > p {
    font-size: 44px;
  }
}
@media (max-width: 28em) {
  .hero-top .hero-top-heading--large h1,
  .hero-top .hero-top-heading--large h1 > span,
  .hero-top .hero-top-heading--large h1 > p {
    font-size: 42px;
  }
}
@media (max-width: 24em) {
  .hero-top .hero-top-heading--large h1,
  .hero-top .hero-top-heading--large h1 > span,
  .hero-top .hero-top-heading--large h1 > p {
    font-size: 40px;
  }
}
@media (min-width: 40em) {
  .hero-top .hero-top-heading--large h1,
  .hero-top .hero-top-heading--large h1 > span,
  .hero-top .hero-top-heading--large h1 > p {
    font-size: 60px;
  }
}
@media (min-width: 56em) {
  .hero-top .hero-top-heading--large h1,
  .hero-top .hero-top-heading--large h1 > span,
  .hero-top .hero-top-heading--large h1 > p {
    font-size: 68px;
  }
}
@media (min-width: 76em) {
  .hero-top .hero-top-heading--large h1,
  .hero-top .hero-top-heading--large h1 > span,
  .hero-top .hero-top-heading--large h1 > p {
    font-size: 72px;
  }
}
@media (min-width: 88em) {
  .hero-top .hero-top-heading--large h1,
  .hero-top .hero-top-heading--large h1 > span,
  .hero-top .hero-top-heading--large h1 > p {
    font-size: 80px;
  }
}
.hero-top .hero-top-ingress {
  color: #222;
  padding-top: 8px;
}
.hero-top .hero-top-ingress p {
  margin-top: 12px;
  margin-bottom: 12px;
  font-family: "TeliaSans-Regular", Helvetica, Arial, sans-serif;
}
@media (min-width: 68em) and (max-width: 72em) {
  .hero-top .hero-top-ingress {
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 20px;
  }
}
.hero-top .hero-top-content.hero-top-content--no-media-banner {
  top: 0;
  left: 0;
  text-align: center;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
  position: relative;
  max-width: 1244px;
  margin-top: 0px;
}

.choose-subscription-continue-btn {
  margin-bottom: 1rem !important;
}

.emptyCartModal__overlay {
  z-index: 9999;
}

.download-shoppingcart-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.download-shoppingcart-section .download-shoppingcart-button {
  align-self: flex-start;
  margin: 0 0 2rem 0.3rem;
}
.download-shoppingcart-button {
  padding: 5px 1rem;
  margin-bottom: 1.5rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
html {
  box-sizing: border-box;
  font-family: Helvetica, Roboto, Arial, sans-serif;
}
body {
  background: #fff;
  margin: 0;
  padding: 0;
}
body .telia-footer__nav-column-bottom > .telia-footer__logo > img {
  max-height: 64px;
  max-width: 132px;
}
.rich-text-area > .heading:first-child {
  margin-top: 0;
}
.rich-text-area > h2 {
  margin: 50px 0 5px 0;
}
@media all and (min-width: 28.125em) {
  .rich-text-area > h2 {
    margin: 60px 0 5px 0;
  }
}
.rich-text-area > h3 {
  margin: 30px 0 0;
}
.rich-text-area > h4 {
  margin: 30px 0 0;
}
.rich-text-area ul:not(.list) {
  margin: 0.5rem 0 1.5rem;
}
.rich-text-area .no-margin-bottom {
  margin-bottom: 0;
}
.rich-text-area::after {
  content: "";
  display: table;
  clear: both;
}
*,
:after,
:before {
  box-sizing: inherit;
}
.button {
  text-align: center;
}
.content {
  margin: 0 auto 1rem;
  padding: 0 1rem;
  max-width: 80rem;
}
.link-list {
  color: inherit;
  font-size: 1rem;
}
.link-list--support {
  font-size: 0.875rem;
}
.link-list--dark {
  border-color: #000;
  color: #000;
}
.link-list--light {
  border-color: #fff;
  color: #fff;
}
.link-list--dividers .link-list__item {
  border-color: inherit;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.link-list--dividers .link-list__item:first-child {
  border-color: inherit;
  border-top-style: solid;
  border-top-width: 1px;
}
.link-list--categories {
  font-size: 0.875rem;
  overflow: hidden;
}
.link-list--categories .link-list__item {
  display: inline-block;
  margin-left: 0.5rem;
}
.link-list--categories .link-list__item:first-child {
  margin-left: 0;
}
.link-list--categories .link-list__item--active {
  color: #990ae3;
  position: relative;
}
.link-list--categories .link-list__item--active:after {
  background-color: #fff;
  bottom: 0;
  content: " ";
  display: block;
  height: 0.75rem;
  left: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%) translateY(50%) rotate(45deg);
  transform: translateX(-50%) translateY(50%) rotate(45deg);
  width: 0.75rem;
}
.link-list--categories .link-list__link {
  padding: 0.5rem;
}
@media screen and (min-width: 50rem) {
  .link-list--horizontal .link-list__item {
    display: inline-block;
    margin-left: 0.5rem;
  }
  .link-list--horizontal .link-list__item:first-child {
    margin-left: 0;
  }
}
.link-list--horizontal .link-list__link {
  padding: 1rem;
}
@media screen and (min-width: 50rem) {
  .link-list--horizontal .link-list__link {
    display: block;
  }
}
.link-list__items {
  border-color: inherit;
  line-height: 1.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.link-list__item {
  color: inherit;
  display: block;
}
.link-list__link {
  color: inherit;
  display: inline-block;
  padding: 1rem 0;
  text-decoration: none;
}
.link-list__link:active,
.link-list__link:focus,
.link-list__link:hover {
  text-decoration: underline;
}
.radio-button-group {
  margin-bottom: 1rem;
}
.radio-button-group__item {
  margin: 0 1rem 0 0;
  display: inline-block;
}
.radio-button-group__item input {
  display: none;
}
.radio-button-group__item label {
  cursor: pointer;
  text-decoration: underline;
}
.radio-button-group__item input:checked + label {
  color: #990ae3;
}
.text-list {
  margin: 0;
  padding: 0;
}
.text-list__item {
  border-bottom: 1px solid #f2f2f2;
  list-style: none;
  margin: 0.25rem 0;
  padding: 0.5rem 0;
  position: relative;
}
.text-list__item--strikethrough {
  color: #595959;
  text-decoration: line-through;
}
.text-list__item:last-child {
  border-bottom: none;
}
.text-list__item-inner {
  display: block;
  line-height: 2rem;
  margin-left: 3rem;
}
.comparison:after,
.comparison:before {
  content: " ";
  display: table;
}
.comparison:after {
  clear: both;
}
.comparison__primary {
  float: left;
  width: 35%;
}
.comparison__secondary {
  float: right;
  width: 35%;
}
.comparison__info {
  float: left;
  width: 30%;
}
.comparison__heading {
  text-align: center;
}
.comparison__table {
  width: 100%;
}
.comparison__item {
  padding: 0.5rem 0 0 1rem;
  vertical-align: top;
  width: 50%;
}
.comparison__item:first-child {
  padding-left: 0;
  padding-right: 1rem;
  text-align: right;
}
.footer__ribbon {
  background-color: #990ae3;
  color: #fff;
}
.footer__columns {
  margin: 0 auto;
  max-width: 60rem;
  padding: 2rem 0;
}
.footer__columns:empty {
  display: none;
}
@media screen and (min-width: 20rem) {
  .footer__columns {
    text-align: center;
  }
}
.footer__column {
  display: inline-block;
  font-size: 0;
  margin: 1rem 0;
  padding: 0 1rem;
  text-align: left;
  vertical-align: top;
  width: 100%;
}
@media screen and (min-width: 50rem) {
  .footer__column {
    width: 33.3333%;
  }
}
.footer__blurb {
  margin: 2rem 0;
  text-align: center;
  text-transform: uppercase;
}
.footer__socials {
  font-size: 0;
  margin: 1rem auto;
  max-width: 60rem;
  text-align: center;
}
.footer__socials:empty {
  display: none;
}
.footer__social {
  display: inline-block;
  margin: 0 0.875rem;
}
@media screen and (min-width: 30rem) {
  .footer__social {
    margin: 0 2rem;
  }
}
.footer__top-link {
  margin: 2rem 0;
  text-align: center;
}
@font-face {
  font-family: "TeliaSans-Regular";
  src: url(/shop/assets/fonts/TeliaSans-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "TeliaSans-RegularItalic";
  src: url(/shop/assets/fonts/TeliaSans-RegularItalic.ttf) format("truetype");
}
@font-face {
  font-family: "TeliaSans-Medium";
  src: url(/shop/assets/fonts/TeliaSans-Medium.ttf) format("truetype");
}
@font-face {
  font-family: "TeliaSans-MediumItalic";
  src: url(/shop/assets/fonts/TeliaSans-MediumItalic.ttf) format("truetype");
}
@font-face {
  font-family: "TeliaSans-Bold";
  src: url(/shop/assets/fonts/TeliaSans-Bold.ttf) format("truetype");
}
@font-face {
  font-family: "TeliaSansHeading-Heading";
  src: url(/shop/assets/fonts/TeliaSansHeading-Heading.ttf) format("truetype");
}
/*
 * Base / HTML elements
 ****************************************/
html,
body {
  font-size: 16px;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #333;
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif;
  line-height: 1.3;
}
html.wf-active body {
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif;
  font-weight: 300;
}
p {
  font-weight: 400;
}
figure {
  margin: 0;
}
main {
  display: block;
  /* All versions of IE10 do not recognise <main> without this */
}
#react-app,
#error-app {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/*
 * Common
 ****************************************/
.page-wrapper {
  position: relative;
  flex: 1;
}
.clear,
.clearfix {
  clear: both;
}
.no-price {
  height: 40px;
}
.price {
  font-weight: 600;
  text-align: right;
}
.price .decimal {
  font-size: 1em;
}
.columns {
  padding: 1rem;
}
button.brand,
.button.brand {
  background-color: #990ae3;
  color: white;
}
button.brand:hover,
.button.brand:hover,
button.brand:active,
.button.brand:active {
  background-color: #cc00ff;
}
.hidden {
  display: none;
}
@media screen and (min-width: 73.49em) {
  .hidden-on-desktop {
    display: none;
  }
}
.full-width {
  width: 100%;
}
.tab-bar {
  background-color: #990ae3;
}
.stock-status {
  color: #0099ff;
  display: block;
  margin: 0.5rem 0;
  text-align: center;
}
.stock-status.out-of-stock {
  color: red;
}
i.ts {
  transition: color 150ms ease-out;
}
input.search {
  border-radius: 15px;
}
.clickable {
  cursor: pointer;
}
.geosuggest__suggests-wrapper {
  background-color: #fff;
}
input.geosuggest__input {
  margin-bottom: 0px;
}
.geosuggest__suggests {
  list-style-type: none;
  margin-bottom: 0;
  margin-left: 0rem;
  border: 1px solid #ccc;
}
.geosuggest-item {
  padding: 0.5em 0.65em;
  cursor: pointer;
}
.geosuggest-item:hover {
  background-color: #545454;
  color: white;
  padding: 0.5em 0.65em;
  cursor: pointer;
}
.geosuggest__suggests--hidden {
  max-height: 0;
  overflow: hidden;
  border-width: 0;
}
.geosuggest-item--active {
  background: #ddd;
}
.spacer {
  margin: 1.5rem 0;
}
.spacer--small {
  margin: 1rem 0;
}
.align-left {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.spacer-sides {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.spacer-sides--less {
  margin-left: 1rem;
  margin-right: 1rem;
}
.spacer-top {
  margin-top: 1.5rem;
}
.spacer-top--extra {
  margin-top: 3rem;
}
.spacer-top--less {
  margin-top: 0.5rem;
}
.flex-self-start {
  align-self: flex-start;
  text-align: left;
}
.telia-sans-medium {
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
}
.strikethrough {
  text-decoration: line-through;
}
.alert-box {
  text-align: center;
  padding: 0.3rem;
}
.alert-box i.ts {
  margin-right: 0.5rem;
}
.alert-box.warning,
.alert-box.alert {
  background-color: #ffd3e0;
  border-bottom: 2px solid #ff2365;
}
.alert-box.info {
  background-color: #ddf1e7;
  border-bottom: 2px solid #00cc66;
}
.alert-box.attention {
  background-color: #fff5e0;
  border-bottom: 2px solid #ffcd64;
}
.alert-box.attention .link {
  color: #333;
  text-decoration: underline;
}
.phonenumber-alert {
  margin-bottom: 1rem;
}
.lipscore-rating {
  margin: 1rem auto;
}
.lipscore-rating-slider-readonly {
  margin-bottom: 0.5rem;
}
.lipscore-rating-star:not(.lipscore-rating-star-inactive) {
  fill: #ffcd64;
}
.lipscore-rating-votes {
  color: #737373;
  font-size: initial;
  vertical-align: -5%;
}
.lipscore-rating-review-link {
  border-bottom: 1px solid #990ae3;
  box-sizing: content-box;
  color: #000000;
  display: inline;
  font-family: "TeliaSans-Medium", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.lipscore-rating-review-link:before {
  content: " ";
  display: block;
}
.lipscore-rating-review-link:hover {
  color: #990ae3;
  text-decoration: none;
}
.lipscore-rating-review-link:focus {
  color: #ffffff;
  background-color: #990ae3;
  outline: none;
  text-decoration: none;
}
.lipscore-review {
  /*** Hide unwanted content generated by Lipscore ***/
}
.lipscore-review-list-footer,
.lipscore-review-purchase,
.lipscore-review-flag-wrapper {
  display: none;
}
.lipscore-review-date,
.lipscore-review-info-delim {
  color: #737373;
}
.lipscore-review-vote-score {
  vertical-align: 0.1em;
}
/*
 * Dev tools
 ****************************************/
.dev-box {
  background-color: #00cc66;
  padding: 0.7rem 0.5rem;
  text-align: center;
  width: 100%;
  z-index: 20;
}
.screen-reader-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  left: -9999rem;
}
.progress-container {
  height: 100%;
  margin-bottom: 1rem;
  overflow: hidden;
}
.progress-container .meter {
  background: #990ae3;
  color: white;
  float: left;
  padding: 0.6rem 1rem;
  position: relative;
  width: 70%;
}
.progress-container .meter.four-steps {
  width: 55%;
}
@media screen and (min-width: 52rem) {
  .progress-container .meter {
    width: 33.33333333%;
  }
  .progress-container .meter.four-steps {
    width: 25%;
  }
  .progress-container .meter span.extra-text {
    display: inline;
  }
}
.progress-container .meter::before,
.progress-container .meter::after {
  border-left: 10px solid transparent;
  border-right: 20px solid transparent;
  content: " ";
  display: block;
  height: 0;
  position: absolute;
  left: -10px;
  width: 0;
}
.progress-container .meter::before {
  border-bottom: 21px solid #990ae3;
  bottom: 0;
}
.progress-container .meter::after {
  border-top: 21px solid #990ae3;
  top: 0;
}
.progress-container .meter .step {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: inline-block;
  font-weight: bold;
  margin-right: 0.5rem;
  padding: 0.2rem 0.6rem;
}
.progress-container .meter .extra-text {
  display: none;
}
.progress-container .meter.complete,
.progress-container .meter.incomplete {
  width: 15%;
}
@media screen and (min-width: 52rem) {
  .progress-container .meter.complete,
  .progress-container .meter.incomplete {
    width: 33.33333333%;
  }
  .progress-container .meter.complete.four-steps,
  .progress-container .meter.incomplete.four-steps {
    width: 25%;
  }
}
.progress-container .meter.complete .text,
.progress-container .meter.incomplete .text {
  display: none;
}
@media screen and (min-width: 52rem) {
  .progress-container .meter.complete .text,
  .progress-container .meter.incomplete .text {
    display: inline;
  }
}
.progress-container .meter.incomplete {
  background: #f5f5f5;
  color: #aaa;
}
.progress-container .meter.incomplete::before {
  border-bottom-color: #f5f5f5;
}
.progress-container .meter.incomplete::after {
  border-top-color: #f5f5f5;
}
.progress-container .meter.incomplete + .meter.incomplete {
  background-color: #e5e5e5;
}
.progress-container .meter.incomplete + .meter.incomplete::before {
  border-bottom-color: #e5e5e5;
}
.progress-container .meter.incomplete + .meter.incomplete::after {
  border-top-color: #e5e5e5;
}
.progress-container .meter.incomplete + .meter.incomplete + .meter.incomplete {
  background-color: #d4d4d4;
}
.progress-container .meter.incomplete + .meter.incomplete + .meter.incomplete::before {
  border-bottom-color: #d4d4d4;
}
.progress-container .meter.incomplete + .meter.incomplete + .meter.incomplete::after {
  border-top-color: #d4d4d4;
}
.progress-container .meter.incomplete .step {
  background-color: #ccc;
  color: #f5f5f5;
}
.queue-page {
  text-align: center;
}
.queue-page--upper-case {
  text-transform: uppercase;
}
.queue-page--purple {
  color: #990ae3;
}
.queue-page--alert {
  /* > Small Devices, Tablet */
}
@media only screen and (min-width: 768px) {
  .queue-page--alert {
    display: none;
  }
}
.queue-page__loading-pebble {
  margin: 2rem 0 1rem 0;
}
.queue-page__sub-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "TeliaSans-Medium", Helvetica, Arial, sans-serif;
  font-weight: bold;
  padding: 1rem;
}
.queue-page__sub-header-icon {
  width: 20px;
  height: 40px;
}
.queue-page__sub-header-text {
  margin-left: 1rem;
  font-size: 1.3rem;
}
.queue-page__accordion-container {
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  align-self: center;
  border-radius: 0.5rem;
  border: 1px solid #ede1d8;
  box-shadow: 0px 1px 4px 0px #0000001a;
  background: white;
  margin-top: 4rem;
}
.queue-page__sub-container {
  display: flex;
  flex-direction: column;
  align-self: center;
}
.queue-page__hero-image {
  max-width: 100%;
  border-radius: 0.5rem 0.5rem 0 0;
}
.queue-page__footers-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 1rem;
}
.queue-page__accordion-item {
  text-align: left;
}
.queue-page .accordion {
  border-bottom: 1px solid #ede1d8 !important;
  border-top: inherit !important;
}
.queue-page__accordion-footer {
  display: flex;
  align-items: center;
  margin: 3rem 0 1rem 1rem;
}
.queue-page__footer-image {
  margin-right: 0.5rem;
  width: 6rem;
}
.queue-page .background-scene {
  width: 300px;
  height: auto;
}
@media all and (min-width: 30em) {
  .queue-page .background-scene {
    width: 450px;
  }
}
@media all and (min-width: 40em) {
  .queue-page .background-scene {
    width: 600px;
  }
}
@media all and (min-width: 55em) {
  .queue-page .background-scene {
    width: 800px;
  }
}
.queue-page .cssload-thecube {
  width: 62px;
  height: 62px;
  margin: 0 auto;
  margin-top: 41px;
  margin-bottom: 41px;
  position: relative;
  transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
}
.queue-page .cssload-thecube .cssload-cube {
  position: relative;
  transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
}
.queue-page .cssload-thecube .cssload-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.queue-page .cssload-thecube .cssload-cube:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #990ae3;
  animation: cssload-fold-thecube 2.76s infinite linear both;
  -o-animation: cssload-fold-thecube 2.76s infinite linear both;
  -ms-animation: cssload-fold-thecube 2.76s infinite linear both;
  -webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
  -moz-animation: cssload-fold-thecube 2.76s infinite linear both;
  transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
}
.queue-page .cssload-thecube .cssload-c2 {
  transform: scale(1.1) rotateZ(90deg);
  -o-transform: scale(1.1) rotateZ(90deg);
  -ms-transform: scale(1.1) rotateZ(90deg);
  -webkit-transform: scale(1.1) rotateZ(90deg);
  -moz-transform: scale(1.1) rotateZ(90deg);
}
.queue-page .cssload-thecube .cssload-c3 {
  transform: scale(1.1) rotateZ(180deg);
  -o-transform: scale(1.1) rotateZ(180deg);
  -ms-transform: scale(1.1) rotateZ(180deg);
  -webkit-transform: scale(1.1) rotateZ(180deg);
  -moz-transform: scale(1.1) rotateZ(180deg);
}
.queue-page .cssload-thecube .cssload-c4 {
  transform: scale(1.1) rotateZ(270deg);
  -o-transform: scale(1.1) rotateZ(270deg);
  -ms-transform: scale(1.1) rotateZ(270deg);
  -webkit-transform: scale(1.1) rotateZ(270deg);
  -moz-transform: scale(1.1) rotateZ(270deg);
}
.queue-page .cssload-thecube .cssload-c2:before {
  animation-delay: 0.35s;
  -o-animation-delay: 0.35s;
  -ms-animation-delay: 0.35s;
  -webkit-animation-delay: 0.35s;
  -moz-animation-delay: 0.35s;
}
.queue-page .cssload-thecube .cssload-c3:before {
  animation-delay: 0.69s;
  -o-animation-delay: 0.69s;
  -ms-animation-delay: 0.69s;
  -webkit-animation-delay: 0.69s;
  -moz-animation-delay: 0.69s;
}
.queue-page .cssload-thecube .cssload-c4:before {
  animation-delay: 1.04s;
  -o-animation-delay: 1.04s;
  -ms-animation-delay: 1.04s;
  -webkit-animation-delay: 1.04s;
  -moz-animation-delay: 1.04s;
}
@keyframes cssload-fold-thecube {
  0%,
  10% {
    transform: perspective(115px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    transform: perspective(115px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    transform: perspective(115px) rotateY(180deg);
    opacity: 0;
  }
}
@-o-keyframes cssload-fold-thecube {
  0%,
  10% {
    -o-transform: perspective(115px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    -o-transform: perspective(115px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    -o-transform: perspective(115px) rotateY(180deg);
    opacity: 0;
  }
}
@-ms-keyframes cssload-fold-thecube {
  0%,
  10% {
    -ms-transform: perspective(115px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    -ms-transform: perspective(115px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    -ms-transform: perspective(115px) rotateY(180deg);
    opacity: 0;
  }
}
@-webkit-keyframes cssload-fold-thecube {
  0%,
  10% {
    -webkit-transform: perspective(115px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    -webkit-transform: perspective(115px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    -webkit-transform: perspective(115px) rotateY(180deg);
    opacity: 0;
  }
}
@-moz-keyframes cssload-fold-thecube {
  0%,
  10% {
    -moz-transform: perspective(115px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    -moz-transform: perspective(115px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    -moz-transform: perspective(115px) rotateY(180deg);
    opacity: 0;
  }
}
@media only screen and (max-width: 40em) {
  input[type="submit"],
  button,
  .button {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .tabs .tab-headings .tab a {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}
.more-info__container {
  padding: 4rem;
  border-radius: 50%;
  background: #faf0ff;
  margin: 0 auto;
  width: fit-content;
  margin-bottom: 2rem;
}
.more-info__like-icon {
  color: #990ae3;
  width: 5rem;
  height: 5rem;
  transform: scale(-1, 1);
}
/*
 * Variation pickers
 ****************************************/
.variation-picker-container-accessory {
  margin: 1rem 0 0.5rem 0;
  text-align: center;
}
.variation-picker-container-accessory .title {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.variation-picker-container-accessory .color-picker-header {
  margin-bottom: 0.5rem;
  display: block;
}
.variation-picker-container-accessory .variation-picker-section {
  margin-bottom: 1rem;
}
.variation-picker-container-accessory .color-picker-section .color-circle {
  border: 0;
  box-shadow: 0 0 0 1px #ccc;
  border-radius: 50%;
  display: inline-block;
  height: 30px;
  margin-right: 0.25rem;
  margin-left: 0.25rem;
  width: 30px;
}
.variation-picker-container-accessory .color-picker-section .color-circle:hover,
.variation-picker-container-accessory .color-picker-section .color-circle.selected {
  box-shadow: 0 0 0 2px #990ae3;
  outline: 0;
  cursor: pointer;
}
.variation-picker-container-accessory .color-picker-section .color-circle:focus {
  box-shadow: 0 0 0 2px #990ae3;
  outline: 0;
}
.variation-picker-container-accessory .memory-picker-section .memory-box {
  background-color: #f8f8f8;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  color: #848889;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.15rem;
  margin-right: 0.15rem;
  padding: 0.5rem 0;
  width: 60px;
}
.variation-picker-container-accessory .memory-picker-section .memory-box:hover,
.variation-picker-container-accessory .memory-picker-section .memory-box.selected {
  border: 2px solid #990ae3;
  text-decoration: none;
}
.variation-picker-container-accessory .memory-picker-section .memory-box.selected {
  background-color: #fff;
  color: black;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.incomplete-order {
  margin-top: 3rem;
}
.incomplete-order__alert {
  margin-bottom: 3rem;
}
.incomplete-order__submit-button {
  margin-top: 1rem;
  width: 100%;
}
.incomplete-order-confirmation {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.incomplete-order-confirmation__check-icon {
  width: 4rem;
  height: 4rem;
  color: #02562b;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.rs-field-set {
  border: 0;
  margin: 2rem 0 1rem;
  padding: 0;
  width: 100%;
}
.rs-field-set:first-of-type {
  margin-top: 1rem;
}
.rs-field-set:last-of-type {
  margin-bottom: 0;
}
.rs-field-set label {
  display: block;
  padding-top: 1rem;
  margin-bottom: 0.5rem;
}
.rs-field-set input {
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif;
}
.rs-field-set__legend {
  padding-left: 0;
  margin-bottom: 1rem;
}
.rs-field-set--no-margin:first-of-type {
  margin-top: 0;
}

.rapidform {
  width: 100%;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.rs-form__row {
  flex-direction: column;
  display: flex;
  justify-content: space-between;
}
.rs-form__row--40-60 > :nth-child(1) {
  flex: 1 1 40%;
}
.rs-form__row--40-60 > :nth-child(2) {
  flex: 1 1 60%;
}
.rs-form__row--50-50 > :nth-child(1) {
  flex: 1 1 50%;
}
.rs-form__row--50-50 > :nth-child(2) {
  flex: 1 1 50%;
}
.rs-form__row--25-25-25-25 > :nth-child(1) {
  flex: 1 1 25%;
}
.rs-form__row--25-25-25-25 > :nth-child(2) {
  flex: 1 1 25%;
}
.rs-form__row--25-25-25-25 > :nth-child(3) {
  flex: 1 1 25%;
}
.rs-form__row--25-25-25-25 > :nth-child(4) {
  flex: 1 1 25%;
}
.rs-form__row--30-30-30 > :nth-child(1) {
  flex: 1 1 30%;
}
.rs-form__row--30-30-30 > :nth-child(2) {
  flex: 1 1 30%;
}
.rs-form__row--30-30-30 > :nth-child(3) {
  flex: 1 1 30%;
}
@media screen and (min-width: 55em) {
  .rs-form__row {
    flex-direction: row;
  }
  .rs-form__row > *:not(:last-of-type) {
    margin-right: 1rem;
  }
}

.announcement-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.announcement-layout__announcementWrapper {
  z-index: 45;
}
.announcement-layout__announcementText {
  margin: 0.3rem 0;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.bank-id-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: initial;
  margin: 0;
}
.bank-id__heading {
  margin-bottom: 1rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.bankid-section__bankid-button-container {
  margin: 1.5rem 0;
  border-radius: 7px;
  padding: 1rem;
  background: #f5f5fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.bankid-section__bankid-button-container button {
  width: 3rem;
  height: 3rem;
}
@media screen and (min-width: 55em) {
  .bankid-section__bankid-button-container button {
    width: 3.5rem;
    height: 3.5rem;
  }
}
.bankid-section__bankid-button-container:hover {
  filter: brightness(92%);
}
.bankid-section__bankid-container {
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 55em) {
  .bankid-section__bankid-container {
    width: 640px;
  }
}
.bankid-section__not-bankid {
  margin-top: 1rem;
  color: #6f6e6f;
}
.bankid-section__bankid-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
.bankid-section__bankid-wrapper .heading {
  margin-bottom: 0.5rem;
}
.bankid-section__bankid-header {
  display: flex;
  flex-direction: column;
}
.bankid-section__bankid-header .heading,
.bankid-section__bankid-header .paragraph {
  margin: 0;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.bankid-section__bankid-button-container {
  margin: 1.5rem 0;
  border-radius: 7px;
  padding: 1rem;
  background: #f5f5fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.bankid-section__bankid-button-container button {
  width: 3rem;
  height: 3rem;
}
@media screen and (min-width: 55em) {
  .bankid-section__bankid-button-container button {
    width: 3.5rem;
    height: 3.5rem;
  }
}
.bankid-section__bankid-button-container:hover {
  filter: brightness(92%);
}
.bankid-section__bankid-container {
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 55em) {
  .bankid-section__bankid-container {
    width: 640px;
  }
}
.bankid-section__not-bankid {
  margin-top: 1rem;
  color: #6f6e6f;
}
.bankid-section__bankid-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
.bankid-section__bankid-wrapper .heading {
  margin-bottom: 0.5rem;
}
.bankid-section__bankid-header {
  display: flex;
  flex-direction: column;
}
.bankid-section__bankid-header .heading,
.bankid-section__bankid-header .paragraph {
  margin: 0;
}

.porting-card-simplified {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
  position: relative;
  background-color: #f4f4f9;
  border-radius: 10px;
  width: 100%;
  margin-bottom: 1rem;
  padding: 1rem;
}
.porting-card-simplified__group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
}
.porting-card-simplified__group-heading {
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker__navigation-icon::before {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  margin-left: -4px;
  position: absolute;
  width: 0;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-bottom-color: #aeaeae;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
  border-top: none;
  border-bottom-color: #f0f0f0;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
  top: 0;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
  bottom: 0;
  margin-bottom: -8px;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
  border-bottom: none;
  border-top-color: #fff;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
  bottom: 0;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}
.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
  width: 100%;
}
.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
}
.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px;
}
.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}
.react-datepicker-popper {
  z-index: 1;
}
.react-datepicker-popper[data-placement^="bottom"] {
  padding-top: 10px;
}
.react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
  left: auto;
  right: 50px;
}
.react-datepicker-popper[data-placement^="top"] {
  padding-bottom: 10px;
}
.react-datepicker-popper[data-placement^="right"] {
  padding-left: 8px;
}
.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}
.react-datepicker-popper[data-placement^="left"] {
  padding-right: 8px;
}
.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}
.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}
.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}
.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: #a6a6a6;
}
.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}
.react-datepicker__month-container {
  float: left;
}
.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}
.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}
.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}
.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -72px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + (1.7rem / 2));
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}
.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day-names,
.react-datepicker__week {
  white-space: nowrap;
}
.react-datepicker__day-names {
  margin-bottom: -8px;
}
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__month--selected,
.react-datepicker__month--in-selecting-range,
.react-datepicker__month--in-range,
.react-datepicker__quarter--selected,
.react-datepicker__quarter--in-selecting-range,
.react-datepicker__quarter--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__month--selected:hover,
.react-datepicker__month--in-selecting-range:hover,
.react-datepicker__month--in-range:hover,
.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter--in-selecting-range:hover,
.react-datepicker__quarter--in-range:hover {
  background-color: #1d5d90;
}
.react-datepicker__month--disabled,
.react-datepicker__quarter--disabled {
  color: #ccc;
  pointer-events: none;
}
.react-datepicker__month--disabled:hover,
.react-datepicker__quarter--disabled:hover {
  cursor: default;
  background-color: transparent;
}
.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover,
.react-datepicker__year-text--highlighted:hover {
  background-color: #32be3f;
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2579ba;
  color: #fff;
}
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--in-selecting-range:not(
        .react-datepicker__day--in-range,
        .react-datepicker__month-text--in-range,
        .react-datepicker__quarter-text--in-range,
        .react-datepicker__year-text--in-range
    ),
.react-datepicker__month-text--in-selecting-range:not(
        .react-datepicker__day--in-range,
        .react-datepicker__month-text--in-range,
        .react-datepicker__quarter-text--in-range,
        .react-datepicker__year-text--in-range
    ),
.react-datepicker__quarter-text--in-selecting-range:not(
        .react-datepicker__day--in-range,
        .react-datepicker__month-text--in-range,
        .react-datepicker__quarter-text--in-range,
        .react-datepicker__year-text--in-range
    ),
.react-datepicker__year-text--in-selecting-range:not(
        .react-datepicker__day--in-range,
        .react-datepicker__month-text--in-range,
        .react-datepicker__quarter-text--in-range,
        .react-datepicker__year-text--in-range
    ) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(
        .react-datepicker__day--in-selecting-range,
        .react-datepicker__month-text--in-selecting-range,
        .react-datepicker__quarter-text--in-selecting-range,
        .react-datepicker__year-text--in-selecting-range
    ),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(
        .react-datepicker__day--in-selecting-range,
        .react-datepicker__month-text--in-selecting-range,
        .react-datepicker__quarter-text--in-selecting-range,
        .react-datepicker__year-text--in-selecting-range
    ),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(
        .react-datepicker__day--in-selecting-range,
        .react-datepicker__month-text--in-selecting-range,
        .react-datepicker__quarter-text--in-selecting-range,
        .react-datepicker__year-text--in-selecting-range
    ),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(
        .react-datepicker__day--in-selecting-range,
        .react-datepicker__month-text--in-selecting-range,
        .react-datepicker__quarter-text--in-selecting-range,
        .react-datepicker__year-text--in-selecting-range
    ) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover,
.react-datepicker__year-text--disabled:hover {
  background-color: transparent;
}
.react-datepicker__month-text.react-datepicker__month--selected:hover,
.react-datepicker__month-text.react-datepicker__month--in-range:hover,
.react-datepicker__month-text.react-datepicker__quarter--selected:hover,
.react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__month--selected:hover,
.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
  background-color: #216ba5;
}
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
  background-color: #f0f0f0;
}
.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}
.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}
.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}
.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}
.react-datepicker__aria-live {
  display: none;
}
.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.porting-card {
  position: relative;
  background-color: #f4f4f9;
  border-radius: 10px;
  width: 100%;
  margin-bottom: 1rem;
  padding: 1rem;
}
.porting-card--open {
  box-shadow: 0 0 0 2px #990ae3;
  transition: box-shadow 250ms ease-out;
}
.porting-card__ribbon {
  position: absolute;
  right: 1.5rem;
  top: -10px;
}
.porting-card__heading {
  margin: 0;
}
.porting-card__input-fields {
  display: flex;
  flex-direction: row;
  justify-content: initial;
  align-items: initial;
  flex-wrap: initial;
}
.porting-card__input-55 {
  width: calc(55% - 0.5rem);
  margin-right: 0.5rem;
}
.porting-card__input-45 {
  width: 45%;
}
.porting-card__input-button,
.porting-card__dropdown-navigation {
  border: none;
  outline: none;
  background-color: #fff;
}
.porting-card__input-button:focus,
.porting-card__dropdown-navigation:focus,
.porting-card__input-button:active,
.porting-card__dropdown-navigation:active,
.porting-card__input-button:hover,
.porting-card__dropdown-navigation:hover {
  outline: none;
  cursor: pointer;
}
.porting-card__input-button {
  border-left: 1px solid #f2f2f2;
  height: 100%;
}
.porting-card__input-button .Icon {
  width: 1.25rem;
  height: 1.25rem;
}
.porting-card__dropdown-menu {
  max-height: 20rem;
  overflow-y: scroll;
}
.porting-card__dropdown-toggle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  font-size: 1rem;
  padding: 0;
  margin-right: 0.5rem;
}
.porting-card__dropdown-toggle .Icon {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.25rem;
}
.porting-card__dropdown-navigation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  color: #29003e;
  border: 1px solid #29003e;
  margin-left: 0.5rem;
  padding: 0;
}
.porting-card__dropdown-navigation .Icon {
  width: 1rem;
  height: 1rem;
}
.porting-card__dropdown-navigation:hover,
.porting-card__dropdown-navigation:active,
.porting-card__dropdown-navigation:focus {
  background-color: #edc8ff;
}
.porting-card__dropdown-navigation--disabled {
  color: #6f6e6f;
  border-color: #6f6e6f;
}
.porting-card__dropdown-navigation--disabled:hover,
.porting-card__dropdown-navigation--disabled:active,
.porting-card__dropdown-navigation--disabled:focus {
  color: #6f6e6f;
  border-color: #6f6e6f;
  background-color: #fff;
  cursor: initial;
}
.porting-card__date-picker {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  display: flex !important;
  border-radius: 2px 2px 0px 0px !important;
}
.porting-card__date-picker-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  margin-bottom: 0.5rem;
}
.porting-card__date-picker-content {
  width: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.porting-card__date-picker-content button {
  text-transform: none;
  min-width: 14rem;
}
.porting-card__date-picker-day--is-holiday {
  width: 100%;
  border-radius: 50%;
  background-color: #ff3264;
  color: #fff;
}
.porting-card__date-picker-holidays {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  margin-top: 0.25rem;
  font-size: 0.75rem;
}
.porting-card__time-picker {
  display: initial !important;
}
.porting-card__time-picker-time {
  color: #222;
  font-size: 1rem;
}
.porting-card__time-picker-time:active,
.porting-card__time-picker-time:focus {
  background-color: #29003e;
  color: #fff;
}
.porting-card__sim-card-message {
  font-style: italic;
  font-size: 0.875rem;
  margin: 1rem 0 0 !important;
}
.react-datepicker {
  font-family: "TeliaSans-Regular", Helvetica, Arial, sans-serif;
}
.react-datepicker__month-container {
  width: 100%;
}
.react-datepicker__header {
  background-color: #fff;
  border-bottom: 1px solid #dcdce1;
  padding-top: 2rem;
  color: white;
}
.react-datepicker__day--selected,
.react-datepicker__day--selected:hover {
  border-radius: 100px;
  background-color: #990ae3;
  color: #fff;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__day--keyboard-selected:hover {
  border-radius: 100px;
  background-color: #edc8ff;
  color: #000;
}
.react-datepicker__day:hover {
  border-radius: 100px;
}
.react-datepicker__day-names {
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #222;
}
.react-datepicker__time-list-item--disabled,
.react-datepicker__header--time--only,
.react-datepicker__triangle {
  display: none;
}
.react-datepicker__time-list-item--selected {
  background-color: #29003e !important;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.update-porting-date__order-not-found {
  height: 500px;
}
.update-porting-date__heading-inner {
  max-width: 1680px;
  margin: 0 auto;
}
.update-porting-date__heading-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  background-color: white;
  padding: 1rem;
  text-align: center;
}
@media screen and (min-width: 73.5em) {
  .update-porting-date__heading-container {
    padding: 2rem 1rem;
  }
}
@media screen and (min-width: 55em) {
  .update-porting-date__bankid-container {
    width: 640px;
  }
}
.update-porting-date__bankid-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
.update-porting-date__bankid-wrapper .heading {
  margin-bottom: 0.5rem;
}
.update-porting-date__submit-container {
  margin-top: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  width: 100%;
}
.update-porting-date__submit-container button {
  text-transform: none;
  min-width: 14rem;
}
.update-porting-date .header__icon {
  color: #008641;
}
.update-porting-date--failed .header__icon {
  color: #ff3264;
}

.bank-id-redirect-wrapper {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}

.existing-get-offer-bubble-no-campaign {
  background: #ccefdd;
}
.existing-get-offer-bubble-no-campaign::before {
  border-color: #ccefdd;
}
.existing-get-offer-bubble {
  padding: 1rem;
  width: calc(100% + 2rem);
  margin: 1rem 0;
}
.existing-get-offer-bubble__strikethrough-data {
  text-decoration: line-through;
  margin-right: 0.5rem;
}
.existing-get-offer-bubble__double-data {
  font-family: "TeliaSans-bold", Helvetica, Arial, sans-serif;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.beta-checkout__toggle-cart {
  display: none !important;
}
@media all and (max-width: 1175px) {
  .beta-checkout__toggle-cart {
    margin: 1rem 0;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: initial !important;
    flex-wrap: initial !important;
    align-self: flex-end;
    padding: 0 0 0 1rem;
    margin-bottom: 2.5rem;
  }
  .beta-checkout__toggle-cart__content {
    display: flex;
    flex-direction: row;
    justify-content: initial;
    align-items: center;
    flex-wrap: initial;
  }
  .beta-checkout__toggle-cart__heading {
    margin: 0 0 0 1rem;
    font-size: 1rem;
    font-family: "TeliaSans-Regular", Helvetica, Arial, sans-serif;
  }
}
@media all and (max-width: 460px) {
  .beta-checkout__toggle-cart {
    width: 100%;
  }
}
.beta-checkout__buttons-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: initial;
  flex-wrap: initial;
  width: 100%;
}
.beta-checkout--space-between {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.beta-checkout-page {
  background-color: #fff;
}
.beta-checkout-page .registered-member-card {
  border-radius: 8px;
}
.beta-checkout-page .registered-member-card-list {
  padding: 0px 1rem;
}
.beta-checkout-page .contact-card-container__section {
  padding-bottom: 1rem !important;
}
.beta-checkout-page .add-member__next-user > button {
  text-transform: none;
  min-width: 11rem;
}
.beta-checkout-page__heading-container {
  background-color: white;
}
@media screen and (min-width: 73.5em) {
  .beta-checkout-page__heading-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    flex-wrap: initial;
  }
}
.beta-checkout-page__heading {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
@media screen and (min-width: 73.5em) {
  .beta-checkout-page__heading {
    margin: 0 9rem;
  }
}
.beta-checkout-page__content {
  background-color: #fff;
}
@media screen and (min-width: 39.5em) {
  .beta-checkout-page__content {
    width: 39.5rem;
    margin: 1.5rem auto 0;
  }
}
@media screen and (min-width: 73.5em) {
  .beta-checkout-page__content {
    width: calc(39.5rem + 30rem + 4rem);
    margin: 3rem auto 0;
    display: flex;
  }
}
.beta-checkout-page__cart-wrapper {
  display: none;
}
@media screen and (min-width: 73.5em) {
  .beta-checkout-page__cart-wrapper {
    display: initial;
    position: sticky;
    top: 1rem;
  }
}
.beta-checkout-page__column {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: initial;
  flex-wrap: initial;
}
@media screen and (min-width: 39.5rem) {
  .beta-checkout-page__column {
    float: left;
    margin-left: 4rem;
  }
  .beta-checkout-page__column:first-child {
    width: 100%;
    margin: 0 auto;
  }
  .beta-checkout-page__column:first-child:nth-last-child(1) {
    width: 100%;
    margin: 0 auto;
  }
  .beta-checkout-page__column:first-child:nth-last-child(2) {
    width: 39.5rem;
  }
  .beta-checkout-page__column:first-child:nth-last-child(2) ~ .beta-checkout-page__column {
    width: 30rem;
  }
}
.beta-checkout-page .step-indicator {
  background-color: #fff;
  margin: 0 0 1rem;
  padding-top: 1rem;
}
@media all and (min-width: 73.5em) {
  .beta-checkout-page .step-indicator {
    margin-top: 1rem;
  }
}
.beta-checkout-page .step-indicator__list {
  margin-bottom: 1rem;
}
.beta-checkout-page .animated-progress-bar {
  margin: 0;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.choose-subscription__container {
  width: 100%;
}
.choose-subscription__container .tabs__list {
  display: flex;
}
.choose-subscription__container .tabs__list-item {
  flex: auto;
}
.choose-subscription__container-switch {
  margin-top: 2.7rem;
}
.choose-subscription__container-switch__continue-button {
  margin-top: 0.5rem;
}
.choose-subscription__container-switch__continue-button .button {
  width: 17rem;
  text-transform: capitalize;
}
.choose-subscription__show-more-button {
  margin-top: 2.6rem;
  align-self: center;
  width: 100%;
  color: #6d02a3;
  font-family: "TeliaSans-Bold", Helvetica, Arial, sans-serif;
  margin-bottom: 4rem;
}
.choose-subscription__show-more-button:hover,
.choose-subscription__show-more-button:focus {
  background-color: transparent !important;
  color: #6d02a3 !important;
}
.choose-subscription__subscriptionInfo {
  padding: 1rem;
  border-radius: 1rem;
}
.choose-subscription__subscriptionInfo h2 {
  margin-top: 0;
}
.choose-subscription__subscriptionInfo .paragraph {
  margin: 0;
}
.choose-subscription__accordion {
  margin-bottom: 2rem;
}
@media all and (min-width: 37.5em) {
  .choose-subscription__accordion {
    margin-bottom: 1rem;
  }
}
.choose-subscription__buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.choose-subscription__buttons__first {
  margin: 1rem !important;
  width: 18rem;
}
.choose-subscription__tab-heading {
  margin-bottom: 0.25rem;
}
.choose-subscription__description-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
  flex-basis: 35%;
  margin-right: 0.25rem;
}
.choose-subscription__description-text {
  font-family: "TeliaSans-Medium", Helvetica, Arial, sans-serif;
}
.choose-subscription__content {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: flex-start;
  flex-wrap: initial;
  text-align: left;
}
.choose-subscription__content-main {
  padding: 1rem 2rem;
}
.choose-subscription__disclaimer {
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-size: 0.875rem;
}
.choose-subscription__divider {
  margin: 1rem auto;
  width: 60%;
}
.choose-subscription__heading {
  margin-top: 0;
  text-align: left;
}
@media all and (min-width: 48em) {
  .choose-subscription__heading {
    margin-bottom: 2.5rem;
    text-align: center;
  }
}
.choose-subscription__chooser-box-wrapper {
  width: 100%;
  margin-bottom: 0;
  margin-top: 2rem;
}
.choose-subscription__read-more {
  align-self: flex-start;
  margin: 0.5rem 0.5rem 2rem 0.5rem;
  color: #6d02a3;
}
.choose-subscription__choose-button {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: center;
  flex-wrap: initial;
  margin-bottom: 2rem;
}
@media (min-width: 1175px) {
  .choose-subscription__choose-button {
    display: none;
  }
}
.choose-subscription__choose-button .button {
  width: 100%;
  max-width: 18rem;
  margin-bottom: 1rem;
}
.choose-subscription__container-switch {
  border-radius: 0.5rem;
  border: 1px solid #d6d6dd;
  box-shadow: 0px 1px 4px 0px #0000001a;
  padding: 1rem 0 0 0;
}
.choose-subscription__container-switch__header {
  margin-left: 0.8rem;
}
.choose-subscription__container-switch .telia-checkbox {
  height: 3rem;
  display: flex;
  align-items: center;
}
.choose-subscription__container-switch__continue-button {
  display: flex;
  flex-direction: initial;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
.choose-subscription__tabs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
}
@media all and (min-width: 48em) {
  .choose-subscription__tabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: initial;
  }
}
.choose-subscription__tab {
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #7a7a7a;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  color: #222222;
  background: none;
}
.choose-subscription__tab:not(:last-of-type) {
  margin-right: 0.875rem;
}
.choose-subscription__tab:active,
.choose-subscription__tab:focus,
.choose-subscription__tab:hover,
.choose-subscription__tab__selected {
  background-color: #30004b;
  border: 1px solid #30004b;
  color: #fff;
}
@media all and (min-width: 48em) {
  .choose-subscription__tab {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
  }
}
.choose-subscription__tab-icon {
  margin-right: 0.5rem;
  width: 1.5rem;
}
.choose-subscription__footer-text-block {
  display: flex;
}
.choose-subscription__footer-text-block svg {
  margin: 0 !important;
}
.choose-subscription__footer-text-block--purple svg {
  color: white;
}
.choose-subscription__subscriptionInfoBox {
  border-radius: 0.5rem;
  box-shadow: 0px 1px 4px 0px #0000001a;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  margin: 3rem 0 3rem 0;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.ban-modal {
  z-index: 100;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 48em) {
  .ban-modal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.ban-modal__subscription-heading {
  font-weight: bolder;
  padding-bottom: 0.25rem;
  color: black;
}
.ban-modal__subscription-type {
  font-weight: bolder;
  color: black;
}
.ban-modal__ban {
  outline: 1px solid #bdbdbd;
  border-radius: 8px;
  margin: 0 0.5rem 0.5rem 0;
  padding: 1rem;
  width: 280px;
  cursor: pointer;
}
@media screen and (max-width: 325px) {
  .ban-modal__ban {
    width: 240px;
  }
}
.ban-modal__ban.selected {
  outline: 2px solid #990ae3;
}
.ban-modal__ban.disabled {
  cursor: initial;
  background-color: #e4e4e4;
}
.ban-modal__ban .radiobutton {
  display: none;
}
.ban-modal__ban.separate-ban {
  display: flex;
  align-items: center;
  position: relative;
}
.ban-modal__add-icon {
  width: 28px;
  height: 28px;
}
.ban-modal__check-mark {
  display: none;
}
.ban-modal__check-mark.selected {
  display: inline;
  color: #990ae3;
  height: 25px;
  width: 25px;
  align-self: baseline;
}
@media screen and (max-width: 325px) {
  .ban-modal__check-mark.selected {
    display: none;
  }
}
.ban-modal__check-mark-separate {
  position: absolute;
  display: none;
  right: 1rem;
  top: 1rem;
}
.ban-modal__check-mark-separate.selected {
  display: inline;
  color: #990ae3;
  height: 25px;
  width: 25px;
}
@media screen and (max-width: 325px) {
  .ban-modal__check-mark-separate.selected {
    display: none;
  }
}
.ban-modal__separate-ban-text {
  margin-left: 0.5rem;
}
.ban-modal__subsription-content {
  margin: 1rem 0;
}
.ban-modal__ban-header {
  display: flex;
  margin-left: -5px;
  justify-content: space-between;
}
.ban-modal__header-text {
  display: flex;
  align-items: center;
}
.ban-modal ul {
  margin: 0;
  padding: 0;
}
.ban-modal ul li {
  padding: 0.25rem 0;
  list-style: none;
}
.ban-modal-dialog .radiobutton {
  margin-left: -0.5rem;
  align-items: baseline;
}
.ban-modal-dialog .telia-checkbox__checkbox {
  position: absolute;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.contact-card-container__section {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: flex-start;
  flex-wrap: initial;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  width: 100%;
  text-align: left;
}
.contact-card-container__deliveryaddress-container {
  margin-top: 1rem;
}
.contact-card-container__wrapper {
  width: 100%;
}
.contact-card-container__content-shadow {
  padding: 1rem;
  box-shadow: 0px 2px 6px 0px rgba(68, 68, 68, 0.2);
  border-radius: 3px;
}
.contact-card-container__heading {
  margin-bottom: 0.5rem;
}
.contact-card-container__address #edit-delivery-address-form-button {
  margin-top: 1rem;
}
.contact-card-container__heading-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contact-card-container__heading-container .button {
  padding: 0.6rem;
}
.contact-card-container__logout-bankid .button {
  text-transform: none;
}
.contact-card-container__content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: initial;
  width: 100%;
}
.contact-card-container__bankid-logout {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.contact-card-container__bankid-icon {
  width: 1.2rem !important;
  height: 1.2rem !important;
  margin-left: 0.5rem;
}
.contact-card-container__bankid-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  outline: none;
  text-decoration: underline;
  border: none;
  background-color: inherit;
  font-size: 0.875rem;
  font-family: TeliaSans-regular, Helvetica, Arial, sans-serif;
  cursor: pointer;
  color: #000;
  text-wrap: nowrap;
}
.contact-card-container__bankid-btn:hover,
.contact-card-container__bankid-btn:active,
.contact-card-container__bankid-btn:focus {
  text-decoration-color: #990ae3;
  color: #990ae3;
}
.contact-card-container__contact {
  margin: 1rem 0 0 0;
  flex: 1 1 auto;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.edit-delivery-address-container {
  position: relative;
}
.edit-delivery-address-container .react-autosuggest__suggestions-container {
  display: none;
}
.edit-delivery-address-container .react-autosuggest__suggestions-container--open {
  display: block;
  position: absolute;
  top: 95px;
  width: 100%;
  max-height: 400px;
  border: 1px solid #990ae3;
  background-color: #fff;
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif;
  font-size: 1rem;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow-y: scroll;
  z-index: 2;
}
.edit-delivery-address-container .react-autosuggest__suggestions-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.edit-delivery-address-container .react-autosuggest__suggestion {
  cursor: pointer;
  padding: 10px 20px;
}
.edit-delivery-address-container .react-autosuggest__suggestion--highlighted {
  background-color: #990ae3;
  color: #fff;
}
.edit-delivery-address-container__suggestion {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.edit-delivery-address-container__suggestion-icon {
  width: 1rem;
  height: 1;
  margin-right: 0.5rem;
}

.contact-info__email-field {
  width: 24rem;
}
.contact-info__phone-field {
  width: 8rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.dsf-mismatch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: initial;
  position: relative;
  padding: 1.5rem 0.5rem;
}
@media all and (min-width: 48em) {
  .dsf-mismatch {
    padding: 2rem 3rem 3rem 3rem;
  }
}
.dsf-mismatch__bold {
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
  font-weight: 400;
}
.dsf-mismatch__error {
  color: #be0040;
  margin-top: 1rem;
}
.dsf-mismatch__warning-icon {
  width: 1.5rem !important;
  height: 1.5rem !important;
  flex-shrink: 0;
  margin-right: 0.5rem;
}
@media all and (min-width: 48em) {
  .dsf-mismatch__warning-icon {
    position: absolute;
    top: 0;
    left: -1.8rem;
  }
}
.dsf-mismatch__error-icon {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
}
.dsf-mismatch__flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
  position: relative;
}
.dsf-mismatch__bankid-btn-container {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  flex-wrap: initial;
}
.dsf-mismatch__bankid-btn {
  display: flex;
  align-items: center;
  outline: none;
  text-decoration: underline;
  border: none;
  background-color: inherit;
  font-size: 0.875rem;
  font-family: TeliaSans-regular, Helvetica, Arial, sans-serif;
  cursor: pointer;
  color: #000;
  text-wrap: nowrap;
}
.dsf-mismatch__bankid-btn:hover,
.dsf-mismatch__bankid-btn:active,
.dsf-mismatch__bankid-btn:focus {
  text-decoration-color: #990ae3;
  color: #990ae3;
}
.dsf-mismatch__bankid-icon {
  width: 1.2rem !important;
  height: 1.2rem !important;
  margin-left: 0.5rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.beta-checkout__bank-id-verification {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.beta-checkout__bank-id-verification p {
  align-self: flex-start;
}
.beta-checkout__section {
  margin-top: 0.5rem !important;
  width: 100%;
  border: 1px solid #d6d6dd;
  border-radius: 8px;
}
.beta-checkout__section .button--link {
  padding: 0;
}
.beta-checkout__section .bank-id-card {
  box-shadow: none;
}
.beta-checkout__section-margin {
  width: calc(100% - 2rem);
  margin: 1rem 1rem 0 !important;
}
.beta-checkout--no-margin-top {
  margin-top: 0 !important;
}
.beta-checkout__heading {
  align-self: flex-start;
  text-transform: none !important;
}
@media all and (min-width: 48em) {
  .beta-checkout__heading {
    align-self: flex-start;
  }
}
.beta-checkout__heading--subscription {
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  margin-bottom: 1rem;
  flex-direction: column;
}
.beta-checkout__heading--member {
  display: flex;
  font-size: 1rem;
  margin-top: 0;
}
.beta-checkout__heading--member .add-member__circle {
  margin-left: 1rem;
}
.beta-checkout__ingress {
  margin-top: 0.5rem !important;
}
.beta-checkout__keep-number {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.25rem;
}
.beta-checkout__keep-number .button {
  font-size: 1rem;
}
.beta-checkout__keep-number .heading {
  text-align: left;
}
@media all and (min-width: 48em) {
  .beta-checkout__keep-number {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
}
.beta-checkout__input {
  min-width: 18.75rem;
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif !important;
  text-align: center;
}
.beta-checkout__number-picker {
  width: fit-content;
}
.beta-checkout__number-picker__paragraph {
  margin-bottom: 4px !important;
}
.beta-checkout__number-picker__dropdown-wrapper {
  width: 100%;
  max-width: 18rem;
}
.beta-checkout__choose-number-header p {
  margin-top: 0.5rem;
}
.beta-checkout__choose-number-heading {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.beta-checkout--center {
  width: 100%;
  text-align: center;
}
.beta-checkout--full-width {
  width: 100%;
}
.beta-checkout__web-deal-container {
  width: 100%;
}
@media all and (min-width: 48em) {
  .beta-checkout__web-deal-container {
    width: 37.5rem;
  }
}
.beta-checkout__continue-button-container {
  margin-left: 3rem;
}
.beta-checkout__continue-button-container .button {
  text-transform: none;
  min-width: 11rem;
}
.beta-checkout__trial-container {
  width: 100%;
  padding: 0 0.5rem !important;
}
@media all and (min-width: 48em) {
  .beta-checkout__trial-container {
    padding: 0 !important;
  }
}
.beta-checkout__traial-heading-wrapper {
  display: flex;
  align-items: center;
}
.beta-checkout__traial-heading-wrapper svg {
  margin-right: 1rem;
}
.beta-checkout__trial-subheading-wrapper {
  display: flex;
  margin-left: 3rem;
}
.beta-checkout__arrow-button {
  border: none;
  background: none;
  cursor: pointer;
}
.beta-checkout__arrow-button .Icon {
  width: 16px;
  height: 16px;
}
.beta-checkout__trial-list {
  margin-left: 1.25rem;
}
.beta-checkout__trial-list li {
  padding: 0.25rem 0;
}
.personal-details__table {
  border-collapse: separate;
  border-spacing: 0 0.5rem;
  font-size: 0.85rem;
  width: 100%;
}
@media screen and (min-width: 25em) {
  .personal-details__table {
    font-size: 1rem;
  }
}
.personal-details__table__head {
  position: absolute;
  left: -10000em;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.personal-details__table__caption {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 2.5rem;
  text-transform: uppercase;
}
.missing-email-alert {
  margin-top: 0.5rem !important;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.collapsed-member-card__collapser-left-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
}
.collapsed-member-card__collapser-info-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-top: 0.25rem;
}
.collapsed-member-card__collapser-heading {
  font-size: 1rem;
  font-weight: initial;
  margin: 0 0 0.5rem;
  width: 100% !important;
}
.collapsed-member-card__collapser-heading--no-margin {
  margin: 0;
}
.collapsed-member-card__collapser-info {
  color: #222;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: initial;
}
.collapsed-member-card__collapser-info-title {
  margin: 0;
}
.collapsed-member-card__collapser-chooser-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
}
.collapsed-member-card__collapser-chooser-aligner {
  height: 36px;
  display: flex;
  flex-direction: row;
  justify-content: initial;
  align-items: flex-start;
  flex-wrap: initial;
}
.collapsed-member-card__edit-btn-icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  margin-bottom: 0.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid #29003e;
}
.collapsed-member-card__edit-btn-icon .Icon {
  width: 1rem;
  height: 1rem;
  color: #29003e;
}
.collapsed-member-card__edit-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  cursor: pointer;
  outline: none;
  border: none;
  background-color: #fff;
  color: #29003e;
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  line-height: 0.75rem;
}
.collapsed-member-card__edit-btn:focus,
.collapsed-member-card__edit-btn:active,
.collapsed-member-card__edit-btn:hover {
  outline: none;
  background-color: #990ae3;
  color: #fff;
}
.collapsed-member-card__edit-btn:focus .collapsed-member-card__edit-btn-icon,
.collapsed-member-card__edit-btn:active .collapsed-member-card__edit-btn-icon,
.collapsed-member-card__edit-btn:hover .collapsed-member-card__edit-btn-icon {
  border: 1px solid #990ae3;
  background-color: #fff;
}
.collapsed-member-card__edit-btn-text {
  font-size: 0.875rem;
}

.subscription-age-not-ok {
  margin: 2rem 1rem !important;
  padding: 1rem !important;
}

.subscription-benefits-young {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  background-color: #f9f1ec;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  width: 100%;
}
.subscription-benefits-young__content {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: initial;
  flex-wrap: initial;
}
.subscription-benefits-young__heading {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  font-size: 1rem;
  margin: 0 0 1rem;
}
.subscription-benefits-young__description {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  font-size: 1rem;
  margin: 0;
}
.subscription-benefits-young__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #f39200;
  margin-right: 0.5rem;
}
.subscription-benefits-young__icon .Icon {
  width: 1.5rem;
  height: 1.5rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.modal-selling-point {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
}
.modal-selling-point__content {
  margin-left: 0.5rem;
}
.modal-selling-point__heading {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}
.modal-selling-point__subtitle {
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif;
  font-size: 1rem;
}
.modal-selling-point__description {
  font-size: 0.875rem;
}
.modal-selling-point__icon-wrapper {
  margin-top: 0.5rem;
}
.modal-selling-point__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #990ae3;
}

.member-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
  margin-bottom: 1rem;
}
.member-form__input-description {
  margin-top: -0.6rem;
  font-style: italic;
  color: gray;
  font-size: 0.9rem;
}
.member-form__checkbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
  margin-bottom: 1rem;
  margin-left: 0.5rem;
  position: relative;
}
.member-form__checkbox .telia-checkbox {
  width: fit-content;
  padding: 0 !important;
  margin: 0 !important;
}
.member-form__checkbox .telia-checkbox__container {
  cursor: pointer;
}
.member-form__checkbox .telia-checkbox__checkbox-container {
  padding: 0 !important;
  margin-right: 1rem;
}
.member-form__secret_number {
  display: flex;
  align-items: flex-end;
}
.member-form__secret_number_link {
  margin-top: 0.5rem;
  margin-left: 0.4rem;
}
.member-form__button-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
  margin-top: 1rem;
}
.member-form__barrings {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
  margin-top: 1rem;
}
.member-form__barrings-icon {
  margin-left: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
.member-form__divider {
  margin: 2rem;
}
.member-form__tooltip {
  max-width: 30rem;
}
.member-form__campaign-wrapper {
  width: 95%;
  margin-top: 2.5rem;
}
.member-form__img-campaign {
  margin-bottom: 1rem;
}
.member-form__campaign-disclaimer {
  font-size: 0.75rem;
}
.member-form__toggle-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
}
.member-form__toggle-container label {
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
.member-form__toggle-container .telia-toggle {
  margin-right: 0.5rem;
  flex: 1 0 auto;
}
.member-form .rs-field-set:last-of-type {
  margin-top: 0rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.member-card-step {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  border: 1px solid #00000054;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  width: 100%;
}
.member-card-step__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
  width: 100%;
  border: 1px solid #4e0174;
  padding: 1rem;
  margin-bottom: 1rem;
}
.member-card-step__heading {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: #4e0174;
}
.member-card-step__disabled {
  background-color: #f3f3f8;
  border: none;
}
.member-card-step__disabled-heading {
  font-size: 1rem;
  font-weight: initial;
}
.member-card-step__collapser-left-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
}
.member-card-step__collapser-heading {
  font-size: 1rem;
  font-weight: initial;
  margin: 0.5rem 0;
  width: 100% !important;
  color: #4e0174;
}
.member-card-step__collapser-icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  color: #018842;
  margin-right: 0.5rem;
}
.member-card-step__edit-btn-icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  margin-right: 0.75rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid #29003e;
}
.member-card-step__edit-btn-icon .Icon {
  width: 1rem;
  height: 1rem;
  color: #29003e;
}
.member-card-step__edit-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  cursor: pointer;
  outline: none;
  border: none;
  background-color: #fff;
  color: #29003e;
  padding: 0.3rem 0.5rem;
  line-height: 0.75rem;
}
.member-card-step__edit-btn:focus,
.member-card-step__edit-btn:active,
.member-card-step__edit-btn:hover {
  outline: none;
  background-color: #990ae3;
  color: #fff;
}
.member-card-step__edit-btn:focus .collapsed-member-card-step__edit-btn-icon,
.member-card-step__edit-btn:active .collapsed-member-card-step__edit-btn-icon,
.member-card-step__edit-btn:hover .collapsed-member-card-step__edit-btn-icon {
  border: 1px solid #990ae3;
  background-color: #fff;
}
.member-card-step__edit-btn-text {
  font-size: 0.875rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.radio-button-cards {
  width: 100%;
}
.radio-button-cards .radiobutton {
  display: grid;
  grid-template-areas: "radiobutton heading icon" "description description description";
  grid-template-columns: auto auto 1fr;
  align-items: center;
  padding: 0 2rem 0 0.6rem;
}
.radio-button-cards__card {
  border-radius: 0.5rem;
  border: 1px solid #d6d6dd;
  margin-bottom: 1.25rem;
  width: 100%;
  background-color: white;
  text-align: left;
}
.radio-button-cards__card--selected,
.radio-button-cards__card:hover {
  cursor: pointer;
  outline: 2px solid #6d02a3;
}
.radio-button-cards__card--selected .radiobutton__svg-container,
.radio-button-cards__card:hover .radiobutton__svg-container {
  background-color: var(--grey-100);
}
.radio-button-cards__card .radiobutton {
  align-items: baseline;
}
.radio-button-cards__card-heading {
  margin-right: 0.4rem;
  font-size: 1rem;
}
.radio-button-cards__card-description {
  grid-area: description;
}
.radio-button-cards__card-heading-icon .Icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.lease-limit-modal__content {
  padding: 2rem 2rem 1rem 2rem;
  margin-top: 5rem;
}
@media screen and (min-width: 600px) {
  .lease-limit-modal__content {
    margin-top: 0rem;
  }
}
.lease-limit-modal__radio-button-card-description {
  width: 100%;
  margin-left: 3.6rem;
  padding-right: 2rem;
}
.lease-limit-modal__radio-button-card-description--bold {
  font-family: "TeliaSans-Bold", Roboto, Arial, sans-serif;
}
.lease-limit-modal__price {
  margin-top: 1rem;
  font-family: "TeliaSans-Medium", Roboto, Arial, sans-serif;
  font-size: 1rem;
  text-align: right;
  margin-bottom: 0.5rem;
}
.lease-limit-modal__standalone-price {
  margin-top: 3.5rem;
  font-family: "TeliaSans-Medium", Roboto, Arial, sans-serif;
  font-size: 1.2rem;
}
@media screen and (min-width: 600px) {
  .lease-limit-modal__back-button {
    margin-right: 4rem;
  }
}

.service-modal {
  color: black;
}
.service-modal__subscription-change {
  margin: 1.1rem;
}
.service-modal__subscription-change .underline {
  text-decoration: underline;
  font-weight: bold;
  margin: 0 0.3rem;
}
.service-modal__subscription-change #subscription-change,
.service-modal__subscription-change #subscription-order {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.service-modal__subscription-change #subscription-change .Icon,
.service-modal__subscription-change #subscription-order .Icon {
  margin-right: 0.5rem;
}
.service-modal__subscription-change .paragraph {
  margin: 0;
}
.service-modal__disclaimer {
  border-width: 2px 2px 2px 6px;
  border-style: solid;
  border-color: #0078cb;
  border-radius: 0.5rem;
  padding: 0.7rem;
  margin: 1.1rem;
}
.service-modal__disclaimer .heading {
  display: flex;
  align-items: center;
  color: #014d80;
}
.service-modal__disclaimer .heading .Icon {
  margin-right: 0.5rem;
}
.service-modal__button-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 1.5rem;
}
.service-modal .telia-info-modal__header {
  color: black;
}
.service-modal .telia-info-modal__header .heading {
  color: black;
}
.service-modal .telia-info-modal__close-button .button {
  color: black !important;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.remove-confirmation-modal,
.keep-confirmation-modal {
  display: flex;
  align-items: center;
}
.remove-confirmation-modal__icon,
.keep-confirmation-modal__icon {
  margin-right: 1rem;
  color: #00cc66;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.web-deal-color-picker__color-circle {
  border: 0;
  box-shadow: 0 0 0 1px #ccc;
  border-radius: 50%;
  display: inline-block;
  height: 30px;
  margin-right: 0.25rem;
  margin-left: 0.25rem;
  width: 30px;
  position: relative;
}
@media only screen and (min-width: 44.5em) {
  .web-deal-color-picker__color-circle {
    height: 40px;
    margin-right: 0.3rem;
    margin-left: 0.3rem;
    width: 40px;
  }
}
.web-deal-color-picker__color-circle:hover,
.web-deal-color-picker__color-circle.selected,
.web-deal-color-picker__color-circle:focus {
  cursor: pointer;
}
.web-deal-color-picker__color-circle:hover::after,
.web-deal-color-picker__color-circle.selected::after,
.web-deal-color-picker__color-circle:focus::after {
  position: absolute;
  top: -2px;
  left: -2px;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background-color: transparent;
  box-shadow: 0 0 0 2px #990ae3;
  content: "";
  z-index: 1;
}
@media only screen and (min-width: 44.5em) {
  .web-deal-color-picker__color-circle:hover::after,
  .web-deal-color-picker__color-circle.selected::after,
  .web-deal-color-picker__color-circle:focus::after {
    height: 44px;
    width: 44px;
  }
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.webdeal-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.webdeal-container {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  border-radius: 0.5rem;
  padding: 1rem;
  width: 34rem;
  min-width: 15rem;
  max-width: 100%;
  border: 1px solid #00000029;
}
.webdeal-container__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.webdeal-container__checkbox {
  padding: 0;
}
.webdeal-container__webdeal-name {
  flex-wrap: wrap;
  font-size: 1rem;
  font-family: "TeliaSans-Bold", Helvetica, Arial, sans-serif;
}
.webdeal-container__price-wrapper {
  width: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.webdeal-container__price--strikethrough {
  text-decoration: line-through;
}
.webdeal-container__price--discount {
  font-family: "TeliaSans-Bold", Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
}
.webdeal-container__product-wrapper {
  width: 100%;
}
.webdeal-container__product {
  display: flex;
  margin-top: 2rem;
}
.webdeal-container__product .color-picker-header {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.webdeal-container__product .color-picker-header__heading {
  font-family: "TeliaSans-Bold", Helvetica, Arial, sans-serif;
  margin-right: 0.5rem;
}
.webdeal-container__product .variation-picker-container-accessory {
  align-self: flex-end;
  margin: 0;
  text-align: left;
}
.webdeal-container__product__imageContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
}
.webdeal-container__product__image {
  height: auto;
  max-width: 7rem;
}

@media only screen and (max-width: 599px) {
  .webdeal-modal {
    margin-top: 2rem;
    align-self: center;
    height: fit-content;
  }
  .webdeal-modal__content {
    width: 100%;
  }
}
.webdeal-modal__content {
  background-color: #f5f5fa !important;
}
.webdeal-modal__description {
  margin-top: 12px;
}
.webdeal-modal__heading {
  background-color: #f5f5fa !important;
}
.webdeal-modal__buttons {
  background-color: #f5f5fa !important;
}
.webdeal-modal__heading {
  padding: 0;
  margin-top: 1rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.choose-phone-number {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
.choose-phone-number .telia-dropdown-item {
  font-size: 1rem;
}
.choose-phone-number .telia-dropdown-content {
  width: 100%;
}
.choose-phone-number .button {
  text-align: left;
  width: fit-content;
}
.choose-phone-number__option {
  width: 100%;
}
.choose-phone-number__option:not(:last-of-type) {
  margin-bottom: 1rem;
}
.choose-phone-number__option .radio-button-with-label > .radio-button-with-label__label-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}
.choose-phone-number__option-heading {
  margin: 0;
  font-size: 1rem;
}
.choose-phone-number__error-message {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
  color: #e4175c;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.choose-phone-number__error-message .Icon {
  margin-right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  color: #e4175c;
}
.choose-phone-number__error-message .paragraph {
  margin: 0;
}
.choose-phone-number__expanded > * {
  margin-top: 0.75rem;
}
.choose-phone-number__new-customer-message-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  margin-top: 1.5rem;
  padding: 1rem;
  color: #02562b;
  background-color: #e1f9ec;
  border-radius: 8px;
}
.choose-phone-number__new-customer-message-container .paragraph {
  margin-bottom: 0 !important;
}
.choose-phone-number__new-customer-message-icon {
  margin-right: 0.5rem;
  line-height: 1.5rem;
}
.choose-phone-number__new-customer-message-icon .Icon {
  width: 1rem;
  height: 1rem;
  color: #02562b;
}

.extra-sim-modal p {
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif;
}
.extra-sim-modal__radio-button-card-description {
  margin-left: 3.6rem;
}
.extra-sim-modal__radio-button-card-description--bold {
  font-family: "TeliaSans-Bold", Roboto, Arial, sans-serif;
}
.extra-sim-modal__list-item {
  padding-top: 0.7rem !important;
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif;
  font-size: 1rem;
}
.extra-sim-modal__list-item-info {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}
.extra-sim-modal__list-item-info .Icon {
  width: 1.2rem !important;
}
.extra-sim-modal__list-item-icon {
  margin-right: 0.35rem;
}
.extra-sim-modal .telia-checkbox {
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif;
  font-size: 1rem;
}
.extra-sim-modal__price {
  margin-top: 1rem;
  font-family: "TeliaSans-Medium", Roboto, Arial, sans-serif;
  font-size: 1rem;
  text-align: right;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.choose-sim-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
.choose-sim-card__alert-box {
  margin-bottom: 1rem;
  padding-bottom: 0;
}
.choose-sim-card__esim-add {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: flex-start;
  flex-wrap: initial;
}
.choose-sim-card__esim-add .radiobutton-group--rich-content {
  margin: 0;
}
.choose-sim-card__esim-add a {
  margin-left: 0.5rem;
}
.choose-sim-card__extra-sim-button {
  display: flex;
  align-items: center;
  padding: 0.5rem 3rem;
  border: 1px solid #e4b6fb;
  border-radius: 0.5rem;
  width: 100%;
  background: #faf0ff;
  color: #4e0174;
  font-family: "TeliaSans-Medium", Roboto, Arial, sans-serif;
  font-size: 1rem;
}
.choose-sim-card__extra-sim-button:hover {
  cursor: pointer;
}
.choose-sim-card__extra-sim-button .Icon {
  width: 1.8rem !important;
  height: 1.8rem !important;
}
.choose-sim-card__extra-sim-button-description {
  margin-left: 0.5rem;
}
.choose-sim-card__environment-icon {
  color: #3dbf7c !important;
}
.choose-sim-card__radio-button-card-description {
  font-family: "TeliaSans-Regular", Helvetica, Arial, sans-serif;
  margin-left: 1.3rem;
}
.choose-sim-card__step-button-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  margin: 1rem auto;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.beta-checkout__heading--subscription {
  width: 100% !important;
}
.add-member__heading {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  margin: 1rem 1rem 0;
  font-size: 1.25rem;
}
.add-member__heading .paragraph {
  color: #4a4a4d;
  font-size: 1rem;
  margin: 0;
}
.add-member__circle-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  margin-bottom: 1rem;
}
.add-member__next-user {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: initial;
  width: 100%;
}
.add-member__next-user__description {
  color: #a0a0a0;
  text-align: center;
  margin-bottom: 0.9rem;
  padding: 0.75rem 1.5rem;
}
.add-member__tooltip {
  width: 17rem;
}
@media all and (min-width: 48em) {
  .add-member__tooltip {
    width: 22rem;
  }
}
.add-member__barrings-icon {
  cursor: pointer;
}
.add-member__collapser-wrapper {
  position: relative;
}
.add-member__collapser-wrapper--closed {
  position: relative;
  display: flex;
  flex-flow: row-reverse;
}
.add-member__circle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  min-width: 2.5rem;
  min-height: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 1rem;
  border-radius: 50%;
  background-color: #faf0ff;
  color: #8c07d0;
  font-size: 1rem;
  font-family: "TeliaSans-Medium", Helvetica, Arial, sans-serif;
  line-height: 2.5rem;
}
.add-member__circle .Icon {
  width: 1.25rem;
  height: 1.25rem;
}
.add-member__circle--green {
  background-color: #c5efd9;
  color: #018842;
}
.add-member__step-button-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  margin: 1rem auto;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.pickup-point {
  background-color: #fff;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  text-align: left;
  outline: none;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #ccc;
}
.pickup-point:focus-within {
  box-shadow: 0 0 0 2px #737373;
}
.pickup-point p {
  text-transform: capitalize;
  margin: 0;
  padding: 0;
}
.pickup-point:focus,
.pickup-point:active,
.pickup-point:hover {
  outline: none;
  box-shadow: 0 0 0 2px #737373;
  cursor: pointer;
}
.pickup-point--selected {
  outline: none;
  box-shadow: 0 0 0 2px #990ae3 !important;
  cursor: pointer;
}
.pickup-point--info {
  width: 100%;
}
.pickup-point--infotext {
  float: left;
  text-transform: capitalize;
  line-height: 24px;
}
.pickup-point--infologo {
  float: right;
  width: 55px;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.pickup-point-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  padding: 1rem 0;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.geolocation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  background: none;
  border: none;
  padding: 0.5rem;
  font-size: 1rem;
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif;
}
@media all and (min-width: 37.5em) {
  .geolocation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: initial;
    margin: 0 1rem;
  }
}
.geolocation:hover,
.geolocation:focus,
.geolocation:active {
  outline: 1px solid #990ae3;
  color: #990ae3;
  fill: #990ae3;
  cursor: pointer;
}
.geolocation__icon {
  margin: 0 1rem 0 0;
  color: black;
}
@media all and (min-width: 37.5em) {
  .geolocation__icon {
    margin: 0 1rem 1rem;
  }
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.onboarding-mobile-support-info {
  background: #faf0ff;
  width: 100%;
  padding: 24px;
  text-align: left;
  outline: none;
  border-radius: 5px;
}
.onboarding-mobile-support-info--infotext {
  line-height: 24px;
}
.onboarding-mobile-support-info--button {
  padding-top: 16px;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.onboarding-mobile-support-modal {
  line-height: 24px;
}
.onboarding-mobile-support-modal--container {
  z-index: 50;
}
.onboarding-mobile-support-modal__button-container {
  margin-top: 1rem;
}
.onboarding-mobile-support-modal__button {
  width: 15rem;
  margin-right: 0.5rem;
}
.onboarding-mobile-support-modal__ingress {
  margin: 0.5rem 0;
}
@media all and (max-width: 48em) {
  .onboarding-mobile-support-modal {
    display: flex;
    flex-direction: column;
  }
  .onboarding-mobile-support-modal__button {
    width: 100%;
    display: block;
    margin: 1rem 0;
  }
  .onboarding-mobile-support-modal__button-container {
    width: 100%;
  }
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.onboarding-mobile-support-item {
  background-color: #fff;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  text-align: left;
  outline: none;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #ccc;
}
.onboarding-mobile-support-item:focus-within {
  box-shadow: 0 0 0 2px #737373;
}
.onboarding-mobile-support-item p {
  text-transform: capitalize;
  margin: 0;
  padding: 0;
}
.onboarding-mobile-support-item:focus,
.onboarding-mobile-support-item:active,
.onboarding-mobile-support-item:hover {
  outline: none;
  box-shadow: 0 0 0 2px #737373;
  cursor: pointer;
}
.onboarding-mobile-support-item--selected {
  outline: none;
  box-shadow: 0 0 0 2px #990ae3 !important;
  cursor: pointer;
}
.onboarding-mobile-support-item--container {
  display: flex;
  justify-content: space-between;
}
.onboarding-mobile-support-item--info {
  width: 100%;
}
.onboarding-mobile-support-item--infotext {
  line-height: 24px;
}
.onboarding-mobile-support-item--heading {
  order: 1;
  width: 80%;
}
.onboarding-mobile-support-item--price {
  font-family: "TeliaSans-Bold", Helvetica, Arial, sans-serif !important;
  font-size: 16px;
  order: 2;
  width: 35px;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.pickup-in-store-point {
  background-color: #fff;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  text-align: left;
  outline: none;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #ccc;
}
.pickup-in-store-point:focus-within {
  box-shadow: 0 0 0 2px #737373;
}
.pickup-in-store-point p {
  text-transform: capitalize;
  margin: 0;
  padding: 0;
}
.pickup-in-store-point:focus,
.pickup-in-store-point:active,
.pickup-in-store-point:hover {
  outline: none;
  box-shadow: 0 0 0 2px #737373;
  cursor: pointer;
}
.pickup-in-store-point--selected {
  outline: none;
  box-shadow: 0 0 0 2px #990ae3 !important;
  cursor: pointer;
}
.pickup-in-store-point--info {
  width: 100%;
}
.pickup-in-store-point--infotext {
  float: left;
  text-transform: capitalize;
  line-height: 24px;
}
.pickup-in-store-point--instock {
  float: right;
  width: 82px;
  color: #018842;
}
.pickup-in-store-point-open {
  color: #018842;
}
.pickup-in-store-point-closed {
  color: red;
}

.geosuggest .geosuggest__input-wrapper {
  margin-bottom: 1rem;
}
.geosuggest .geosuggest__input-wrapper .geosuggest__label {
  color: #726e6e;
}
.geosuggest .geosuggest__input-wrapper .search-field {
  max-width: 28.125rem;
  width: 100%;
}
.geosuggest .geosuggest__suggests-wrapper {
  background-color: #fff;
}
.geosuggest .geosuggest__suggests-wrapper .geosuggest__suggests {
  list-style: none;
  border: 1px solid #ccc;
  padding: 1rem;
}
.geosuggest .geosuggest__suggests-wrapper .geosuggest__suggests .geosuggest__item:hover {
  color: black;
  cursor: pointer;
}
.geosuggest .geosuggest__suggests-wrapper .geosuggest__suggests .geosuggest__item {
  cursor: pointer;
  padding: 0.5em 0.65em;
}
.geosuggest .geosuggest__suggests-wrapper .geosuggest__suggests--hidden {
  max-height: 0;
  overflow: hidden;
  border-width: 0;
  display: none;
}
.geosuggest .geosuggest__suggests-wrapper .geosuggest__suggests .geosuggest__item--active {
  background: #ddd;
}
.geosuggest .geosuggest__suggests-wrapper .geosuggest__suggests .geosuggest__item__matched-text {
  color: black;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.shop-picker {
  width: 100%;
  max-width: 50rem;
  text-align: left;
}
.shop-picker__icon-arrow {
  color: #990ae3;
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin: 0;
}
.shop-picker__icon-arrow--isExpanded {
  transform: rotate(180deg);
}
@media all and (min-width: 37.5em) {
  .shop-picker__icon-arrow {
    margin: 0 1rem;
  }
}
.shop-picker__icon-klikk-og-hent {
  color: black;
  margin: 0 1rem 0 0;
}
@media all and (min-width: 37.5em) {
  .shop-picker__icon-klikk-og-hent {
    margin: 0 1rem;
  }
}
.shop-picker__header {
  display: flex;
  flex-direction: row;
  justify-content: initial;
  align-items: center;
  flex-wrap: initial;
  height: 100%;
  width: 100%;
  padding: 1rem;
  color: black;
  fill: black;
  border: none;
  background-color: #fff;
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif;
}
.shop-picker__header:hover,
.shop-picker__header:focus {
  outline: none;
  background-color: #e4e4e4;
  cursor: pointer;
}
.shop-picker__header h2 {
  flex: 1 0 auto;
  text-align: left;
  margin: 0;
}
.shop-picker__header__aside {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}
.shop-picker__available {
  display: none;
}
@media all and (min-width: 37.5em) {
  .shop-picker__available {
    display: block;
    margin: 0 2rem;
    font-size: 1rem;
  }
}
.shop-picker__content {
  padding: 1rem 0 0 0;
}
@media all and (min-width: 37.5em) {
  .shop-picker__content {
    padding: 1rem 0 0 0;
  }
}
.shop-picker__search-container {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: flex-start;
  flex-wrap: initial;
}
@media all and (min-width: 37.5em) {
  .shop-picker__search-container {
    display: flex;
    flex-direction: row;
    justify-content: initial;
    align-items: flex-start;
    flex-wrap: initial;
    margin: 0 1rem 1rem 1rem;
  }
}
.shop-picker__search-container__main {
  flex: 2 1 auto;
}
@media all and (min-width: 37.5em) {
  .shop-picker__search-container__main {
    padding-right: 3rem;
    border-right: 1px solid #ccc;
  }
}
.shop-picker__search-container__aside {
  flex: 1 0 auto;
}
.shop-picker__show-all {
  margin-bottom: 1rem;
}
.shop-picker__show-more {
  text-align: center;
  margin: 2rem 2rem 1rem;
}
.shop-picker__alert {
  margin-top: 1rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.delivery-methods {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.delivery-methods__option {
  padding: 1rem 1rem 0 1rem;
  width: 100%;
}
.delivery-methods__option:not(:last-of-type) {
  border-bottom: 2px solid #f2f2f2;
}
.delivery-methods__option .radio-button-with-label > .radio-button-with-label__label-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}
.delivery-methods__heading {
  margin: 0 0 0 1rem !important;
}
.delivery-methods__expanded > * {
  margin-top: 0.75rem;
}
.delivery-methods__expanded__description {
  margin: 1rem 0rem 0;
  font-style: italic;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.payment-methods {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.payment-methods__option {
  padding: 1rem;
  width: 100%;
}
.payment-methods__option:not(:last-of-type) {
  border-bottom: 2px solid #f2f2f2;
}
.payment-methods__option .radio-button-with-label > .radio-button-with-label__label-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}
.payment-methods__images {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: no-wrap;
}
.payment-methods__images > :not(:last-of-type) {
  margin-right: 0.5rem;
}
.payment-methods__heading {
  margin: 0 0 0 1rem !important;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.register-voucher {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: initial;
  width: 100%;
  margin-top: 2rem;
}
.register-voucher input,
.register-voucher label {
  width: 100%;
}
.register-voucher button {
  margin-top: 0.5rem;
}
@media all and (min-width: 48em) {
  .register-voucher {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: initial;
  }
  .register-voucher label {
    width: 50%;
    margin-right: 1rem;
  }
  .register-voucher button {
    margin-top: 1.5rem;
    margin-left: 1rem;
  }
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.voucher-table {
  width: 100%;
  margin-top: 1rem;
}
.voucher-table__registered {
  display: flex;
  flex-direction: column;
}
.voucher-table__registered .button {
  margin-left: 3rem;
}
.voucher-table__registered caption {
  font-weight: normal;
  text-align: left;
  margin-bottom: 1rem;
}
.voucher-table__registered th,
.voucher-table__registered td {
  padding: 0 0.625rem;
  font-size: 1rem;
}
.voucher-table__registered th:first-of-type,
.voucher-table__registered td:first-of-type {
  padding-left: 0;
}
.voucher-table__registered th:last-of-type,
.voucher-table__registered td:last-of-type {
  padding-right: 0;
}
.voucher-table__registered thead {
  display: flex;
  justify-content: space-between;
}
.voucher-table__registered th {
  text-align: left;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.registered-member-card {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: initial;
  flex-wrap: initial;
  position: relative;
  margin: 0.5rem 0 0 !important;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  width: 100%;
}
@media screen and (min-width: 55em) {
  .registered-member-card {
    min-height: 4.3rem;
  }
}
.registered-member-card--in-process {
  margin-top: 2rem !important;
}
.registered-member-card--existing {
  box-shadow: none;
  border: 2px dashed #a0a0a0;
}
.registered-member-card__info-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
  position: relative;
}
.registered-member-card__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: initial;
  position: relative;
  margin-left: 1.2rem;
  margin-right: 0.5rem;
}
.registered-member-card__title {
  color: #a0a0a0;
  font-size: 1.125rem;
  margin-right: 0.5rem;
}
.registered-member-card__title--existing {
  color: #990ae3;
}
.registered-member-card__member {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  color: #000;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 22px;
  font-family: "TeliaSans-Regular", Helvetica, Arial, sans-serif;
  font-style: normal;
}
.registered-member-card__member--existing {
  color: #a0a0a0;
}
.registered-member-card__member__description {
  margin-right: 0.5rem;
}
.registered-member-card__additional {
  margin-left: 1.2rem;
}
.registered-member-card__edit {
  display: flex !important;
}
.registered-member-card__edit__icon {
  width: 0.9rem !important;
  height: 0.9rem !important;
}
.registered-member-card__edit__text {
  font-size: 0.75rem;
  margin-right: 0.5rem;
  margin-left: 0.3rem;
}
.registered-member-card__checkmark {
  color: #00cc66;
  position: absolute;
  left: -1.2rem;
  top: 2px;
  width: 1rem !important;
  height: 1rem !important;
}
.registered-member-card__checkmark--existing {
  fill: #990ae3;
  color: #990ae3;
}
.registered-member-card__in-process {
  position: absolute;
  top: -19px;
  right: -2px;
  border: 2px solid black;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
}
.registered-member-card .registered-member-card__button {
  border: 0;
  padding: 0.3rem 0.5rem;
  font-family: "TeliaSans-Regular", Helvetica, Arial, sans-serif;
  line-height: 14px;
  color: black;
  text-transform: capitalize;
}
.registered-member-card .registered-member-card__button--edit {
  padding: 0.3rem 0.4rem;
  position: relative;
  top: 4px;
}
.registered-member-card .registered-member-card__button:active:not([disabled]) .Icon,
.registered-member-card .registered-member-card__button:hover:not([disabled]) .Icon,
.registered-member-card .registered-member-card__button:focus:not([disabled]) .Icon {
  fill: #fff;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.registered-member-card-list {
  padding: 0 0.5rem;
}
@media all and (min-width: 55em) {
  .registered-member-card-list {
    margin-top: calc(3.8rem - 0.5rem);
  }
}
@media all and (min-width: 48em) {
  .registered-member-card-list {
    padding: 0;
  }
}
.registered-member-card-list__no-margin {
  margin: 0;
}
.registered-member-card-list__indented-members {
  position: relative;
  margin-left: 1rem;
}
.registered-member-card-list__indented-members__item {
  position: relative;
  margin-left: 2rem;
}
.registered-member-card-list__indented-members__item:first-of-type:before {
  height: calc(50% + 9%);
  top: calc(-1 * 9%);
}
.registered-member-card-list__indented-members__item:before {
  content: "";
  position: absolute;
  display: block;
  width: 2rem;
  height: calc(100% + 2 * 9%);
  top: calc(-1 * (50% + 2 * 9%));
  left: -2rem;
  border-bottom: 0.2rem solid gray;
  border-left: 0.2rem solid gray;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.summary-container__section {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: flex-start;
  flex-wrap: initial;
  margin-top: 0.5rem !important;
  width: 100%;
  text-align: left;
  box-shadow: 0px 2px 6px 0px rgba(68, 68, 68, 0.2);
  border-radius: 3px;
}
.summary-container__hidden {
  display: none;
}

.porting-details-card {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: flex-start;
  flex-wrap: initial;
  margin-bottom: 1rem;
  padding: 0 1rem;
}
.porting-details-card__heading {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
  margin-bottom: 0.75rem;
}
.porting-details-card__icon {
  color: #222222;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}
.porting-details-card__content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
  background-color: #f4f4f9;
  border-radius: 4px;
}
.porting-details-card__item {
  padding: 0.75rem 1rem;
}
.porting-details-card__item span {
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
}
.porting-details-card__item:not(:last-of-type) {
  margin-right: 1rem;
}
.porting-details-card__list {
  margin: 0 0 1rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.receipt-container__section {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: flex-start;
  flex-wrap: initial;
  width: 100%;
  border-radius: 3px;
  text-align: left;
}
.receipt-container__shadow {
  box-shadow: 0px 2px 6px 0px rgba(68, 68, 68, 0.2);
}
.receipt-container__center {
  width: 100%;
  text-align: center !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.receipt-container__img {
  margin-bottom: 1rem;
}
.receipt-container__credentials-text {
  margin-top: 1rem;
  font-style: italic;
  align-self: flex-start;
}
.receipt-container__info-container {
  margin: 0 1rem 1rem;
  border: 2px solid #d7c3b5;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.error-page {
  margin-top: 3rem;
}
.error-page__alert {
  margin-bottom: 3rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.org-or-name-container {
  position: relative;
}
.org-or-name-container .react-autosuggest__suggestions-container {
  display: none;
}
.org-or-name-container .react-autosuggest__suggestions-container--open {
  display: block;
  position: absolute;
  top: 95px;
  width: 100%;
  max-height: 400px;
  border: 1px solid #990ae3;
  background-color: #fff;
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif;
  font-size: 1rem;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow-y: scroll;
  z-index: 2;
}
.org-or-name-container .react-autosuggest__suggestions-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.org-or-name-container .react-autosuggest__suggestion {
  cursor: pointer;
  padding: 10px 20px;
}
.org-or-name-container .react-autosuggest__suggestion--highlighted {
  background-color: #990ae3;
  color: #fff;
}
.org-or-name-container__suggestion {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.org-or-name-container__suggestion-icon {
  width: 1rem;
  height: 1;
  margin-right: 0.5rem;
}

.b2b-hardware-only__heading {
  margin-bottom: 0.5rem;
}
.b2b-hardware-only__organization-name-container {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: initial;
  flex-wrap: initial;
  margin-top: 1rem;
  padding-right: 2rem;
}
.b2b-hardware-only__organization-name-container #org-name {
  font-size: 0.875rem;
  color: var(--darkest-grey);
}
.b2b-hardware-only__organization-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: initial;
}
.b2b-hardware-only__toggle-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
  margin-top: 1rem;
}
.b2b-hardware-only__toggle-container label {
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
.b2b-hardware-only__toggle-container .telia-toggle {
  margin-right: 0.5rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.b2b-delivery-card {
  margin-top: 1rem !important;
}
.b2b-delivery-card__paragraph {
  margin-bottom: 2rem !important;
  margin-top: 1rem !important;
}
.b2b-delivery-card__single-input {
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 55em) {
  .b2b-delivery-card__single-input {
    width: calc(25% - 0.75rem);
  }
}
.b2b-delivery-card__table {
  width: 100%;
}
.b2b-delivery-card__table > :nth-child(odd) {
  background-color: #f2f2f2;
}
.b2b-delivery-card__table-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
  padding: 0.5rem 0;
}
.b2b-delivery-card__table-item-key {
  padding: 0 0.75rem;
}
.b2b-delivery-card__table-item-value {
  padding: 0 0.75rem;
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
}
.b2b-delivery-card__price-summary {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: initial;
  width: 100%;
  margin-top: 1rem;
}
@media screen and (min-width: 48em) {
  .b2b-delivery-card__price-summary {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: initial;
    margin-top: 2rem;
  }
}
.b2b-delivery-card__toggle-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
  margin-top: 0.5rem;
}
.b2b-delivery-card__toggle-container label {
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
.b2b-delivery-card__toggle-container .telia-toggle {
  margin-right: 0.5rem;
}
.b2b-delivery-card__price-summary-item {
  font-size: 20px;
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
}
.b2b-delivery-card__price-summary-item:not(:last-of-type) {
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 48em) {
  .b2b-delivery-card__price-summary-item:not(:last-of-type) {
    margin-right: 2.5rem;
    margin-bottom: 0;
  }
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.b2b-org-card {
  margin-top: 1rem !important;
  padding-bottom: 2.5rem !important;
}
.b2b-org-card__paragraph,
.b2b-org-card__disclaimer {
  margin-bottom: 0 !important;
  margin-top: 1rem !important;
}
.b2b-org-card__disclaimer {
  font-family: "TeliaSans-Medium", Helvetica, Arial, sans-serif;
  color: #000;
  margin-top: 2rem !important;
}
.b2b-org-card__search-wrapper {
  max-width: 25rem;
  width: 100%;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.b2b-org-card__selected {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  width: 100%;
  margin-top: 1rem;
}
@media all and (min-width: 48em) {
  .b2b-org-card__selected {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: initial;
    width: initial;
  }
}
.b2b-org-card__selected-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  background-color: #f2f2f2;
  border-radius: 0.5rem;
  padding: 1.5rem;
  width: 100%;
}
@media all and (min-width: 48em) {
  .b2b-org-card__selected-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: initial;
    width: initial;
    margin-right: 2rem;
  }
}
.b2b-org-card__selected-group {
  display: flex;
  flex-direction: row;
  justify-content: initial;
  align-items: initial;
  flex-wrap: initial;
}
@media all and (min-width: 48em) {
  .b2b-org-card__selected-group:not(:last-of-type) {
    margin-right: 2rem;
  }
}
.b2b-org-card__selected-icon {
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin-right: 0.5rem;
}
.b2b-org-card__selected-org-name {
  font-size: 1.25rem;
  font-family: "TeliaSans-Medium", Helvetica, Arial, sans-serif;
  color: #222;
}
.b2b-org-card__selected-org-number-label {
  font-size: 1rem;
  font-family: "TeliaSans-Medium", Helvetica, Arial, sans-serif;
  margin-right: 0.5rem;
  color: #222;
}
.b2b-org-card__edit-button {
  margin-top: 0.5rem;
}
@media all and (min-width: 48em) {
  .b2b-org-card__edit-button {
    margin-top: 0;
  }
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.b2b-product-card__form {
  width: 100%;
  border-radius: 12px;
  padding: 1rem;
  background-color: #f2f2f2;
}
.b2b-product-card__form .telia-dropdown--fullWidth {
  margin-bottom: 0.4rem;
}
.b2b-product-card__form .telia-dropdown--fullWidth .telia-dropdown-toggle {
  height: 2.7rem;
}
.b2b-product-card__form .telia-dropdown--fullWidth .telia-dropdown-toggle-label {
  font-size: 14px;
}
@media screen and (max-width: 24.375em) {
  .b2b-product-card__form .telia-dropdown--fullWidth .telia-dropdown-toggle-label {
    font-size: 12px;
  }
}
@media screen and (min-width: 48em) {
  .b2b-product-card__form .telia-dropdown--fullWidth .telia-dropdown-toggle-label {
    font-size: 15px;
  }
}
.b2b-product-card__form:not(:first-of-type) {
  margin-top: 1rem;
}
.b2b-product-card__price {
  margin-bottom: 0;
}
.b2b-product-card__hardware-heading {
  margin-top: 1rem !important;
}
.b2b-product-card__hardware-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
}
@media all and (min-width: 48em) {
  .b2b-product-card__hardware-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: initial;
  }
}
.b2b-product-card__hardware-edit-btn {
  margin-top: 1rem;
}
.b2b-product-card__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
.b2b-product-card__heading .Icon {
  height: 22px;
  width: 22px;
  cursor: pointer;
}
.b2b-product-card__label {
  font-family: "TeliaSans-Regular", Helvetica, Roboto, Arial, sans-serif !important;
  font-size: 14px;
}
.b2b-product-card__add-product {
  margin: 2rem 0 1rem 0.3rem !important;
}
.b2b-product-card__insurance-checkbox {
  width: fit-content;
}
.b2b-product-card__insurance-checkbox .telia-checkbox__container {
  margin-bottom: 1rem;
}
.b2b-product-card__insurance-checkbox .telia-checkbox__checkbox-container {
  padding: 0 12px 0 0 !important;
}
.b2b-product-card__checkbox .telia-checkbox {
  margin-top: 0.4rem;
  width: fit-content;
}
.b2b-product-card__dropdown {
  align-self: center;
}

.b2b-receipt-card {
  margin-top: 1rem !important;
}
.b2b-receipt-card__paragraph {
  margin-bottom: 0 !important;
  margin-top: 1rem !important;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.b2b-order__section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  box-shadow: 0px 2px 8px #dbdbdb;
}
@media all and (min-width: 48em) {
  .b2b-order__section {
    border-radius: 12px;
  }
}
@media all and (min-width: 55em) {
  .b2b-order__section {
    padding: 1rem 2.5rem 2.5rem !important;
  }
}
.b2b-order__order-button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: initial;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.information-table__container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding: 1rem 0;
  grid-gap: 0.5rem;
  font-size: 0.875rem;
}
@media all and (min-width: 48em) {
  .information-table__container {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.75rem;
  }
}
.information-table__border {
  max-width: 25rem;
  border: 1px solid #c8c8cd;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1.5rem 0;
}
.information-table__value {
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
}
@media all and (min-width: 48em) {
  .information-table__value {
    text-align: end;
  }
}
.information-table__value--strike {
  text-decoration: line-through;
}
.information-table__hr {
  border-bottom: 1px solid lightgray;
  grid-column: 1 / span 2;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.agreement__header {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
}
.agreement__icon {
  color: black;
}
.agreement__title {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  font-size: 1.25rem;
}
.agreement__border {
  border: 1px solid #c8c8cd;
  border-radius: 0.5rem;
  padding: 2rem;
  margin: 0.5rem 0;
  background: white;
}
.agreement__subtitle {
  color: #5f5f63;
  font-style: italic;
  margin-bottom: 1rem;
}
.agreement__table-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 0.5rem;
  font-size: 0.875rem;
}
@media all and (min-width: 48em) {
  .agreement__table-container {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.75rem;
  }
}
.agreement__table-value {
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
}
@media all and (min-width: 48em) {
  .agreement__table-value {
    text-align: end;
  }
}
.agreement__table-value--strike {
  text-decoration: line-through;
}
.agreement__table-hr {
  border-bottom: 1px solid lightgray;
  grid-column: 1 / span 2;
}
.agreement__insurance-title {
  margin-top: 1.5rem;
  font-family: TeliaSans-Medium, Helvetica, Arial, sans-serif;
}
.agreement__insurance-container {
  display: flex;
  justify-content: space-between;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.related-services {
  padding: 2rem;
  padding-bottom: 0.5rem;
  margin-top: 1.5rem;
}
.related-services__title {
  font-size: 1.25rem;
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}
.related-services__table-container {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 0.5rem;
  font-size: 0.875rem;
}
@media all and (min-width: 48em) {
  .related-services__table-container {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.75rem;
  }
}
.related-services__table-value {
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
}
@media all and (min-width: 48em) {
  .related-services__table-value {
    text-align: end;
  }
}
.related-services__table-value--strike {
  text-decoration: line-through;
}
.related-services__table-hr {
  border-bottom: 1px solid lightgray;
  grid-column: 1 / span 2;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.subscription-information {
  border-radius: 8px;
  background: #fff2de;
  padding: 1rem;
  margin-bottom: 2rem;
}
@media all and (min-width: 48em) {
  .subscription-information {
    padding: 2rem;
  }
}
.subscription-information__table-heading {
  margin: 1rem 0 0 !important;
}
@media all and (min-width: 48em) {
  .subscription-information__table-heading {
    margin: 1rem 0rem 0 !important;
  }
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.tlo-landing-page__section {
  box-shadow: 0px 2px 6px 0px rgba(68, 68, 68, 0.2);
  border-radius: 3px;
  width: 100%;
}
.tlo-landing-page__order-not-found {
  height: 500px;
}
.tlo-landing-page__heading-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  background-color: white;
  padding: 1rem;
  text-align: center;
}
@media screen and (min-width: 73.5em) {
  .tlo-landing-page__heading-container {
    padding: 2rem 1rem;
  }
}
@media all and (max-width: 48em) {
  .tlo-landing-page__bankid-button {
    width: 100%;
  }
}
.tlo-landing-page__bankid-container {
  margin: 2rem 0 1rem;
}
.tlo-landing-page__button-container {
  margin: 2rem 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.tlo-landing-page__button-container > :not(:first-child) {
  margin-top: 0.5rem;
}
@media all and (min-width: 48em) {
  .tlo-landing-page__button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 2rem;
  }
  .tlo-landing-page__button-container > :not(:first-child) {
    margin-top: 0;
  }
}
.tlo-landing-page__consent-container {
  margin: 2rem auto 1rem !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.tlo-landing-page__consent-radio-heading {
  margin: 0 0 0 1rem !important;
}
.tlo-landing-page__consent-option {
  padding: 1rem;
  width: 100%;
}
.tlo-landing-page__consent-option:not(:last-of-type) {
  border-bottom: 2px solid #f2f2f2;
}
.tlo-landing-page__consent-option .radio-button-with-label > .radio-button-with-label__label-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}
.tlo-landing-page__consent-expanded {
  margin-top: 0.75rem;
  margin-left: 3rem;
}
.tlo-landing-page__consent-reject-container {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: initial;
  flex-wrap: initial;
}
.tlo-landing-page__consent-reject-option {
  margin: 0.5rem 0;
}
.tlo-landing-page__consent-reject-option .textbox {
  margin-top: 1rem;
  height: 60px;
}
.tlo-landing-page__right-align {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: initial;
}
.tlo-landing-page__confirmation-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.tlo-landing-page__confirmation-icon,
.tlo-landing-page__reject-icon {
  margin-right: 1rem;
  width: 3rem !important;
  height: 3rem !important;
  color: #00d066;
}
@media all and (min-width: 48em) {
  .tlo-landing-page__confirmation-icon,
  .tlo-landing-page__reject-icon {
    width: 5rem !important;
    height: 5rem !important;
  }
}
.tlo-landing-page__reject-icon {
  color: #bf134d;
}
.tlo-landing-page .animated-progress-bar {
  margin: 0;
}
.tlo-landing-page__datepicker-container input {
  border-radius: 0.25em;
  border: 1px solid #a0a0a0;
  display: block;
  font: inherit;
  padding: 10px 15px;
  margin: 10px 0 20px 0;
  transition: all 0.3s;
}
.tlo-landing-page__datepicker-container input:focus {
  outline: none;
  border: 1px solid #990ae3;
}
.tlo-landing-page__datepicker-container--choosen {
  margin: 1rem 3rem 1.5rem;
}
.tlo-landing-page__sms-email-container {
  margin: 1rem;
}
@media screen and (min-width: 48em) {
  .tlo-landing-page__sms-email-container {
    margin: 2rem !important;
  }
}
.tlo-landing-page__either {
  text-align: center;
}
.tlo-landing-page__portin-receipt {
  display: flex;
}
.tlo-landing-page__submit {
  text-align: center;
}
.tlo-landing-page__owner-link {
  margin-top: 3rem;
}
.tlo-landing-page__verified-user {
  margin-left: 1rem;
}
.tlo-landing-page__receipt {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tlo-landing-page__check-icon {
  width: 3rem;
  height: 3rem;
  color: #02562b;
}
.tlo-landing-page__receipt-back-link {
  margin-top: 5rem;
}
.tlo-landing-page__keep-agreement-footer {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: #f3f3f8;
  margin-top: 1rem;
  text-align: left;
}
.tlo-landing-page__related-phone-title {
  padding: 2rem 2rem 0rem 2rem;
}
.tlo-landing-page__keep-agreements-container {
  padding: 2rem;
  background: #f3f3f8;
  border-radius: 8px;
  margin-top: 2rem;
}
.tlo-landing-page__consent-option-b2b {
  width: 100%;
}
.tlo-landing-page__consent-option-b2b:not(:last-of-type) {
  border-bottom: 2px solid #f2f2f2;
}
.tlo-landing-page__consent-option-b2b .radio-button-with-label > .radio-button-with-label__label-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}
.tlo-landing-page__subaccept-company {
  padding: 0.5rem 0 1rem 0;
}
.tlo-landing-page__selected-company {
  padding: 1rem 0 0;
}
.tlo-landing-page__subaccept-bankid {
  padding: 1rem 0;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.verification-container__section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: initial;
  padding: 0.5rem 0;
}
.verification-container__masked-email {
  margin-left: 1rem;
}
.verification-container__choose-method-link {
  margin-top: 2rem !important;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.verification-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: initial;
  margin-bottom: 1rem;
}
.verification-block__buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
  padding: 1rem 0;
}
.verification-block__buttons > :not(:last-child) {
  margin-bottom: 1rem;
}
.verification-block__buttons > label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.verification-block__sending-container {
  display: flex;
  align-items: center;
}
.verification-block__form-container {
  display: flex;
  flex-wrap: wrap;
}
.verification-block__type-code {
  text-align: center;
}
@media all and (max-width: 48em) {
  .verification-block__type-code {
    font-size: 2.25rem !important;
    width: 9.375rem !important;
  }
  .verification-block__type-code:hover {
    border-width: 2px;
  }
}
.verification-block__type-code-label {
  width: 100%;
  line-height: 1.5;
}
.verification-block__success {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.verification-block__icon {
  margin-right: 0.5rem;
  width: 1rem !important;
  height: 1rem !important;
  color: black;
}
.verification-block__confirm-button {
  margin-left: 0.5rem !important;
  margin-bottom: 0.3rem !important;
  align-self: flex-end;
}
.verification-block__resend-code-button {
  align-self: flex-start;
}

.checkout-horizontal-rule {
  height: 2px;
  width: 80%;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
.react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
.react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
.react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
.react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}
.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}
.react-datepicker {
  font-family: "TeliaSans-Regular", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
}
.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px;
}
.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time {
  border-radius: 0.3rem;
}
.react-datepicker--time-only .react-datepicker__time-box {
  border-radius: 0.3rem;
}
.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}
.react-datepicker-popper {
  z-index: 1;
}
.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px;
}
.react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
  left: auto;
  right: 50px;
}
.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 10px;
}
.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}
.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}
.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px;
}
.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}
.react-datepicker__header {
  text-align: center;
  background-color: #990ae3;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}
.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: white;
  font-weight: bold;
  font-size: 0.944rem;
}
.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.react-datepicker__navigation {
  background: none;
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  padding: 0;
  border: 0.45rem solid transparent;
  z-index: 1;
  height: 10px;
  width: 10px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: white;
}
.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}
.react-datepicker__navigation--previous--disabled,
.react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}
.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: white;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 80px;
}
.react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}
.react-datepicker__navigation--next--disabled,
.react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}
.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b3b3;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}
.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b3b3;
}
.react-datepicker__month-container {
  float: left;
}
.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}
.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: 85px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}
.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -72px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + (1.7rem / 2));
  overflow-y: scroll;
  padding-right: 0px;
  padding-left: 0px;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}
.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day-names,
.react-datepicker__week {
  white-space: nowrap;
}
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__day-name {
  color: white;
}
.react-datepicker__month--selected,
.react-datepicker__month--in-selecting-range,
.react-datepicker__month--in-range,
.react-datepicker__quarter--selected,
.react-datepicker__quarter--in-selecting-range,
.react-datepicker__quarter--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__month--selected:hover,
.react-datepicker__month--in-selecting-range:hover,
.react-datepicker__month--in-range:hover,
.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter--in-selecting-range:hover,
.react-datepicker__quarter--in-range:hover {
  background-color: #1d5d90;
}
.react-datepicker__month--disabled,
.react-datepicker__quarter--disabled {
  color: #ccc;
  pointer-events: none;
}
.react-datepicker__month--disabled:hover,
.react-datepicker__quarter--disabled:hover {
  cursor: default;
  background-color: transparent;
}
.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text {
  cursor: pointer;
}
.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover {
  background-color: #32be3f;
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range {
  border-radius: 0.3rem;
  background-color: #990ae3;
  color: #fff;
}
.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover {
  background-color: #990ae3;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range,
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range,
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover {
  background-color: transparent;
}
.react-datepicker__month-text.react-datepicker__month--selected:hover,
.react-datepicker__month-text.react-datepicker__month--in-range:hover,
.react-datepicker__month-text.react-datepicker__quarter--selected:hover,
.react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__month--selected:hover,
.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
  background-color: #216ba5;
}
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
  background-color: #f0f0f0;
}
.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.45rem;
}
.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}
.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}
.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0px 6px 0px 0px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "\00d7";
}
.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}
.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}
.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}
.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}
.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}
.react-datepicker__portal .react-datepicker__navigation--previous--disabled,
.react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}
.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}
.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}
.react-datepicker__portal .react-datepicker__navigation--next--disabled,
.react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.tlo-landing-page__section {
  box-shadow: 0px 2px 6px 0px rgba(68, 68, 68, 0.2);
  border-radius: 3px;
  width: 100%;
}
.tlo-landing-page__heading-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  background-color: white;
  padding: 1rem;
  text-align: center;
}
@media screen and (min-width: 73.5em) {
  .tlo-landing-page__heading-container {
    padding: 2rem 1rem;
  }
}
@media all and (max-width: 48em) {
  .tlo-landing-page__bankid-button {
    width: 100%;
  }
}
.tlo-landing-page__bankid-container {
  margin: 2rem 0 1rem;
}
.tlo-landing-page__button-container {
  margin: 2rem 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.tlo-landing-page__button-container > :not(:first-child) {
  margin-top: 0.5rem;
}
@media all and (min-width: 48em) {
  .tlo-landing-page__button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 2rem;
  }
  .tlo-landing-page__button-container > :not(:first-child) {
    margin-top: 0;
  }
}
.tlo-landing-page__consent-container {
  margin: 2rem auto 1rem !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.tlo-landing-page__consent-radio-heading {
  margin: 0 0 0 1rem !important;
}
.tlo-landing-page__consent-option {
  padding: 1rem;
  width: 100%;
}
.tlo-landing-page__consent-option:not(:last-of-type) {
  border-bottom: 2px solid #f2f2f2;
}
.tlo-landing-page__consent-option .radio-button-with-label > .radio-button-with-label__label-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}
.tlo-landing-page__consent-expanded {
  margin-top: 0.75rem;
}
.tlo-landing-page__consent-reject-container {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: initial;
  flex-wrap: initial;
}
.tlo-landing-page__consent-reject-option {
  margin: 0.5rem 0;
}
.tlo-landing-page__consent-reject-option .textbox {
  margin-top: 1rem;
  height: 60px;
}
.tlo-landing-page__right-align {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: initial;
}
.tlo-landing-page__confirmation-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.tlo-landing-page__confirmation-icon,
.tlo-landing-page__reject-icon {
  margin-right: 1rem;
  width: 3rem !important;
  height: 3rem !important;
  color: #00d066;
}
@media all and (min-width: 48em) {
  .tlo-landing-page__confirmation-icon,
  .tlo-landing-page__reject-icon {
    width: 5rem !important;
    height: 5rem !important;
  }
}
.tlo-landing-page__reject-icon {
  color: #bf134d;
}
.tlo-landing-page .animated-progress-bar {
  margin: 0;
}
.tlo-landing-page__sms-email-container {
  margin: 1rem;
}
@media screen and (min-width: 48em) {
  .tlo-landing-page__sms-email-container {
    margin: 2rem !important;
  }
}
.tlo-landing-page__sms-email-textfield input {
  width: 100%;
}
.tlo-landing-page__either {
  text-align: center;
}
.tlo-landing-page__portin-receipt {
  display: flex;
}
.tlo-landing-page__submit {
  text-align: center;
}
.tlo-landing-page__owner-link {
  margin-top: 3rem;
}
.tlo-landing-page__verified-user {
  margin-left: 1rem;
}

.request-tranfer-of-ownership-continue-button__hide {
  display: none;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.transfer-ownership-page {
  background-color: #f2f2f2;
}
.transfer-ownership-page__heading-container {
  background-color: white;
}
@media screen and (min-width: 73.5em) {
  .transfer-ownership-page__heading-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    flex-wrap: initial;
  }
}
.transfer-ownership-page__section {
  margin-top: 2rem !important;
  box-shadow: 0px 2px 6px 0px rgba(68, 68, 68, 0.2);
  border-radius: 3px;
  width: 100%;
}
.transfer-ownership-page__heading {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
@media screen and (min-width: 73.5em) {
  .transfer-ownership-page__heading {
    margin: 0 9rem;
  }
}
.transfer-ownership-page__content {
  background-color: #f2f2f2;
}
@media screen and (min-width: 39.5em) {
  .transfer-ownership-page__content {
    width: 39.5rem;
    margin: 1.5rem auto 0;
  }
}
@media screen and (min-width: 73.5em) {
  .transfer-ownership-page__content {
    width: calc(39.5rem + 30rem + 4rem);
    margin: 3rem auto 0;
  }
}
.transfer-ownership-page .step-indicator {
  background-color: #fff;
  margin: 0 0 1rem;
  padding-top: 1rem;
}
@media all and (min-width: 73.5em) {
  .transfer-ownership-page .step-indicator {
    margin-top: 1rem;
  }
}
.transfer-ownership-page .step-indicator__list {
  margin-bottom: 1rem;
}
.transfer-ownership-page .animated-progress-bar {
  margin: 0;
}
.transfer-ownership-page--space-between {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}
.transfer-ownership-page__continue-button-container {
  margin-left: 3rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.confirm-id__button-container {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.confirm-id__button-container > :not(:first-child) {
  margin-top: 0.5rem;
}
@media all and (min-width: 48em) {
  .confirm-id__button-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 2rem;
  }
  .confirm-id__button-container > :not(:first-child) {
    margin-top: 0;
  }
}
.confirm-id__input-wrapper {
  max-width: 300px;
}
.confirm-id__or-wrapper {
  margin: 1rem 0 2rem;
}
.confirm-id__legalinfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: initial;
  width: 100%;
  margin-bottom: 1rem;
}
.confirm-id__logout-bankid .button {
  text-transform: none;
}
.confirm-id__bankid-icon {
  width: 1.2rem !important;
  height: 1.2rem !important;
  margin-left: 0.5rem;
}
.confirm-id__bankid-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  outline: none;
  text-decoration: underline;
  border: none;
  background-color: inherit;
  font-size: 0.875rem;
  font-family: TeliaSans-regular, Helvetica, Arial, sans-serif;
  cursor: pointer;
  color: #000;
  text-wrap: nowrap;
}
.confirm-id__bankid-btn:hover,
.confirm-id__bankid-btn:active,
.confirm-id__bankid-btn:focus {
  text-decoration-color: #990ae3;
  color: #990ae3;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.number-field {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
}
.number-field__input {
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif !important;
  text-align: center;
}

.keep-agreement-checkbox .telia-checkbox__label {
  text-align: left !important;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.subscription-card {
  height: 9rem;
  padding: 0.5rem;
  border: 1px solid #b2b2b2;
  border-radius: 1px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: initial;
}
.subscription-card__details {
  display: flex;
  flex-direction: column;
  justify-content: inherit;
  align-items: center;
  flex-wrap: initial;
}
.subscription-card__details__name {
  font-family: "TeliaSans-Medium", Helvetica, Arial, sans-serif;
  text-align: center;
}
.subscription-card__icon {
  color: black;
  width: 2rem !important;
  height: 2rem !important;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.related-accounts {
  margin: 2.5rem 0;
}
.related-accounts__subscriptions {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, 11rem);
}
.related-accounts__customer-number,
.related-accounts__create-new {
  font-family: "TeliaSans-Medium", Helvetica, Arial, sans-serif;
  margin-bottom: 0.5rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.tlo-summary__shadow {
  box-shadow: 0px 2px 6px 0px rgba(68, 68, 68, 0.2);
  border-radius: 3px;
}
.tlo-summary__related-accounts__container {
  margin-top: 2rem;
}
.tlo-summary__subscriptions {
  justify-content: center !important;
  margin-top: 2rem;
}
.tlo-summary__subscriptions .box--small {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}
.tlo-summary__related-phone {
  padding: 2rem 2rem 0rem 2rem;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}
.tlo-summary__related-phone-title {
  font-size: 1.25rem;
  margin-bottom: 0rem !important;
  margin-top: 0rem !important;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.request-transfer-of-ownership {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
.request-transfer-of-ownership__button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: initial;
  margin: 1rem 0;
}
@media all and (min-width: 48em) {
  .request-transfer-of-ownership__button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: initial;
  }
}
.request-transfer-of-ownership__button-transfer {
  min-width: 18.75rem !important;
  margin-top: 2rem !important;
}
.request-transfer-of-ownership__order-text {
  margin-top: 0.5rem;
}
.request-transfer-of-ownership__check-icon {
  width: 3rem;
  height: 3rem;
  color: #02562b;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.esim-card {
  display: flex;
  background-color: white;
  border-radius: 4px;
  position: relative;
  flex-direction: column;
  margin: 0.875rem 0;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.118881);
}
.esim-card__user {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 2px solid transparent;
}
.esim-card__user .telia-lozenge {
  font-size: 0.875rem;
}
.esim-card__user--expandable:hover {
  cursor: pointer;
  border: 2px solid #990ae3;
}
.esim-card__name {
  display: flex;
}
.esim-card__name h3 {
  margin: 0 1rem 0 0;
}
@media screen and (min-width: 48em) {
  .esim-card__name {
    flex-direction: row;
  }
}
.esim-card__product-user {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
@media screen and (min-width: 48em) {
  .esim-card__product-user {
    flex-direction: row;
  }
  .esim-card__product-user #phoneNumber {
    margin-right: 1rem;
  }
}
.esim-card__product-user--info {
  margin-top: 0.5rem;
  margin-right: 0.5rem;
}
.esim-card__product-user .paragraph {
  margin: 0 1rem 0 0 !important;
}
.esim-card #esim-nr {
  color: #7a7a7a;
}
.esim-card__install-description {
  margin-top: 1rem !important;
}
.esim-card__toggle-card-icon {
  cursor: pointer;
  position: absolute;
  right: 6%;
  top: 1.5rem;
}
.esim-card__toggle-card-icon .Icon {
  height: 1.25rem !important;
  width: 1.25rem !important;
}
.esim-card__install-device {
  display: flex;
}
.esim-card__install-device h3 {
  font-size: 1.125rem;
}
.esim-card__send-link {
  width: 80%;
}
@media screen and (min-width: 48em) {
  .esim-card__send-link {
    width: 60%;
  }
}
@media screen and (min-width: 48em) {
  .esim-card__qr-code-container #qr-code {
    width: 15.5rem;
  }
}
.esim-card__qr-code-container .paragraph {
  margin-bottom: 1rem !important;
}
.esim-card__activate-esim {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 3rem 0 0 0.6rem;
}
.esim-card__activate-esim h3 {
  font-size: 1.125rem;
}
.esim-card__activate-esim .link {
  margin-top: 1rem;
  color: #990ae3;
}
.esim-card #install-esim-send-link-button {
  margin-top: 1rem;
}
.esim-card__content {
  padding: 1rem;
}

.phone-number-check__margin-bottom {
  margin-bottom: 1rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.install-esim .paragraph {
  margin: 0px;
}
.install-esim__heading-container {
  background-color: white;
  border-bottom: 2px solid #bdbdbd;
  padding-bottom: 1rem;
  width: 100%;
}
.install-esim__heading-inner {
  max-width: 1680px;
  margin: 0 auto;
}
.install-esim__heading {
  margin: 0;
}
.install-esim__heading-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: center;
  flex-wrap: initial;
}
@media screen and (min-width: 55em) {
  .install-esim__bankid-container {
    width: 640px;
  }
}
@media screen and (min-width: 55em) {
  .install-esim__esim-list {
    width: 640px;
  }
}
.install-esim__bankid-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
.install-esim__bankid-wrapper .heading {
  margin-bottom: 0.5rem;
}
.install-esim__nonadmins-wrapper {
  margin: 0 auto 1rem;
  width: 640px;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.campaign-telia-x header .Icon {
  color: #990ae3 !important;
}
.campaign-telia-x__content {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: center;
  flex-wrap: initial;
}
.campaign-telia-x__button {
  min-width: 18rem;
  text-transform: none !important;
  margin: 3rem 0 !important;
}
.campaign-telia-x__accordion-content {
  padding: 0 1rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.fwa-page__section {
  margin-top: 2rem !important;
  box-shadow: 0px 2px 6px 0px rgba(68, 68, 68, 0.2);
  border-radius: 3px;
  width: 100%;
}
.fwa-page__step-indicator {
  margin-top: 2rem;
}
.fwa-page .animated-progress-bar {
  margin: 0;
}
.fwa-page--space-between {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}
.fwa-page__continue-button-container {
  margin-left: 3rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.address-input {
  position: relative;
  width: 100%;
}
.address-input__street-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
}
@media all and (min-width: 48em) {
  .address-input__street-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: initial;
    margin-bottom: 1rem;
  }
}
.address-input__zip-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
}
@media all and (min-width: 48em) {
  .address-input__zip-container {
    margin-bottom: 1rem;
  }
}
.address-input__field-zipcode {
  margin-right: 0.5rem;
  max-width: 50%;
  flex: 1 1 50%;
}
.address-input__field-city {
  flex: 1 1 50%;
  transform: translateY(50%);
}
.address-input__field-streetname {
  width: 100%;
}
@media all and (min-width: 48em) {
  .address-input__field-streetname {
    margin-right: 0.5rem;
    width: 50%;
  }
}
.address-input__field-streetnumber,
.address-input__field-floor,
.address-input__field-apartment {
  width: 50%;
}
@media all and (min-width: 48em) {
  .address-input__field-floor {
    margin-right: 0.5rem;
  }
}

.fwa-address-search__section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}

.logo-grid {
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 0.5rem;
  box-shadow: 0px 1px 4px 0px #0000001a;
  border: 1px solid #f3f3f8;
  padding: 1rem;
}
.logo-grid__grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem 0.75rem;
}
.logo-grid__logo-container {
  width: fit-content;
  padding: 11px 10px;
  border-radius: 0.5rem;
  border: 1px solid #e5e5eb;
}
.logo-grid__logo {
  width: 100%;
  max-width: 70px;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.telia-play-benefits {
  background: #faf0ff;
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding: 0 1rem 1rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0px 1px 4px 0px #0000001a;
}
.telia-play-benefits__logo-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.telia-play-benefits__link-container {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
}
.telia-play-benefits__logo {
  margin: 0.5rem;
  background: black;
  border-radius: 0.5rem;
  width: 70px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.telia-play-benefits__modal {
  display: grid;
  grid-template-columns: 1fr;
}
@media all and (min-width: 1400px) {
  .telia-play-benefits__modal {
    grid-template-columns: 1fr 1fr;
  }
}
.telia-play-benefits__info-modal .telia-info-modal__container {
  max-width: 60rem;
}
.telia-play-benefits__modal-close-button {
  margin: 2.5rem auto 0 auto !important;
  width: fit-content;
  display: block;
  align-self: center;
}
.telia-play-benefits__logo-grid {
  margin-top: 1rem;
}
@media all and (min-width: 1400px) {
  .telia-play-benefits__logo-grid {
    margin-left: 2rem;
    margin-top: 0rem;
  }
}
.telia-play-benefits__logo-grid:not(:last-child) {
  margin-bottom: 1.25rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.fwa-choose-subscription__header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  text-align: left;
}
@media all and (min-width: 48em) {
  .fwa-choose-subscription__header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: initial;
    text-align: center;
  }
}
.fwa-choose-subscription__header-title {
  font-size: 1.5rem;
  text-align: left;
}
@media all and (min-width: 48em) {
  .fwa-choose-subscription__header-title {
    text-align: center;
  }
}
.fwa-choose-subscription__header-sub-title {
  margin-top: 1rem;
}
.fwa-choose-subscription__modal-link {
  width: 100%;
  padding-left: 3rem;
  margin-bottom: 1rem;
  text-align: left;
}
.fwa-choose-subscription__modal-link .button {
  padding: 0 !important;
}
.fwa-choose-subscription__info-modal {
  z-index: 51;
}
.fwa-choose-subscription__button-add {
  min-width: 11rem;
  text-transform: none !important;
}
.fwa-choose-subscription__grey-container {
  margin-top: 1rem;
  background-color: #f4f4f9;
}
.fwa-choose-subscription__content-block-button {
  text-transform: none !important;
  margin-bottom: 1rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.fwa-installment__installment-option {
  position: relative;
  display: flex;
  padding: 1rem;
  flex-direction: column;
  background-color: #ffffff;
  box-shadow: 0px 2px 8px #dcdce1;
  margin-top: 20px;
}
.fwa-installment__installment-option .button {
  align-self: flex-end;
  margin-top: 1.5rem;
}
.fwa-installment__installment-option__heading {
  display: flex;
  justify-content: space-between;
}
.fwa-installment__installment-option__flashtext-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fwa-installment__installment-option__flashtext-wrapper .telia-lozenge {
  font-size: 14px;
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
}
.fwa-installment__installment-option__heading-price-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.fwa-installment__installment-option__heading-striketrough {
  font-family: TeliaSans-regular, Helvetica, Arial, sans-serif;
  text-decoration: line-through;
  text-decoration-color: #990ae3;
  margin-right: 0.5rem;
  font-size: 1rem;
}

.fwa-personal-details-form__field dt {
  margin-bottom: 0.5rem;
}
.fwa-personal-details-form__field dd {
  margin: 0;
}
.fwa-personal-details-form__checkbox .telia-checkbox {
  width: fit-content;
  padding: 0 !important;
  margin: 0 !important;
}
.fwa-personal-details-form__checkbox .telia-checkbox__checkbox-container {
  padding: 0 !important;
}
.fwa-personal-details-form__checkbox .telia-checkbox__label {
  padding-left: 1rem !important;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.fwa-summary__table {
  position: relative;
  width: calc(100% - 2rem);
  margin: 0 1rem;
}
@media screen and (min-width: 48em) {
  .fwa-summary__table {
    margin: 0;
  }
}
.fwa-summary__table p {
  font-size: 1rem;
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
  margin: 1rem 0 0;
  color: #000000;
}
.fwa-summary__table hr {
  color: #b0b0b5;
}
.fwa-summary__table--with-border {
  margin: 1rem 1rem 0;
  border-radius: 0.5rem;
  border: 1px solid #e5e5eb;
  padding: 1rem;
}
@media screen and (min-width: 48em) {
  .fwa-summary__table--with-border {
    margin: 1.5rem 0 0;
    padding: 1.5rem;
    width: 100%;
  }
}
.fwa-summary__table-tabs {
  margin-bottom: 1rem;
}
.fwa-summary__table-heading {
  margin: 0 0 1.2rem;
}
.fwa-summary__table-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: initial;
  padding: 0.5rem 0;
}
.fwa-summary__table-item-key {
  margin-right: 0.5rem;
}
.fwa-summary__table-item-value {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: initial;
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
}
.fwa-summary__table-item-strikethrough {
  font-family: TeliaSans-regular, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  text-decoration: line-through;
}
.fwa-summary__flashtext {
  position: absolute;
  font-family: TeliaSans-regular, Helvetica, Arial, sans-serif;
  padding: 5px 9px;
  height: 24px;
  border-radius: 2px;
  font-size: 0.875rem;
  line-height: 0.875rem;
  top: -10px;
  right: 3rem;
  margin: 0 auto;
  background-color: #ccefdd;
  color: #00361a;
  z-index: 0;
}
@media screen and (min-width: 55em) {
  .fwa-summary__flashtext {
    right: 4rem;
  }
}
.fwa-summary__flashtext::before {
  content: "";
  position: absolute;
  bottom: -5px;
  right: 2rem;
  margin: auto;
  height: 1rem;
  width: 1rem;
  border: 1px solid #ccefdd;
  transform: rotate(45deg);
  background-color: #ccefdd;
  border-bottom: 1px solid #ccefdd;
  border-right: 1px solid #ccefdd;
  z-index: -1;
}
.fwa-summary__table-total-container {
  margin-top: 0.75rem;
}
.fwa-summary__table-total-title {
  margin-top: 2rem;
}
.fwa-summary__table-total-price {
  font-family: TeliaSans-medium, Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
}
.fwa-summary__table-total-striketrough {
  font-family: TeliaSans-regular, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  text-decoration: line-through;
  text-align: right;
}
.fwa-summary__disclaimer {
  margin: 1rem 1rem 0 1rem !important;
}
@media screen and (min-width: 48em) {
  .fwa-summary__disclaimer {
    margin: 1rem 2rem 0 2rem !important;
  }
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.fwa-personal-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
@media all and (min-width: 48em) {
  .fwa-personal-details__summary {
    padding: 1rem !important;
  }
}
.fwa-personal-details__summary-container {
  display: flex;
  justify-self: center;
  width: fit-content;
}
.fwa-personal-details__download-summary {
  display: flex;
  justify-self: center;
}
.fwa-personal-details__summary-heading {
  margin: 1rem !important;
}
@media all and (min-width: 48em) {
  .fwa-personal-details__summary-heading {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
.fwa-personal-details__hr {
  height: 2px;
  width: 80%;
  margin: 2rem auto;
}

.fwa-receipt {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.fwa-receipt__header {
  display: flex;
  align-items: center;
}
.fwa-receipt__header .Icon {
  margin-left: 1rem;
  color: #990ae3;
}
.fwa-receipt__orderconfirmation .paragraph,
.fwa-receipt__installation .paragraph {
  margin: 0;
}
.fwa-receipt__installation {
  margin-bottom: 3rem;
}
.fwa-receipt__installation .heading {
  margin: 1rem 0 0.5rem 0;
}
.fwa-receipt__orderconfirmation {
  margin-bottom: 1rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.bankid-auth-page {
  width: 100% !important;
}
.bankid-auth-page__button-container {
  justify-content: flex-start !important;
}
.bankid-auth-page .container p a {
  text-decoration: none;
  color: #990ae3;
  font-weight: bold;
}
.bankid-auth-page .container .button {
  float: right;
}
.bankid-auth-page__heading-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  background-color: white;
  padding: 1rem;
  text-align: center;
}
@media screen and (min-width: 73.5em) {
  .bankid-auth-page__heading-container {
    padding: 2rem 1rem;
  }
}
@media all and (max-width: 48em) {
  .bankid-auth-page__bankid-button {
    width: 100%;
  }
}
.bankid-auth-page__bankid-container {
  margin: 2rem 0 1rem;
}
.bankid-auth-page__button-container {
  margin: 2rem 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.bankid-auth-page__button-container > :not(:first-child) {
  margin-top: 0.5rem;
}
@media all and (min-width: 48em) {
  .bankid-auth-page__button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 2rem;
  }
  .bankid-auth-page__button-container > :not(:first-child) {
    margin-top: 0;
  }
}
.bankid-auth-page .animated-progress-bar {
  margin: 0;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.prepaid-reg-page__section {
  margin-top: 2rem !important;
  box-shadow: 0px 2px 6px 0px rgba(68, 68, 68, 0.2);
  border-radius: 3px;
  width: 100%;
}
.prepaid-reg-page__content {
  margin: 1rem;
}
.prepaid-reg-page__step-indicator {
  margin-top: 2rem;
}
.prepaid-reg-page .animated-progress-bar {
  margin: 0;
}
.prepaid-reg-page--space-between {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}
.prepaid-reg-page__continue-button-container {
  margin-left: 3rem;
}
.prepaid-reg-page__heading-container {
  background-color: white;
  width: 100%;
}
.prepaid-reg-page__heading-inner {
  max-width: 1680px;
  margin: 0 auto;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.prepaid-registration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.prepaid-registration__contactInfo {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
  width: 100%;
  text-align: left;
  padding: 0.5rem 2rem;
  border-radius: 8px;
  background: #f5f5fa;
}
.prepaid-registration__heading-inner {
  max-width: 1680px;
  margin: 0 auto;
}
.prepaid-registration__heading {
  margin-bottom: 1rem;
}
.prepaid-registration__heading-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: center;
  flex-wrap: initial;
}
.prepaid-registration__ingress {
  margin-bottom: 0;
}
.prepaid-registration__step-indicator {
  margin-top: 2rem;
}
.prepaid-registration__notbankid {
  margin-top: 1rem;
  max-width: 640px;
}

.prepaid-simcard-form__image {
  padding: 0.5rem 0;
}
.prepaid-simcard-form__image img {
  max-width: 100%;
}

.prepaid-receipt {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.prepaid-receipt .Icon {
  height: 5rem;
  width: 5rem;
  fill: green;
}

.prepaid-registration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.prepaid-refill-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
.prepaid-refill-page__section {
  margin-top: 2rem !important;
  box-shadow: 0px 2px 6px 0px rgba(68, 68, 68, 0.2);
  border-radius: 3px;
  width: 100%;
}
.prepaid-refill-page__content {
  align-self: center;
  margin: 1rem;
}
.prepaid-refill-page__step-indicator {
  margin-top: 2rem;
}
.prepaid-refill-page .animated-progress-bar {
  margin: 0;
}
.prepaid-refill-page--space-between {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}
.prepaid-refill-page__continue-button-container {
  margin-left: 3rem;
}
.prepaid-refill-page__heading-container {
  background-color: white;
  width: 100%;
}
.prepaid-refill-page__heading-inner {
  max-width: 1680px;
  margin: 0 auto;
}


/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.prepaid-refill .paragraph {
  margin: 0px;
}
.prepaid-refill__textblock {
  border-radius: 10px;
}
.prepaid-refill #refillPrepaidForm {
  width: 20rem;
}
.prepaid-refill .prepaid-refill-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
  margin-bottom: 2rem;
}
.prepaid-refill .prepaid-refill-table {
  border: none;
}
.prepaid-refill__heading-container {
  background-color: white;
  width: 100%;
  margin-bottom: 2rem;
}
.prepaid-refill__heading-inner {
  max-width: 1680px;
  margin: 0 auto;
}
.prepaid-refill__form {
  width: 50rem;
  border: 1px gray solid;
  border-radius: 0.5rem;
}
.prepaid-refill__heading {
  margin: 0;
}
.prepaid-refill__heading-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: flex-start;
  flex-wrap: initial;
}

.package-button {
  display: flex;
  background-color: white;
  justify-content: space-between;
  min-width: 100%;
  height: 6.8rem;
  padding: 1rem;
  margin: 1rem 0;
  align-items: center;
  border: 1px solid #e5e5eb;
  border-radius: 0.5rem;
}
.package-button__price {
  display: flex;
  align-items: center;
}
.package-button__add-button {
  border-radius: 10rem;
  margin-left: 3rem;
  width: 3rem;
  height: 3rem;
}

.prepaid-refill {
  max-width: 40rem;
}
.prepaid-refill__packageType {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
  height: 6.8rem;
  padding: 1rem;
  width: 100%;
  border-radius: 0.5rem;
  cursor: pointer;
  margin: 1rem;
  border: 1px solid #ccc;
}
.prepaid-refill__packageType--heading {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: flex-start;
  flex-wrap: initial;
}
.prepaid-refill__selectedNumber {
  background: #faf0ff;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
}
.prepaid-refill__selectedNumber p > span {
  font-family: "TeliaSans-Bold", Helvetica, Arial, sans-serif;
}
.prepaid-refill__heading {
  margin-bottom: 2.5rem;
}
.prepaid-refill__packages {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: center;
  flex-wrap: initial;
}
.prepaid-refill__disclaimers {
  align-self: flex-start;
  margin-top: 2rem;
}
.prepaid-refill__back-button {
  align-self: flex-start;
  margin-top: 1rem;
  color: #6d02a3;
  font-family: "TeliaSans-Bold", Helvetica, Arial, sans-serif;
  margin-left: 1rem;
}


/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.prepaid-refill-summary {
  width: 552px;
}
.prepaid-refill-summary__selectedNumber {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.prepaid-refill-summary__selectedNumber-content-with-border {
  align-items: flex-start;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
}
.prepaid-refill-summary__email-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 2rem;
}
.prepaid-refill-summary__selectedNumber-content {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
}
.prepaid-refill-summary__buttonAndLink {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
}
.prepaid-refill-summary__heading-container {
  background-color: white;
  width: 100%;
  margin-bottom: 1rem;
}
.prepaid-refill-summary__heading-inner {
  max-width: 1680px;
  margin: 0 auto;
}
.prepaid-refill-summary__container {
  background-color: white;
  width: 100%;
  margin: 1rem auto;
}
.prepaid-refill-summary__heading-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: center;
  flex-wrap: initial;
}
@media screen and (max-width: 48em) {
  .prepaid-refill-summary {
    width: 375px;
  }
}

.prepaid-refill-receipt {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.prepaid-refill-receipt .Icon {
  height: 5rem;
  width: 5rem;
  fill: green;
}

.onboarding-b2b-page__content {
  margin: 1rem;
}
.onboarding-b2b-page__continue-button-container {
  margin-left: 3rem;
}
.onboarding-b2b-page--space-between {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: initial;
}
.onboarding-b2b-page .step-indicator {
  margin: 0 0 1rem;
  padding-top: 1rem;
}
.onboarding-b2b-page .step-indicator__list {
  margin-bottom: 1rem;
}
.onboarding-b2b-page .step-indicator .step-indicator__label {
  display: none;
  margin-top: 0.3rem;
}
.onboarding-b2b-page .step-indicator .step-indicator__label--active {
  display: block;
}
.onboarding-b2b-page .step-indicator .step-indicator__wrapper {
  width: 3rem;
}
.onboarding-b2b-page .step-indicator .step-indicator__line {
  width: 1.6rem;
  right: -0.8rem;
}
@media all and (min-width: 37.5em) {
  .onboarding-b2b-page .step-indicator .step-indicator__wrapper {
    width: 5rem;
  }
  .onboarding-b2b-page .step-indicator .step-indicator__line {
    width: 3rem;
    right: -1.5rem;
  }
}
@media all and (min-width: 60em) {
  .onboarding-b2b-page .step-indicator {
    margin-top: 1rem;
  }
  .onboarding-b2b-page .step-indicator .step-indicator__wrapper {
    width: 11rem;
  }
  .onboarding-b2b-page .step-indicator .step-indicator__line {
    width: 7rem;
    right: -3.5rem;
  }
  .onboarding-b2b-page .step-indicator .step-indicator__label {
    display: block;
  }
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.onboarding-b2b {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.onboarding-b2b__heading {
  margin-bottom: 1rem;
}
@media screen and (min-width: 55em) {
  .onboarding-b2b__bankid-container {
    width: 640px;
  }
}
.onboarding-b2b__not-bankid {
  color: #6f6e6f;
}
.onboarding-b2b__bankid-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  flex-wrap: initial;
}
.onboarding-b2b__bankid-wrapper .heading {
  margin-bottom: 0.5rem;
}
.onboarding-b2b__email-container {
  padding: 0 1rem;
}
@media screen and (min-width: 55em) {
  .onboarding-b2b__email-container {
    width: 640px;
  }
}

.onboarding-email-form__field dt {
  margin-bottom: 0.5rem;
}
.onboarding-email-form__field dd {
  margin: 0;
}

.subscription-details__heading {
  margin-bottom: 1.5rem;
}
.subscription-details__subscription-title {
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.subscription-details__subaccept-company {
  padding: 0.5rem 0 1rem 0;
}
.subscription-details__selected-company {
  padding: 1rem 0 0;
}
.subscription-details__continue-button {
  margin-top: 2rem;
}
.subscription-details__legal-owner {
  margin-bottom: 2rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.onboarding-b2b__section {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: flex-start;
  flex-wrap: initial;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  width: 100%;
  text-align: left;
}
.onboarding-b2b__section .button {
  display: flex;
  align-self: flex-end;
}
.onboarding-b2b__page-heading {
  margin: 0 0 1rem;
  align-self: center;
}
.onboarding-b2b__registerbutton {
  margin-top: 1rem;
}
.onboarding-b2b__delivery,
.onboarding-b2b__summary {
  width: 100%;
}
.onboarding-b2b__deliveryaddress-heading {
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.62);
  margin-bottom: 0.2rem;
}
.onboarding-b2b__summary-container .paragraph {
  margin: 0.5rem;
}
.onboarding-b2b__summary-labels {
  margin-right: 0.5rem;
  font-family: "TeliaSans-Medium";
}
.onboarding-b2b__free-delivery {
  font-family: "TeliaSans-Regular";
  font-size: 1rem;
  margin-top: 1rem !important;
}
.onboarding-b2b__free-delivery--bold {
  font-family: "TeliaSans-Medium";
  font-weight: bolder;
}
.onboarding-b2b__deliveryaddress-container .paragraph {
  margin: 0;
}
.onboarding-b2b__deliveryaddress-container,
.onboarding-b2b__summary-container {
  border: 1px solid var(--Color-Gray-150, #d6d6dd);
  padding: 1rem;
  border-radius: 8px;
}
.onboarding-b2b__heading {
  margin-bottom: 0.5rem;
}
.onboarding-b2b__heading-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.onboarding-b2b__content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: initial;
  width: 100%;
  margin-bottom: 2rem;
}

.onboardingb2b-confirmation {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: initial;
}
.onboardingb2b-confirmation__check-icon {
  width: 4rem;
  height: 4rem;
  color: #02562b;
}
.onboardingb2b-confirmation p {
  margin-bottom: 2rem;
  align-self: flex-start;
}
.onboardingb2b-confirmation__back-button {
  margin-top: 2rem;
}

.retailer-page {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.shop-selection-page {
  width: 100%;
}
.shop-selection-page__container {
  display: flex;
  justify-content: center;
}
.shop-selection-page__heading {
  margin-bottom: 1rem;
}
.shop-selection-page__background {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 2rem 1rem;
}
.shop-selection-page__card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 27.75rem;
}
.shop-selection-page__logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.shop-selection-page__logo-text {
  color: var(--core-purple-900);
}
.shop-selection-page__form {
  display: flex;
  flex-direction: column;
}
.shop-selection-page__select {
  width: 100%;
}
.shop-selection-page__select-trigger {
  width: 100%;
  min-height: 2.75rem;
}
.shop-selection-page__continue-button {
  margin-top: 2rem;
}
.shop-selection-page__error-text {
  margin-top: 0.5rem;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.app-root__main-content {
  flex: 1;
}
.app-root--inherit {
  background-color: inherit;
}
.app-root--white {
  background-color: #fff;
}
.app-root--grey {
  background-color: #f2f2f2;
}
.app-root--retailer {
  display: flex;
  flex-direction: column;
}

/*
 * Responsive
 ****************************************/
/* See  https://zellwk.com/blog/media-query-units/ (3/2016)
  In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have. REMs fail much more than pixels at this point, so we’re going to discount them completely.
  Though px is perhaps a good option as well, especially over 1,5 years after that article.
*/
/*
 * Fonts
 ****************************************/
/*
 * Colors
 ****************************************/
/*
 * Tabs
 ****************************************/
/*
 * Utils
 ****************************************/
.booking-warning {
  background-color: #73c7ff;
  padding: 0.7rem 0.5rem;
  text-align: center;
  width: 100%;
  z-index: 20;
}
.booking-warning__timeleft {
  font-weight: bold;
}
.booking-warning > button {
  outline: none;
  border: none;
  border-radius: 0;
  text-decoration: underline;
  background-color: transparent;
  font-family: "TeliaSans-Regular", Roboto, Arial, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
}
@media all and (min-width: 48em) {
  .booking-warning > button {
    margin-left: 2rem;
  }
}


/*# sourceMappingURL=main.ea48219d3a75200633f3.css.map*/