/* Minification failed. Returning unminified contents.
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,28): run-time error CSS1039: Token not allowed after unary operator: '-jumbotron-padding-y'
(33,31): run-time error CSS1039: Token not allowed after unary operator: '-jumbotron-padding-y'
(40,32): run-time error CSS1039: Token not allowed after unary operator: '-jumbotron-padding-y'
(41,35): run-time error CSS1039: Token not allowed after unary operator: '-jumbotron-padding-y'
(76,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(78,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(80,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(81,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(82,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(83,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(84,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(85,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(87,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(88,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(89,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(90,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(91,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(92,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(93,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(94,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(98,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(103,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(394,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
 */
/*
 * Custom styles that override default Bootstrap 4
 * Author: Jeff McWeeney (jeff.mcweeney@paya.com)
 *
 */

/* ----- Sandbox Elements ----- */
footer {
    padding-left: 2em;
    font-size: x-small;
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: relative;
    bottom: 0 !important;
}

    footer p {
        margin-bottom: .25rem;
    }

.sandbox {
    color: #ff0099;
}

/* -----  Code for index.html -- */

:root {
    --jumbotron-padding-y: 3rem;
}

.jumbotron {
    padding-top: calc(var(--jumbotron-padding-y) * .5);
    padding-bottom: calc(var(--jumbotron-padding-y) * .5);
    margin-bottom: 0;
    background: transparent;
}

@media (min-width: 768px) {
    .jumbotron {
        padding-top: calc(var(--jumbotron-padding-y) * 1);
        padding-bottom: calc(var(--jumbotron-padding-y) * 1);
    }
}

.jumbotron p:last-child {
    margin-bottom: 0;
}

.jumbotron-heading {
    font-weight: 300;
}

.jumbotron {
    color: #333;
}

@media (max-width: 575.98px) {
    .jumbotron h2 {
        font-size: 1.5rem;
    }

    .jumbotron h5 {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}


/* ----- SASS Colors ---- */

:root {
    --blue: #00a9e0; /* 48A9FD*/
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #69c411;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #ACB4B8;
    --gray-dark: #343a40;
    --primary: #48A9FD;
    --secondary: #8E9BAD;
    --success: #69C441;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ----- General Overrides ----- */

html,
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
    background-color: #ffffff;
    height: 100%;
}

@media (min-width: 992px) {
    html,
    body {
        margin: 0;
        height: 100%;
        background-color: #ffffff;
    }
}

a {
    color: #00a9e0;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

    a:hover {
        color: #258BE3;
        text-decoration: underline;
    }

a, button, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

.btn-outline-primary {
    color: #00a9e0;
    background-color: transparent;
    background-image: none;
    border-color: #48A9FD;
}

    .btn-outline-primary:not(:disabled):not(.disabled).active,
    .btn-outline-primary:not(:disabled):not(.disabled):active,
    .show > .btn-outline-primary.dropdown-toggle {
        color: #fff;
        background-color: #00a9e0;
        border-color: #00a9e0;
    }

/* ----- Sign In ----- */

.login-body {
    height: 100%;
}

.login-body {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.card-title {
    line-height: 2rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: #535e66;
}

.card-subtitle {
    margin-bottom: 0;
    line-height: 1.6rem;
    font-weight: 300;
}

.card-text {
    display: -webkit-box;
    font-size: 0.9rem;
    font-weight: 400;
    text-align: left;
    line-height: 20px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #4B4F56;
}

.form-signin {
    width: 100%;
    max-width: 560px;
    padding: 15px;
    margin: 0 auto;
}

    .form-signin .checkbox {
        font-weight: 400;
    }

    .form-signin .form-control {
        position: relative;
        box-sizing: border-box;
        height: auto;
        padding: 10px;
        font-size: 16px;
    }

        .form-signin .form-control:focus {
            z-index: 2;
        }

    .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

@media (max-width: 575.98px) {
    .form-signin {
        width: 100%;
        max-width: 560px;
        padding: 0;
        margin: 0 auto;
    }
}

/* ----- Enrollment UI ----- */

.bg-color-paya {
    background-color: rgba(210, 236, 255, 0.4);
}

.bg-sig {
    background-color: rgba(238, 255, 230, 1.0);
}

.bg-terms {
    border: 1px solid #EAEEF0;
    background-color: #F8FCFF;
    border-radius: 0.25rem;
}

progress[value] {
    width: 250px;
    height: 20px;
}

.progress {
    display: -ms-flexbox;
    display: flex;
    height: 0.45rem;
    overflow: hidden;
    font-size: 0.75rem;
    background-color: #e9ecef;
    border-radius: 1rem;
}

.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #48A9FD;
    transition: width 0.6s ease;
}

.indent-left {
    border-left: 2px solid #dee2e6 !important;
}

.form-signin .invalid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: 85%;
    color: #dc3545;
}

.prev-arrow {
    display: block;
    background-color: #ffffff;
    border: 1px solid #ccc;
    color: #a7a7a7;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    padding: 0.25rem 0;
    position: relative;
    text-align: center;
    line-height: 1.5;
    border-radius: 50%;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .prev-arrow:hover {
        text-decoration: none;
        color: #000;
        background-color: rgba(0,0,0,0.1);
    }


/* ----- Typography ---- */

.text-primary {
    color: #00a9e0;
}

.paya-display-1 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
}

.paya-display-2 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2;
}

.paya-display-3 {
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.3;
}

.paya-display-4 {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.2;
}

.paya-display-5 {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.2;
}

.font-weight-medium {
    font-weight: 500 !important;
}

.text-gray {
    color: #9B9B9B !important;
}

.text-orange {
    color: #f68e1e !important;
}

.text-primary {
    color: #00a9e0 !important;
}

