:root {
    --name: light;
    --primaryColor: #003F69;
    --secondaryColor: #003050;
    --successFontColor: #FFFFFF;
    --successButtonColor: #003F69;
    --tapSuccessButtonColor: #003A64;
    --hoverSuccessButtonColor: #0A4973;
    --negativeColor: #EB4141;
    --negativeColorHover: #D43A3A;
    --warningColor: #EB4141;
    --fontColor: #00335D;
    --bankIdMobileIconColor: #003050;
    --secondaryFontColor: #757575;
    --cancelFontColor: #4A4B4D;
    --backgroundColor: #FFFFFF;
    --secondaryBackgroundColor: #F1F0F3;
    --tapSecondaryBackgroundColor: #ECEBEE;
    --borderColor: #CCE8F3;
    --disabledColor: #808285;
    --iconColor: #003050;

    --hoverScale: 1.005;
    --activeScale: 0.995;

    --hppBackgroundColorOpacity: rgba(255,255,255,0.7);
    --hppIconsFilter: invert(27%) sepia(6%) saturate(209%) hue-rotate(182deg) brightness(98%) contrast(88%);
    --hppIconsFilterHover: invert(0%) sepia(0%) saturate(0%) hue-rotate(268deg) brightness(107%) contrast(107%);
}

.aera-spinning-logo {
  background-image: url("./add-blue.svg");
}

/* HPP specific overrides. Keep AS-IS. */

.instrument.saved .buttonHolder .commandButton,
.instrument.saved .buttonHolder .commandButton:hover,
.commandButton,
.commandButton:hover,
button.commandButton,
button.commandButton:hover,
.mobileclose {
  appearance: none;
  background-color: var(--successButtonColor)!important;
  color: var(--successFontColor)!important;
  border: var(--successButtonColor)!important;
  border-radius: 4px!important;
  cursor: pointer!important;
  margin: auto!important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media not all and (hover: none) {
  input.commandButton:hover {
    transform: perspective(1px) scale(var(--hoverScale))!important;
    background: var(--hoverSuccessButtonColor)!important;
  }
}

input.commandButton:active {
  transform: perspective(1px) scale(var(--activeScale))!important;
  background: var(--tapSuccessButtonColor)!important;
}

.mobileclose {
  appearance: none;
  background-color: var(--secondaryBackgroundColor)!important;
  color: var(--cancelFontColor)!important;
  border: var(--secondaryBackgroundColor)!important;
  text-align: center!important;
  margin: auto!important;
  border-radius: 4px!important;
  cursor: pointer!important;
  letter-spacing: 0px;
  box-sizing: unset;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media not all and (hover: none) {
    .mobileclose:hover {
        transform: perspective(1px) scale(var(--hoverScale));
        background: var(--hoverSecondaryBackgroundColor);
    }
}

.mobileclose:active {
    transform: perspective(1px) scale(var(--activeScale));
    background: var(--tapSecondaryBackgroundColor);
}

.cancelButton {
  appearance: none;
  background-color: var(--secondaryBackgroundColor)!important;
  color: var(--cancelFontColor)!important;
  border: var(--secondaryBackgroundColor)!important;
  text-align: center!important;
  border-radius: 4px!important;
  cursor: pointer!important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media not all and (hover: none) {
    .cancelButton:hover {
        transform: perspective(1px) scale(var(--hoverScale));
        background: var(--hoverSecondaryBackgroundColor);
    }
}

.cancelButton:active {
    transform: perspective(1px) scale(var(--activeScale));
    background: var(--tapSecondaryBackgroundColor);
}

.instrument .buttonHolder, .instrument.saved .buttonHolder {
	 position: inherit;
   margin-top: auto;
   padding: 8px 0;
}

.dialogBoxFooter {
  position: unset;
}

.instrument.active.saved,
.instrument.active:not(.saved) {
  background-color: var(--backgroundColor);
}

.instrument .content,
.instrument .contentSimplified,
.instrument .instrumentPopupHeader,
#savedPM .instrument .content,
.instrument:not(.saved) .content {
  margin-top: 0;
  padding-bottom: 0;
  background-color: unset;
  border: none;
}

.inputContainer {
   background-color: unset;
}

.inputContainer .labelContainer,
.inputContainer.filled .labelContainer,
.inputContainer.active input,
.inputContainer.filled input,
.input {
  color: var(--fontColor);
}

.inputContainer+.errorMsg {
  background-color: var(--fontColor);
  color: var(--backgroundColor);
}

.inputContainer+.errorMsg:after {
  border-top-color: var(--fontColor);
}

.holder.cardCvCHolder {
	 margin-bottom: 0;
}

#securityLogoHolder {
	 display: contents;
}

#doneForm .cancelButton {
  border: none;
  margin-top: 0;
  margin-bottom: 2px;
  margin-right: 8px;
  color: var(--fontColor);
}

.holder .cvcInput {
  display: block !important;
}

/* To disable the add-card regular borders. */
.walletHeader {
  border: none;
}

.walletHeader.active {
  background-color: var(--backgroundColor);
}

.instrumentPopupHeader .title,
.walletHeader.active .textHolder {
  font-size: 1rem;
  color: var(--secondaryColor);
}

#walletSelection, #savedWalletSelection {
  background-color: var(--backgroundColor);
  border: none;
}

/* Specific to 3DS Authenticate. */
.instrument.saved {
  background-color: unset;
}
.instrumentInfo .instrumentInfoHolder .instrumentLogoHolder {
  display: contents;
}
.instrumentInfo .instrumentInfoHolder .instrumentLogoHolder img {
  height: 2.5rem;
}
.instrumentInfo .instrumentInfoHolder .instrumentNumber,
.instrumentInfo .instrumentInfoHolder .expDate {
  color: var(--fontColor);
}
.contentSimplified .instrumentPopupContent .buttonHolder .commandButton {
  height: 3em;
  padding-left: 1rem;
  padding-right: 1rem;
}
.contentSimplified .instrumentPopupContent .buttonHolder .commandButton.cancel {
  background-color: var(--secondaryBackgroundColor)!important;
  color: var(--cancelFontColor)!important;
  border: var(--secondaryBackgroundColor)!important;
  float: left;
}

/* To change add-card mobile header colors. */

.dialogBox {
  background-color: var(--hppBackgroundColorOpacity);
}

#titleHeader, .titleHeader,
.dialogBox .dialogBoxBody,
.dialogBox .dialogBoxHeader,
.dialogText .heading3,
.dialogText .text {
  background-color: var(--backgroundColor);
  color: var(--cancelFontColor);
}

#pageTitle, .pageTitle, .dialogBoxHeader .dialogBoxHeaderText {
  color: var(--cancelFontColor);
  font-weight: 600;
}

#walletSelection .icons {
  background-image: url("./mp_icons.svg");
  filter: var(--hppIconsFilter);
}

#walletSelection .icons:hover,
#walletSelection .icons:focus {
  filter: var(--hppIconsFilterHover);
}

/* Fix for height on 3DSecure. */
html,
body.inFrame,
#profileBody,
#profileBody .threeDSIframeContainer,
#profileBody .threeDSIframeContainer iframe#\33 ds_challenge_iframe {
  height: 100%;
  font-size: 1rem;
}
#profileBody .threeDSIframeContainer iframe#\33 ds_challenge_iframe {
  min-height: 400px;
}

/* To remove add-card mobile header completely. */
/*.header { display: none !important;}*/