@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");

:root {
  --gray-200: #F6F7F9;
  --gray-250: #F8F9FA;
  --gray-300: #F5F6F7;
  --gray-350: #F7F8F9;
  --gray-400: #BFC6D3;
  --gray-450: #BAC1CF;
  --gray-700: #607090;

  --nexi-blue: #2D32A9;
  --nexi-blue-alt: #2D32AA;
  --nexi-blue-darker: #1D218F;
  --nexi-blue-dark: #0C1076;

  /* brand-colors */
  --brand-primary: var(--nexi-blue);
  --brand-secondary: var(--gray-700);

  --accent: #212861;

  --text-color: #232834;
  --background-color: #FFF;

  /* common */
  --border-radius-base: 8px;

  /* button */
  --button-border-radius: 24px;
  --button-height: 48px;
  --button-font-size: 1.6rem;

  /* button primary - filled */
  --button-primary-text-color: #FFF;
  --button-primary-bg-color: var(--brand-primary);
  --button-primary-hover-bg-color: var(--nexi-blue-darker);
  --button-primary-active-bg-color: var(--nexi-blue-dark);
  --button-primary-text-color-disabled: var(--gray-450);
  --button-primary-disabled-bg-color: var(--gray-350);

  /* button secondary - text variant */
  --button-secondary-text-color: var(--nexi-blue-alt);
  --button-secondary-bg-color: #FFF;
  --button-secondary-hover-bg-color: var(--gray-250);
  --button-secondary-active-bg-color: #FFF;
  --button-secondary-text-color-disabled: var(--gray-400);
  --button-secondary-disabled-bg-color: #FFF;

  /* inputs */
  --input-border-color: #E9E9E9;
  --input-border-width: 1px;
  --input-border-style: solid;
  --input-height: 5.5rem;
  --input-padding: 0.6rem 1rem;
  --input-font-size: 1.8rem;
  --input-placeholder-color: var(--gray-700);

  --input-label-color: var(--gray-700, #607090);
  --input-label-font-size: 1.4rem;
  --input-label-font-weight: bold;
  --input-label-margin: 0 0 0.4rem;
  --input-label-padding: 0.5rem 0 0;

  /* alerts */
  --alert-border-radius: var(--border-radius-base, 8px);
  --alert-border-width: 1px;
  --alert-border-style: solid;

  --alert-success-bg-color: #F3F9FA;
  --alert-success-accent-color: #00806F;

  --alert-warning-bg-color: #FEFAF7;
  --alert-warning-accent-color: #ED8A00;

  --alert-error-bg-color: #FCF3F7;
  --alert-error-accent-color: #C70006;

  --alert-info-bg-color: #F5F5FC;
  --alert-info-accent-color: #2D32A8;
}

*, *::before, *::after {
  box-sizing: border-box;
}

::-moz-selection {
  background: var(--gray-400);
  text-shadow: none;
}

::selection {
  background: var(--gray-400);
  text-shadow: none;
}

html {
  font-size: 10px;
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  background-color: var(--background-color, #FFF);
  color: var(--text-color);
  font-family: "Ubuntu", ".AppleSystemUIFont", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.6em;
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--text-color) !important;
  text-decoration: none;
}

a:hover {
  color: var(--accent) !important;
  text-decoration: none;
}

/* Common components */
/* Inputs */
::placeholder {
  color: var(--input-placeholder-color);
}
#content input[type="text"],
#content input[type="tel"],
#content select {
  border: var(--input-border-width) var(--input-border-style) var(--input-border-color) !important;
  border-radius: var(--border-radius-base);
  font-size: var(--input-font-size);
  height: var(--input-height);
  padding: var(--input-padding);
}

#divGenericSinglePayment {
  align-items: center;
  display: flex;
  margin-bottom: 1rem;
}

#divGenericSinglePayment input {
  flex: 1;
}

/* Labels */
#content label,
#content #EasyPaymentMini_expiryLabel,
#content #EasyPaymentMini_cardNoLabel,
#content #securityCodeLabel,
#content legend#expiryLabel {
  color: var(--input-label-color);
  display: block;
  font-size: var(--input-label-font-size);
  font-weight: var(--input-label-font-weight);
  margin: var(--input-label-margin);
  padding: var(--input-label-padding);
}

#content #EasyPayment_verificationLabel {
  padding-top: 0;
}


/* BUTTONS */
/* Button Secondary - Text variant */
#content button,
#content input[type="button"],
#content input[type="submit"],
.button_ssgOldTerminalWalley {
  background-color: var(--button-secondary-bg-color);
  border-radius: var(--button-border-radius);
  color: var(--button-secondary-text-color);
  cursor: pointer;
  display: block;
  font-size: var(--button-font-size);
  font-weight: bold;
  height: var(--button-height);
  margin: 0 !important;
  text-align: center;
  text-transform: uppercase;
  transition: all 200ms ease-in-out;
  width: 100%;
  border: 1.63px solid var(--nexi-blue-alt);
  outline: none;
}