small,
.small {
    font-size: 90% !important;
}

.lead {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 300;
    opacity: 0.8;
}

@media (min-width: 576px) {
    .lead span,
    .bundle span.break {
        display: block;
        &::before

{
    content: attr(data-text);
    background: black;
    padding: 1px 8px;
}

}
}


/* ----- Layout Elements ----- */

hr {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

    hr.black-rule-1 {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, 1.0);
    }

    hr.black-rule-2 {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        border: 0;
        border-top: 2px solid rgba(0, 0, 0, 0.5);
    }

    hr.dashed {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        border: 0;
        border-top: 1px dashed rgba(0, 0, 0, 0.4);
    }

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sticky-top {
        position: -webkit-sticky;
        position: sticky;
        top: 2em;
        z-index: 1020;
    }
}

.sticky-top {
    position: -ms-sticky;
    top: 0.5em;
    z-index: 1020;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: none;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 18 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.1)' stroke-width='1' stroke-linecap='round' stroke-miterlimit='10' fill='#8F9CA1' d='M18 0H4v2h14zM18 7H0v2h18zM18 14H9v2h9z'/%3E%3C/svg%3E");
}

.paya-payment-options .nav-pills .nav-link.active,
.paya-payment-options .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #00a9e0;
    border: 0;
}

.paya-payment-options .nav-pills .nav-link {
    border-radius: 5rem;
    color: #666;
}

.paya-payment-options .nav-link:hover {
    color: #000;
    background-color: #e9ecef;
    cursor: pointer;
}

.paya-payment-options .nav-link {
    display: block;
    padding: 0.375rem 1rem;
    background-color: #f5f5f5;
    transition: background-color 0.2s ease-in;
    border: 1px solid #E3E3E3;
}

/* ----- Custom Cards ----- */

.paya-cards {
    background-color: #fff;
    border: 0;
}

@media (min-width: 992px) {
    .paya-cards {
        background-color: #fff;
        /* border: 1px solid #E3E3E3; */
        border-radius: 0.25rem;
        /* box-shadow: 0 10px 20px rgba(0,0,0,.08); */
    }
}

.border {
    border: 1px solid #dee2e6 !important;
}

.border-top-0 {
    border-top: none;
}

.border-top {
    border-top: 1px solid #e6e6e6 !important;
}

.border-top-1 {
    border-top: 1px solid #8c8c8c !important;
}

.border-top-2 {
    border-top: 2px solid #000 !important;
}

.border-right {
    border-right: 1px solid #dee2e6 !important;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
}

.border-bottom-1 {
    border-bottom: 1px solid #8c8c8c !important;
}

.border-bottom-2 {
    border-bottom: 2px solid #ACB4B8 !important;
}

.border-bottom-none {
    border-bottom: none;
}

.border-left {
    border-left: 1px solid #dee2e6 !important;
}

.payment-card {
    border: 0;
    border-radius: 0;
    box-shadow: 0;
}

.card-library {
    /* box-shadow: 0 12px 12px rgba(0,0,0,0.1); */
    /* box-shadow: 0 20px 20px rgba(0,0,0,.08); */
}

.card-hero {
    background-color: white;
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    clear: both;
    float: left;
    overflow: auto;
    width: 100%;
    padding: 20px;
}

.card-description {
    display: block;
    display: -webkit-box;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    line-height: 20px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #4B4F56;
}

.card-header {
    padding: 0.75rem 1.5rem;
    margin-bottom: 0;
    background-color: rgba(255,255,255,1.0);
    border-bottom: none;
}

.card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: .75rem 1.5rem;
}

.card-body-library {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.5rem 1.5rem 1.0rem 1.5rem;
}

.card-footer {
    padding: 1.0rem 1.5rem 1.0rem 1.5rem;
    margin: 0;
    background-color: rgba(255,255,255,1.0);
    border-top: none;
}

.card-footer-library {
    padding: 0.75rem 0 0 0;
    margin: 1.5rem 0 0 0;
    background-color: rgba(255,255,255,1.0);
    border-top: 1px solid #E9EBEE;
}

    .card-footer-library button {
        color: #00a9e0;
    }


/* ----- Enrollment Process ----- */

.enroll.card-body,
.bundle.card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: .75rem 0;
}

@media (min-width: 992px) {
    .enroll.card-body,
    .bundle.card-body {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: .75rem 1.5rem;
    }
}

.enroll .list-group-item {
    position: relative;
    display: block;
    padding: 1rem 0 1rem 0;
    font-size: 100%;
    margin-bottom: 0;
    background-color: #fff;
    border: 0;
}

