@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap');

/* Typography */

body {
    font-family: 'Open Sans', sans-serif;
}

.blindPayTheme h1 {
    color: rgb(36, 36, 38);
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
}

.blindPayTheme h2 {
    color: rgb(36, 36, 38);
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-top: 2.5%;
}

.blindPayTheme a {
    color: rgb(2, 108, 253);
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    line-height: 20px;
}

.blindPayTheme p {
    color: rgb(36, 36, 38);
    font-size: 16px;
    font-weight: normal;
    line-height: 20px;
}

.blindPayTheme label {
    display: block;
}

.primary-label {
    color: rgb(108, 109, 112);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    padding-bottom: 1%;
}

.secondary-label {
    color: rgb(108, 109, 112);
    display: block;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
}

/* Images */

.client-logo {
    display: block;
    margin: auto;
    padding: 2.5%;
    max-width: 300px;
    height: auto;
}

.wyco-logo {
    width: 212px;
    height: 64px;
}

.beaufort-logo {
    width: 294px;
    height: 48px;
}

.payit-logo {
    width: 132px;
    height: 48px;
}

/* Containers */

body {
    margin: 0px;
}

.outer-wrapper {
    padding-left: 5%;
    padding-right: 5%;
}

.inner-wrapper {
    width: 95%;
    background: rgb(245, 245, 245);
    border-radius: 16px;
    margin: auto;
    padding: 2.5%;
}

/* Inputs */

.blindPayTheme input {
    padding-left: 5px;
    padding-right: 5px;
}

.input-container {
    margin-bottom: 2.5%;
}

.blindPayTheme input[type=text],
.blindPayTheme input[type=email],
.blindPayTheme input[type=tel] {
    width: 90%;
    max-width: 338px;
    height: 40px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(229, 229, 229);
    border-radius: 4px;
    color: rgb(108, 109, 112);
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
}

.blindPayTheme input[type=number] {
    width: 90%;
    max-width: 338px;
    height: 40px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(229, 229, 229);
    border-radius: 4px;
    color: rgb(108, 109, 112);
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
}

.blindPayTheme input[type=submit] {
    width: 139px;
    height: 48px;
    background: rgb(2, 108, 253);
    border-radius: 4px;
    border-color: rgb(2, 108, 253);
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
    border: none;
}

.blindPayTheme select {
    width: 90%;
    max-width: 340px;
    height: 40px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(229, 229, 229);
    border-radius: 4px;
    padding-left: 5px;
    padding-right: 5px;
}

.blindPayTheme textarea {
    width: 338px;
    height: 87px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(229, 229, 229);
    border-radius: 4px;
}

.subform-fields {
  display: none;
  overflow: hidden;
  height: 0;
  margin-top: 2.5%;
}
.subform-fields-show {
  display: block;
  overflow: auto;
  height: auto;
}

/* Footer */

.blindPayTheme footer,
footer.blindPayTheme {
    flex: 0;
    margin-top: 128px;
    padding: 32px 0;
    background: rgb(229, 229, 229);
    border-radius: 0px;
}

.footer-link-list {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
}

@media screen and (min-width: 1024px) {
    .footer-link-list { flex-direction: row; }
}

.footer-link-list li {
    flex: 1;
    text-align: center;
    padding: 16px 0;
    color: #000000;
}

@media screen and (min-width: 1024px) {
    .footer-link-list li { padding: 0; }
}

.footer-link {
    color: #000000;
    padding: 15px 0;
    vertical-align: middle;
}
.footer-link:visited { color: #000000; }

/* Sticky Footer */

@supports not (-ms-high-contrast: none) {
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .outer-wrapper {
       flex: 1;
    }
 }

 .no-display {
    display: none;
 }

 /* Hide UI while the checkout form is visible */
 [data-frame-visible] .outer-wrapper,
 [data-frame-visible] footer {
    display: none;
 }