.switch {
    height: 2rem;
    position: relative;
    margin-top: -.25rem;
    outline: 0;
    font-size: 0.875rem;
    font-weight: bold;
    color: #fefefe;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }

.switch-input {
    position: absolute;
    margin-bottom: 0;
    opacity: 0; }

.switch-paddle {
    position: relative;
    display: block;
    width: 4rem;
    height: 2rem;
    border-radius: 0;
    background: #cacaca;
    transition: all 0.25s ease-out;
    font-weight: inherit;
    color: inherit;
    cursor: pointer; }
input + .switch-paddle {
    margin: 0; }
.switch-paddle::after {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    transform: translate3d(0, 0, 0);
    border-radius: 0;
    background: #fefefe;
    transition: all 0.25s ease-out;
    content: ''; }
input:checked ~ .switch-paddle {
    background: #1779ba; }
input:checked ~ .switch-paddle::after {
    left: 2.25rem; }
[data-whatinput='mouse'] input:focus ~ .switch-paddle {
    outline: 0; }

.switch-active, .switch-inactive {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }

.switch-active {
    left: 8%;
    display: none; }
input:checked + label > .switch-active {
    display: block; }

.switch-inactive {
    right: 15%; }
input:checked + label > .switch-inactive {
    display: none; }

.switch.tiny {
    height: 1.5rem; }
.switch.tiny .switch-paddle {
    width: 3rem;
    height: 1.5rem;
    font-size: 0.625rem; }
.switch.tiny .switch-paddle::after {
    top: 0.25rem;
    left: 0.25rem;
    width: 1rem;
    height: 1rem; }
.switch.tiny input:checked ~ .switch-paddle::after {
    left: 1.75rem; }

.switch.small {
    height: 1.75rem; }
.switch.small .switch-paddle {
    width: 3.5rem;
    height: 1.75rem;
    font-size: 0.75rem; }
.switch.small .switch-paddle::after {
    top: 0.25rem;
    left: 0.25rem;
    width: 1.25rem;
    height: 1.25rem; }
.switch.small input:checked ~ .switch-paddle::after {
    left: 2rem; }

.switch.large {
    height: 2.5rem; }
.switch.large .switch-paddle {
    width: 5rem;
    height: 2.5rem;
    font-size: 1rem; }
.switch.large .switch-paddle::after {
    top: 0.25rem;
    left: 0.25rem;
    width: 2rem;
    height: 2rem; }
.switch.large input:checked ~ .switch-paddle::after {
    left: 2.75rem; }

/* Rounded sliders */
.switch.round label {
    border-radius: 2rem;
}
.switch.round label::after {
    border-radius: 2rem;
}
button.autoCredits {
    height: max-content;
}
.align-items-center {
    align-content: center !important;
}
.border-3 {
    border-width: 3px !important;
}
.ps-3 {
    padding-left: 3rem !important;
}
.pe-3 {
    padding-right: 3rem !important;
}
.pt-4 {
    padding-top: 1.5rem !important;
}
.creditRow .pt-4 {
    padding-top: 2rem !important;
}
.pt-3 {
    padding-top: 1rem !important;
}
.pb-3 {
    padding-bottom: 1rem !important;
}
.px-3 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}
.pb-1 {
    padding-bottom: .25rem !important;
}
.pt-1 {
    padding-top: .25rem !important;
}
.pb-3 {
    padding-bottom: 1rem !important;
}
.mb-3 {
    margin-bottom: 1rem !important;
}
.mt-3 {
    margin-top: 1rem !important;
}
.mt-4 {
    margin-top: 1.5rem !important;
}
.mt-5 {
    margin-top: 3rem !important;
}
.ms-2 {
    margin-left: 2rem !important;
}
.border-0 {
    border: unset;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.creditRow {
    display: flex;
}
.float-end {
    float: right;
}
.col-4 {
    flex: 0 0 auto;
    width: 33.33333%;
}
.col-2 {
    flex: 0 0 auto;
    width: 16.66667%;
}
.offset-2 {
    margin-left: 16.66667%;
}
.fs-5 {
    font-size: 1.25rem !important;
}
.btn-success {
    border-radius: 0.5em;
}
.btn-success, .bg-success {
    background-color: #0bab00;
    color: #fff;
}
.bg-transparent {
    background-color: transparent;
}

.credit-plan {
    border-radius:20px;
    width: 80%;
    border: 3px solid #003399!important;
}
.promoPlan {
    width: 70%;
}
.credit-plan:hover {
    background-color:#e4f2fb;
    cursor: pointer;
}
.planDiscount {
    text-wrap-mode: nowrap;
}
@media (min-width:952px) and (max-width: 1306px) {
    .credit-plan { width: 80%; }
}
@media (min-width: 620px) and (max-width: 951px) {
    .credit-plan { width: 75%; }
}
@media (max-width: 620px) {
    .credit-plan { width: 80%; }
    .creditRow.ps-3 {
        padding-left: 1em !important;
    }
    .creditRow.pe-3 {
        padding-right: 1em !important;
    }
    .delayNote { font-size:.8rem!important; }
    .billing-card-wrapper {
        .col-3, .col-xs-3,
        .col-4, .col-xs-4,
        .col-5, .col-xs-5,
        .col-6, .col-xs-6,
        .col-12, .col-xs-12 {
            padding-left: .5em;
            padding-right: .5em;
        }

    }
}
@media (max-width: 950px) {
    .planDiscount.pt-4 {
        font-size: 1.25rem !important;
        padding-top: 1.5rem !important;
    }
}
@media only screen and (max-width: 420px) {
    .planDiscount.pt-4 {
        font-size: 1rem !important;
        padding-top: 4rem !important;
    }
}
@media only screen and (max-width: 400px) {
    .switch.round label {
        margin-left: 20px;
    }
    .col-6, .col-xs-6 {
        padding-left: 5px;
        padding-right: 5px;
    }
}
.billing-card-wrapper .row {
    margin-left: 0 !important;
}
.mostPopular {
    margin-bottom: -1rem;
    padding: .25rem .5rem;
    min-width: 115px !important;
    max-width: 145px !important;
    position: relative;
    display: block;
}
#switch_input_help_modal {
    background: rgba(0,0,0,0.5);
}
.payment-button {
    vertical-align: top;
    margin: auto;
}
#buyCreditsModalBody .row {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 5px;
    padding-right: 5px;
}
.payment-button .div {
    margin: 0 auto;
    text-align: center;
}
#buyCreditsModalBody .h1 {
    font-size: 3.5rem;
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 600;
    line-height: 1.2;
}
label.credit-plan .fw-medium {
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
}
#buyCreditsModalBody .text-secondary,
.billing-card-wrapper .form-check label {
    color: rgb(85,85,85) !important;
    font-size: 15px !important;
}
.billing-card-wrapper .form-check label {
    font-weight: normal;
}
#buyCreditsModalBody .text-success {
    color: #0bab00 !important;
}
#buyCreditsModalBody .p-3 {
    padding: 0 !important;
    padding-top: 1em !important;
}
.billing-section {
    margin: 1rem 0px !important;
    padding: 0px;
}
#switch_input_help_modal .modal-title {
    display: inline-block;
    margin: 0.25rem auto;
    width: auto;
}
.ccIcon, #switch_input_help_modal .modal-header .btn-close {
    float: right;
}
.card-title {
    margin-bottom: 0.75rem;
}
.billing-card-wrapper .card-title label,
.billing-card-wrapper #credits_purchase_billing_creditCard_new label {
    color: rgb(33, 37, 41) !important;
    font-size: 16px !important;
}
.form-badge {
    width: 90px;
}
label.credit-plan:hover, label.credit-plan.highlight {
    background-color: #e4f2fb;;
}
.buy-credits-title {
    padding: 0 !important;
    font-weight: bold;
    margin: 1rem auto;
    color: #325592;
    text-align: center;
}
.bs3-flex {
    display: flex;
}
@media only screen and (min-width: 501px) {
    .buy-credits-title {
        font-size: 24px !important;
    }
}
@media only screen and (max-width: 500px) {
    .buy-credits-title {
        font-size: 20px !important;
    }
}
@media only screen and (min-width: 420px) {
    label.credit-plan .selCreditsAmount {
        font-size: 24px;
        line-height: 65px;
    }
    label.credit-plan .planDiscount {
        font-size: 18px;
        line-height: 65px;
    }
    .selCreditsIcon img {
        max-height: 55px;
        margin: 5px auto;
    }
}
@media only screen and (max-width: 420px) {
    .buy-credits-title {
        font-size: 17px !important;
    }
    label.credit-plan .selCreditsAmount {
        font-size: 20px;
        line-height: 54px;
    }
    label.credit-plan .planDiscount {
        font-size: 16px;
        line-height: 54px;
    }
    .selCreditsIcon img {
        max-height: 50px;
        margin: 2px auto;
    }
}
@media only screen and (max-width: 375px) {
    .buy-credits-title {
        font-size: 16px !important;
    }
}
@media only screen and (max-width: 350px) {
    .buy-credits-title {
        font-size: 15px !important;
    }
}
.payment-buttons-container, .payment-button {
    display: inline-block;
}
@media (max-width: 580px) {
    .payment-buttons-container, .payment-button {
        display: grid !important;
    }
    .col-12 {
        padding-left: 0px;
        padding-right: 0px;
    }
}
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    .arow {
        display: block;
    }
}}