.enroll .paya-table h6,
.enroll .paya-table p {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.bundle span.break {
    display: block;
}

.bundle .paya-table h6,
.bundle .paya-table p,
.bundle .paya-table li,
.bundle .list-group-item {
    position: relative;
    /* display: block; */
    padding: 0;
    line-height: 1.5;
    font-size: 95%;
    background-color: transparent;
    border: 0;
    font-weight: inherit;
    margin-bottom: 0;
}

.bundle-circle-selected img {
    display: block;
    width: 24px;
    height: 24px;
    text-align: center;
    margin-top: 0;
    padding: 8px 0;
    font-size: 1rem;
    line-height: 1.5rem;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(105,196,65,1.0);
    z-index: 10;
}

.paya-edit {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}

.bundle .select-cell .form-group {
    border: 1px solid #b6ddfe;
    border-radius: 5rem;
}

    .bundle .select-cell .form-group:hover {
        background-color: #e9f5ff;
    }

.bundle .form-agree,
.bundle .form-agree:hover {
    border: none;
    background-color: #fff;
}
/* ----- Enrollment Tables ----- */

.paya-table {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 2em 0;
    padding: 0;
}

.paya-cell {
    flex-grow: 1;
    width: 100%;
    padding: 1.0rem;
    overflow: hidden;
    list-style: none;
    border-bottom: 1px solid #E9EBEE;
}

.title-cell,
.select-cell {
    border-bottom: 1px solid #ced4da;
}

.bundle-cell {
    flex-grow: 1;
    width: 100%;
    padding: 1.0rem;
    overflow: hidden;
    list-style: none;
    border-right: 1px solid #E9EBEE;
}

.paya-cell > h1,
.paya-cell > h2,
.paya-cell > h3,
.paya-cell > h4,
.paya-cell > h5,
.paya-cell > h6 {
    margin: 0;
}

.paya--2cols > .paya-cell {
    width: 50%;
}

.paya--3cols > .paya-cell {
    width: 33.33%;
}

.paya--4cols > .paya-cell {
    width: 25%;
}

.paya--5cols > .paya-cell {
    width: 20%;
}

.paya--6cols > .paya-cell {
    width: 16.6%;
}

.paya-cell--edit {
    width: 15%;
    padding: 1.0rem 0 1.0rem 0.5rem;
}

.paya-table {
    position: relative;
    top: 0;
    left: 0;
}

.paya-cell--dark {
    background-color: slategrey;
    border-color: #5a6673;
    color: white;
}

    .paya-cell--dark > h1,
    .paya-cell--dark > h2,
    .paya-cell--dark > h3,
    .paya-cell--dark > h4,
    .paya-cell--dark > h5,
    .paya-cell--dark > h6 {
        color: white;
    }

.paya-cell--medium {
    background-color: #b8c0c8;
    border-color: #a9b3bc;
}

.paya-cell--light {
    background-color: white;
    border-color: #e2e6e9;
}

.paya-cell--highlight {
    background-color: lightgreen;
    border-color: #64e764;
}

.paya-cell--alert {
    background-color: darkorange;
    border-color: #cc7000;
    color: white;
}

    .paya-cell--alert > h1,
    .paya-cell--alert > h2,
    .paya-cell--alert > h3,
    .paya-cell--alert > h4,
    .paya-cell--alert > h5,
    .paya-cell--alert > h6 {
        color: white;
    }

.paya-cell--head {
    background-color: #fff;
    color: #000;
}

    .paya-cell--head > h1,
    .paya-cell--head > h2,
    .paya-cell--head > h3,
    .paya-cell--head > h4,
    .paya-cell--head > h5,
    .paya-cell--head > h6 {
        color: #000;
    }

.paya-cell--foot {
    background-color: #b8c0c8;
    border-color: #a9b3bc;
}

@media all and (max-width: 576px) {
    .paya--collapse {
        display: block;
    }

        .paya--collapse > .paya-cell {
            width: 100% !important;
        }

        .paya--collapse > .paya-cell--foot {
            margin-bottom: 1em;
        }

    .bundle-cell {
        border-left: 0;
    }

    .paya-cell {
        padding: 1.0rem 0.5rem 1.0rem 0.5rem;
    }

    .bundle .border-bottom-none {
        border-bottom: none;
    }
}

.no-flexbox .paya-table {
    display: block;
}

    .no-flexbox .paya-table > .paya-cell {
        width: 100%;
    }

    .no-flexbox .paya-table > .paya-cell--foot {
        margin-bottom: 1em;
    }


/* ----- Transactions ----- */

.transactions-card {
    border: 0;
    box-shadow: 0;
    /* border: 1px solid #ccc; */
    /* border-top: 2px solid #000; */
    /* background: #F8FCFF; */
}

@media (min-width: 992px) {
    .transactions-card {
        border-radius: 0.25rem;
        border: 1px solid #E3E3E3;
        background: #ffffff;
    }
}

.transactions p {
    font-size: 85%;
}

.transactions .list-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}

.transactions .list-group-item {
    position: relative;
    display: block;
    padding: 0.125rem 0;
    font-size: 85%;
    margin-bottom: -1px;
    background-color: #fff;
    border: 0;
}

    .transactions .list-group-item:first-child {
        border-radius: 0;
    }

    .transactions .list-group-item:last-child {
        margin-bottom: 0;
        border-radius: 0;
    }

    .transactions .list-group-item:hover, .list-group-item:focus {
        z-index: 1;
        text-decoration: none;
    }

.receipt-header-success {
    padding: 2rem;
    margin-bottom: 0;
    background-color: rgba(105,196,65,1.0);
    border-bottom: none;
    color: #fff;
}

.receipt-circle-success img {
    display: inline-block;
    width: 56px;
    height: 56px;
    text-align: center;
    padding: 12px 0;
    font-size: 1.125rem;
    line-height: 1rem;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(105,196,65,1.0);
    border: 6px solid #fff;
    z-index: 10;
}

/* ----- Paya Forms ----- */

.rounded {
    border-radius: 0.5rem !important;
}

.paya .btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.paya label {
    display: inline-block;
    margin-bottom: 3px;
    font-size: .85em;
    color: #464646;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.paya input {
    text-overflow: ellipsis;
}

.paya-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: .85em;
    color: #464646;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.paya-label-sm {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 400 !important;
    color: #464646;
}

.paya input,
.paya button {
    -webkit-animation: 1ms void-animation-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border-style: none;
    border-radius: 0;
}

.paya select {
    -webkit-animation: 1ms void-animation-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    display: inline-block;
    border-style: none;
    border-radius: 0;
}
/* .paya select option { color: gray; }
.paya select option:first-child {
  color: #666;
} */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: 0;
}

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

.paya .input {
    width: 100%;
    color: #000;
    background: transparent;
    padding: 5px 0 6px 0;
    border-bottom: 1px solid #ced4da;
    transition: border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    outline: 0;
    box-shadow: 0;
}

