@font-face {
    font-family: "FF Meta W07";
    font-style: normal;
    font-weight: 400;
    src: url("webfonts/45c3d14d-16dd-4bab-97a5-b372cad49f18.woff2") format("woff2"), url("webfonts/afadf37a-d5b5-4152-837d-d72cf7210947.woff") format("woff");
}

:root {
    --main-font-color: #717171;
    --main-background-color: #E4E5E6;
    --icon-successful-color: #008000;
    --icon-abort-color: #717171;
}

html, body {
    font-family: FF Meta W07, sans-serif;
    height: 100%;
    overflow-y: auto;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    background-color: var(--main-background-color);
    color: var(--main-font-color);
    font-size: 14px;
}

.container { height: 100%; }

a {
    color: var(--main-font-color);
    text-decoration: underline;
}

a:hover {
    color: var(--main-font-color);
    font-weight: bold;
}

.btn-primary {
    background-color: #1b6ec2;
    border-color: #1861ac;
    color: #fff;
}

.footer {
    bottom: 0;
    line-height: 60px;
    position: absolute;
    white-space: nowrap;
    width: 100%;
    /* Vertically center the text there */
}

.footer > .container {
    font-size: 0.875rem;
    font-weight: 400;
    text-align: center;
}

.developer-header {
    font-size: 2rem;
}

#loading {
    display: none;
    z-index: 300001;
    position: absolute;
    top: 40%;
    left: 45%;
    width: 5rem;
    height: 5rem;
}

#toast-message {
    z-index: 300001;
    position: absolute;
    top: 40%;
    left: 40%;
}

.payment-mask .succeed {
    color: var(--icon-successful-color);
}

.payment-mask .abort { color: var(--icon-abort-color); }

@media (min-width: 768px) {
    .payment-mask .fa-default-size {
        font-size: 13rem;
        padding-bottom: 32px;
    }

    .payment-mask .payment-app-header {
        color: var(--main-font-color);
        font-size: 30px;
        font-weight: 400;
    }

    .payment-mask .payment-app-sub-header {
        color: var(--main-font-color);
        font-size: 17px;
        font-weight: 400;
    }
}

@media (max-width: 768px) {
    .payment-mask .fa-default-size {
        font-size: 9rem;
        padding-bottom: 32px;
    }

    .payment-mask .payment-app-header {
        color: var(--main-font-color);
        font-size: 23px;
        font-weight: 400;
    }

    .payment-mask .payment-app-sub-header {
        color: var(--main-font-color);
        font-size: 17px;
        font-weight: 400;
    }
}