#content button:hover,
#content input[type="submit"]:hover,
#content input[type="button"]:hover,
.button_ssgOldTerminalWalley:hover {
  background-color: var(--button-secondary-hover-bg-color);
}

#content button:active,
#content input[type="button"]:active,
#content input[type="submit"]:active,
.button_ssgOldTerminalWalley:active,
#content button:focus,
#content input[type="button"]:focus,
#content input[type="submit"]:focus,
.button_ssgOldTerminalWalley:focus {
  background-color: var(--button-secondary-active-bg-color);
}

#content button[disabled],
#content button[disabled]:hover,
#content button[disabled]:active,
#content button[disabled]:focus,
#content input[type="button"][disabled],
#content input[type="button"][disabled]:hover,
#content input[type="button"][disabled]:active,
#content input[type="button"][disabled]:focus,
#content input[type="submit"][disabled],
#content input[type="submit"][disabled]:hover,
#content input[type="submit"][disabled]:active,
#content input[type="submit"][disabled]:focus,
.button_ssgOldTerminalWalley[disabled],
.button_ssgOldTerminalWalley[disabled]:hover,
.button_ssgOldTerminalWalley[disabled]:active,
.button_ssgOldTerminalWalley[disabled]:focus {
  background-color: var(--button-secondary-hover-bg-color);
  color: var(--button-secondary-text-color-disabled);
}

/* Button Primary - Filled variant */
#content button[name="okButton"],
#content input[id="okButton"],
#content input[name="nextButton"] {
  background-color: var(--button-primary-bg-color);
  color: var(--button-primary-text-color);
  outline: none;
}

#content button[name="okButton"]:hover,
#content input[id="okButton"]:hover,
#content input[name="nextButton"]:hover {
  background-color: var(--button-primary-hover-bg-color);
}

#content button[name="okButton"]:active,
#content input[id="okButton"]:active,
#content input[name="nextButton"]:active,
#content button[name="okButton"]:focus,
#content input[id="okButton"]:focus,
#content input[name="nextButton"]:focus {
  background-color: var(--button-primary-active-bg-color);
  outline: none;
}

#content button[name="okButton"][disabled],
#content input[id="okButton"][disabled],
#content input[name="nextButton"][disabled],
#content button[name="okButton"][disabled]:hover,
#content input[id="okButton"][disabled]:hover,
#content input[name="nextButton"][disabled]:hover,
#content button[name="okButton"][disabled]:active,
#content input[id="okButton"][disabled]:active,
#content input[name="nextButton"][disabled]:active,
#content button[name="okButton"][disabled]:focus,
#content input[id="okButton"][disabled]:focus,
#content input[name="nextButton"][disabled]:focus {
  background-color: var(--button-secondary-disabled-bg-color);
  color: var(--button-secondary-text-color-disabled);
}

#content input[type="submit"][id="backButton"],
#content input[type="submit"][id="backButton"]:hover,
#content input[type="submit"][id="backButton"]:active,
#content input[type="submit"][id="backButton"]:focus,
#content input[type="submit"][id="backButton"][disabled] {
  background-color: transparent;
  color: var(--button-secondary-text-color);
  height: 2em;
  border: none;
  outline: none;
  display: inline-block;
  margin-left: auto!important;
  margin-right: auto !important;
  font-weight: normal;
  text-transform: capitalize;
  width: initial;
}

/* Reset styles */
#content .box {
  padding-right: unset;
  text-align: unset;
}

/* Main frame styling */
#bbsHostedContent {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px;
}

#content {
  border: 2px solid #E9E9E9;
  border-radius: 1.6rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column-reverse;
  margin-left: auto;
  margin-right: auto;
  max-width: 450px;
  padding: 1.5rem 3rem;
  width: 100%;
}

@media only screen and (max-width: 469px) {
  #content {
    padding: 1.5rem 2rem;
  }
}

#redirectPage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#topImage {
  align-self: flex-end;
  margin-top: 2rem;
  max-width: 100%;
}

#merchantInfoOld {
  color: var(--text-color);
  margin: 2rem 0 3rem;
}

img[id*="merchantTerminalImage"] {
  margin-bottom: 1.6rem;
  max-height: 20rem;
  max-width: 100%;
}

/* Cards logo row */
#EasyPayment_issuerIcons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
  margin-bottom: 2rem;
}

#EasyPayment_issuerIcons img {
  max-height: 2.4rem;
  max-width: 5.4rem;
}