.paya .input-recurring {
    width: 100%;
    color: #FFFFFF;
    background: transparent;
    padding: 5px 0 6px 0;
    border-bottom: 1px solid #ffbb4e;
    transition: border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    outline: 0;
    box-shadow: 0;
    text-align: center;
    font-size: 1.25rem;
}

.paya .select {
    width: 100%;
    /* color: #000; */
    /* background: transparent; */
    padding: 0 0 6px 0;
    line-height: 1.5;
    border-bottom: 1px solid #ced4da;
    transition: border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    outline: 0;
    box-shadow: 0;
    margin: 0;
}

.paya select,
.paya select option {
    color: #000;
}

    .paya select:invalid,
    .paya select option[value=""] {
        color: #9B9B9B;
    }

/*Added for browser compatibility*/
[hidden] {
    display: none;
}

.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(2.125rem + 2px);
    vertical-align: middle;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23999999' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    background-size: 8px 10px;
}

    .custom-select[multiple],
    .custom-select[size]:not([size="1"]) {
        height: auto;
        padding-right: 0.75rem;
        background-image: none;
    }

    .custom-select:focus {
        border-color: #80bdff;
        outline: 0;
        /* box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(128, 189, 255, 0.5); */
    }

        .custom-select:focus::-ms-value {
            color: #495057;
            background-color: #fff;
        }

.custom-control-spacer {
    padding: 0.75rem;
    margin-right: 0;
    margin-left: 0;
    border-width: .2rem;
}

.custom-control-label::before {
    position: absolute;
    top: .25rem;
    left: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff; /*dee2e6*/
    border: 1px solid #999999;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #48A9FD;
    border: none;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: none;
    border: none;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    background-color: #00a9e0;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #00a9e0;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    background-color: #00a9e0;
}

.btn-success.disabled,
.btn-success:disabled {
    color: #666;
    background-color: #e9ecef;
    border-color: #E3E3E3;
}

    .btn-success.disabled:hover,
    .btn-success:disabled:hover {
        color: inherit;
        background-color: #e9ecef;
        border-color: inherit;
        cursor: not-allowed;
    }

.btn-success-empty.disabled,
.btn-success-empty:disabled {
    color: #666;
    background-color: #e9ecef;
    border-color: #E3E3E3;
}

    .btn-success-empty.disabled:hover,
    .btn-success-empty:disabled:hover {
        color: inherit;
        background-color: #e9ecef;
        border-color: inherit;
        cursor: not-allowed;
    }

/* ----- Paya Add Button ----- */

.paya-add {
    border: 1px solid #999999 !important;
    background-color: #fff;
    font-size: 9px;
    height: 2.5em;
    width: 2.5em;
    border-radius: 5rem !important;
    position: relative;
}

    .paya-add::after,
    .paya-add::before {
        content: "";
        display: block;
        background-color: #00a9e0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #00a9e0;
    }

    .paya-add::before {
        height: 1em;
        width: 0.15em;
    }

    .paya-add::after {
        height: 0.15em;
        width: 1em;
    }

    .paya-add:hover {
        border: 1px solid #00a9e0 !important;
        background-color: rgba(70,153,254,0.1);
    }

/* ----- Paya Custom Inputs ----- */

.form-group {
    margin-bottom: 1.25rem;
}

.paya .form-control:focus,
.paya .custom-select:focus {
    color: #495057;
    background-color: transparent;
    border-color: #fff;
    outline: 0;
    box-shadow: none;
}

.paya .input-recurring:focus {
    color: #FFFFFF;
    background-color: transparent;
    border-color: #fff;
    outline: 0;
    box-shadow: none;
    opacity: 1.0;
}

.paya .input::-webkit-input-placeholder,
.paya .select::-webkit-input-placeholder {
    color: #9B9B9B;
}

.paya .input::-moz-placeholder,
.paya .select::-moz-placeholder {
    color: #9B9B9B;
}

.paya .input:-ms-input-placeholder,
.paya .select:-ms-input-placeholder {
    color: #9B9B9B;
}

.paya .input-recurring::-webkit-input-placeholder {
    color: #FFFFFF;
    opacity: 0.6;
}

.paya .input-recurring::-moz-placeholder {
    color: #FFFFFF;
    opacity: 0.6;
}

.paya .input-recurring:-ms-input-placeholder {
    color: #FFFFFF;
    opacity: 0.6;
}

.paya .input:focus,
.paya .select:focus {
    border-color: #007bff;
}

.paya .input-invalid,
.paya .select-invalid {
    border-color: #ffc7ee;
}

.paya input:-webkit-autofill,
.paya select:-webkit-autofill {
    -webkit-text-fill-color: #000;
    transition: background-color 100000000s;
    -webkit-animation: 1ms void-animation-out;
}

.paya-payment-options {
    border-bottom: 2px #ACB4B8 solid;
}
/* .paya-card-save {
  background: rgba(248, 252, 255, 1.0);
  border: 1px solid rgba(72, 169, 253, .25);
  border-radius: .25rem;
} */

.paya-save-card {
    font-size: 0.9rem;
    line-height: 1.5rem;
    min-width: calc(calc(1.9375rem * .8) * 2);
    height: calc(1.9375rem * .8);
    line-height: calc(1.9375rem * .8);
    text-indent: calc(calc(calc(1rem * .8) * 2) + .5rem);
}

.paya-save-brand-icon {
    height: 15px;
    position: absolute;
    right: 0;
    top: 10px;
}

.paya-card-brand {
    height: auto;
    position: relative;
}

