:root {
  --font-family-default: 'Inter', sans-serif;
  --font-family-heading: 'Host Grotesk', sans-serif;
  --white: #fff;
  --magic-fushia-500: #fc5d55;
  --magic-fushia-700: #f8443a;
  --persian-green-200: #c2ece8;
  --persian-green-700: #00ad9e;
  --jelly-bean-700: #cadae5;
  --jelly-bean-200: #236992;
  --mystery-black-200: #f6f6f6;
  --mystery-black-300: #e7e7e7;
  --mystery-black-400: #d1d1d1;
  --mystery-black-500: #888888;
  --mystery-black-700: #4f4f4f;
  --mystery-black-900: #1e1e1e;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-latin-e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/host-grotesk-e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/host-grotesk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html,
body,
div,
h1,
h2,
h3,
h4,
h5,
ul,
p,
input,
button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input,
button {
  border: none;
  background: none;
}

a {
  text-decoration: none;
}

p:first-child {
  margin-top: 0;
}

button,
a,
div[role='button'] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: var(--font-family-default);
}

::placeholder {
  color: var(--mystery-black-700);
  font-weight: normal;
}

.ncoltable1 {
  width: 100%;
  margin-top: 16px;
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  color: var(--mystery-black-900);
  min-width: auto !important;
}

.ncoltable1 tr {
  margin: 0;
  display: flex;
  background-color: var(--mystery-black-200);
}

.ncoltable1 .ncoltxtl,
.DDtxt {
  text-align: left;
  padding: 16px;
}

.ncoltable1 .ncoltxtr {
  color: var(--mystery-black-900);
  font-size: 22px;
  text-align: right;
  padding: 16px;
}

.ncoltxtl2 small {
  display: inline-block;
  color: var(--mystery-black-900);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  padding-top: 16px;
}

.ncoltable1 .ncoltxtr small {
  color: var(--mystery-black-900);
  font-size: 18px;
  text-align: right;
}

.ncoltable2,
.ncoltable2 > tbody {
  display: inline-block;
  width: 100%;
}

.ncoltable2 td {
  display: block;
  flex: auto;
  width: 100%;
  text-align: left;
}

.ncoltable2 tr {
  display: flex;
  flex-wrap: wrap;
}

.ncoltable2 tr:nth-child(4) {
  white-space: nowrap;
}

.ncoltable3 {
  width: 100%;
  min-width: auto;
}

.ncoltable3 img {
  max-width: 30vw;
}

.ncolinput input[type='text'],
.ncolinput input[type='number'],
.ncolinput input[type='tel'],
.ncoltxtc input[type='text'] {
  width: 100%;
  height: 40px;
  border: 1px solid var(--mystery-black-400);
  background-color: var(--white);
  color: var(--mystery-black-900);
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
}

.ncolinput input[type='text']:hover,
.ncolinput input[type='text']:focus,
.ncolinput input[type='number']:hover,
.ncolinput input[type='number']:focus,
.ncolinput input[type='tel']:hover,
.ncolinput input[type='tel']:focus {
  border: 1px solid var(--mystery-black-900);
}

#Ecom_Payment_Card_ExpDate_Month,
#Ecom_Payment_Card_ExpDate_Year,
select[name='ISSUERID'] {
  position: relative;
  height: 40px;
  border: 1px solid var(--mystery-black-400);
  background-color: var(--white);
  color: var(--mystery-black-900);
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
  line-height: 24px;
}

#Ecom_Payment_Card_ExpDate_Month,
#Ecom_Payment_Card_ExpDate_Year {
  width: calc(50% - 10px);
  -webkit-appearance: none;
}

#Ecom_Payment_Card_ExpDate_Month {
  margin-right: 8px;
}

#Ecom_Payment_Card_ExpDate_Year {
  margin-left: 8px;
}

#btn_Back,
#submit3,
#btn_Continue,
#btn_Agree,
#btn_Close {
  font-size: 16px;
  line-height: 22px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--magic-fushia-700);
  background: var(--magic-fushia-700);
  color: var(--white);
  padding: 8px 16px;
  cursor: pointer;
  margin-bottom: 16px;
  -webkit-appearance: none;
  font-family: var(--font-family-default);
  font-weight: bold;
}

#btn_Back:hover,
#submit3:hover {
  border-color: var(--magic-fushia-500);
  background-color: var(--magic-fushia-500);
}

.payment__header {
  display: flex;
  align-items: center;
  padding: 8px;
  height: 40px;
  background-color: var(--white);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.payment__logo {
  margin: 0 16px;
}

.payment__content {
  padding: 0 16px;
  overflow: hidden;
  max-width: 696px;
  margin: 0 auto;
}

.payment__title {
  padding: 10px 0;
  color: var(--mystery-black-900);
  font-size: 22px;
  font-weight: bold;
  line-height: 24px;
}

.payment__message,
.payment__message--secondary {
  padding: 8px;
  background: var(--persian-green-200);
  border-radius: 4px;
  color: var(--mystery-black-900);
  font-size: 16px;
  line-height: 24px;
}

.payment__message--secondary {
  background-color: var(--jelly-bean-700);
  margin-bottom: 16px;
}

.payment__messageIcon {
  display: block;
  font-size: 32px;
  margin: 0 -8px;
  padding: 8px;
}