table#TblAmount {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 0.5rem !important;
  margin-top: 0.5rem !important;
}


#divGenericSinglePayment {
  align-items: center;
  display: flex;
}

#divGenericSinglePayment input {
  flex: 1;
}

#oldTerminalNavigation {
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
}

#content fieldset {
  border: 0 none !important;;
  margin: 0 !important;;
  padding: 0 !important;;
  transform: none !important;
}

#dvSecuritycode > div + div {
  align-items: center;
  display: flex;
  gap: 5px;
}

#dvSecuritycode > div + div input {
  width: 100px;
}

div.lineBottom {
  display: none !important;
}

#orderNumberDiv {
  margin-top: 0 !important;
}


/* 2 steps view */
#status_margins {
  margin: 0 !important;
}

#content #redirectPage #status_margins,
#content #redirectPage #dvIssuers {
  width: 100%;
}

#content #redirectPage .issuerDv {
  margin-bottom: 0.25rem;
}

@media screen and (max-width: 500px) {
  #content #redirectPage .issuerDv {
    width: 100%;
  }
}

#content #orderDetails {
  margin-top: 1em;
}

/* Card provider logo */
@media only screen and (max-width: 360px) {
  #content #twoPageImage {
    bottom: unset !important;
    left: unset !important;
    position: relative;
    right: unset !important;
    top: unset !important;
  }
}

@media screen and (min-width: 361px) {
  #content #dvTwoPageCardNumber #cardNumber {
    padding-right: 7rem;
  }
}

#content #twoPageImage {
  bottom: 1.6rem;
  max-height: 24px;
  max-width: 50px;
  right: 1.6rem;
  top: unset !important;
}

/* Resets */
#content #trGenericCardPayment {
  display: flex;
  flex-wrap: wrap;
  font-size: initial !important;
  margin: 0;
  padding-bottom: 0;
}

#content #dvTwoPageCardNumber {
  align-items: normal;
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
}

#content .contentPadding {
  padding: 0;
}

/* Card Expiry date */
#content #dvExpiryDate {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 180px;
  width: 100%;
}

@media only screen and (max-width: 360px) {
  #content #dvExpiryDate {
    max-width: 100%;
  }
}

#content #expireDateTitle {
  width: 100%;
}

/* CVV code input */
#content #dvSecuritycode {
  align-items: initial;
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  /* CVC */
}

#trGenericCardPayment #dvSecuritycode {
  flex-direction: column-reverse;
}

#content #securityCode {
  width: 70px;
}

#content #popupLinkOldTerminal {
  bottom: 12px;
  margin: 0;
  right: -42px;
  top: initial;
}

#content #popupLinkOldTerminal,
#content #NetsPrepaidCard_popupLink,
#content #NetsPrepaidCard_popupLink,
#content #EasyPayment_popupLink {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANBSURBVHgB7ZjNTttAEMdn11GUQw/urb255xJwApV6I7xBkCpoToQngD4B6ROUPgHhlAKVkj5B0huHErkU7u4JcWpaqRIieKa7IZRAi/fDrjjUP8mRHY1n5++d3dldgIyMjIyM/xkGKeNX2i78HHoQgX/dCg2A8QE8yAVBb3EAKZKKABk0/rhYI0YVIHHFtsh6QLDt5KNesF8LISGJBPwOHGgdgFwwI2TAmxxzb4PAvlesBRRnd6pAbMsi8NuExHH16FOtBxZwsGC6vLch0qCdQvASjyHvjnxa4IAhsiECbEDqUOXR42U4Pdn7aPKWkQDT4BmwgbjOxG1B7w0p4sX305P3+6CJdgr5c3sVk+ARcPWwv/RQXkLJtu57BGzj6bNdX9deW0CEuKVrK6bSD8f9WvPq0Yny66CPyxHe6BprCRgPMA90Yfzb5KPxNClqSbG8W9cx1RIgUqcORlDVf97yrp6sZhgGK3pmCi6/BOmnz03vHfHjKqvzHYj6sKCqD+oeYDAPthBUbYOXcGRVlU1OZWATgOjW8IYLk/Ez+R7jMyqbWAG+33YjOPfABAaLhwfLncm/pss7DSHCfBwQKadTRQqdGS8VHM7CPxpBbIIdrvyIcQbxKZTLeYAIJkQRtYuzuz15/+VgaRUSM/qId07D8QLkRsQcT3R9fXyfgoBCbAzxKTSMUt092aAqgjz+ZbljYvcmgjEIVDY6dUDp5F9BSF9VNkoBjMhofZ4qjDoqE6UAjvlNuCccLCQXMBpE8iRBE7l+GebxibyufdRC+YwOK4mF4Ws9T6yps4rV2tRPzbUqct+qdCbGi6jCJZVdsbxDsX7ExMExKl1OIoo2QZOp8rtN4XhN7ZBece78feATukgwL6KP3eDIXjrq1xqggbYAWdLROe8SgfZ2zwqRrqKCL+iaa28pZT7yCBdvrzTTRPp2osioehsfbPl+y0POu7ZL5JhAQrHoW9DJ+0mMD7ZkA7Ihlm6B64jpumQavCTR2ehUudXgwFdse0PONpEYsMf9l9a1JvHptEypCw51EyEyXcS50XYOC5tJDnbHvtJD1guOvEIMZuRmXixDvHErA3FgFTDCz8gpsD3IzcjIyMhInV8PiEjjm/mKvAAAAABJRU5ErkJggg==");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 28px;
  color: transparent !important;
  display: inline-block;
  height: 32px;
  overflow: hidden;
  text-indent: 100%;
  width: 32px;
}