.paya-card-icon,
.paya-cvv-icon {
    height: 20px;
    position: absolute;
    right: 0;
    top: 8px;
}

    .paya-card-icon img {
        height: 20px;
        width: 28px;
        position: absolute;
        right: 0;
        top: 0;
    }

    .paya-cvv-icon img {
        height: 20px;
        width: 70px;
        position: absolute;
        right: 0;
        top: 0;
    }

.paya-edit-icon img {
    display: block;
    width: 24px;
    height: 24px;
    text-align: center;
    margin-top: 0;
    /* padding: 8px 0; */
    font-size: 1rem;
    line-height: 1.5rem;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(255,255,255,1.0);
    z-index: 10;
}
/* .paya-edit-icon a img:hover {
  color: #ff0099;
} */

#inputCardNumber {
    width: 100%;
}

.custom-label,
.custom-control-label {
    font-weight: 500;
}

.custom-control-header {
    font-size: 1rem;
    padding: 0 0 .75rem 0;
}

.paya-notes {
    width: 100%;
    margin-top: 0.75rem;
    font-size: 80%;
    line-height: 1rem;
    color: #9B9B9B;
}

/* ----- Date Picker ----- */

.paya-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}

.paya-icon-prev {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 10 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='1' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpolygon fill='%23999999' transform='translate%285.000000, 8.000000%29 scale%28-1, 1%29 translate%28-5.000000, -8.000000%29 ' points='0 1.86666666 1.89189182 0 10 7.99999998 1.89189182 16 0 14.1333334 6.21621621 7.99999998'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
}

.paya-icon-next {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 10 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='1' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpolygon fill='%23999999' points='0 1.86666666 1.89189182 0 10 7.99999998 1.89189182 16 0 14.1333334 6.21621621 7.99999998'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
}


/* ----- Form Validation ----- */

.lh-condensed {
    line-height: 1.25;
}

/* ----- Valid ----- */
.was-validated .form-control:valid, .form-control.is-valid, .was-validated
.custom-select:valid,
.custom-select.is-valid {
    border-color: #28a745;
}

    .was-validated .form-control:valid:focus, .form-control.is-valid:focus, .was-validated
    .custom-select:valid:focus,
    .custom-select.is-valid:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    }

    .was-validated .form-control:valid ~ .valid-feedback,
    .was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback,
    .form-control.is-valid ~ .valid-tooltip, .was-validated
    .custom-select:valid ~ .valid-feedback,
    .was-validated
    .custom-select:valid ~ .valid-tooltip,
    .custom-select.is-valid ~ .valid-feedback,
    .custom-select.is-valid ~ .valid-tooltip {
        display: block;
    }

.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
    color: #28a745;
}

.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
    color: #28a745;
}

    .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
        background-color: #71dd8a;
    }

.was-validated .custom-control-input:valid ~ .valid-feedback,
.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback,
.custom-control-input.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
    background-color: #34ce57;
}

.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
    border-color: #28a745;
}

    .was-validated .custom-file-input:valid ~ .custom-file-label::before, .custom-file-input.is-valid ~ .custom-file-label::before {
        border-color: inherit;
    }

.was-validated .custom-file-input:valid ~ .valid-feedback,
.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback,
.custom-file-input.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* ----- Invalid ----- */
.was-validated .form-control:invalid, .form-control.is-invalid, .was-validated
.custom-select:invalid,
.custom-select.is-invalid {
    border-color: #dc3545;
}

    .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus, .was-validated
    .custom-select:invalid:focus,
    .custom-select.is-invalid:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    }

    .was-validated .form-control:invalid ~ .invalid-feedback,
    .was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback,
    .form-control.is-invalid ~ .invalid-tooltip, .was-validated
    .custom-select:invalid ~ .invalid-feedback,
    .was-validated
    .custom-select:invalid ~ .invalid-tooltip,
    .custom-select.is-invalid ~ .invalid-feedback,
    .custom-select.is-invalid ~ .invalid-tooltip {
        display: block;
    }

.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
    color: #dc3545;
}

.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
    color: #dc3545;
}

    .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
        background-color: #efa2a9;
    }

.was-validated .custom-control-input:invalid ~ .invalid-feedback,
.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback,
.custom-control-input.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
    background-color: #e4606d;
}

.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
    border-color: #dc3545;
}

    .was-validated .custom-file-input:invalid ~ .custom-file-label::before, .custom-file-input.is-invalid ~ .custom-file-label::before {
        border-color: inherit;
    }

.was-validated .custom-file-input:invalid ~ .invalid-feedback,
.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback,
.custom-file-input.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* ----- Custom Buttons ----- */

.btn-primary {
    color: #fff;
    background-color: #48A9FD;
    border-color: #48A9FD;
}

.paya .btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-approve {
    color: #fff;
    background-color: #69C441;
    border-color: #69C441;
}

    .btn-approve:hover {
        color: #fff;
        background-color: #218838;
        border-color: #1e7e34;
    }

.btn-approve-waiting {
    color: #9B9B9B;
    background-color: #fff;
    border-color: #ccc !important;
}

    .btn-approve-waiting:hover {
        color: #fff;
        background-color: #69C441;
        border-color: #69C441 !important;
    }

.btn-login {
    padding: .5rem 1rem !important;
    font-size: 1.1rem !important;
    line-height: 1.5;
    border-radius: .3rem;
    font-weight: 500;
}

.btn-signout {
    padding: .5rem 1rem;
    font-size: 1.0rem !important;
    line-height: 1.5;
    border-radius: 5rem !important;
}

.btn-circle-sm {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 4px 9px;
    line-height: 1rem;
    border-radius: 50%;
    color: inherit;
}

    .btn-circle-sm:hover img {
        -webkit-filter: invert(100%); /* Safari 6.0 - 9.0 */
        filter: invert(100%);
    }

