/* text */

/*heading*/
.xl-heading-medium {
    /* XLHeading/Medium/44 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 44px;
    line-height: 52px;
    /* identical to box height, or 118% */
    letter-spacing: -0.022em;
}

.xl-heading-bold {
    /* XLHeading/Bold/44 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 44px;
    line-height: 52px;
    /* identical to box height, or 118% */
    letter-spacing: -0.022em;
}

.l-heading-medium {
    /* LHeading/Medium/36 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 44px;
    /* identical to box height, or 122% */
    letter-spacing: -0.022em;
}

.l-heading-bold {
    /* LHeading/Bold/36 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    /* identical to box height, or 122% */
    letter-spacing: -0.022em;
}

.m-heading-medium {
    /* MHeading/Medium/28 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    /* identical to box height, or 129% */
    letter-spacing: -0.021em;
}

.m-heading-bold {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    /* identical to box height, or 129% */
    letter-spacing: -0.021em;
}

.s-heading-medium {
    /* SHeading/Medium/20 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    /* identical to box height, or 140% */
    letter-spacing: -0.017em;
}

.s-heading-bold {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    /* identical to box height, or 140% */
    letter-spacing: -0.017em;
}

/*body*/
.xl-text-semibold {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    /* identical to box height, or 156% */
    letter-spacing: -0.014em;
}

.xl-text-medium {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    /* identical to box height, or 156% */
    letter-spacing: -0.014em;
}

.xl-text-regular {
    /* XLText/Regular/18 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    /* identical to box height, or 156% */
    letter-spacing: -0.014em;
}

.l-text-semibold {
    /* LText/SemiBold/16 */
    font-family: 'Montserrat', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    /* identical to box height, or 150% */
    letter-spacing: -0.011em !important;
}

.l-text-medium {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */
    letter-spacing: -0.011em;
}

.l-text-regular {
    /* LText/Regular/16 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */
    letter-spacing: -0.011em;
}

.m-text-semibold {
    /* MText/SemiBold/14 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    letter-spacing: -0.0006em;
}

.m-text-medium {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    letter-spacing: -0.0006em;
}

.m-text-regular {
    /* MText/Regular/14 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    letter-spacing: -0.0006em;
}

.s-text-semibold {
    /* SText//SemiBold/12 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
}

.s-text-medium {
    /* SText/Medium/12 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}

.s-text-regular {
    /* SText/Regular/12 */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

/* color */
.color-primary {
    color: #567BB9;
}

.color-neutral-60 {
    color: #9E9E9E;
}

.color-neutral-70 {
    color: #757575;
}

/* body */
.screen {
    margin: auto;
    padding: 16px;
    max-width: 500px;
}

.main-banner {
    max-width: 500px !important;
}

.main-banner-container {
    background: #2675EF;
    border-radius: 16px;
}

.main-button-container {
    text-decoration: none;
    color: #000000;
    padding: 16px;
    border-style: solid;
    border-radius: 16px;
    border-width: 1px;
    border-color: #E0E0E0;
}

.main-button-margin {
    margin-right: 16px;
}

.help-button-margin {
    margin-right: 8px;
}

.text-field {
    border-radius: 8px;
    padding: 16px;
    color: #9E9E9E;
}

.text-field-captcha {
    border-radius: 8px;
    padding: 16px;
    color: #9E9E9E;
    max-width: 85px !important;
}

.text-field-amount {
    border-radius: 16px;
    border-style: solid;
    border-width: 1px;
    border-color: #313131;
    padding: 16px;
    color: #313131;
    max-width: 60px !important;
    text-align: center;
}

.button {
    background-color: #000000;
    color: #ffffff;
    border-radius: 32px;
    padding: 16px;
}

.help-button {
    background-color: #FFFFFF;
    color: #313131;
    border-radius: 32px;
    padding: 16px;
    border-style: solid;
    border-width: 1px;
    border-color: #313131;
}

.button-sticky-bottom {
    position: fixed;
    max-width: 500px;
    bottom: 0px;
    right: 0px;
    left: 0px;
}

.btn.btn-primary:disabled{
    background-color: #EDEDED;
    color: #757575;
    border-style: hidden;
}

.btn-transparent {
    background-color: transparent;
    border-style: hidden;
}

.amount-text {
    padding-top: 16px;
    padding-bottom: 16px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

.overview-icon {
    margin-right: 12px;
}

.overview-desc {
    margin-left: 36px;
}

.payment-method-overview {
    margin-left: 36px;
    align-items: center;
}

.line {
    height: 1px;
    margin-right: 16px;
    margin-left: 16px;
    background-color: #E0E0E0;
}

.success-screen {
    background-color: #6ABAAE;
    max-width: 500px;
}

.success-screen-container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.main-bullet-icon {
    margin-right: 8px;
}

.tncButton {
    text-decoration: none;
}

.linkButton {
    text-decoration: underline;
    color: #024CCE;
}

.input-box {
    position: relative;
}

.input {
    padding-left: 64px;
}

.unit {
    position: absolute;
    display: block;
    left: 16px;
    top: 16px;
    z-index: 9;
}