#content #securityCodeTitle {
  width: auto;
}

/* Feedback - alert */
.alert,
.infoPanel,
.errorPanel,
.warningPanel,
.okPanel {
  align-items: center;
  background-position: 12px 16px;
  background-repeat: no-repeat;
  background-size: 24px;
  border: 0;
  border-radius: var(--border-radius-base);
  color: var(--text-color);
  display: flex;
  font-weight: bold;
  min-height: 54px;
  overflow: hidden;
  padding: 16px 24px 16px 48px;
  position: relative;
}

.alert::before,
.infoPanel::before,
.errorPanel::before,
.warningPanel::before,
.okPanel::before {
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 4px;
}

.infoPanel {
  background-color: var(--alert-info-bg-color);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANBSURBVHgB7ZjNTttAEMdn11GUQw/urb255xJwApV6I7xBkCpoToQngD4B6ROUPgHhlAKVkj5B0huHErkU7u4JcWpaqRIieKa7IZRAi/fDrjjUP8mRHY1n5++d3dldgIyMjIyM/xkGKeNX2i78HHoQgX/dCg2A8QE8yAVBb3EAKZKKABk0/rhYI0YVIHHFtsh6QLDt5KNesF8LISGJBPwOHGgdgFwwI2TAmxxzb4PAvlesBRRnd6pAbMsi8NuExHH16FOtBxZwsGC6vLch0qCdQvASjyHvjnxa4IAhsiECbEDqUOXR42U4Pdn7aPKWkQDT4BmwgbjOxG1B7w0p4sX305P3+6CJdgr5c3sVk+ARcPWwv/RQXkLJtu57BGzj6bNdX9deW0CEuKVrK6bSD8f9WvPq0Yny66CPyxHe6BprCRgPMA90Yfzb5KPxNClqSbG8W9cx1RIgUqcORlDVf97yrp6sZhgGK3pmCi6/BOmnz03vHfHjKqvzHYj6sKCqD+oeYDAPthBUbYOXcGRVlU1OZWATgOjW8IYLk/Ez+R7jMyqbWAG+33YjOPfABAaLhwfLncm/pss7DSHCfBwQKadTRQqdGS8VHM7CPxpBbIIdrvyIcQbxKZTLeYAIJkQRtYuzuz15/+VgaRUSM/qId07D8QLkRsQcT3R9fXyfgoBCbAzxKTSMUt092aAqgjz+ZbljYvcmgjEIVDY6dUDp5F9BSF9VNkoBjMhofZ4qjDoqE6UAjvlNuCccLCQXMBpE8iRBE7l+GebxibyufdRC+YwOK4mF4Ws9T6yps4rV2tRPzbUqct+qdCbGi6jCJZVdsbxDsX7ExMExKl1OIoo2QZOp8rtN4XhN7ZBece78feATukgwL6KP3eDIXjrq1xqggbYAWdLROe8SgfZ2zwqRrqKCL+iaa28pZT7yCBdvrzTTRPp2osioehsfbPl+y0POu7ZL5JhAQrHoW9DJ+0mMD7ZkA7Ihlm6B64jpumQavCTR2ehUudXgwFdse0PONpEYsMf9l9a1JvHptEypCw51EyEyXcS50XYOC5tJDnbHvtJD1guOvEIMZuRmXixDvHErA3FgFTDCz8gpsD3IzcjIyMhInV8PiEjjm/mKvAAAAABJRU5ErkJggg==");
  background-position: 12px 16px;
  background-repeat: no-repeat;
}

.infoPanel::before {
  background-color: var(--alert-info-accent-color);
}