.btn-circle-lg {
    width: 40px;
    height: 40px;
    text-align: center;
    padding: 10px 0;
    font-size: 1.125rem;
    line-height: 1rem;
    border-radius: 50%;
    /* color: inherit; */
    /* border: 1px solid #999; */
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 25px;
}

.btn-outline-secondary {
    color: #6c757d;
    background-color: transparent;
    background-image: none;
    border-color: #ccc !important;
}

/* ----- Paya Products & Details ----- */

.number-circle {
    display: inline-block;
    position: relative;
    padding: 0.25rem;
    margin: 0 .5rem 0 -3rem;
    background-color: #5b6770;
    /* border: 1px solid #ccc; */
    color: #a7a7a7;
    width: 36px;
    height: 36px;
    color: #fff;
    font-weight: 400 !important;
    font-size: 80%;
    text-align: center;
    line-height: 1.5;
    border-radius: 50%;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

h4.number-text {
    /* not sure what to do with this yet... */
}

@media (max-width: 575.98px) {
    .number-circle {
        padding: 0.25rem;
        margin: 0 .5rem 0 0;
        width: 30px;
        height: 30px;
        color: #fff;
        font-weight: 400 !important;
        font-size: 65%;
    }
}

.review-number {
    display: inline;
    background: #5b6770;
    padding: .125rem .75rem;
    margin: 0 .5rem 0 0;
    border-radius: .2rem;
    line-height: 1rem;
    color: #fff;
    font-weight: 500;
    font-size: 80%;
}

.bg-details {
    background: #f6fbfd;
}

.details-circle-opened img {
    display: inline-block;
    width: 32px;
    height: 32px;
    text-align: center;
    padding: 6px 0;
    font-size: 1rem;
    line-height: 1rem;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(105,196,65,1.0);
    border: 6px solid #fff;
    z-index: 10;
}

.details-circle-empty img {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    padding: 6px 0;
    margin-right: 6px;
    font-size: 1rem;
    line-height: 1rem;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(255,255,255,1.0);
    border: 2px solid #ccc;
    z-index: 10;
}

/* ----- Custom File Upload ----- */

.input-group > .custom-file {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.input-group > .custom-file, .input-group > .custom-select, .input-group > .form-control {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 0;
}

.custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(2.25rem + 2px);
    margin-bottom: 0;
}

.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(2.25rem + 2px);
    margin: 0;
    opacity: 0;
}

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(2.25rem + 2px);
    padding: .375rem 0;
    line-height: 1.5;
    color: #48A9FD;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: .25rem;
}

    .custom-file-label::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: block;
        height: calc(calc(2.25rem + 2px) - 1px * 2);
        padding: .375rem .75rem;
        line-height: 1.5;
        color: #999;
        content: "Add" !important;
        background-color: #fff;
        border-left: 1px solid #fff;
        border-radius: 0 .25rem .25rem 0;
    }

.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
    border-color: #fff;
}

/* ----- File Upload Drag & Drop ----- */

.form-control-file {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 3em;
    outline: none;
    visibility: hidden;
    cursor: pointer !important;
    /* background-color: #c61c23; */
    /* box-shadow: 0 0 5px solid currentColor; */
}

    .form-control-file::before {
        content: attr(data-title);
        position: absolute;
        top: 0.5em;
        left: 0;
        width: 78%;
        white-space: nowrap;
        text-overflow: ellipsis;
        min-height: 3em;
        line-height: 1.5em;
        padding-top: 0;
        opacity: 1;
        visibility: visible;
        text-align: left;
        border-style: none;
        overflow: hidden;
    }

    .form-control-file::after {
        content: attr(data-title);
        position: absolute;
        top: 0.5em;
        left: 0;
        width: 100%;
        min-height: 3em;
        line-height: 1.5em;
        padding: 0 0.25em 0 0;
        opacity: 1;
        visibility: visible;
        text-align: right;
        border-style: none;
        color: #00a9e0;
        content: "Browse" !important;
        overflow: hidden;
    }

    .form-control-file:hover {
        border-style: none;
        color: #000 !important;
        text-decoration: underline !important;
    }

/* ----- Paya Recurring Switch ----- */

.bg-recurring {
    background: #FF9E03;
}

.payaSwitch {
    position: relative;
    width: 48px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.payaSwitchRec-checkbox,
.payaSwitchSave-checkbox,
.payaSwitchShip-checkbox {
    display: none;
}

.payaSwitchRec-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    height: 24px;
    padding: 0;
    line-height: 36px;
    border: 2px solid #E3E3E3;
    border-radius: 36px;
    background-color: #e9ecef;
    transition: background-color 0.2s ease-in;
}

    .payaSwitchRec-label:before {
        content: "";
        display: block;
        width: 24px;
        margin: 0px;
        background: #FFFFFF;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 24px;
        border: 2px solid #E3E3E3;
        border-radius: 36px;
        transition: all 0.2s ease-in 0s;
    }

.payaSwitchRec-checkbox:checked + .payaSwitchRec-label {
    background-color: #00a9e0 /* #4699FE; */
}

    .payaSwitchRec-checkbox:checked + .payaSwitchRec-label,
    .payaSwitchRec-checkbox:checked + .payaSwitchRec-label:before {
        border-color: #00a9e0 /* #4699FE; */
    }

        .payaSwitchRec-checkbox:checked + .payaSwitchRec-label:before {
            right: 0px;
        }

/* ----- Paya Save Card/Bank Info & Shipping Payment Switch ----- */

