@import url(https://fonts.garmin.com/static.garmin.com/fonts/roboto-standard/roboto-standard.css);
@import url(https://fonts.garmin.com/static.garmin.com/fonts/oswald/oswald.css);
.uac-form-control-container-v2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
}

.uac-label-v2 {
  display: flex;
  flex-direction: column;
}

.uac-input-v2,
.uac-phone-input-v2 .PhoneInputInput {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 3rem;
  padding: 0.375rem 0.75rem;
}

html[dir='rtl'] .uac-phone-input-v2 .PhoneInputInput {
  direction: ltr;
  text-align: end;
}

.uac-phone-input-v2 .PhoneInputCountrySelectArrow {
  margin-inline-start: var(--PhoneInputCountrySelectArrow-marginLeft);
}

.uac-checkbox-v2 > .uac-checkbox-input-v2 {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.uac-checkbox-v2 {
  padding-inline-start: 0;
}

.uac-checkbox-v2 > .uac-checkbox-input-v2 + .uac-checkbox-label-v2 {
  display: flex;
  flex-direction: row;
  vertical-align: middle;
}

.uac-checkbox-v2 > .uac-checkbox-label-v2::before {
  content: '';
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-inline-end: 0.75rem;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 175%;
  margin-top: 0.15rem;
}

.uac-select-wrapper-v2 {
  position: relative;
  display: flex;
  width: 100%;
}

.uac-select-wrapper-v2::after {
  position: absolute;
  width: 0.75rem;
  height: 0.4375rem;
  top: 50%;
  right: 14.6px;
  left: auto;
  transform: translateY(-50%);
  background-size: 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  content: '';
}

.uac-select-wrapper-v2.disabled::after {
  display: none;
}

[dir='rtl'] .uac-select-wrapper-v2::after {
  left: 14.6px !important;
  right: auto;
}

.uac-select-v2 {
  width: 100%;
  height: 3rem;
  padding-inline-end: 30px !important;
  padding-inline-start: 10px !important;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.uac-select-v2::-ms-expand {
  display: none;
}

.uac-select-v2.invalid-field {
  background-image: none;
}

.uac-select-v2 option {
  max-width: 100%;
}

.uac-select-loader-v2 .uac-loader-v2 {
  position: absolute;
  left: 40%;
  padding-top: 1rem;
}

.uac-input-with-dropdown-wrapper-v2 {
  position: relative;
  width: 100%;
}

.uac-input-with-dropdown-wrapper-v2::after {
  position: absolute;
  width: 0.75rem;
  height: 0.4375rem;
  top: 50%;
  right: 14.6px;
  left: auto;
  transform: translateY(-50%);
  background-size: 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  content: '';
}

[dir='rtl'] .uac-input-with-dropdown-wrapper-v2::after {
  left: 14.6px !important;
  right: auto;
}

.uac-banner {
  text-align: center;
  align-items: center;
}

.uac-large-screen-banner {
  margin-inline-start: -1rem;
  margin-inline-end: -1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.uac-plan-banner,
.uac-custom-update-sos-info-banner {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.uac-custom-update-large-screen-sos-info-banner {
  width: 100%;
}

@media (max-width: 768px) {
  .uac-custom-update-sos-info-banner {
    margin-inline-start: -1rem;
    margin-inline-end: -1rem;
    padding-inline-start: 0.5rem;
  }
}

@media (min-width: 768px) {
  .uac-large-screen-banner {
    margin-inline-start: -1.5rem;
    margin-inline-end: -1.5rem;
  }
}

.uac-btn-lg-v2 {
  height: 3rem;
}

.uac-btn-lg-v2:not(.uac-btn-link-v2, .uac-btn-text-v2) {
  padding: 0 2rem;
}

.uac-btn-md-v2 {
  height: 2rem;
}

.uac-btn-md-v2:not(.uac-btn-link-v2, .uac-btn-text-v2) {
  padding: 0 1.5rem;
}

.uac-btn-content-hidden {
  visibility: hidden;
}
.uac-btn-custom-loading > div {
  position: absolute;
}

.uac-btn-light-blue-v2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.uac-card-v2 {
  flex-grow: 1;
}

.uac-card-title-v2 {
  padding-bottom: 1.5rem;
}

.uac-card-footer-v2 {
  margin-bottom: 0.5rem;
}

.uac-card-v2 .card-body {
  padding: 1.25rem 1.75rem 0 1.75rem;
}

.uac-card-subtitle-v2,
.uac-card-content-v2 {
  padding-bottom: 1.5rem;
}

.uac-collapsible-section.focused {
  max-width: max-content;
}

.uac-h1-v2,
.uac-h2-v2,
.uac-h3-v2,
.uac-h4-v2,
.uac-h1-subtitle,
.uac-body-primary-bold-v2,
.uac-body-primary-medium-v2,
.uac-body-primary-regular-v2,
.uac-body-primary-small-v2,
.uac-body-large-bold-v2,
.uac-body-large-regular-v2,
.uac-footer-v2,
.uac-footer-default,
.uac-body-large-span-v2,
.uac-body-large-regular-span-v2 {
  margin: 0;
}

/* Loader Animation */
@keyframes gloader {
  0% {
    transform: scale(0.8);
    opacity: 0.3;
  }
  10% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.3;
  }
}

.g__loader {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.g__loader--default {
  background-color: var(--aqua-blue);
}

.g__loader--dark {
  background-color: black;
}

.g__loader--light {
  background-color: white;
}

.g__loader__dot {
  display: inline-block;
  flex: 1 1 auto;
  padding-bottom: 30%;
  margin-right: 1%;
  margin-left: 1%;
  animation: gloader 1.5s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0.5;
  border-radius: 100%;
}

.g__loader__dot:nth-child(2) {
  animation-delay: 0.5s;
}

.g__loader__dot:nth-child(3) {
  animation-delay: 1s;
}

.uac-xl-loader {
  width: 100%;
  height: 100%;
}

.uac-lg-loader {
  width: 12.5rem;
  height: 3.75rem;
}

.uac-md-loader {
  width: 8.5rem;
  height: 2.75rem;
}

.uac-sm-loader {
  width: 5rem;
  margin-top: 0.25rem;
}

.uac-xs-loader {
  width: 3rem;
}

.uac-loader-large-v2 {
  display: flex;
  margin-top: 12rem;
  margin-bottom: 2rem;
}

.uac-loader-v2 {
  display: inline-flex;
  padding-top: 0.5rem;
}

@media (max-width: 600px) and (min-width: 350px) {
  .uac-xl-loader {
    max-width: 10rem;
  }
}

@media (min-width: 990px) {
  .uac-xl-loader {
    min-width: 12.5rem;
  }
}

.uac-tooltip-container-v2 {
  display: block;
  margin: 0;
}

.uac-tooltip-wrapper-v2 {
  display: inline-block;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

.uac-tooltip-content-v2 {
  position: relative;
  margin: 0.35rem 0 0.35rem 0;
}

.uac-tooltip-content-v2.bottom {
  display: block;
}

.uac-tooltip-question-icon-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.uac-tooltip-label-v2 {
  margin-inline-end: 0.35rem;
}

.uac-tooltip-label-v2 p {
  display: inline-block;
  margin: 0;
}

.uac-progress-bar.progress {
  height: 0.5rem;
  border-radius: 0;
  margin-inline-start: -1rem;
  margin-inline-end: -1rem;
}

@media (min-width: 768px) {
  .uac-progress-bar.progress {
    margin-inline-start: -1.5rem;
    margin-inline-end: -1.5rem;
  }
}

:root {
  --uac-xs-spinner-width-and-height: 1rem;
  --uac-sm-spinner-width-and-height: 2rem;
  --uac-md-spinner-width-and-height: 3rem;
  --uac-lg-spinner-width-and-height: 3rem;
  --uac-xl-spinner-width-and-height: 6.25rem;
}

.uac-spinner-v2 {
  margin: 0 auto;
  position: absolute;
}

.uac-xs-spinner-v2 {
  width: var(--uac-xs-spinner-width-and-height);
  height: var(--uac-xs-spinner-width-and-height);
}

.uac-sm-spinner-v2 {
  width: var(--uac-sm-spinner-width-and-height);
  height: var(--uac-sm-spinner-width-and-height);
}

.uac-md-spinner-v2 {
  width: var(--uac-md-spinner-width-and-height);
  height: var(--uac-md-spinner-width-and-height);
}

.uac-lg-spinner-v2 {
  width: var(--uac-lg-spinner-width-and-height);
  height: var(--uac-lg-spinner-width-and-height);
}

.uac-xl-spinner-v2 {
  width: var(--uac-xl-spinner-width-and-height);
  height: var(--uac-xl-spinner-width-and-height);
}

.uac-spinner-v2 .uac-spinner-child-v2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.uac-spinner-v2 .uac-spinner-child-v2:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 20%;
  height: 20%;
  border-radius: 100%;
  animation: uac-circle-bounceDelay 0.8s infinite ease-in-out;
  -webkit-animation: uac-circle-bounceDelay 0.8s infinite ease-in-out;
}

.uac-spinner-v2 .uac-circle2-v2 {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.uac-spinner-v2 .uac-circle3-v2 {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.uac-spinner-v2 .uac-circle4-v2 {
  transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.uac-spinner-v2 .uac-circle5-v2 {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.uac-spinner-v2 .uac-circle6-v2 {
  transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
}

.uac-spinner-v2 .uac-circle7-v2 {
  transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
}

.uac-spinner-v2 .uac-circle8-v2 {
  transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
}

.uac-spinner-v2 .uac-circle2-v2:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.uac-spinner-v2 .uac-circle3-v2:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.uac-spinner-v2 .uac-circle4-v2:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.uac-spinner-v2 .uac-circle5-v2:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.uac-spinner-v2 .uac-circle6-v2:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.uac-spinner-v2 .uac-circle7-v2:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.uac-spinner-v2 .uac-circle8-v2:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes uac-circle-bounceDelay {
  12.5% {
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
  }

  60% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes uac-circle-bounceDelay {
  12.5% {
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
  }

  60% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.uac-toggle-btn-group .btn-check {
  display: none;
}

.uac-toggle-btn-group {
  max-width: 100%;
}

.uac-toggle-btn-group .uac-toggle-btn {
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.uac-toggle-btn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.uac-toggle-btn-group .uac-toggle-btn,
.uac-toggle-btn-group .uac-toggle-btn:active,
.uac-toggle-btn-group .uac-toggle-btn:focus,
.uac-toggle-btn-group .uac-toggle-btn:hover {
  cursor: pointer;
  border-radius: 0px;
  outline: 0;
  text-transform: uppercase;
  height: 2.5rem;
}

.uac-toggle-btn .btn-group > .btn-group:not(:first-child),
.btn-group > .btn:not(:first-child),
.btn-group > :not(.btn-check:first-child) + .btn {
  margin-left: 0;
}

.uac-link-v2 {
  margin: 0;
}

.main:has(.uac-custom-status-alert) .uac-alert {
  margin-bottom: 200px;
}

.uac-alert {
  text-align: center;
  padding: 0.5rem 2rem;
}

.uac-toast-alert {
  position: fixed;
  bottom: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 999;
}

.uac-alert .btn-close {
  padding: 0;
  margin: 0.4375rem 0.5625rem 0 0;
}

/* Medium devices (tablets, 768px and up) */
/* Large devices (desktops, 992px and up) */
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 768px) {
  .uac-alert {
    min-width: 15%;
    margin-bottom: 60px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .uac-alert {
    margin-bottom: 40px;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767px) {
  .uac-alert {
    min-width: 75%;
  }
}

.uac-kicker-wrapper {
  display: flex;
  height: 30px;
  justify-content: flex-end;
}

.uac-kicker-text {
  padding: 0.35em 0.75em;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: normal;
  white-space: nowrap;
}

.uac-kicker-irregular {
  content: '';
  width: 0;
  height: 0;
  transform: rotateY(180deg);
  border-style: solid;
  border-width: 30px 16px 0 0;
  inset-block-start: 0;
}

html[dir='rtl'] .uac-kicker-irregular {
  transform: rotateY(0);
}

.uac-divider {
  margin-bottom: 1.5rem;
  margin-top: 0;
}

.uac-dropdown-chevron-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0.5rem !important;
  max-width: 11px !important;
}

.uac-dropdown-chevron {
  rotate: 270deg;
  width: 25px;
  height: 25px;
}

.uac-tab-view .btn-check {
  display: none;
}

.uac-tab-view .btn-check + .btn:hover {
  background-color: var(--button-primary-bkg-color);
  color: var(--black);
}

.uac-tab-view .uac-tab {
  display: block;
  padding-top: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.uac-tab {
  padding-bottom: 0;
}

.uac-tab-content-off {
  margin-bottom: 8px;
}

.uac-tab-content-on,
.uac-tab-content-off {
  display: flex;
  justify-content: center;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  align-items: center;
  padding-top: 0.5rem;
}

.uac-tab-small {
  padding-inline-start: 0.25rem;
  padding-inline-end: 0.25rem;
}

.uac-tab-large {
  padding-inline-start: 2rem;
  padding-inline-end: 2rem;
}

@media (max-width: 575px) {
  .uac-tab-large,
  .uac-tab-small {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .uac-tab-large {
    width: 50%;
  }

  .uac-tab-small {
    width: 33%;
  }

  .uac-tab-view {
    width: 100%;
  }
}

.uac-tab-view .uac-tab,
.uac-tab-view .uac-tab:active,
.uac-tab-view .uac-tab:focus,
.uac-tab-view .uac-tab:hover {
  cursor: pointer;
  border-radius: 0px;
  outline: 0;
  text-transform: uppercase;
  line-height: 25px;
  letter-spacing: 0.8px;
}

.uac-tab .btn-group > .btn-group:not(:first-child),
.btn-group > .btn:not(:first-child) {
  margin-left: 0;
}

.uac-rectangle {
  border: 1px solid var(--black);
  flex-direction: column;
}

.uac-round-rectangle {
  border-radius: 10px;
}

@media (min-width: 576px) {
  .uac-rectangle {
    padding: 20px;
  }
}

@media (max-width: 575px) {
  .uac-rectangle {
    padding: 15px;
  }
}

.uac-quantity-selector {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 2rem;
}

.uac-quantity-selector-button {
  height: 2rem;
  width: 2rem;
}

.uac-quantity-selector-value {
  width: 2rem;
}

:root {
  margin: 0;
  padding: 0;
  border: 0;

  /* These margins are defined to allow centering of the UacSpinner element, since it's position is absolute. */
  --uac-xs-spinner-margin: calc(-1 * var(--uac-xs-spinner-width-and-height));
  --uac-sm-spinner-margin: calc(-1 * var(--uac-sm-spinner-width-and-height));
  --uac-md-spinner-margin: calc(-1 * var(--uac-md-spinner-width-and-height));
  --uac-lg-spinner-margin: calc(-1 * var(--uac-lg-spinner-width-and-height));
  --uac-xl-spinner-margin: calc(-1 * var(--uac-xl-spinner-width-and-height));
}

.main {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  overflow: visible;
}

.main-iframed {
  height: auto;
}

.app-container {
  flex: 1;
}

/* UAC Steps Layout V2 */

.uac-step-container-v2 {
  margin: 1.5rem 0;
  padding: 0;
}

.uac-step-container-v2 .row {
  margin: 0;
}

.uac-step-container-v2 .row > * {
  padding-right: 0;
  padding-left: 0;
}

.uac-step-container-v2 .row [class*='col-'],
.uac-step-container-v2 .row .col {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.uac-step-container-v2 .row [class*='col-'].blank {
  margin: 0;
}

.uac-step-container-v2 .uac-button-column-container-v2 {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column-reverse;
}

.uac-step-container-v2 .uac-step-heading-row-v2 {
  margin-bottom: 1.5rem;
}

.uac-step-container-v2 .uac-step-subheading-column-v2 {
  margin-bottom: 1.5rem;
}

.uac-step-container-v2
  .uac-step-heading-row-v2
  > .uac-step-subheading-column-v2 {
  margin-bottom: 1.5rem;
}

.uac-step-container-v2 .uac-step-content-column-v2 {
  margin-bottom: 1rem;
}

.uac-step-container-v2 .uac-spacing-v2 {
  margin-bottom: 1.5rem;
}

.uac-step-container-v2 .uac-medium-spacing-v2 {
  margin-bottom: 1rem;
}

.uac-step-container-v2 .uac-small-spacing-v2 {
  margin-bottom: 0.875rem;
}

.uac-step-container-v2 .uac-button-column-container-v2 .uac-btn-link-v2 {
  padding: 0;
}

.uac-step-container-v2
  .uac-button-column-container-v2
  .uac-button-link-container {
  display: flex;
}

.uac-step-container-v2 .uac-flex-2 {
  flex-grow: 2;
}

.uac-column-content-align {
  display: flex;
  flex-direction: column;
}

.uac-overflow-wrap-anywhere {
  overflow-wrap: anywhere;
}

.uac-collapse-text-description {
  text-align: start;
  width: 100%;
}

.uac-collapse-text-description span > ul {
  padding-inline-start: 1rem;
  margin-bottom: 0;
}

.uac-collapse-text-description > span > i {
  display: block;
}

@media only screen and (min-width: 576px) {
  .uac-flex-gap-row {
    gap: 1rem;
  }
}

@media only screen and (min-width: 1400px) {
  .uac-step-container-v2 {
    padding: 0 20%;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .uac-step-container-v2 {
    padding: 0 15%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .uac-step-container-v2 {
    padding: 0 10%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .uac-step-container-v2 {
    padding: 0 10%;
  }
}

@media (min-width: 768px) {
  .uac-step-container-v2 {
    margin: 2rem 0;
  }

  .uac-step-container-v2 .uac-button-column-container-v2 {
    margin-inline-start: 0;
    margin-inline-end: 0;
    display: flex;
    align-items: center;
  }
  .uac-button-column-container-v2.uac-custom-button-column-container-v2.uac-multiple-btn-v2 {
    margin-inline-end: 2rem;
  }

  .uac-step-container-v2 .uac-button-column-container-v2 > .uac-btn-link-v2 {
    padding: 0;
  }

  .uac-step-container-v2 .row > .uac-step-content-column-v2 {
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
  }

  .uac-step-container-v2 .row > .uac-step-content-column-v2:first-child {
    padding-inline-start: 0;
  }

  .uac-step-container-v2 .row > .uac-step-content-column-v2:last-child {
    padding-inline-end: 0;
  }

  .uac-step-container-v2
    .row
    > .uac-step-content-column-v2.uac-address-single-field {
    padding-inline-end: 0.75rem;
  }

  .uac-step-container-v2
    .uac-step-heading-row-v2
    > .uac-step-subheading-column-v2 {
    margin-top: 0.375rem;
  }
}

@media (min-width: 576px) {
  .uac-step-container-v2 .uac-button-column-container-v2 {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
  }

  .uac-step-container-v2 .uac-button-column-container-v2 > .uac-btn-link-v2 {
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .uac-back-btn-v2 {
    margin-inline-end: 2rem;
  }

  .uac-billing-address-buttons-container .uac-button-link-container {
    margin-inline-end: 1rem;
  }
}

@media (max-width: 575.98px) {
  .uac-step-container-v2
    .uac-button-column-container-v2
    .uac-button-link-container {
    justify-content: center;
  }

  .uac-back-btn-v2,
  .uac-billing-address-buttons-container .uac-button-link-container {
    margin-inline-end: 0;
  }
}

.uac-numbered-list {
  text-align: start;
  list-style-position: inside;
  padding: 0;
}

@media (max-width: 767px) {
  .uac-margin-bottom-mobile {
    margin-bottom: 6rem;
  }
}

.uac-terms-and-conditions-title.focused {
  max-width: max-content;
}

/* End UAC steps layout V2 */

/* UAC typography elements layout */

.uac-text-word-break {
  overflow: hidden;
  overflow-wrap: break-word;
}

.uac-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  word-wrap: normal;
}

.uac-text-space {
  padding-top: 1.5rem;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uac-contents-inline {
  display: inline;
}

/* End of UAC typography elements layout */

/* Text Align */
.center {
  text-align: center;
}

.left {
  text-align: start;
}

.right {
  text-align: end;
}

.inherit {
  text-align: inherit;
}
/* End Text Align */

/* Text Case */
.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.capitalize-char:first-letter {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}
/* End of Text Case */

/* Change Your Plan */

.uac-plan-selection-btn-container,
.uac-suspend-service-card-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1.75rem;
}

.uac-plan-selection-current-plan {
  display: flex;
  justify-content: flex-end;
  padding-block: 1.25rem;
  padding-inline-start: 1.75rem;
  flex-direction: column;
  flex-wrap: nowrap;
}

.uac-plan-change-subheading-column-v2 {
  margin-bottom: 2rem !important;
}

.uac-plan-selection-btn-container
  .uac-button-column-container-v2
  .uac-button-link-container.col {
  padding-inline-end: 1rem;
}

/* End of change your plan */

/* Billing Country step */

.uac-selected-billing-country-wrapper {
  max-width: 300px;
}

.uac-supported-countries-link {
  margin-top: 11px;
}

/*End of Billing Country step*/

/* Add-Ons Pages */
.uac-add-ons-card-footer-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-inline-start: 1.75rem;
  padding-inline-end: 1.75rem;
}

.uac-add-ons-card-footer-buttons-container {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 2rem;
  row-gap: 1rem;
}

.uac-add-ons-card-footer-text-container {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-top: 10px;
}

.uac-add-ons-card-footer-buttons-container .uac-add-ons-card-footer-btn {
  padding: 0 0.5rem;
}

@media (min-width: 992px) and (max-width: 1550px) {
  .uac-add-ons-card-footer-buttons-container {
    column-gap: 0.5rem;
  }
}

@media (max-width: 767px) {
  .uac-add-ons-card-footer-buttons-container {
    flex-direction: row;
  }
}

@media (min-width: 576px) {
  .uac-add-ons-card-footer-text-container {
    justify-content: right;
  }
}

@media (max-width: 575px) {
  .uac-add-ons-card-footer-text-container {
    justify-content: center;
  }
  .uac-button-full-text > span {
    white-space: normal;
  }
}

.uac-fee-spacing {
  flex-wrap: nowrap;
}

.uac-fee-spacing > p {
  margin-top: 1.5rem;
}

.uac-free-trial-active-disclaimer-container {
  padding-top: 1.25rem;
  & > .uac-spacing-v2 {
    margin-bottom: 0;
  }
}

/* End of Add-Ons Pages */

/* Plan Information */

.uac-sar-container {
  display: block;
}

.uac-promo-code-container {
  margin-top: 8px;
}

.uac-sar-plan-form .uac-sar-container {
  margin-top: 1.5rem;
}

.uac-promo-code-container .uac-promo-code-form-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.uac-promo-code-form-container .uac-form-control-container-v2 {
  width: 100%;
  margin-inline-end: 1rem;
}

.uac-promo-code-form-container label {
  margin-top: 0;
}

.uac-promo-code-container .row {
  display: flex;
}

.uac-promo-code-text-wrapper {
  display: flex;
}

.uac-promo-code-container .row {
  flex-wrap: nowrap;
}

.uac-promo-code-button.uac-btn-loading-v2 {
  padding: 0 1rem;
}

.uac-screen-reader-only {
  border: 0;
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.uac-package-description-container span > p {
  margin-bottom: 0 !important;
}

.uac-plan-details.focused {
  max-width: max-content;
}

.uac-plan-description-html b {
  display: none;
}

@media (max-width: 576px) {
  .uac-info-btn-container {
    max-width: 100%;
  }

  .uac-info-btn-in-progress {
    width: 100%;
    padding: 0px;
  }
}
/* End Of Plan Information */

/* Billing Information - Renewal V2 */

.uac-cards-container-v2 {
  display: flex;
  flex-direction: row-reverse;
}

@media (min-width: 768px) {
  .uac-cards-container-v2
    .uac-cards-column-left
    .uac-billing-information-your-plan-card {
    display: flex;
  }

  .uac-cards-container-v2
    .uac-cards-column-right
    .uac-billing-information-your-plan-card {
    display: none;
  }

  .uac-billing-information-your-plan-card,
  .uac-billing-information-payment-method-card {
    padding-inline-end: 1rem !important;
  }

  .uac-billing-information-emergency-info-card,
  .uac-billing-information-emergency-contacts-card,
  .uac-billing-information-billing-address-card {
    padding-inline-start: 1rem !important;
  }

  .uac-billing-information-vat-input {
    padding-inline-end: 0.75rem !important;
  }
}

@media (max-width: 767px) {
  .uac-cards-container-v2
    .uac-cards-column-right
    .uac-billing-information-your-plan-card {
    display: flex;
  }

  .uac-cards-container-v2
    .uac-cards-column-left
    .uac-billing-information-your-plan-card {
    display: none;
  }

  .uac-dropdown-list-group-activation {
    width: 100% !important;
  }
}

@media (max-width: 576px) {
  .uac-billing-information-back-button {
    margin-top: 1.5rem;
  }
}

.uac-billing-information-emergency-info-card,
.uac-billing-information-emergency-contacts-card,
.uac-billing-information-your-plan-card,
.uac-billing-information-billing-address-card,
.uac-billing-information-payment-method-card {
  margin-bottom: 2rem;
}

.uac-address-fields {
  margin-bottom: 1rem !important;
}

.uac-complete-btn-container {
  overflow: hidden;
  flex-wrap: wrap;
}

.uac-information-buttons-container {
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1.75rem;
}

.uac-billing-address-buttons-container {
  display: flex;
  justify-content: flex-end;
  padding: 0 1.75rem 2rem 1.75rem;
}

.uac-address-option-container {
  margin-top: 2rem;
}

.uac-here-suggestions-option {
  padding: 10px 15px 15px 15px;
}

.uac-here-suggestion-option-button {
  margin-top: 10px;
  width: 100%;
}

.uac-billing-card-container .uac-card-title-v2 {
  scroll-margin-top: 5rem;
}

.uac-banner-top {
  scroll-margin-top: 4rem;
}

@media (min-width: 768px) {
  .uac-address-option-list.row > .uac-address-option-container {
    margin-inline-start: 0.75rem;
    margin-inline-end: 0.75rem;
  }

  .uac-address-option-list.row > .uac-address-option-container:first-child {
    margin-inline-start: 0;
  }

  .uac-address-option-list.row > .uac-address-option-container:last-child {
    margin-inline-end: 0;
  }
}
/* End of Billing Information - Renewal V2 */

/*Uac Input With Dropdown*/

.uac-dropdown-list-group {
  position: absolute;
  min-width: 160px;
  z-index: 1;
  width: 100%;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  max-height: 19vh;
  overflow-y: auto;
}

.uac-dropdown-list-group-activation {
  position: absolute;
  min-width: 160px;
  z-index: 1;
  width: calc(100% - 0.75rem);
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  max-height: 19vh;
  overflow-y: auto;
  margin-right: 0.75rem;
}

button.uac-dropdown-list-group-item-highlight p {
  margin: 0.25rem 0;
  padding-inline-start: 0.5rem;
}

button.list-group-item {
  padding: 0;
}
/*End of Uac Input With Dropdown*/

/* Chevron */

.uac-chevron-button {
  display: flex;
  padding: 0;
  vertical-align: middle;
}

.uac-chevron-up:after,
.uac-chevron-down:after {
  width: 15px;
  display: block;
  align-self: center;
  margin-inline-start: 5px;
}

/* End of Chevron */

/* Review information cards */

.uac-info-first-card,
.uac-info-last-card {
  margin-bottom: 2rem;
}

.uac-renewal-successful-button-container {
  display: flex;
  flex-direction: column-reverse;
}

.uac-renewal-successful-subheading-column-v2 {
  margin-bottom: 2rem !important;
}

@media (min-width: 768px) {
  .uac-renewal-successful-button-container {
    width: fit-content;
  }

  .uac-info-first-card {
    padding-inline-end: 1rem !important;
  }

  .uac-info-last-card {
    padding-inline-start: 1rem !important;
  }
}

@media (max-width: 343px) {
  .uac-renewal-successful-button {
    height: auto !important;
    white-space: break-spaces;
  }
}

@media (max-width: 767px) {
  .uac-info-cards-container {
    display: flex;
    flex-direction: column;
  }

  .uac-renewal-successful-button-container .uac-btn-lg-v2 {
    width: 100%;
  }
}

/* Review information cards */

/* Payment Successful */

.uac-payment-successful-billing-info-card {
  margin-bottom: 2rem;
}

.uac-payment-successful-subheading-column-v2 {
  margin-bottom: 2rem !important;
}

.uac-payment-successful-button-container {
  display: flex;
  flex-direction: column-reverse;
}

@media (min-width: 768px) {
  .uac-payment-successful-button-container {
    width: fit-content;
  }
}

@media (max-width: 767px) {
  .uac-cards-container-payment-v2 {
    display: flex;
    flex-direction: column;
  }

  .uac-payment-successful-button-container .uac-custom-btn-lg-v2 {
    width: 100%;
  }
}

@media (max-width: 343px) {
  .uac-payment-successful-button {
    height: auto !important;
    white-space: break-spaces;
  }
}

/* End of Payment Successful */

/* Payment method card */
.uac-custom-billing-address-margin {
  margin-bottom: 0.5rem;
}
/* End of payment method card */

/* Service Transfer */

.uac-review-change-device {
  visibility: hidden;
}

.uac-service-transfer-img-container .uac-service-transfer-arrow,
.uac-service-transfer-img-container .uac-service-transfer-img-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.uac-rectangle .uac-product-name,
.uac-rectangle .uac-product-serial-no {
  display: flex;
  justify-content: center;
}

.uac-service-transfer-img-col {
  max-width: 100%;
  flex-direction: column;
}

.uac-service-transfer-img {
  max-width: 100%;
  max-height: 16rem;
}

.uac-product-img {
  max-height: 20rem;
  align-content: center;
}

.uac-service-transfer-arrow {
  align-self: center;
  height: 3rem;
}

.uac-product-name {
  align-items: flex-end;
  word-break: break-word;
}

.uac-product-serial-no {
  align-items: flex-start;
}

@media (min-width: 1400px) {
  .uac-service-transfer-img-container .uac-rectangle {
    width: 40%;
  }
}

@media (max-width: 1400px) {
  .uac-service-transfer-img-container .uac-rectangle {
    width: 43%;
  }
}

@media (min-width: 991px) {
  .uac-service-transfer-fallback {
    width: 90%;
  }
}

@media (min-width: 576px) {
  .uac-service-transfer-img-container .uac-service-transfer-img-col {
    flex: 0 0 11rem;
  }

  .uac-icon-arrow-forward {
    width: 80%;
    height: 80%;
  }
}

@media (max-width: 575px) {
  .uac-service-transfer-img-container .uac-service-transfer-img-col {
    flex: 0 0 45%;
  }

  .uac-icon-arrow-forward {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 320px) {
  .uac-service-transfer-img-container .uac-rectangle {
    flex: 0 0 100%;
  }

  .uac-icon-arrow-rotate {
    height: 50%;
    transform: rotate(90deg);
  }
}

/* End of Service Transfer */

/* Uac Alert - V2 */

.uac-alert-v2 {
  width: 100%;
  text-align: start;
  margin-top: 10px;
}

.uac-alert-btn-v2 {
  padding: 0rem;
  margin-inline-end: 0.9375rem;
}

.uac-alert-footer-v2 {
  margin-top: 0.75rem;
}

/* End of Uac Alert - V2 */

/* Header & Footer - V2 */
.app-header {
  display: flex;
  align-self: flex-start;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  justify-content: center;
  align-items: center;
}

.app-logo {
  width: 104.15px;
}

.app-footer-v2 {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 1.469rem;
  padding-top: 0.865rem;
  padding-bottom: 1.073rem;
  text-align: start;
}

.app-footer-default {
  display: flex;
  align-self: flex-end;
  flex-shrink: 0;
  width: 100%;
  padding-top: 0.75rem;
  padding-bottom: 0.8125rem;
}

/* End of Header & Footer - V2 */

/* Google logo */
.google-logo {
  padding-top: 2rem;
  padding-bottom: 0.5rem;
}
/* End of Google logo */

/* Icons */
.uac-icon-checkmark {
  width: 20px;
  height: 20px;
  margin-inline-start: 0.25rem;
  margin-inline-end: 0.25rem;
}

.uac-icon-invalid {
  margin-inline-start: 0.25rem;
  margin-inline-end: 0.25rem;
  margin-top: 0.35rem;
  width: 10px;
  height: 10px;
}

.uac-icon-important {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-inline-end: 0.25rem;
}

/* End of Icons */

/* Uac status pages button */
.uac-submit-status-pages-button {
  width: 100%;
  flex-direction: column-reverse;
}

@media (min-width: 576px) {
  .uac-submit-status-pages-button {
    flex-direction: row;
  }
}
/* End of Uac status pages button */

/* Uac validation error pages */
.uac-customer-support-message {
  white-space: normal;
  word-wrap: break-word;
}

.uac-customer-support-link {
  white-space: nowrap;
}

.uac-email-link {
  text-underline-offset: 0.25rem;
}

.uac-sub-link {
  text-underline-offset: 0.25rem;
}

.uac-confirmation-email-container {
  display: flex;
  padding: 2rem 0;
}

.uac-confirmation-email-user h2 {
  float: inline-start;
}

@media only screen and (max-width: 992px) {
  .uac-confirmation-email-container {
    justify-content: center;
  }

  .uac-confirmation-email-user h2 {
    float: inherit;
  }
}
/* End of Uac validation error pages */

/* UAC pages where plan cards are displayed */

.uac-plan-list-container-row-grid .uac-plan-list-col .uac-card-v2 .card-body {
  padding: 1.25rem 1.25rem 0 1.25rem;
}

.uac-plan-suspend-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
}

.uac-plan-suspend-service-card-container {
  margin-bottom: 1.75rem;
}

@media only screen and (min-width: 992px) {
  .uac-plan-suspend-service-card {
    justify-content: space-between;
    flex-direction: row;
    padding: 10px 12px;
  }
  .uac-plan-suspend-service-card-container {
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 992px) {
  .uac-plan-list-container-row-grid {
    display: grid;
    gap: 1.75rem;
  }
}

@media (max-width: 991px) {
  .uac-plan-list-container-row-grid {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }
}
/* End of UAC pages where plan cards are displayed

/* Uac SOS Coordination */

.uac-sos-coordination {
  visibility: hidden;
}

.uac-sos-coordination-img-container.row {
  width: 100%;
  margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
  .uac-sos-coordination-img-col {
    max-width: 50%;
  }
}

@media (max-width: 576px) {
  .uac-sos-coordination-img-col {
    max-width: 100%;
  }
}

.uac-sos-coordination-img {
  width: 100%;
  height: 100%;
}

.uac-sos-coordination-details {
  padding-inline-start: 1.7rem;
  margin-bottom: 0;
  text-align: start;
  width: 100%;
}

/* End of Uac SOS Coordination*/

/* SOS Emergency Information */
.uac-same-as-billing-checkbox .uac-checkbox-v2 {
  margin-bottom: 1.5rem;
  max-width: max-content;
  padding-inline-start: 0;
}

.uac-emergency-notes .col {
  margin-top: 0.75rem;
}
/* End of SOS Emergency Information */

/* SOS Review */

.uac-your-plans-buttons {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-top: 1.25rem;
}

.uac-review-optional-plans .row {
  flex: 0 0 100%;
}

.uac-optional-plan-title {
  flex-grow: 2;
}

/* End of SOS Review */

/* Change Device */

.uac-inprogress-message-element {
  margin-bottom: 2rem;
}

/* End of Change Device */

/* Cancel plan */

.uac-suspend-service-card-custom-border {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
}

/* End of cancel plan */

/* Maintenance Page */

.uac-column-content-align .uac-maintenance-date-container {
  margin-bottom: auto;
  margin-inline-end: 1rem;
}
.uac-column-content-align .uac-maintenance-description-container {
  margin-top: 2.5rem;
}
.uac-column-content-align
  .uac-maintenance-date-container
  .uac-maintenance-start-date-margin {
  margin-inline-end: 6.25rem;
}

@media (max-width: 767px) {
  .uac-column-content-align .uac-mobile-maintenance-dates-spacing {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 575px) {
  .uac-column-content-align
    .uac-maintenance-date-container
    .uac-maintenance-start-date-margin {
    margin-inline-end: 1.5rem;
  }

  .uac-button-overflow-breakword {
    word-wrap: break-word;
    white-space: normal;
    min-height: fit-content;
  }
}

/* End of Maintenance Page */

/* End of Service Transfer */

/* Custom checkbox css compatible with RTL */

.form-check {
  padding-inline-start: 1.25rem;
}

.form-check-input {
  margin-inline-start: -1.25rem;
}

/* End of custom checkbox css compatible with RTL */

/* SOS Activation, Plan Information */

.uac-promo-code-text-with-icon {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.uac-automaticRenewal-checkbox .uac-checkbox-v2 {
  padding-inline-start: 0;
}

/* End of SOS Activation, Plan Information */

/* Update Payment flow */

.uac-step-container-v2 {
  & .uac-make-payment-card-add-funds {
    margin-bottom: 0.625rem;
  }
}

.uac-cancellation-survey {
  width: 100%;
  border-width: 0px;
}

/* End of Update Payment flow */

/* Activation V2, Optional Plans*/
.uac-btn-activation-v2-optional {
  width: 100%;
}

/* End of Activation V2, Optional Plans */

:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Color Definitions */
  --black: #000;
  --charcoal-black: #00000066;
  --white: #fff;
  --dirty-white: #fffffff0;
  --alto: #d8d8d8;
  --mine-shaft: #323232;
  --boulder: #757575;
  --gray45: #737373;
  --gray80: #cccccc;
  --malibu: #60cff6;
  --red: #eb1100;
  --red-solid: #ff0000;
  --light-gray: #a1a1a1;
  --gray: #898989;
  --silver: #bababa;
  --silver-chalice: #9f9f9f;
  --dark-grey: #616161;
  --aqua-blue: #6dcff6;
  --light-blue: #9ee2fa;
  --light-orange: #ffc971;
  --emerald: #65d099;
  --light-red: #ff7384;
  --ash-gray: #d8d8d8;
  --border-gray: #d9d9d9;
  --dark-red: #920000;
  --green: #2d6c30;
  --candy-blue: #60cff6;
  --dark-boulder: #646464;
  --light-alto: #e1e1e1;
  --turquoise-blue: #67cde8;
  --quick-silver: #979797;
  --bowen-blue: #106fad;
  /* End of Color Definitions */

  /* Alerts Color Definitions */
  --alert-default-color: var(--black);
  --alert-default-text-color: var(--white);
  --alert-info-color: var(--light-blue);
  --alert-success-color: var(--emerald);
  --alert-warning-color: var(--light-orange);
  --alert-error-color: var(--light-red);
  --alert-primary-text-color: var(--black);
  /* Alerts Color Definitions */

  /* Loader Color Definitions */
  --loader-color-dark: var(--black);
  --loader-color-light: var(--white);
  /* End of Loader Color Definitions */

  /* Banners Color Definitions */
  --banner-success-color: var(--candy-blue);
  --banner-success-text-color: var(--black);
  --banner-error-color: var(--dark-red);
  --banner-error-text-color: var(--white);
  /* End of Banners Color Definitions */

  /* Buttons Color Definitions */
  --button-disabled-color: var(--mine-shaft);
  --button-primary-border-color: var(--black);
  --button-primary-bkg-color: var(--white);
  --button-dark-border-color: var(--black);
  --button-dark-bkg-color: var(--black);
  --button-dark-disabled-bkg-color: var(--black);
  --button-primary-disabled-bkg-color-v2: var(--ash-gray);
  --button-primary-disabled-border-color-v2: var(--ash-gray);
  --button-disabled-bkg-color-v2: var(--border-gray);
  --button-disabled-border-color-v2: var(--border-gray);
  --button-primary-border-color: var(--black);
  --button-light-blue-border-color-v2: var(--malibu);
  --button-light-blue-bkg-color-v2: var(--malibu);
  --toggle-button-border-color: var(--alto);
  --tab-button-off-color: var(--gray45);
  --tab-button-off-border-color: var(--gray80);
  --tab-button-off-hover-color: var(--black);
  /* End of Buttons Color Definitions */

  /* Chevron Color Definitions */

  --chevron-bkg-color: var(--dirty-white);
  --chevron-border-color: var(--dirty-white);

  /* Chevron Color Definitions */

  /* Card Color Definitions */
  --card-text-color: var(--black);
  --card-border-color: var(--silver);
  --here--suggestion-card-border-color: var(--border-gray);
  --card-selected-border-color: var(--black);
  /* End of Card Color Definitions */

  /* Email Verification Icon Color Definitions */

  --email-verification-icon-color: var(--dark-boulder);

  /* End of Email Verification Icon Color Definitions*/

  /* Footer Color Definitions */
  --footer-bgk-color: var(--black);
  --footer-text-color: var(--white);
  /* End of Footer Color Definitions */

  /* Form Controls Color Definitions */
  --form-controls-border-color: var(--alto);
  --form-controls-background-color: var(--white);
  --form-controls-disabled-text-color: var(--boulder);
  --form-controls-checkbox-border-color: var(--black);
  --form-controls-checkbox-focus-color: var(--charcoal-black);
  --form-controls-checkbox-checked-bkg-color: var(--black);
  --form-controls-input-with-dropdown-selection-color: var(--dark-boulder);
  --form-controls-background-color-v2: var(--ash-gray);
  --form-controls-border-color-v2: var(--ash-gray);
  --form-controls-checkbox-disabled-color: var(--dark-grey);
  --form-controls-invalid-focus-color-v2: var(--dark-red);
  --form-controls-error-color-v2: var(--dark-red);
  --form-controls-required-color-v2: var(--dark-red);
  --form-controls-disabled-color-v2: var(--dark-grey);
  --form-controls-focus-color-v2: var(--black);
  /* End of Form Controls Color Definitions */

  /* Text Color Definitions */
  --text-primary-color: var(--black);
  --text-secondary-color: var(--alto);
  --text-light-color: var(--white);
  --text-success-color: var(--green);
  --text-link-color-v2: var(--black);
  --text-link-visited-color-v2: var(--black);
  --text-error-color: var(--dark-red);
  --text-disabled-color-v2: var(--dark-grey);
  /* End of Text Color Definitions */

  /* Fonts Definitions */
  --root-font-family-roboto: 'Roboto';
  --root-font-family-oswald: 'Oswald';
  /* End of Fonts Definitions */

  /* Font Sizes */
  --font-size-h1-v2: 2.5rem;
  --font-size-h1-subtitle: 1.25rem;
  --font-size-h1-mobile-v2: 2rem;
  --font-size-h2-v2: 2rem;
  --font-size-h2-mobile-v2: 1.5rem;
  --font-size-h2-subtitle: 1.5rem;
  --font-size-h2-subtitle-large: 1.5rem;
  --font-size-h3-v2: 1.5rem;
  --font-size-h3-mobile-v2: 1.25rem;
  --font-size-h4-v2: 1.25rem;
  --font-size-h2-v2-error-code: 1.25rem;
  --font-size-h2-mobile-v2-error-code: 1rem;

  --font-size-body-large-v2: 1rem;
  --font-size-body-primary-v2: 0.875rem;
  --font-size-body-small-v2: 0.75rem;
  --font-size-body-medium-v2: 0.8rem;
  --font-size-btn-large-v2: 1rem;
  --font-size-btn-medium-v2: 0.875rem;
  --font-size-label-medium-v2: 0.875rem;
  --font-size-label-large-v2: 1rem;
  --font-size-medium-v2: 0.875rem;
  --font-size-footer-v2: 0.75rem;
  --font-size-footer: 0.6875rem;
  /* End of Font Sizes */

  /* Font Weights */
  --font-weight-bold-v2: 700;
  --font-weight-bold-medium-v2: 500;
  --font-weight-medium-v2: 400;
  --font-weight-regular-v2: 320;
  --font-weight-regular: 400;
  /* End of Font Weights */

  /* Line Heights */
  --line-height-small-v2: 14px;
  --line-height-medium: 18px;
  --line-height-regular-v2: 19px;
  --line-height-h3-v2: 24px;
  --line-height-h2-v2: 48px;
  --line-height-h1-v2: 56px;
  --line-height-h1-subtitle: 28px;
  --line-height-h4-v2: 20px;
  --line-height-label-v2: 19px;
  /* keeping it for compatibility reasons */
  --line-height-label: 19px;
  --line-height-h1-mobile-v2: 44px;
  --line-height-h2-mobile-v2: 36px;
  --line-height-h2-subtitle: 24px;
  --line-height-h2-subtitle-large: 28px;
  --line-height-h3-mobile-v2: 20px;
  --line-height-body-primary-small-v2: 20px;
  --line-height-radio-button-label: 22px;
  /* End of Line Heights */

  /* SVG Icons */
  --icon-chevron-down-v2: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OCA0OC44Ij4KPHBhdGggZD0iTTM5LDIxbDI4LjMsMjcuOEw3OCwzOC41TDM5LDBMMCwzOC41bDEwLjcsMTAuMkwzOSwyMXoiLz4KPC9zdmc+);
  --icon-chevron-up-v2: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OCA0OC43NSI+CiAgPHBhdGggZD0iTTM5LDI3Ljc5LDEwLjczLDAsMCwxMC4yNCwzOSw0OC43NSw3OCwxMC4yNCw2Ny4yOCwwWiIgc3R5bGU9ImZpbGw6IzAwMCIvPgo8L3N2Zz4=);
  --icon-chevron-down-grey-v2: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OCA0OC43NSI+CiAgPHBhdGggZD0iTTM5LDI3Ljc5LDEwLjczLDAsMCwxMC4yNCwzOSw0OC43NSw3OCwxMC4yNCw2Ny4yOCwwWiIgc3R5bGU9ImZpbGw6Izc1NzU3NSIvPgo8L3N2Zz4=);
  --icon-check-mark-v2: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTMuNjM2IiB2aWV3Qm94PSIwIDAgMTUgMTMuNjM2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik01LjI4NSAxMi4zNTVMMC42OTggNy43NjlMMi43ODggNS42NzlMNS4yODUgOC4xODNMMTIuNTgyIDAuODc3TDE0LjY3MiAyLjk2OUw1LjI4NSAxMi4zNTVaIiBmaWxsPSIjMkQ2QzMwIi8+PC9zdmc+);
  --icon-invalid-v2: url(data:image/svg+xml;base64,PHN2ZyBpZD0iU3ZnanNTdmcxMDAxIiB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c3ZnanM9Imh0dHA6Ly9zdmdqcy5jb20vc3ZnanMiIHZpZXdCb3g9IjAgMCAyNSAyNSI+PGRlZnMgaWQ9IlN2Z2pzRGVmczEwMDIiLz48ZyBpZD0iU3ZnanNHMTAwOCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxLjczNyAxLjczNyIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1Ij48cGF0aCBkPSJNMS4yODggMS4zOThjLTAuMDIzIDAgLTAuMDQ4IC0wLjAwOCAtMC4wNjcgLTAuMDI3TDAuODQ3IDAuOTk3IDAuNDcyIDEuMzcyYy0wLjAzOCAwLjAzOCAtMC4wOTcgMC4wMzggLTAuMTMzIDBzLTAuMDM4IC0wLjA5NyAwIC0wLjEzM0wwLjcxIDAuODYzIDAuMzM1IDAuNDg4Yy0wLjAzOCAtMC4wMzggLTAuMDM4IC0wLjA5NyAwIC0wLjEzMyAwLjAzOCAtMC4wMzggMC4wOTcgLTAuMDM4IDAuMTMzIDBMMC44NDMgMC43MjhsMC4zNzUgLTAuMzc1YzAuMDM4IC0wLjAzOCAwLjA5NyAtMC4wMzggMC4xMzMgMCAwLjAzOCAwLjAzOCAwLjAzOCAwLjA5NyAwIDAuMTMzTDAuOTggMC44NjNsMC4zNzUgMC4zNzVjMC4wMzggMC4wMzggMC4wMzggMC4wOTcgMCAwLjEzMyAtMC4wMTggMC4wMTggLTAuMDQgMC4wMjcgLTAuMDY3IDAuMDI3eiIgZmlsbD0iIzkyMDAwMCIgY2xhc3M9ImNvbG9yMDAwIHN2Z1NoYXBlIi8+PC9zdmc+PC9nPjwvc3ZnPg==);
  --icon-caret-down: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OCA0OC43NSI+CiAgPHBhdGggZD0iTTM5LDI3Ljc5LDEwLjczLDAsMCwxMC4yNCwzOSw0OC43NSw3OCwxMC4yNCw2Ny4yOCwwWiIgc3R5bGU9ImZpbGw6IzAwMCIvPgo8L3N2Zz4=);
  --icon-checked: url("data:image/svg+xml,%3Csvg width=%271em%27 height=%271em%27 viewBox=%270 0 16 16%27 class=%27bi bi-check%27 fill=%27%23fff%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z%27/%3E%3C/svg%3E");
  --icon-important: url("data:image/svg+xml,%3csvg width=%2717%27 height=%2717%27 viewBox=%270 0 17 17%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M8 1.333A6.67 6.67 0 0 0 1.334 8 6.67 6.67 0 0 0 8 14.667 6.67 6.67 0 0 0 14.667 8 6.67 6.67 0 0 0 8 1.333m.667 10H7.334V10h1.333zm0-2.666H7.334v-4h1.333z%27 fill=%27red%27/%3e%3c/svg%3e");
  --icon-arrow-forward: url('data:image/svg+xml,%3Csvg width="100%" height="100%" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="48" height="48" rx="24" fill="black"/%3E%3Cpath d="M24 8L21.18 10.82L32.34 22H8V26H32.34L21.18 37.18L24 40L40 24L24 8Z" fill="white"/%3E%3C/svg%3E');
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"%3e%3cpath d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z\"/%3E%3C/svg%3E");
  --email-verification-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNTAnIGhlaWdodD0nNTAnIHZpZXdCb3g9JzAgMCA1MCA1MCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZyBjbGlwLXBhdGg9J3VybCgjY2xpcDBfMTQzNF81NyknPjxwYXRoIGQ9J000OS41IDIwLjk4MzRWNDguNjE2OEgwLjVWMjAuOTgzNCcgc3Ryb2tlPScjMjMxRjIwJyBzdHJva2UtbWl0ZXJsaW1pdD0nMTAnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcvPjxwYXRoIGQ9J00wLjUgMjAuOTgzM0w5LjEzMjQxIDE1LjcwNycgc3Ryb2tlPScjMjMxRjIwJyBzdHJva2UtbWl0ZXJsaW1pdD0nMTAnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcvPjxwYXRoIGQ9J00wLjUgNDguNjE2OEwxOS4xMDg5IDMyLjM1NzQnIHN0cm9rZT0nIzIzMUYyMCcgc3Ryb2tlLW1pdGVybGltaXQ9JzEwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48cGF0aCBkPSdNNDkuNTAwMSA0OC42MTY4TDMwLjg5MTEgMzIuMzU3NCcgc3Ryb2tlPScjMjMxRjIwJyBzdHJva2UtbWl0ZXJsaW1pdD0nMTAnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcvPjxwYXRoIGQ9J000OS41IDIwLjk4MzJMNDAuOTQyNCAxNS43NTI3JyBzdHJva2U9JyMyMzFGMjAnIHN0cm9rZS1taXRlcmxpbWl0PScxMCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJy8+PHBhdGggZD0nTTQ5LjUgMjAuOTgzNEwyNSAzNS45NTgxJyBzdHJva2U9JyMyMzFGMjAnIHN0cm9rZS1taXRlcmxpbWl0PScxMCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJy8+PHBhdGggZD0nTTAuNSAyMC45ODM0TDI1IDM1Ljk1ODEnIHN0cm9rZT0nIzIzMUYyMCcgc3Ryb2tlLW1pdGVybGltaXQ9JzEwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48cGF0aCBkPSdNOS4wMjk3OSAyNi4yNDYzVjEuMzgzM0g0MC45NzA1VjI2LjI0NjMnIHN0cm9rZT0nIzIzMUYyMCcgc3Ryb2tlLW1pdGVybGltaXQ9JzEwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48cGF0aCBkPSdNMTguMjg1MiAxNi40NDYzTDIzLjcyOTYgMjEuODkwN0wzMy41Mjk2IDkuMTg3MDEnIHN0cm9rZT0nIzIzMUYyMCcgc3Ryb2tlLW1pdGVybGltaXQ9JzEwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSdjbGlwMF8xNDM0XzU3Jz48cmVjdCB3aWR0aD0nNTAnIGhlaWdodD0nNTAnIGZpbGw9J3doaXRlJy8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+Cg==);

  /* End of SVG Icons */

  font-family: var(--root-font-family-roboto);
  font-weight: var(--font-weight-regular);
  font-size: 100%;
  color: var(--text-primary-color);
}

body {
  font-family: var(--root-font-family-roboto);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-large);
  color: var(--text-primary-color);
}

/* Header && Footer (keeping styles from old file for compatibilty for overwrites) */
.app-header-custom {
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--alto);
}

.app-footer-custom-default {
  align-items: center;
  justify-content: center;
  background-color: var(--footer-bgk-color);
  color: var(--text-light-color);
}

/* End of Header && Footer */

/* Typography V2 */

.uac-custom-h1-v2,
.uac-custom-h2-v2,
.uac-custom-h2-subtitle,
.uac-custom-h2-subtitle-large,
.uac-custom-h3-v2,
.uac-custom-h1-subtitle,
.uac-custom-h4-v2,
.uac-error-code {
  font-family: var(--root-font-family-oswald);
  padding: 4px 0;
}

.uac-custom-h1-v2 {
  line-height: var(--line-height-h1-v2);
  font-weight: var(--font-weight-medium-v2);
}

.uac-custom-h1-subtitle {
  font-size: var(--font-size-h1-subtitle);
  line-height: var(--line-height-h1-subtitle);
  font-weight: var(--font-weight-medium-v2);
}

.uac-custom-h2-v2 {
  font-size: var(--font-size-h2-v2);
  line-height: var(--line-height-h2-v2);
  font-weight: var(--font-weight-medium-v2);
}

.uac-error-code {
  font-size: var(--font-size-h2-v2-error-code);
  line-height: var(--line-height-h2-v2);
  font-weight: var(--font-weight-medium-v2);
}

.uac-custom-h2-subtitle {
  font-size: var(--font-size-h2-subtitle);
  line-height: var(--line-height-h2-subtitle);
  font-weight: var(--font-weight-medium-v2);
}

.uac-custom-h2-subtitle-large {
  font-size: var(--font-size-h2-subtitle-large);
  line-height: var(--line-height-h2-subtitle-large);
  font-weight: var(--font-weight-medium-v2);
}

.uac-custom-h3-v2 {
  font-size: var(--font-size-h3-v2);
  line-height: var(--line-height-h3-v2);
  font-weight: var(--font-weight-medium-v2);
}

.uac-custom-h4-v2 {
  font-size: var(--font-size-h4-v2);
  line-height: var(--line-height-h4-v2);
  font-weight: var(--font-weight-medium-v2);
}

.uac-custom-body-primary-small-v2,
.uac-custom-body-primary-bold-v2,
.uac-custom-body-primary-medium-v2,
.uac-custom-body-primary-regular-v2,
.uac-custom-body-large-bold-v2,
.uac-custom-body-large-regular-v2,
.uac-custom-footer-v2,
.uac-custom-footer-default,
.uac-custom-body-large-bold-span-v2,
.uac-custom-body-large-regular-span-v2 {
  font-family: var(--root-font-family-roboto);
}

.uac-custom-body-primary-bold-v2,
.uac-custom-body-primary-medium-v2,
.uac-custom-body-primary-regular-v2 {
  font-size: var(--font-size-body-primary-v2);
  line-height: var(--line-height-h3-v2);
}

.uac-custom-small-text-size-container .uac-custom-body-primary-small-v2 {
  font-size: var(--font-size-body-small-v2);
  line-height: var(--line-height-body-primary-small-v2);
}

.uac-custom-body-primary-small-bold-v2 {
  font-size: var(--font-size-body-small-v2);
  font-weight: var(--font-weight-bold-v2);
}

.uac-custom-body-primary-bold-v2 {
  font-weight: var(--font-weight-bold-v2);
}

.uac-custom-body-primary-medium-v2 {
  font-weight: var(--font-weight-medium-v2);
}

.uac-custom-body-primary-regular-v2,
.uac-custom-body-large-regular-span-v2 {
  font-weight: var(--font-weight-regular-v2);
}

.uac-custom-body-primary-regular-v2 span p > b {
  font-weight: var(--font-weight-bold-v2);
}

.uac-custom-body-large-regular-v2,
.uac-custom-body-large-bold-v2,
.uac-custom-body-large-bold-span-v2,
.uac-custom-body-large-regular-span-v2,
p.uac-custom-body-large-regular-v2 > a.uac-custom-subheader-link-v2 {
  font-size: var(--font-size-body-large-v2);
}

.uac-custom-body-large-bold-v2,
.uac-custom-body-large-bold-span-v2 {
  font-weight: var(--font-weight-bold-v2);
}

.uac-custom-bold {
  font-weight: var(--font-weight-bold-medium-v2);
}

.uac-custom-footer-default {
  font-size: var(--font-size-footer);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
}

.uac-custom-footer-v2 {
  font-size: var(--font-size-footer-v2);
  font-weight: var(--font-weight-bold-v2);
  line-height: var(--line-height-small-v2);
  letter-spacing: 0;
  text-align: start;
}

.uac-custom-success-text-v2 {
  color: var(--text-success-color);
}

.uac-custom-error-text-v2 {
  color: var(--text-error-color);
}

.uac-custom-required-text-v2 {
  color: var(--form-controls-required-color-v2);
}

.uac-custom-invalid-text-v2 {
  color: var(--text-error-color);
  font-size: var(--font-size-body-large-v2);
  text-align: start;
}

.uac-custom-error-text-small-v2 {
  color: var(--text-error-color);
  font-size: var(--font-size-body-small-v2);
  text-align: start;
}

.uac-custom-disabled-text-v2 {
  color: var(--text-disabled-color-v2);
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
/* Large devices (desktops, 992px and up) */
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 768px) {
  .uac-custom-h1-v2 {
    font-size: var(--font-size-h1-v2);
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767px) {
  .uac-custom-h1-v2 {
    font-size: var(--font-size-h1-mobile-v2);
    line-height: var(--line-height-h1-mobile-v2);
  }

  .uac-custom-h2-v2 {
    font-size: var(--font-size-h2-mobile-v2);
    line-height: var(--line-height-h2-mobile-v2);
  }

  .uac-error-code {
    font-size: var(--font-size-h2-mobile-v2-error-code);
    line-height: var(--line-height-h2-mobile-v2);
  }

  .uac-custom-h3-v2 {
    font-size: var(--font-size-h3-mobile-v2);
    line-height: var(--line-height-h3-mobile-v2);
  }

  .uac-custom-card-subtitle-v2 .uac-custom-card-subtitle-text,
  .uac-custom-address-verification-container
    .uac-custom-address-verification-subheader {
    font-size: var(--font-size-h4-v2);
    line-height: var(--line-height-h4-v2);
  }
}

.uac-custom-body-large-bold-v2,
.uac-custom-body-large-bold-span-v2 {
  font-weight: var(--font-weight-bold-v2);
}

.uac-custom-bold {
  font-weight: var(--font-weight-bold-medium-v2);
}

.uac-custom-line-through-decoration {
  text-decoration: line-through;
}

/* End of Typography V2*/

/* Header & Footer */

.app-header-custom {
  border-bottom: 1px solid var(--alto);
}

.app-footer-custom-v2 {
  background-color: var(--footer-bgk-color);
  color: var(--footer-text-color);
}

/* End of Header & Footer */

/* Buttons V2*/
.uac-custom-btn-lg-v2,
.uac-custom-btn-lg-v2:active,
.uac-custom-btn-lg-v2:focus,
.uac-custom-btn-lg-v2:hover,
.uac-custom-btn-lg-v2:not(.disabled):active,
.uac-custom-btn-lg-v2:not(.disabled):active:focus {
  font-family: var(--root-font-family-roboto);
  font-size: var(--font-size-btn-large-v2);
  font-weight: var(--font-weight-bold-medium-v2);
  background-image: none;
  border-radius: 0px;
  box-shadow: none;
  --webkit-box-shadow: none;
  cursor: pointer;
  outline: 0;
}

.uac-custom-btn-md-v2,
.uac-custom-btn-md-v2:active,
.uac-custom-btn-md-v2:focus,
.uac-custom-btn-md-v2:hover,
.uac-custom-btn-md-v2:not(.disabled):active,
.uac-custom-btn-md-v2:not(.disabled):active:focus {
  font-family: var(--root-font-family-roboto);
  font-size: var(--font-size-btn-medium-v2);
  font-weight: var(--font-weight-bold-medium-v2);
  background-image: none;
  border-radius: 0px;
  box-shadow: none;
  --webkit-box-shadow: none;
  cursor: pointer;
  outline: 0;
}

.uac-custom-btn-primary-v2,
.uac-custom-btn-dark-v2,
.uac-custom-btn-light-blue-v2 {
  text-transform: uppercase;
}

.uac-custom-btn-primary-v2,
.uac-custom-btn-primary-v2:visited,
.uac-custom-btn-primary-v2:focus,
.uac-custom-btn-dark-v2:active,
.uac-custom-btn-primary-v2:hover,
/* Removing the next 2 selectors will cause default Bootstrap button styles take precedence:
- blue outline and box-shadow will be added to the button when clicked
- button color also becomes blue
regradless of the already set colors for active/focused buttons */
.uac-custom-btn-dark-v2:not(.disabled):active,
.uac-custom-btn-dark-v2:not(.disabled):active:focus {
  background-color: var(--button-primary-bkg-color);
  border: 1px solid var(--button-primary-border-color);
  color: var(--text-primary-color);
  -webkit-tap-highlight-color: var(--button-dark-bkg-color);
}

/* this is needed in order to fix the issue where the loader is not changing colors when hover is not active anymore once the button was pressed */
.uac-custom-btn-primary-v2:focus .uac-custom-loader-v2 .g__loader--light {
  background-color: var(--loader-color-dark);
}

.uac-custom-btn-primary-v2:focus-visible
  .uac-custom-loader-v2
  .g__loader--light {
  background-color: var(--loader-color-dark);
}

.uac-custom-btn-primary-v2:hover .uac-custom-loader-v2 .g__loader--light {
  background-color: var(--loader-color-dark);
}

.uac-custom-btn-dark-v2 .uac-custom-loader-v2 .g__loader--dark {
  background-color: var(--loader-color-light);
}

.uac-custom-btn-primary-v2:focus-visible {
  background-color: var(--button-primary-bkg-color);
  border: 1px solid var(--button-primary-border-color);
  outline: 2px solid var(--button-primary-border-color);
  color: var(--text-primary-color);
}

.uac-custom-btn-dark-v2.btn.btn-dark:focus-visible {
  background-color: var(--button-primary-bkg-color);
  border: 1px solid var(--button-primary-border-color);
  color: var(--text-primary-color);
}

.uac-custom-btn-dark-v2:focus-visible .uac-custom-loader-v2 .g__loader--dark {
  background-color: var(--loader-color-dark);
}

.uac-custom-btn-dark-v2,
.uac-custom-btn-dark-v2:visited,
.uac-custom-btn-primary-v2:active,
.uac-custom-btn-dark-v2:focus,
.uac-custom-btn-dark-v2:hover,
/* Removing the next 2 selectors will cause default Bootstrap button styles take precedence:
- blue outline and box-shadow will be added to the button when clicked
- button color also becomes blue
regradless of the already set colors for active/focused buttons */
.uac-custom-btn-primary-v2:not(.disabled):active,
.uac-custom-btn-primary-v2:not(.disabled):active:focus {
  background-color: var(--button-dark-bkg-color);
  border: 1px solid var(--button-dark-border-color);
  color: var(--text-light-color);
  -webkit-tap-highlight-color: var(--button-primary-bkg-color);
}

.uac-custom-btn-primary-v2.disabled,
.uac-custom-btn-dark-v2.disabled {
  background-color: var(--button-disabled-bkg-color-v2);
  border: 1px solid var(--button-disabled-border-color-v2);
  color: var(--text-primary-color);
  cursor: not-allowed;
  opacity: unset;
}

.uac-custom-btn-dark-v2.disabled:focus-visible {
  outline: 2px solid var(--button-primary-border-color);
}

.uac-custom-btn-primary-v2.uac-custom-btn-loading-v2.disabled {
  border: 1px solid var(--button-primary-disabled-border-color-v2);
  background-color: var(--button-primary-disabled-bkg-color-v2);
}

.uac-custom-btn-link-v2,
.uac-custom-btn-link-v2:visited {
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-primary-color);
}

.uac-custom-btn-text-v2,
.uac-custom-btn-text-v2:visited {
  text-decoration: none;
  padding: 0;
  color: var(--text-link-color-v2);
}

.uac-custom-btn-text-v2:active,
.uac-custom-btn-text-v2:focus,
.uac-custom-btn-text-v2:hover {
  text-decoration: none;
  color: var(--text-link-color-v2);
}

.uac-custom-btn-text-v2:focus-visible {
  outline: 1px solid var(--text-link-color-v2);
}

.uac-custom-btn-link-v2:active,
.uac-custom-btn-link-v2:focus,
.uac-custom-btn-link-v2:hover {
  color: var(--text-link-color-v2);
}

.uac-custom-btn-light-blue-v2,
.uac-custom-btn-light-blue-v2:visited,
.uac-custom-btn-light-blue-v2:hover {
  background-color: var(--button-light-blue-bkg-color-v2);
  border: 1px solid var(--button-light-blue-border-color-v2);
  color: var(--text-primary-color);
}

.uac-custom-btn-light-blue-v2:active,
/* Removing the next 3 selectors will cause default Bootstrap button styles take precedence:
- blue outline and box-shadow will be added to the button when clicked
- button color also becomes blue
regradless of the already set colors for active/focused buttons */
.uac-custom-btn-light-blue-v2:not(.disabled):active,
.uac-custom-btn-light-blue-v2:not(.disabled):active:focus,
.uac-custom-btn-light-blue-v2:not(.disabled):active:focus.btn-primary {
  background-color: var(--button-primary-bkg-color);
  border: 1px solid var(--button-light-blue-border-color-v2);
  color: var(--text-primary-color);
  -webkit-tap-highlight-color: var(--button-light-blue-bkg-color-v2);
  box-shadow: none;
}

.uac-custom-btn-light-blue-v2:focus-visible,
.uac-custom-btn-light-blue-v2:focus {
  background-color: var(--button-light-blue-bkg-color-v2);
  border: 2px solid var(--button-primary-border-color);
  color: var(--text-primary-color);
}

.uac-custom-btn-light-blue-v2.disabled:focus-visible {
  border: 2px solid var(--button-primary-border-color);
}

.uac-custom-btn-light-blue-v2.disabled,
.uac-custom-btn-light-blue-v2.disabled:hover {
  background-color: var(--button-disabled-bkg-color-v2);
  border: 1px solid var(--button-disabled-border-color-v2);
  cursor: not-allowed;
  opacity: unset;
  color: var(--text-primary-color);
}

.uac-custom-btn-loading-v2 {
  background-color: var(--button-dark-bkg-color);
  border: 1px solid var(--button-dark-border-color);
}

.uac-regular-font-weight {
  font-weight: var(--font-weight-regular);
}

/* We need to only allow hover effects for devices that support it otherwise on touch devices it'll stick to the button after click*/
@media (hover: hover) {
  .uac-custom-btn-dark-v2:hover:not(.disabled) {
    background-color: var(--button-primary-bkg-color);
    border: 1px solid var(--button-primary-border-color);
    color: var(--text-primary-color);
  }

  /* this is needed in order to fix the issue where the loader is not changing colors when hover is not active anymore once the button was pressed */
  .uac-custom-btn-primary-v2:hover .uac-custom-loader-v2 .g__loader--light {
    background-color: var(--loader-color-light);
  }

  .uac-custom-btn-dark-v2:hover .uac-custom-loader-v2 .g__loader--dark {
    background-color: var(--loader-color-dark);
  }

  .uac-custom-btn-primary-v2:hover:not(.disabled) {
    background-color: var(--button-dark-bkg-color);
    border: 1px solid var(--button-dark-border-color);
    color: var(--text-light-color);
  }

  .uac-custom-btn-link-v2:hover {
    color: var(--text-link-color-v2);
    text-decoration: underline;
  }

  .uac-custom-btn-light-blue-v2:hover:not(.disabled) {
    background-color: var(--button-primary-bkg-color);
    border: 1px solid var(--button-light-blue-border-color-v2);
    color: var(--text-primary-color);
  }
}

/*End of Buttons V2*/

/* Toggle Button */

.uac-custom-toggle-btn-group .uac-custom-toggle-btn,
.uac-custom-toggle-btn-group .uac-custom-toggle-btn:active,
.uac-custom-toggle-btn-group .uac-custom-toggle-btn:focus,
.uac-custom-toggle-btn-group .uac-custom-toggle-btn:hover {
  font-family: var(--root-font-family-roboto);
  font-size: var(--font-size-btn-medium-v2);
  font-weight: var(--font-weight-bold-medium-v2);
  background-image: none;
  box-shadow: none;
  --webkit-box-shadow: none;
}

.uac-custom-toggle-btn-group .uac-custom-toggle-btn.uac-custom-toggle-btn-on,
.uac-custom-toggle-btn-group
  .uac-custom-toggle-btn-on.btn-primary:not(:disabled):not(.disabled),
.uac-custom-toggle-btn-group
  .uac-custom-toggle-btn.uac-custom-toggle-btn-on:hover,
.uac-custom-toggle-btn-group
  .uac-custom-toggle-btn.uac-custom-toggle-btn-on:focus:not(:focus-visible),
.uac-custom-toggle-btn-group
  .uac-custom-toggle-btn.uac-custom-toggle-btn-on:focus {
  background-color: var(--button-dark-bkg-color);
  border: 1px solid var(--button-primary-border-color);
  color: var(--text-light-color);
  -webkit-tap-highlight-color: var(--button-dark-bkg-color);
  box-shadow: none;
}

.uac-custom-toggle-btn-group
  .uac-custom-toggle-btn.uac-custom-toggle-btn-on.btn-primary:focus-visible {
  background-color: var(--button-primary-bkg-color);
  border: 1px solid var(--button-primary-border-color);
  color: var(--text-primary-color);
  -webkit-tap-highlight-color: var(--button-dark-bkg-color);
  box-shadow: none;
}

.uac-toggle-btn.uac-custom-toggle-btn.uac-custom-toggle-btn-off,
.uac-toggle-btn.uac-custom-toggle-btn.uac-custom-toggle-btn-off:active,
.uac-toggle-btn.uac-custom-toggle-btn.uac-custom-toggle-btn-off:visited,
.uac-toggle-btn.uac-custom-toggle-btn.uac-custom-toggle-btn-off:focus,
.uac-toggle-btn.uac-custom-toggle-btn.uac-custom-toggle-btn-off:hover {
  background-color: var(--button-primary-bkg-color);
  border: 1px solid var(--toggle-button-border-color);
  color: var(--text-primary-color);
  -webkit-tap-highlight-color: var(--button-primary-bkg-color);
}

.uac-custom-toggle-btn-group .uac-custom-toggle-btn-off.btn-primary:focus,
.uac-custom-toggle-btn-group
  .uac-custom-toggle-btn-off.btn-primary:not(:disabled):not(.disabled).active,
.uac-custom-toggle-btn-group
  .uac-custom-toggle-btn-off.btn-primary:not(:disabled):not(.disabled):active,
.uac-custom-toggle-btn-group
  .uac-custom-toggle-btn-off.show
  > .btn-primary.dropdown-toggle {
  background-color: var(--button-primary-bkg-color);
  border: 1px solid var(--button-primary-border-color);
  color: var(--text-primary-color);
  -webkit-tap-highlight-color: var(--button-primary-bkg-color);
  box-shadow: none;
}

/* End of Toggle Button */

/* Quantity Selector */

.uac-custom-quantity-selector-btn,
.uac-custom-quantity-selector-btn:active,
.uac-custom-quantity-selector-btn:focus,
.uac-custom-quantity-selector-btn:hover,
.uac-custom-quantity-selector-btn:not(.disabled):active,
.uac-custom-quantity-selector-btn:not(.disabled):active:focus {
  font-family: var(--root-font-family-roboto);
  font-size: var(--font-size-btn-medium-v2);
  font-weight: var(--font-weight-bold-medium-v2);
  border-radius: 0px;
  box-shadow: none;
  --webkit-box-shadow: none;
  cursor: pointer;
  outline: none;
  border: none;
}

.uac-custom-quantity-selector-btn,
.uac-custom-quantity-selector-btn:visited,
.uac-custom-quantity-selector-btn:focus,
.uac-custom-quantity-selector-btn:hover {
  background-color: var(--light-alto);
  color: var(--text-primary-color);
}

.uac-custom-quantity-selector-btn:focus-visible {
  border: 1px solid var(--button-primary-border-color);
  outline: 2px solid var(--button-primary-border-color);
  color: var(--text-primary-color);
}

.uac-custom-quantity-selector-btn:active,
.uac-custom-quantity-selector-btn:not(.disabled):active,
.uac-custom-quantity-selector-btn:not(.disabled):active:focus {
  background-color: var(--button-dark-bkg-color);
  border: 1px solid var(--button-dark-border-color);
  color: var(--text-light-color);
}

.uac-custom-quantity-selector-btn.disabled {
  background-color: var(--button-disabled-bkg-color-v2);
  border: 1px solid var(--button-disabled-border-color-v2);
  color: var(--text-primary-color);
  cursor: not-allowed;
  opacity: unset;
}

/* We need to only allow hover effects for devices that support it otherwise on touch devices it'll stick to the button after click*/
@media (hover: hover) {
  .uac-custom-quantity-selector-btn:hover:not(.disabled) {
    background-color: var(--button-dark-bkg-color);
    border: 1px solid var(--button-dark-border-color);
    color: var(--text-light-color);
  }
}

/* End of Quantity Selector */

/* Cards */
.uac-is-interactive-card {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.uac-custom-card-border {
  border: 1px solid var(--card-border-color);
}
/* End of Cards */

/* Tab View */

.uac-custom-tab-view .uac-custom-tab,
.uac-custom-tab-view .uac-custom-tab:active,
.uac-custom-tab-view .uac-custom-tab:focus,
.uac-custom-tab-view .uac-custom-tab:hover {
  font-family: var(--root-font-family-oswald);
  font-size: var(--font-size-h4-v2);
  font-weight: var(--font-weight-medium-v2);
  background-image: none;
  box-shadow: none;
  --webkit-box-shadow: none;
}

.uac-custom-tab-content-on {
  border-bottom: 8px solid var(--candy-blue);
}

.uac-custom-tab-view .uac-custom-tab.uac-custom-tab-on,
.uac-custom-tab-view
  .uac-custom-tab-on.btn-primary:not(:disabled):not(.disabled),
.uac-custom-tab-view .uac-custom-tab.uac-custom-tab-on:hover,
.uac-custom-tab-view
  .uac-custom-tab.uac-custom-tab-on:focus:not(:focus-visible),
.uac-custom-tab-view .uac-custom-tab.uac-custom-tab-on:focus {
  background-color: var(--button-primary-bkg-color);
  border: 0;
  color: var(--text-primary-color);
  box-shadow: none;
}

.uac-custom-tab-view
  .uac-custom-tab.uac-custom-tab-off.btn-primary:focus-visible {
  background-color: var(--button-primary-bkg-color);
  color: var(--tab-button-off-color);
  box-shadow: none;
}

.uac-custom-tab-off,
.uac-custom-tab-off:active,
.uac-custom-tab-off:visited,
.uac-custom-tab-off:focus,
.uac-custom-tab-off:hover {
  background-color: var(--button-primary-bkg-color);
  border: 0;
  color: var(--tab-button-off-color);
}

.uac-custom-tab-off:focus,
.uac-custom-tab-off:hover {
  color: var(--tab-button-off-hover-color);
}

.uac-custom-tab-view .uac-custom-tab-off.btn-primary:focus,
.uac-custom-tab-view
  .uac-custom-tab-off.btn-primary:not(:disabled):not(.disabled).active,
.uac-custom-tab-view
  .uac-custom-tab-off.btn-primary:not(:disabled):not(.disabled):active,
.uac-custom-tab-view .uac-custom-tab-off.show > .btn-primary.dropdown-toggle {
  background-color: var(--button-primary-bkg-color);
  border: 0;
  color: var(--tab-button-off-color);
  box-shadow: none;
}

/* End of Tab View */

/* Link */

a.uac-custom-link-v2 {
  font-family: var(--root-font-family-roboto);
  font-size: var(--font-size-body-primary);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-regular);
  text-decoration: underline;
}

a.uac-custom-link-v2:link {
  color: var(--text-primary-color);
}

a.uac-custom-link-v2:visited {
  color: var(--text-link-visited-color-v2);
}

a.uac-custom-link-v2:focus-visible {
  outline: 2px solid var(--button-primary-border-color);
}

a.uac-custom-link-v2:hover,
a.uac-custom-link-v2:active {
  color: var(--text-link-color-v2);
}

a.uac-custom-link-v2-large {
  font-size: var(--font-size-body-large);
}

.uac-custom-subheader-link-v2:link,
.uac-custom-subheader-link-v2:hover,
.uac-custom-subheader-link-v2:active,
.uac-custom-subheader-link-v2:visited {
  font-family: var(--root-font-family-roboto);
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-regular);
  text-decoration: underline;
}

.uac-custom-subheader-link-v2:link {
  color: var(--text-primary-color);
}

.uac-custom-subheader-link-v2:visited {
  color: var(--text-link-visited-color-v2);
}

.uac-custom-subheader-link-v2:hover,
.uac-custom-subheader-link-v2:active {
  color: var(--text-link-color-v2);
}

.uac-custom-customer-support-link:link,
.uac-custom-customer-support-link:hover,
.uac-custom-customer-support-link:active,
.uac-custom-customer-support-link:visited {
  font-size: var(--font-size-body-large-v2);
}

.uac-custom-footer-v2 {
  font-size: var(--font-size-footer-v2);
  font-weight: var(--font-weight-bold-v2);
  line-height: var(--line-height-small-v2);
  letter-spacing: 0;
  text-align: start;
}

a.uac-custom-customer-support-link:focus-visible {
  outline: 2px solid var(--button-primary-border-color);
}

a.uac-custom-tc-link:link,
a.uac-custom-tc-link:hover,
a.uac-custom-tc-link:active,
a.uac-custom-tc-link:visited {
  font-size: var(--font-size-body-large-v2);
}

a.uac-custom-tc-link:focus-visible {
  outline: 2px solid var(--button-primary-border-color);
}

a.uac-custom-error-link:link,
a.uac-custom-error-link:hover,
a.uac-custom-error-link:active,
a.uac-custom-error-link:visited {
  font-size: var(--font-size-body-small-v2);
  color: var(--text-error-color);
}

a.uac-btn-v2 {
  text-decoration: none;
  align-content: center;
  text-align: center;
}

/* End of Link */

/* --- Form Controls V2--- */

.uac-custom-form-control-container-v2 {
  text-align: start;
}

.uac-custom-label-v2 {
  font-weight: var(--font-weight-bold-v2);
  font-size: var(--font-size-label-large-v2);
  color: var(--text-primary-color);
  line-height: var(--line-height-label);
}

.uac-custom-label-v2.disabled {
  pointer-events: none;
}

.uac-custom-make-payment-label {
  font-weight: var(--font-weight-bold-medium-v2);
  font-size: var(--font-size-label-large-v2);
  color: var(--text-primary-color);
  line-height: var(--line-height-radio-button-label);
  accent-color: var(--text-link-visited-color-v2);
}

.uac-custom-make-payment-amount-value {
  font-weight: var(--font-weight-bold-medium-v2);
  font-size: var(--font-size-h2-subtitle);
  color: var(--text-primary-color);
  line-height: var(--line-height-label);
}

/* Select Form Control */

.uac-custom-select-wrapper-v2::after {
  background-image: var(--icon-caret-down);
}

.uac-custom-select-v2 {
  border: 1px solid var(--form-controls-border-color);
  border-radius: 0;
  outline: 0;
  color: var(--text-primary-color);
  background-color: var(--form-controls-background-color);
  appearance: none;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-large);
}

.uac-custom-select-v2:active,
.uac-custom-select-v2:focus {
  color: var(--text-primary-color);
  border: 2px solid var(--form-controls-focus-color-v2);
  box-shadow: none;
  background-color: var(--form-controls-background-color);
}

.uac-custom-select-v2.invalid-field,
.uac-custom-select-v2.invalid-field:focus {
  background-image: none;
  border: 1px solid var(--form-controls-required-color-v2);
}

.uac-custom-select-v2.invalid-field:focus {
  box-shadow: none;
  border: 2px solid var(--form-controls-invalid-focus-color-v2);
}

.uac-custom-select-v2 > .option-placeholder {
  color: var(--form-controls-disabled-text-color);
}

.uac-custom-select-v2.disabled {
  cursor: not-allowed;
  pointer-events: none;
  border: 1px solid var(--form-controls-border-color-v2);
  color: var(--form-controls-disabled-text-color);
  background-color: var(--form-controls-background-color-v2);
}

.uac-custom-select-v2.disabled:focus,
.uac-custom-select-v2.disabled:focus-visible {
  border: 2px solid var(--form-controls-focus-color-v2);
}

.uac-custom-select-loader-v2 {
  background-color: var(--form-controls-background-color);
}

/* End of Select Form Control */

/* Uac Input With Dropdown */

.uac-custom-dropdown-chevron {
  background-image: var(--icon-chevron-down-grey-v2);
  rotate: 270deg;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-position: center;
}

.uac-custom-dropdown-chevron:hover,
.uac-custom-dropdown-chevron:active,
.uac-custom-dropdown-chevron:focus,
.uac-custom-dropdown-chevron:not(:disabled):not(.disabled):active,
.uac-custom-dropdown-chevron:not(:disabled):not(.disabled):active:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

.uac-custom-dropdown-description {
  color: var(--form-controls-input-with-dropdown-selection-color);
}

.uac-custom-dropdown-list-group {
  font-family: var(--root-font-family-roboto);
  font-weight: var(--font-weight-regular);
  background-color: white;
  box-shadow: 0px 0px 25px rgb(0 0 0 / 8%);
  list-style-type: none;
  border: 1px solid var(--form-controls-border-color);
}

button.uac-custom-dropdown-list-group-item-highlight:hover,
button.uac-custom-dropdown-list-group-item-highlight:active,
button.uac-custom-dropdown-list-group-item-highlight:focus,
/* Removing the next 2 selectors will cause default Bootstrap button styles take precedence:
- blue outline and box-shadow will be added to the button when clicked
- button color also becomes blue
regradless of the already set colors for active/focused buttons */
button.uac-custom-dropdown-list-group-item-highlight:not(:disabled):not(.disabled):active,
button.uac-custom-dropdown-list-group-item-highlight:not(:disabled):not(.disabled):active:focus {
  background-color: var(--light-alto);
  border: 0;
  outline: 0;
  box-shadow: none;
}

button.uac-custom-dropdown-list-group-item-highlight.active {
  background-color: var(--light-alto);
  color: var(--black);
}

button.uac-custom-dropdown-list-group-item-highlight:hover {
  background-color: var(--light-alto);
}

button.uac-custom-list-group-item {
  border: none;
}

.uac-custom-dropdown-list {
  border: 1px solid var(--form-controls-border-color);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-large);
  background-color: var(--form-controls-background-color);
}

/* End of Uac Input With Dropdown */

/* End of Form Controls V2 */

/* Checkbox V2 */

.uac-custom-checkbox-v2 > .uac-custom-checkbox-label-v2::before {
  border: 2px solid var(--form-controls-checkbox-border-color);
  background-color: var(--form-controls-background-color);
}

.uac-custom-checkbox-disabled-v2
  > .uac-custom-checkbox-label-disabled-v2::before {
  border: 2px solid var(--form-controls-checkbox-border-color);
  background-color: var(--form-controls-disabled-color-v2);
}

.uac-custom-checkbox-v2
  > .uac-custom-checkbox-input-v2:focus
  + .uac-custom-checkbox-label-v2::before {
  box-shadow: 0 0 0.5em 0 var(--form-controls-checkbox-focus-color);
  border-color: var(--form-controls-checkbox-border-color);
}

.uac-custom-checkbox-v2
  > .uac-custom-checkbox-input-v2:checked
  + .uac-custom-checkbox-label-v2::before {
  background-image: var(--icon-checked);
  border-color: var(--form-controls-checkbox-border-color);
  background-color: var(--form-controls-checkbox-checked-bkg-color);
}

.uac-custom-checkbox.invalid-field-v2 > .uac-custom-label-v2 {
  color: var(--text-primary-color);
}

.uac-custom-checkbox-v2.disabled-v2 > .uac-custom-checkbox-label-v2,
.uac-custom-checkbox-v2.disabled-v2 > .uac-custom-checkbox-label-v2::before {
  cursor: not-allowed;
  color: var(--dark-grey);
  border-color: var(--dark-grey);
}

.uac-custom-checkbox-label-v2 {
  font-weight: var(--font-weight-medium-v2);
  font-size: var(--font-size-label-large-v2);
  color: var(--text-primary-color);
  line-height: var(--line-height-label);
}

.uac-custom-checkbox-ambassador-warning-v2 {
  font-weight: var(--font-weight-medium-v2);
  font-size: var(--font-size-body-large-v2);
  color: var(--text-primary-color);
  line-height: var(--line-height-regular-v2);
}

/* End of Checkbox V2 */

/* Input V2 */

.uac-custom-input-v2 {
  border-radius: 0;
  outline: 0;
  border: 1px solid var(--form-controls-border-color);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-large);
  background-color: var(--form-controls-background-color);
}

.uac-custom-input-v2:active,
.uac-custom-input-v2:focus {
  color: var(--text-primary-color);
  border: 2px solid var(--form-controls-focus-color-v2);
  box-shadow: none;
  background-color: var(--form-controls-background-color);
}

.uac-custom-input-v2.invalid-field {
  border: 1px solid var(--form-controls-required-color-v2);
}

.uac-custom-input-v2.invalid-field:focus {
  box-shadow: none;
  border: 2px solid var(--form-controls-invalid-focus-color-v2);
}

.uac-custom-input-v2.disabled,
.uac-custom-input-v2.disabled:focus {
  cursor: not-allowed;
  border: 1px solid var(--form-controls-border-color);
  color: var(--form-controls-disabled-text-color);
  background-color: var(--form-controls-background-color-v2);
}

/* End of Input V2 */

/* UAC Text Area */
.uac-custom-textarea {
  resize: none;
  border-radius: 0;
  outline: 0;
  border: 1px solid var(--form-controls-border-color);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-large);
  background-color: var(--form-controls-background-color);
}

.uac-custom-textarea:active,
.uac-custom-textarea:focus {
  color: var(--text-primary-color);
  border: 2px solid var(--form-controls-focus-color-v2);
  box-shadow: none;
  background-color: var(--form-controls-background-color);
}

/* End of UAC Text Area */
/* --- End of Form Controls V2--- */

/* Spinner V2 */

.uac-custom-spinner-v2,
.uac-custom-spinner-dark-v2 {
  color: var(--text-primary-color);
}

.uac-custom-spinner-v2 .uac-custom-spinner-child-v2::before,
.uac-custom-spinner-dark-v2 .uac-custom-spinner-child-v2::before {
  background-color: var(--black);
}

.uac-custom-spinner-light-v2 {
  color: var(--text-light-color);
}

.uac-custom-spinner-light-v2 .uac-custom-spinner-child-v2::before {
  background-color: var(--white);
}

/* End of Spinner V2 */

/* Cursor Types */

.uac-custom-cursor-type {
  cursor: pointer;
}

/* End of Cursor Types */

/* Alert */

.uac-custom-alert {
  font-family: var(--root-font-family-roboto);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-medium);
}

.uac-custom-alert-default {
  box-shadow: 0 1px 0 var(--alert-default-color);
  background-color: var(--alert-default-color);
  color: var(--alert-default-text-color);
}

.uac-custom-alert-info {
  background-color: var(--alert-info-color);
  color: var(--alert-primary-text-color);
  box-shadow: 0 1px 0 var(--alert-info-color);
}

.uac-custom-alert-success {
  background-color: var(--alert-success-color);
  color: var(--alert-primary-text-color);
  box-shadow: 0 1px 0 var(--alert-success-color);
}

.uac-custom-alert-warning {
  background-color: var(--alert-warning-color);
  color: var(--alert-primary-text-color);
  box-shadow: 0 1px 0 var(--alert-warning-color);
}

.uac-custom-alert-error {
  background-color: var(--alert-error-color);
  color: var(--alert-primary-text-color);
  box-shadow: 0 1px 0 var(--alert-error-color);
}

/* End of Alert*/

/* Toast */

.uac-custom-toast-alert {
  font-size: var(--font-size-body-large);
}

.uac-custom-toast-alert p {
  font-weight: var(--font-weight-regular);
}

/* End of Toast*/

/* Alert V2 */

.uac-custom-alert-v2 {
  border-radius: 0rem;
}

.uac-custom-alert-default-v2 {
  background-color: var(--alert-default-color);
  color: var(--alert-default-text-color);
}

.uac-custom-alert-info-v2 {
  background-color: var(--alert-info-color);
  color: var(--alert-primary-text-color);
}

.uac-custom-alert-success-v2 {
  background-color: var(--alert-success-color);
  color: var(--alert-primary-text-color);
}

.uac-custom-alert-warning-v2 {
  background-color: var(--alert-warning-color);
  color: var(--alert-primary-text-color);
}

.uac-custom-alert-error-v2 {
  background-color: var(--alert-error-color);
  color: var(--alert-primary-text-color);
}

.uac-custom-alert-content-v2 {
  font-family: var(--root-font-family-roboto);
  font-weight: var(--font-weight-medium-v2);
  font-size: var(--font-size-body-small-v2);
  line-height: var(--line-height-small-v2);
}

.uac-custom-alert-btn-v2 {
  font-family: var(--root-font-family-roboto);
  font-weight: var(--font-weight-bold-v2);
  font-size: var(--font-size-body-small-v2);
  line-height: var(--line-height-small-v2);
  text-transform: uppercase;
  border: 0rem;
  height: min-content;
}

.uac-custom-alert-btn-v2:active,
.uac-custom-alert-btn-v2:not(.disabled):active,
.uac-custom-alert-btn-v2:not(.disabled):active:focus,
.uac-custom-alert-btn-v2:hover,
.uac-custom-alert-btn-v2:focus,
.uac-custom-alert-btn-v2:target {
  font-family: var(--root-font-family-roboto);
  font-weight: var(--font-weight-bold-v2);
  font-size: var(--font-size-body-small-v2);
  line-height: var(--line-height-small-v2);
}

/* End of Alert V2 */

/* Banner */

.uac-custom-banner-success {
  background-color: var(--banner-success-color);
  color: var(--banner-success-text-color);
}

.uac-custom-banner-error {
  background-color: var(--banner-error-color);
  color: var(--banner-error-text-color);
}

.uac-custom-banner-content,
.uac-custom-banner .uac-custom-link-v2.uac-custom-banner-link {
  font-size: var(--font-size-body-small-v2);
}

/* End of Banner */

/* Chevron */

.uac-custom-chevron-up:after {
  content: var(--icon-chevron-up-v2);
  font-size: 0.375rem;
}

.uac-custom-chevron-down:after {
  content: var(--icon-chevron-down-v2);
  font-size: 0.375rem;
}

.uac-custom-chevron-button {
  color: var(--text-primary-color);
  background-repeat: no-repeat;
  border-color: var(--chevron-border-color);
  background-color: var(--chevron-bkg-color);
  border: none;
  outline: none;
  box-shadow: none;
}

.uac-custom-chevron-button:hover,
.uac-custom-chevron-button:active,
.uac-custom-chevron-button:focus,
.uac-custom-chevron-button:not(:disabled):not(.disabled):active,
.uac-custom-chevron-button:not(:disabled):not(.disabled):active:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

/* End Of Chevron */

/* Account Verification Icon */
.uac-custom-account-verification-icon {
  mask-image: var(--email-verification-icon);
  -webkit-mask-image: var(--email-verification-icon);
  background-color: var(--email-verification-icon-color);
  background-repeat: no-repeat;
  width: 10rem;
  height: 10rem;
  mask-size: 10rem;
}

/* End of Account Verification Icon */

/* Collapsible section */

.uac-custom-collapsible-section.focused {
  outline: 2px solid var(--button-primary-border-color);
}

.uac-custom-collapse-text-description {
  text-align: start;
}

/* End of Collapsible section */

/* Phone Number Input V2 */

.uac-custom-phone-input-v2 .PhoneInputInput {
  border-radius: 0;
  outline: 0;
  border: 1px solid var(--form-controls-border-color);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-large);
  background-color: var(--form-controls-background-color);
}

.uac-custom-phone-input-v2 .PhoneInputCountry {
  --PhoneInput-color--focus: var(--text-primary-color);
  --PhoneInputCountryFlag-borderColor--focus: var(--black);
  --PhoneInputCountrySelectArrow-color--focus: var(--text-primary-color);
  --PhoneInputCountryFlag-backgroundColor: var(
    --form-controls-background-color
  );
}

.uac-custom-phone-input-v2 .PhoneInputInput:active,
.uac-custom-phone-input-v2 .PhoneInputInput:focus,
.uac-custom-phone-input-v2 .PhoneInputCountrySelect:active,
.uac-custom-phone-input-v2 .PhoneInputCountrySelect:focus {
  color: var(--text-primary-color);
  border: 2px solid var(--form-controls-focus-color-v2);
  box-shadow: none;
  background-color: var(--form-controls-background-color);
}

.uac-custom-phone-input-v2.invalid-field .PhoneInputInput {
  border: 1px solid var(--form-controls-required-color-v2);
}

.uac-custom-phone-input-v2.invalid-field > .PhoneInputInput:focus {
  box-shadow: none;
  border: 2px solid var(--form-controls-invalid-focus-color-v2);
}

.uac-custom-phone-input-v2.disabled .PhoneInputCountrySelect[disabled] {
  cursor: not-allowed;
  color: var(--form-controls-disabled-text-color);
}

.uac-custom-phone-input-v2.disabled .PhoneInputInput,
.uac-custom-phone-input-v2.disabled:focus .PhoneInputInput {
  cursor: not-allowed;
  border: 1px solid var(--form-controls-border-color);
  color: var(--form-controls-disabled-text-color);
  background-color: var(--form-controls-background-color);
}

/* End of Phone Number Input V2 */

/* Uac Tooltip V2 */

.uac-custom-tooltip-wrapper-v2:focus-visible {
  outline: 2px solid var(--button-primary-border-color);
}

.uac-custom-tooltip-small-font-v2 {
  font-size: var(--font-size-body-small-v2);
  font-weight: var(--font-weight-medium-v2);
}

/* End of Uac Tooltip V2 */

/* Uac Progress Bar */

.uac-custom-progress-bar .bg-custom-progress {
  background-color: var(--candy-blue);
}

.uac-custom-progress-bar.progress {
  background-color: transparent;
}

/* End of Uac Progress Bar */

/* Divider */
.uac-custom-divider {
  background-color: var(--quick-silver);
}
/* End of Uac Divider */

/* Icons */

.uac-custom-icon-checkmark {
  background-image: var(--icon-check-mark-v2);
  background-repeat: no-repeat;
  background-position: center;
}

.uac-custom-icon-invalid {
  background-image: var(--icon-invalid-v2);
  background-repeat: no-repeat;
  background-position: center;
}

.uac-custom-icon-important {
  background-image: var(--icon-important);
  background-repeat: no-repeat;
}

.uac-custom-arrow-forward {
  background-image: var(--icon-arrow-forward);
  background-repeat: no-repeat;
  background-position: center;
}

/* End of Icons */

/* Plan Plan Information */

.uac-custom-numbered-list > li::marker {
  font-size: var(--font-size-body-large);
}

.uac-custom-plan-details.focused {
  outline: 2px solid var(--button-primary-border-color);
}

.uac-custom-suspend-plan-important-message {
  font-weight: var(--font-weight-bold-v2);
}

.uac-custom-terms-and-conditions-title.focused {
  outline: 2px solid var(--button-primary-border-color);
}

.uac-custom-plan-description-html {
  font-style: italic;
  font-size: var(--font-size-body-medium-v2);
}

/* End of Plan Information */

/* Here Suggestion Cards */

.uac-custom-here-suggestion-info {
  color: var(--red-solid);
}

.uac-custom-here-suggestions-option {
  border: 1px solid var(--here--suggestion-card-border-color);
}

.uac-custom-here-suggestions-option-required {
  border: 1px solid var(--form-controls-required-color-v2);
}

.uac-here-suggestion-option-title {
  font-family: var(--root-font-family-oswald);
  font-weight: var(--font-weight-medium-v2);
  font-size: var(--font-size-body-large-v2);
  line-height: var(--line-height-medium);
  padding: 0.35em 0.75em;
  word-wrap: normal;
  white-space: break-spaces;
  letter-spacing: 1.33px;
  text-transform: uppercase;
}

.uac-recommended-address-title {
  background-color: var(--aqua-blue);
}

.uac-entered-address-title {
  border-bottom: 1px solid var(--here--suggestion-card-border-color);
}

/* End of Here Suggestion Cards */

/* Kicker Flag */

.uac-custom-kicker-text {
  background-color: var(--aqua-blue);
  font-family: var(--root-font-family-oswald);
  font-weight: var(--font-weight-medium-v2);
  font-size: var(--font-size-body-large-v2);
  line-height: var(--line-height-medium);
  letter-spacing: 1.33px;
  text-transform: uppercase;
}

.uac-custom-kicker-irregular {
  border-color: var(--aqua-blue) transparent transparent transparent;
}

/* End of Kicker Flag */

/* Uac SOS flow, Optional Plans pages */
.uac-custom-metapackage-description a,
.uac-custom-metapackage-description a:hover,
.uac-custom-metapackage-description a:active,
.uac-custom-metapackage-description a:link,
.uac-custom-metapackage-description a:visited {
  color: var(--text-link-color-v2);
  text-decoration: underline;
}

.uac-custom-btn-optional-plan {
  pointer-events: cursor;
}
/* End of SOS flow, Optional Plans pages */

/* Make payment card */

.uac-custom-make-payment-important-alert {
  color: var(--red);
  font-weight: var(--font-weight-bold-v2);
}

.uac-custom-make-payment-amount-label {
  font-size: var(--font-size-h4-v2);
  line-height: var(--line-height-h4-v2);
  font-weight: var(--font-weight-bold-v2);
}

.uac-custom-make-payment-input:disabled,
.uac-custom-make-payment-input:disabled:focus {
  cursor: not-allowed;
  border: 1px solid var(--form-controls-border-color);
  color: var(--form-controls-disabled-text-color);
  background-color: var(--button-disabled-bkg-color-v2);
}

/* End of make payment card */

/* Payment method card */
.uac-custom-billing-address-required-alert {
  color: var(--red);
}

.uac-custom-billing-address-required-explanation {
  font-size: var(--font-size-body-small-v2);
}
/* End of payment method card */

/* Service Transfer */

.uac-custom-service-transfer-img-col img {
  background: none;
}

.uac-custom-product-serial-no {
  color: var(--gray45);
}

.uac-custom-product-serial-no .uac-custom-body-primary-small-v2 {
  font-size: var(--font-size-body-small-v2);
}

/* End of Service Transfer */

/* Verify email */
.uac-custom-email-not-verified {
  color: var(--red);
}
/*End of Verify Email */
/* SOS Activation, Plan Information*/

.uac-custom-promo-code-plus-icon {
  mask-image: var(--icon-plus);
  -webkit-mask-image: var(--icon-plus);
  background-color: var(--text-link-color-v2);
  width: 1rem;
  height: 1rem;
}

.uac-custom-missing-secondary-contact {
  color: var(--bowen-blue);
}

/* End of SOS Activation, Plan Information */

/* Status Page Alerts*/

.uac-custom-status-alert {
  position: fixed;
  bottom: 2rem;
  width: 40%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 1;
  padding-right: 2rem !important;
}

.uac-custom-status-alert-center {
  -ms-transform: translate(0, -20%);
  transform: translate(0, -20%);
}

.uac-custom-alert-link {
  text-decoration: none;
  color: var(--black);
}

@media (max-width: 767px) {
  .uac-custom-status-alert {
    width: 80%;
  }

  .uac-custom-status-alert-center {
    -ms-transform: translate(0, -10%);
    transform: translate(0, -10%);
  }
}

/* End of Status Page Alerts */



/* CSS variables. */
:root {
	--PhoneInput-color--focus: #03b2cb;
	--PhoneInputInternationalIconPhone-opacity: 0.8;
	--PhoneInputInternationalIconGlobe-opacity: 0.65;
	--PhoneInputCountrySelect-marginRight: 0.35em;
	--PhoneInputCountrySelectArrow-width: 0.3em;
	--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
	--PhoneInputCountrySelectArrow-borderWidth: 1px;
	--PhoneInputCountrySelectArrow-opacity: 0.45;
	--PhoneInputCountrySelectArrow-color: currentColor;
	--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountrySelectArrow-transform: rotate(45deg);
	--PhoneInputCountryFlag-aspectRatio: 1.5;
	--PhoneInputCountryFlag-height: 1em;
	--PhoneInputCountryFlag-borderWidth: 1px;
	--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
	--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
}

.PhoneInput {
	/* This is done to stretch the contents of this component. */
	display: flex;
	align-items: center;
}

.PhoneInputInput {
	/* The phone number input stretches to fill all empty space */
	flex: 1;
	/* The phone number input should shrink
	   to make room for the extension input */
	min-width: 0;
}

.PhoneInputCountryIcon {
	width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
	height: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--square {
	width: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--border {
	/* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
	background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
	/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
	/* Fixes weird vertical space above the flag icon. */
	/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
	display: block;
	/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
	width: 100%;
	height: 100%;
}

.PhoneInputInternationalIconPhone {
	opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
	opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */

.PhoneInputCountry {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	margin-right: var(--PhoneInputCountrySelect-marginRight);
}

.PhoneInputCountrySelect {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
	cursor: default;
}

.PhoneInputCountrySelectArrow {
	display: block;
	content: '';
	width: var(--PhoneInputCountrySelectArrow-width);
	height: var(--PhoneInputCountrySelectArrow-width);
	margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
	border-style: solid;
	border-color: var(--PhoneInputCountrySelectArrow-color);
	border-top-width: 0;
	border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	border-left-width: 0;
	border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	transform: var(--PhoneInputCountrySelectArrow-transform);
	opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}