.warningPanel {
  background-color: var(--alert-warning-bg-color);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJgSURBVHgB7ZhLUhsxEIZ/aXwAOyHrmBPEnCDkBOEG8Q3AVZCqrJysUgGqCCcINyA5QXKDmBNg1jzsDRsYj2gNFBiDNS2pjYtC38YPzUO/uvvXA0gkEolE4hmjMCMGO6gjR8t+b2zgH2aEuADbcZNj3wDLY2/p0+/Owjp+QxgNYYoR/t/rvMWgqQz2j7cm/hdAVMDJJtq2s9PaM6ALYcQEUOo0lXZ30Ebm9AfWIIhcBHKsukZ/7I3dssCFEBFgR78Ae2TrxYVcFEQEUOH65bbGqhUNAaIFDLaxQqnThh/Wan9BgGgBlDo7j/1vDHYvcixS+wf6OXzQTgUtYas1ROCyzYXPt3neP9nCH5oxP01ek12LX0IEwRHg2GYVFIVWrK0GCygL12Gbg+/MIo201SABpYN4FK5WeOtojrLVIAHetlndi26orXoLuCncNoQJtVVvAezCzfzyOtRWvQTQpMVb7xC5uhNAnWOJyabMKS7YAjzXO5OwBITYKltAlW0+8uCP9nNg08LjPl9bZW0py9HPcYin4+frDXQ4F7IiYEb+uWlRCj0aomHArWtcW60UYG2TFmYr8MQu4l6tY0lnWKQw9+AJ11YrBQSud3pvbo5SGh0MC41deMK1VaeAqk26g+Z4CtCJxHsEwDkEcBbx2Tb+UvosIwQ6C1JFWQP1B8csHmjaUzS+oD+tPWo/4IQiZ1T8tjGvlc/oT2t3plBhcIQ5U6u5DcApgEK/h3misGdNwHWJU4B1ErLDb5gHVEP6svrdvJl4E60R0NYa7zBjjM13gwN9TqP/NWgSTCQSicQL4gqxZsYGIkcM4AAAAABJRU5ErkJggg==");
  background-position: 12px 16px;
  background-repeat: no-repeat;
}

.warningPanel::before {
  background-color: var(--alert-warning-accent-color);
}


.errorPanel {
  background-color: var(--alert-error-bg-color);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALNSURBVHgB7ZjLbdtAEIb/JaCXdVEJ7CDyKbF9sTqIKohcQewKYlVguQLbFSgdiJdIUC5SOlAH0UnRA+ZmBhQTg6B3l8ulAQP7nQRoSM6/Mzs7s4DH4/F4PO8YgRL8QK0bILiTiLsComP6HH10GUNGLbSHp1ivUQJrAXPUPz9DPhRxPIcVEPTOsF3BEisBvPL04KSk86kDywZOeraRCFCQGZphADF24Twjge4Wf8awpJAAdh6IJ/QzhFPk5Qz1B1hgLGCBTqca5/8xIBHfUBBjATtsqnQ+5XaKxnWRB4wEcHg5V/EGCMi7OZpfTO21AuZJWAd4Q+hcGf1E22jBlAJmqA1iCiv0DOlgOqUoLaF0TNyzHdur7dB5xmGc7Ds1ynNgivpCaFNHRGfY9fgXbZJOA/VJ3jO0EMML7G9Tuybqv6GBBN+cYzdS2SgjIAzynnK2m5RXgFSsd9j3spF46TzTQs0oxwPID3qbknC4uby+JiLr/Jycp5Udmb1bhDqb0gKOhHki6PVXWedjiEc4xJUAJsyKoCbtMf2zCucZlwKYkEVkqwd3rlU4z7gWwDn/lO0sN9hHuhJri1MB2Q2bRuK16uQCZwLyqs0Wm4WuxJbFiYA85485H6pKrAuUAuhDBlOSiDSlMswvsXro+790NpoIyCdo4JM4zXVFqQxfimijHcIIGekslL1Q0rM0FvSiEGpW9KoVT1Y6OxpF6UYivtSNpNz4UR+knQ20Qz2vGrW33NQ5mYHN+N8g6tBuYr7ykJA9s/3gArFqotU3tTaqQhc4LAWCG1QOp6EodMViXEa5r6G8rVBE4nzRS65C58CnZLgYwjGcnrSx+zY3dFY3c1PURhSNr3AErWL/I/bfYYHVSXyOwzWtmvaMMIHHRlvnGetW4hz7AVWne1iSVDV5pZt5dZS6XmeO5wRd9krjc4JWfd3CSVT2at3j8Xg8pfkLe6gav6jIhLEAAAAASUVORK5CYII=");
  background-position: 12px 16px;
  background-repeat: no-repeat;
}

.errorPanel::before {
  background-color: var(--alert-error-accent-color);
}