.payaSwitchSave-label,
.payaSwitchShip-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    height: 24px;
    padding: 0;
    line-height: 36px;
    border: 2px solid #E3E3E3;
    border-radius: 36px;
    background-color: #e9ecef;
    transition: background-color 0.2s ease-in;
}

    .payaSwitchSave-label:before,
    .payaSwitchShip-label:before {
        content: "";
        display: block;
        width: 24px;
        margin: 0px;
        background: #FFFFFF;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 24px;
        border: 2px solid #E3E3E3;
        border-radius: 36px;
        transition: all 0.2s ease-in 0s;
    }

.payaSwitchSave-checkbox:checked + .payaSwitchSave-label,
.payaSwitchShip-checkbox:checked + .payaSwitchShip-label {
    background-color: #00a9e0;
}

    .payaSwitchSave-checkbox:checked + .payaSwitchSave-label,
    .payaSwitchSave-checkbox:checked + .payaSwitchSave-label:before,
    .payaSwitchShip-checkbox:checked + .payaSwitchShip-label,
    .payaSwitchShip-checkbox:checked + .payaSwitchShip-label:before {
        border-color: #00a9e0;
    }

        .payaSwitchSave-checkbox:checked + .payaSwitchSave-label:before,
        .payaSwitchShip-checkbox:checked + .payaSwitchShip-label:before {
            right: 0px;
        }

/* ----- Date Picker ----- */

/*
 * Tempus Dominus Bootstrap4 v5.0.0-alpha14 (https://tempusdominus.github.io/bootstrap-4/)
 * Copyright 2016-2017 Jonathan Peterson
 * Licensed under MIT (https://github.com/tempusdominus/bootstrap-3/blob/master/LICENSE)
 */

.sr-only, .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="today"]::after,
.bootstrap-datetimepicker-widget .picker-switch::after,
.bootstrap-datetimepicker-widget table th.prev::after,
.bootstrap-datetimepicker-widget table th.next::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.bootstrap-datetimepicker-widget {
    list-style: none;
}

    .bootstrap-datetimepicker-widget.dropdown-menu {
        display: block;
        margin: 2px 0;
        padding: 10px;
        width: 17rem;
        z-index: 1040;
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175)
    }

@media (min-width: 576px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em;
    }
}

@media (min-width: 768px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em;
    }
}

@media (min-width: 992px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em;
    }
}

.bootstrap-datetimepicker-widget.dropdown-menu:before,
.bootstrap-datetimepicker-widget.dropdown-menu:after {
    content: '';
    display: inline-block;
    position: absolute;
}
/* .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  top: -7px;
  left: 7px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  top: -6px;
  left: 8px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #ccc;
  border-top-color: rgba(0, 0, 0, 0.2);
  bottom: -7px;
  left: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
  bottom: -6px;
  left: 7px;
} */
.bootstrap-datetimepicker-widget.dropdown-menu.float-right:before {
    left: auto;
    right: 6px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.float-right:after {
    left: auto;
    right: 7px;
}

.bootstrap-datetimepicker-widget .list-unstyled {
    margin: 0;
}

.bootstrap-datetimepicker-widget a[data-action] {
    padding: 6px 0;
}

    .bootstrap-datetimepicker-widget a[data-action]:active {
        box-shadow: none;
    }

.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    width: 54px;
    font-weight: bold;
    font-size: 1.2em;
    margin: 0;
}

.bootstrap-datetimepicker-widget button[data-action] {
    padding: 6px;
}

.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
    content: "Increment Hours";
}

.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
    content: "Increment Minutes";
}

.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
    content: "Decrement Hours";
}

.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
    content: "Decrement Minutes";
}

.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
    content: "Show Hours";
}

.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
    content: "Show Minutes";
}

.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
    content: "Toggle AM/PM";
}

.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
    content: "Clear the picker";
}

.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
    content: "Set the date to today";
}

.bootstrap-datetimepicker-widget .picker-switch {
    text-align: center;
}

    .bootstrap-datetimepicker-widget .picker-switch::after {
        content: "Toggle Date and Time Screens";
    }

    .bootstrap-datetimepicker-widget .picker-switch td {
        padding: 0;
        margin: 0;
        height: auto;
        width: auto;
        line-height: inherit;
    }

        .bootstrap-datetimepicker-widget .picker-switch td span {
            line-height: 2.5;
            height: 2.5em;
            width: 100%;
        }

.bootstrap-datetimepicker-widget table {
    width: 100%;
    margin: 0;
    font-size: .9em;
}

    .bootstrap-datetimepicker-widget table td,
    .bootstrap-datetimepicker-widget table th {
        text-align: center;
        border-radius: 0.25rem;
        border-top: 0;
    }

    .bootstrap-datetimepicker-widget table th {
        height: 20px;
        line-height: 20px;
        width: 20px;
        border-top: 0;
        padding-top: 10px;
        font-weight: 600;
        border-bottom: 0;
    }

        .bootstrap-datetimepicker-widget table th.picker-switch {
            width: 145px;
        }

        .bootstrap-datetimepicker-widget table th.disabled, .bootstrap-datetimepicker-widget table th.disabled:hover {
            background: none;
            color: #868e96;
            cursor: not-allowed;
        }

        .bootstrap-datetimepicker-widget table th.prev::after {
            content: "Previous Month";
        }

        .bootstrap-datetimepicker-widget table th.next::after {
            content: "Next Month";
        }

    .bootstrap-datetimepicker-widget table thead tr:first-child th {
        cursor: pointer;
    }

        .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
            background: #e9ecef;
        }

    .bootstrap-datetimepicker-widget table td {
        height: 54px;
        line-height: 54px;
        width: 54px;
        font-weight: 400;
    }

        .bootstrap-datetimepicker-widget table td.cw {
            font-size: .8em;
            height: 20px;
            line-height: 24px;
            color: #868e96;
        }

        .bootstrap-datetimepicker-widget table td.day {
            height: 20px;
            line-height: 24px;
            width: 20px;
        }

            .bootstrap-datetimepicker-widget table td.day:hover,
            .bootstrap-datetimepicker-widget table td.hour:hover,
            .bootstrap-datetimepicker-widget table td.minute:hover,
            .bootstrap-datetimepicker-widget table td.second:hover {
                background: #e9ecef;
                cursor: pointer;
            }

        .bootstrap-datetimepicker-widget table td.old,
        .bootstrap-datetimepicker-widget table td.new {
            color: #868e96;
        }

        .bootstrap-datetimepicker-widget table td.today {
            position: relative;
        }

            .bootstrap-datetimepicker-widget table td.today:before {
                content: '';
                display: inline-block;
                border: solid transparent;
                border-width: 0 0 7px 7px;
                border-bottom-color: #FF9E03;
                border-top-color: rgba(0, 0, 0, 0.2);
                position: absolute;
                bottom: 2px;
                right: 2px;
            }

        .bootstrap-datetimepicker-widget table td.active,
        .bootstrap-datetimepicker-widget table td.active:hover {
            background-color: #FF9E03;
            color: #fff;
            /* text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); */
        }

            .bootstrap-datetimepicker-widget table td.active.today:before {
                border-bottom-color: #fff;
            }

        .bootstrap-datetimepicker-widget table td.disabled,
        .bootstrap-datetimepicker-widget table td.disabled:hover {
            background: none;
            color: #868e96;
            cursor: not-allowed;
        }

        .bootstrap-datetimepicker-widget table td span {
            display: inline-block;
            width: 54px;
            height: 54px;
            line-height: 54px;
            margin: 2px 1.5px;
            cursor: pointer;
            border-radius: 0.25rem;
        }

.bootstrap-datetimepicker-widget .picker-switch span:before {
    content: "No End Date";
    color: #333;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.bootstrap-datetimepicker-widget table td span:hover {
    background: #e9ecef;
}

.bootstrap-datetimepicker-widget table td span.active {
    background-color: #007bff;
    color: #fff;
    /* text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); */
}

.bootstrap-datetimepicker-widget table td span.old {
    color: #868e96;
}

.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
    background: none;
    color: #868e96;
    cursor: not-allowed;
}

.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
    height: 27px;
    line-height: 27px;
}

.input-group.date .input-group-append {
    cursor: pointer;
}


/* ----- Payments Modal ----- */

.ba-numbers img {
    width: 100%;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 560px;
        margin: 1.75rem auto;
    }

    .modal-dialog-centered {
        min-height: calc(100% - (1.75rem * 2));
    }

    .modal-sm {
        max-width: 300px;
    }
}

@media (max-width: 575.98px) {
    .card-header,
    .card-body {
        padding: 0.5rem 1rem;
    }
}

@media (min-width: 992px) {
    .modal-lg {
        max-width: 800px;
    }
}

.modal-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 0 1 1rem 1rem;
    border-top: 0;
}

.card-ach-modal {
    height: 100%;
    min-height: 250px;
}

.modal-prev span {
    display: inline-block;
    /* width: 30px;
  height: 30px; */
    text-align: center;
    padding: .5rem;
    font-size: 1.5rem;
    line-height: 1rem;
    border-radius: 5rem;
    color: #a7a7a7;
    background-color: rgba(255,255,255,1.0);
    z-index: 10;
}

.modal-prev-arrow {
    display: block;
    background-color: #ffffff;
    border: 1px solid #ccc;
    color: #a7a7a7;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    padding: 0.25rem 0;
    position: relative;
    text-align: center;
    line-height: 1.5;
    border-radius: 50%;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .modal-prev-arrow:hover {
        text-decoration: none;
        color: #000;
        background-color: rgba(0,0,0,0.1);
    }

/* ----- Dot Indicators ----- */

.dotstyle ul {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dotstyle li {
    position: relative;
    display: block;
    float: left;
    margin: 0 8px;
    width: 10px;
    height: 10px;
    cursor: pointer;
}

    .dotstyle li a {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        outline: none;
        border-radius: 50%;
        background-color: #a7a7a7;
        background-color: rgba(0, 0, 0, 0.3);
        text-indent: -999em; /* make the text accessible to screen readers */
        cursor: pointer;
        position: absolute;
    }

        .dotstyle li a:focus {
            outline: none;
        }

/* Individual styles and effects */

.dotstyle-fillin li a {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px #a7a7a7;
    -webkit-transition: box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
}

    .dotstyle-fillin li a:hover,
    .dotstyle-fillin li a:focus {
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6)
    }

.dotstyle-fillin li.current a {
    box-shadow: inset 0 0 0 10px #a7a7a7;
}


/* ----- Paya Alerts ----- */

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-error {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

    .alert-error .close:hover {
        color: #fff;
        outline: none;
    }

    .alert-error p span:first-of-type {
        border-bottom: 1px solid #fff;
    }

.alert-dismissible .close {
    position: absolute;
    top: inherit;
    right: 0;
    bottom: 0;
    padding: .75rem 1.25rem;
    color: inherit;
}

.close {
    text-shadow: 0;
}

.alert-error-timestamp {
    opacity: 0.7;
}

/* ----- Paya Branding ----- */

.sidebar-brand {
    float: left;
    height: 60px;
    line-height: 1rem;
    color: #555;
}

    .sidebar-brand > img {
        height: 1px;
    }

@media (min-width: 576px) {
    .sidebar-brand > img {
        height: 60px;
    }
}

.sidebar-brand:hover {
    color: #222;
    text-decoration: none;
}

.sidebar-brand-icon {
    height: 60px;
}

div.clickToApprove:hover {
    cursor: pointer;
}

.payausernotification {
    font-size: medium;
    font-weight: bold;
}