.okPanel {
  background-color: var(--alert-success-bg-color);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALpSURBVHgB7Zk9dtNAFIXvBApKswLECkgqoELZQSipUDaQKCvIuKTC6egwKyCsANGZLuxgsgOno2J482PJOLbmzWjM4Rz0nSNHskbWXM17b+4owMjIyMjI/4xAbmQ9oc+CtsO1b5d+u4GcLZGRPAJMp8Wvc2hR0lEZaN3QbT/Zv3KmMJBhArqO13Q0ibsYCkLPoQ+uhoxKugBZnwD6I+I7vomibpySiAYJPEAK07NL+vxA2yMMxzyACsfPKai+f0Mk8QJM57WQyA7lT4KIOAF76/wKElG+vEOzWLCv4DakmC8p5r9i/1BCi2PKiRtO4wOwsQn7N6Cc0O+5jXkhZJNWnCAbwjzdn9hdwQoKpVsKpeAo8EZAiwr5mFN4HEFePYWd1Hbe9C0YhAXIuoKzBjlQ9PSn3aHom8BKl3f9cEbgFbJBnV/ZB1kX9JRDYRkMW4YAXSILwhi5+drvMiqafhZq0S+gc5Y5eN3uuZm8YFxzGGoQGoGhPsezETr8yXDiH+JOQgIKhDETz4W3yNtQ1HnZHUZPhr0CHqIfhs0Vxg7P7K6sqb0+3zh/0e5Oz8h6R4dkbx9CI8AQoJ+0u3Jm1gXN2klT86/duajQwdpvDhDg4jYkonJrgxXCJKvCvZoPk7ixOZVlJmaYKvJJtq7DPzEjgkKnS9yK2lSIRtyGWjAECI4/n9jkXFUM4yTXQwf6EmlchxpwRmAGHgV19POW77k1fxsZBLgkasCD/Mt5Z4WTQ8cy5yz2Q2XUY5KRbSlqEmFmUMXwOrtYbhSAnfDWA81CkT9/THsvwKOAswGJi37xrs2hABErMkiwKtJQRPPnzN0PX0BbHm2N3xeKttOYC+JfbLmyaPxMgbwov5hXMRfFhJDD3oBulDecKN7FUcq70qHvRqVfuxZIY+mtNneuuUfaq8UVzaKh6vSFOnEHJ4LpdYSyLhbiTeo70faXkBO3CC/9UpDEiMKfMTabQk78gPsfQYORkZGRkX+B33po4glm1VPRAAAAAElFTkSuQmCC");
  background-position: 12px 16px;
  background-repeat: no-repeat;
}

.okPanel::before {
  background-color: var(--alert-success-accent-color);
}

/* Prepaid & gift card payment */
.msprepaidoldterminal,
#GiftCardCenter_giftcardtbl {
  display: contents;
}

.msprepaidoldterminal tbody,
#GiftCardCenter_giftcardtbl tbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msprepaidoldterminal tr {
  align-items: center;
  column-gap: 10px;
  display: flex;
  flex-wrap: wrap;
}


#GiftCardCenter_giftcardtbl tr {
  display: flex;
  flex-direction: column;
}

#GiftCardCenter_giftcardtbl tr:nth-of-type(3) {
  display: none;
}

@media only screen and (min-width: 470px) {
  .msprepaidoldterminal tr,
  #GiftCardCenter_giftcardtbl tr {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 110px auto 1fr;
  }
}

@media only screen and (max-width: 469px) {
  #NetsPrepaidCard_mscardtd1,
  #NetsPrepaidCard_mscardtd4,
  #GiftCardCenter_securityCodeTitletbl {
    width: 100%;
  }
}

.msprepaidoldterminal td:nth-of-type(3) {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKMSURBVHgB7ZrhddsgEIBPfv1fdwMyQdMJokzQjqBMYHmCKhNE2kCZoOkEVSaoM0HYIM4CIXeAIiyDjWQ7yO/xvadngTi4g4OTwABnTgIHkOV3l/hDF6erLpfcU45pOWKNcg2MZLAB2PgcYLYAEDkm573HHPNvUaHaIZtik7/xNt2WS1DmrULZNQxgkAGq55J/eMv2VFvU5eJ2U7ZCxUWxW052wLXvSMqWfAuqnk/+w6byDTb4hPlfQfWq8awzwqI89fID5r1iue+wOSIc83/4jsQX8EYOPTMauen7LhpZ6HJACmP6UZctulLSxYqeHDNGli5yzwI8mIE/maHEtW3iKcVEZWT96gySclVfeS3HqUO6nGShRnw/XgaoyddOWPF3j48WhiI/oVttiNIlpDuk0cl5T86J7wgw4361q6D2XW7ItYp4LLPi0dGmkyEu1OI1tJ/FxyqEbpJh8grslptDyqHrYRepJY9GZrVH7hK6DlppGUs90o1rSkgDPNfoiSGWaESpXUhkcHao1a2NA0z/cloi4WCs0ZofuW7paluBbEgYd5Hl9tXyFHWPWYUmRTQgNFtzQH9snIRT1N0aQAGDZjXDWf4Mp4EduW4Z5No4UMHZoXQ2XyVy/faY6iyf0O/CfCUwaeDw+lAncU9RmBIbX2T6w6Id5qYu81GBB9dqqoP1svFtNL+AEWB9FLxSlRIXZjyJy2hoogGhiQaEJhoQmmhAaKIBoYkGhCYaEJpoQGiiAaHZZcCkTmJcbJ0T4w7AC3QHeksYtbWS/AH7Kf4NDGZ2ZRy+rHFn45v51HJOTBtG7dFocgfHg+m9/YEI8/6+/9TmQrRh1MD0aMBy+O38q4Fx6DcB5KHeg+3JO5xa2nNygMwTAAAAAElFTkSuQmCC);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  height: 24px;
  text-align: center;
  width: 24px;
}

@media only screen and (max-width: 319px) {
  .msprepaidoldterminal td:nth-of-type(3) {
    display: none;
  }
}

#NetsPrepaidCard_image,
.msprepaidoldterminal td:nth-of-type(3) img {
  display: none;
}

#NetsPrepaidCard_mscardtd5 {
  align-items: center;
  display: inline-flex;
}

/* Loader */
#progressImageDiv {
  display: flex;
  justify-content: center;
}

/* Swish */
#SwishE_swishDiv {
  float: none !important;
  width: 100% !important;
}

#status_margins + div {
  width: 100%;
}

#SwishE_swishDivInput {
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: 6px;
  display: block;
  float: none !important;
  gap: 20px;
  margin: 8px 0 12px !important;
  padding-left: 170px;
  position: relative;
  width: 100% !important;
}

#SwishE_swishDivInput #ddlCountryCode {
  height: var(--input-height) !important;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
}

/* When focused */
#SwishE_swishDivInput #ddlCountryCode[size="5"] {
  height: 120px !important;
}

#SwishE_swishDivInput #txtMobileNumber {
  height: var(--input-height) !important;
  margin-left: 0;
  width: 100%;
}

@media only screen and (max-width: 360px) {
  #SwishE_swishDivInput {
    grid-template-columns: 1fr;
    padding-left: 0;
    padding-top: calc(var(--input-height) + 20px);
  }

  #SwishE_swishDivInput #ddlCountryCode {
    width: 100%;
  }

  #SwishE_swishDivInput #txtMobileNumber {
    margin-left: 0;
  }
}

/* Afterpay */
table#descPanel {
  width: 100% !important;
}

#GothiaInvoice_logoPayByBill {
  align-self: flex-start;
  margin-bottom: 0 !important;
}

#GothiaInvoice_logoPayByBill + br {
  display: none;
}

#GothiaInvoice_chooser,
#chooser {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.radioClass {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

#detailsDiv {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#gothiaCustomerPanelDiv {
  margin-bottom: 12px;
}

#directDebitDiv, #orgRow, #companyNameDiv, #gothiaCustomerPanelDiv, #firstNameDiv, #lastNameDiv, #trAddress1, #trAddress2, #trPostCode, #trTown, #trPhone, #trEmail, #birtDateDiv, #vatId, #legalForm {
  width: 100%;
}

#trLastName, #companyNameDiv, #lastNameDiv, #trAddress2, #trTown, #trEmail, #legalForm {
  display: flex;
  flex-direction: column-reverse;
  margin: 0 0 12px;
  text-align-last: left;
}

#ssn, #ssnLabel, #lblTitle, #ddlTitle, #lblFirstName, #txtFirsName, #lblLastName, #txtLastName, #lblAddress, #txtAddress, #org, #orgLabel, #txtPostCode, #lblPostCode, #lblCompanyName, #txtVatId, #lblVatId, #txtLegalForm, #lblLegalForm {
  width: 100% !important;
}

#gothiaCustomerPanelDiv, #orgRow, #firstNameDiv, #trAddress1, #trPostCode, #trPhone, #directDebitDiv, #vatId {
  margin: 0;
}

#firstNameDiv, #trAddress1, #trPhone, #trPostCode, #gothiaCompanyPanel {
  display: flex;
  flex-direction: column-reverse;
  margin: 0 0 12px;
}

#agreementPanelComplaint {
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr;
}

/* Afterpay - Invoice */
#GothiaInvoice_step2 #customerPanel,
#GothiaInvoice_step2 #companyPanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#customerPanel > #trFirstName, #trAddress, #trLastName, #trCompanyName,
#customerPanelDiv, #companyPanelDiv, #postCodeDiv {
  align-items: initial;
  flex-direction: column-reverse;
  justify-content: initial;
  margin: 0;
}

#GothiaInvoice_lblPostCodeReadOnly {
  margin-top: 5px;
}

/* AfterPay Instalment */
#GothiaInstallment_logoPayByBill {
  align-self: flex-start;
  margin-bottom: 0 !important;
}

#GothiaInstallment_logoPayByBill + br {
  display: none;
}

#customerPanel,
#companyPanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

table#AfterPayInstallment_paymentDetailTable {
  background-color: transparent !important;
  font-weight: normal !important;
  margin-bottom: 10px !important;
  width: 100% !important;
}

#installmentPlans {
  width: 100%;
}

#installmentPlans + table,
#installmentPlans + table + div {
  margin-top: 24px !important;
  width: 100% !important;
}

/* AfterPay Flex Account */
#accountPanel table {
  border-collapse: collapse;
  font-size: 15px;
  margin-bottom: 24px;
  width: 100% !important;
}

#accountPanel table td {
  padding: 2px 6px;
  vertical-align: top;
}

#accountPanel table td:first-of-type {
  color: var(--gray-700);
  padding-left: 0;
}

#accountPanel table td:last-of-type {
  padding-right: 0;
}

#accountPanel table + div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px !important;
  margin-top: 24px !important;
}

#accountPanel table + div br {
  display: none;
}

/* AfterPay Riverty */
#txtBirthDateVal {
  width: 100%;
}

#accountPanel #AfterPayFlexAccount_paymentExample {
  color: inherit;
  font-size: inherit;
}

/* Riverty Flex Account */
#RivertyFlexAccount_paymentExample {
  color: var(--gray-700) !important;
  font-size: 15px !important;
}

/* Riverty Installment */
#installmentLabel {
  font-size: var(--input-label-font-size) !important;
  font-weight: var(--input-label-font-weight) !important;
}

#installmentLabel + br {
  display: none;
}

#RivertyInstallment_lblOrderValue,
#RivertyInstallment_lblTotalAmount {
  font-size: inherit !important;
  font-weight: normal !important;
}

#RivertyInstallment_paymentDetailTable {
  background-color: transparent !important;
  border-collapse: collapse;
  font-weight: normal !important;
  margin-bottom: 24px !important;
  width: 100% !important;
}

#gothiaCustomerPanel {
  margin-bottom: 10px;
}

/* Riverty Invoice */
#b2bDach {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#b2bAgreementDiv {
  margin: 0;
}

/* Required fields info */
#b2bAgreementDiv + div {
  margin-top: 0 !important;
}

/* Walley Account */
#WalleyAccount_collectorLogo,
#Walley_collectorLogo {
  align-self: flex-start;
}

.collectorOldTerminal_right {
  padding-left: 0
}

.collectorOldTerminal {
  display: flex;
  flex-direction: column;
  margin-left: 0;
}

#customerPanel.ssgLabelwidthOldTerminalWalley {
  margin-left: 0;
  width: 100%;
}

#customerPanel .input_ssgOldTerminalWalley {
  width: 100%;
}

.lblConfirmationOldTerminalWalley {
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.OldTerminalWalleycheckbox {
  margin-top: unset !important;
}

/* Walley Installment */
#WalleyInstallment_collectorLogo {
  align-self: flex-start;
}

#WalleyInstallment_installmentPanel {
  display: flex;
  flex-direction: column;
  font-size: inherit !important;
  gap: 10px;
  margin-left: 0 !important;
  margin-top: 10px;
  padding: 0 !important;
}

#WalleyInstallment_installmentPanel #installmentLabel {
  margin: 0;
}

/* Walley Account */
.button_ssgOldTerminalWalley {
  background-color: var(--button-secondary-bg-color) !important;
  border: inherit !important;
  border-radius: var(--button-border-radius) !important;
  float: none !important;
  margin: 10px 0 !important;
  position: relative !important;
}

.button_ssgOldTerminalWalley:active,
.button_ssgOldTerminalWalley:hover {
  background-color: var(--button-secondary-hover-bg-color) !important;
}

/* Walley Company */
#WalleyCompany_collectorLogo {
  align-self: flex-start;
}

#WalleyCompany_addressPanel {
  width: 100%;
  display: flex;
}

#companyPanel {
  border-radius: unset !important;
  margin: 0;
  width: 100%;
}

#mifDiv input[type="radio"] {
accent-color: var(--nexi-blue);
}

#mifLabel {
	color: var(--input-label-color);
}