@font-face
{
    font-family: Roboto;
    src: url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face
{
    font-family: Roboto;
    src: url('/fonts/Roboto/Roboto-Light.ttf?v=1.4.0') format('truetype');
    font-weight: 300;
    font-display: swap;
}

@font-face
{
    font-family: Roboto;
    src: url('/fonts/Roboto/Roboto-Bold.ttf?v=1.4.0') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face
{
    font-family: Roboto;
    src: url('/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

@font-face
{
    font-family: Roboto;
    src: url('/fonts/Roboto/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

.salogo
{
    max-width: 90%;
}

:root
{
    --heading-padding: 1rem;
}

html, body
{
    font-family: Roboto;
}

.v4 label, p {
    color: #000000;
}

.body-image
{
    background: url("../img/signUpBg1.jpg") no-repeat center center fixed;
    background-size: cover;
    padding: 7rem ;
    margin: 0 -15px;
}

.v4.container
{
    font-size: 1.25rem;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding: 5rem 6rem;
    max-width: 1252px;
}

.v4 hr
{
    border: 1px solid #000000;
    width: 100%;
    margin: 3rem 0;
}

.v4 h1
{
    font-size: 2.375rem;
    padding-bottom: var(--heading-padding);
}

.v4 h2
{
    font-size: 1.5rem;
    padding-bottom: var(--heading-padding);
}

.v4 h3
{
    font-size: 1.25rem;
    padding-bottom: var(--heading-padding);
}

.v4 .bold
{
    font-weight: bold;
}

.v4 .headerPadding
{
    padding-bottom: var(--heading-padding);
}

.v4 .b500
{
    font-weight: 500;
}

.v4 .b400
{
    font-weight: 400;
}

.v4 .b300 {
    font-weight: 300;
}

.v4 .switch
{
    /* variables begin*/
    --color-on: #09AA57;
    --color-off: #bcbcbc;
    --color-locked: #cdcdcd;
    --transition-time: .4s;
    --width: 5rem;
    --height: 2rem;
    --slider-size: 1.5rem;
    --slider-gap: 2px;
    /* variables end */
    /* keep the .slider within the bounds of the switch wrapper */
    position: relative;
    display: inline-block;
    min-width: var(--width);
    width: var(--width);
    height: var(--height);
    border: 2px solid var(--color-off);
    /* css magic trick: use large px values to get the pill shape */
    border-radius: 500px;
    cursor: pointer;
    transition: var(--transition-time);
}

    .v4 .switch.Checked
    {
        border-color: var(--color-on);

        transition: var(--transition-time);
    }

.v4 .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

    .v4 .switch .slider
    {
        position: absolute;
        left: var(--slider-gap);
        top: var(--slider-gap);
        bottom: 0;
        right: 0;
        background-color: var(--color-off);
        width: var(--slider-size);
        height: var(--slider-size);
        border-radius: 500px;

        transition: var(--transition-time);
    }

    .v4 .switch.Checked .slider
    {
        left: calc(100% - var(--slider-size) - var(--slider-gap));
        background-color: var(--color-on);

        transition: var(--transition-time);
    }

    .v4 .switch.disabled
    {
        pointer-events: none;
        filter: brightness(80%);
    }

        .v4 .switch.disabled .slider
        {
            background-color: var(--color-locked);
            width: calc(100% - var(--slider-gap) * 2);
            background-image: url('../img/lock.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 20px;
        }

.v4 .pw-field-row
{
    display: flex;
    flex-direction: row;
    position: relative;
}

    .v4 .pw-field-row .img-password
    {
        display: flex;
        justify-content: end;
        margin: auto auto;
        z-index: 99;
        position: absolute;
        right: calc(10% + 15px);
        top: calc(50% - 15px);
        cursor: pointer;
    }

    .v4 .pw-field-row .checkout-password-image
    {
        width: 30px;
        height: 30px;
    }

.v4 .checkSlider-Is-Disabled
{
    color: #BCBCBC;
}

.v4 .checkSlider-Is-Active
{
    color: #000000;
}

.v4 input[type=text],
.v4 input[type=number],
.v4 input[type=password]
{
    border: 1px solid #949494;
    background-color: #FFFFFF;
    color: #5E5E5E;
    padding: 14px 22px;
    margin: 1rem 0;
    width: 90%;
}

    .v4 .has-error {
        border-color: #FF5B5B !important;
    }

.v4 .label-error {
    color: #FF5B5B;
}

.v4 .icons{
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
}

.v4 .cursor-pointer {
    cursor: pointer;
}

.v4 .row-noMargin
{
    margin-left: 0;
}

.v4 .startUp
{
    color: #2693F8;
    padding-right: 0.25rem;
}

.v4 .pro
{
    color: #84B123;
    padding-right: 0.25rem;
}

.v4 .proPlus
{
    color: #05B20C;
    padding-right: 0.25rem;
}

.v4 .elite 
{
    color: #C044FA;
    padding-right: 0.25rem;
}

.v4 .paddingLeft
{
    padding-left: 0.25rem;
}

.v4 .paddingRight
{
    padding-right: 0.25rem;
}

.v4 .selected-box
{
    color: #5E5E5E;
    width: 90%;
    height: 2.75rem;
    padding: 0 0.75rem;
    margin: 1rem  0  2rem;
}

.v4 .membership-label {
    color: #373737;
}

.v4 .ico {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}

   .v4 .ico.ico-22 {
        width: 22px;
        height: 22px;
        background-size: 22px 22px;
    }

   .v4 .ico.ico-padding{
       margin: 0.5rem 0;
   }

.v4 .ico.ico-alert {
    background-image: url('../img/alert.svg');
}

.v4 .reviewLabel {
    font-size: 1.45rem;
}

.v4 .reviewLabel-link {
    font-size: 1.45rem;
    color: #09AA57;
}

   .v4 .reviewMembershipLabel{
       text-transform: uppercase;
   }

.v4 .credit-card {
    border-color: #09AA57;
}
    .v4 .credit-card:hover {
        background-color: #09AA57;
        color: #FFFFFF;
    }


.v4 .apply-btn {
    border-color: #09AA57;
    width: 5rem;
}

    .v4 .apply-btn:hover {
        background-color: #09AA57;
        color: #FFFFFF;
    }

.v4 .ccDisplay {
    border-radius: 8px;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
    padding: 18px 15px 15px 15px;
    cursor: pointer;
    margin: 0px 20px;
    width: 350px;
}

    .v4 .ccDisplay .ccDisplay--Header {
        font-weight: bold;
        font-size: 18px;
        color: white;
        text-transform: uppercase;
        display: flex;
        justify-content: space-between;
    }

    .v4 .ccDisplay .ccDisplay--ItemTitle {
        color: #C3C3C3;
        font-size: 12px;
        text-transform: uppercase;
        padding-top: 12px;
    }

    .v4 .ccDisplay .ccDisplay--CCDetails {
        color: white;
        font-weight: bold;
        padding-top: 5px;
    }

    .v4 .ccDisplay .ccDisplay--CardNumber {
        padding-right: 10px;
    }

    .v4 .ccDisplay .ccDisplay--CardHolderName {
        font-size: 18px;
        font-weight: bold;
        color: white;
        padding-top: 5px;
    }

    .v4 .ccDisplay .ccDisplay--CardHolderAddress1 {
        font-size: 14px;
        color: white;
        padding-top: 5px;
    }

    .v4 .ccDisplay.ccDisplay-visa {
        background-color: #2e3069;
    }

    .v4 .ccDisplay.ccDisplay-mastercard {
        background-color: #000000;
    }

    .v4 .ccDisplay.ccDisplay-discover {
        background-color: #e27f34;
    }

    .v4 .ccDisplay.ccDisplay-americanexpress {
        background-color: #326cc2;
    }

    .v4 .ccDisplay.ccDisplay-amex {
        background-color: #326cc2;
    }

    .v4 .ccDisplay.ccDisplay-NoCardType {
        background-color: #000000;
    }

.v4 .l-CCDisplay-DetailsContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 18px;
}

.v4 .l-CCDisplay-CardNumberContainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.v4 .terms-label {
    color: #09AA57;
}

.v4 .checkBoxTerms {
    margin: 0 0.5rem 0.5rem 0.5rem;
}

.v4 .legal-links {
    color: #09AA57;
    transition: color .4s ease-in-out;
    text-decoration: none;
    font-weight: bold;
    font-size:  1rem;
}

.v4 .link-with-underline {
    color: #09AA57 !important;
    transition: color .4s ease-in-out !important;
    text-decoration: underline !important;
    cursor: pointer;
    font-size: 1.2rem;
}

.v4 .thank-you-text {
    font-weight: 600 !important;
    font-size: 1.2rem;
}

.v4 .ico {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}

.v4 .ico.ico-circle-check {
    background-image: url('/images/circle-check.svg');
    background-size: 100px;
    width: 100px;
    height: 100px;
}

.v4 .thank-you-icon {
    height: 100px;
    width: 100px;
    padding-bottom: 140px;
}

.thank-you-body {
    height: 600px;
    padding-top: 100px;
}

.thank-you-row {
    margin: 10px;
}

.v4 .header-link {
    color: #09AA57;
}

.grecaptcha-badge {
    width: 70px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    left: -2px !important;
    bottom: 20px !important;
}

    .grecaptcha-badge:hover {
        width: 256px !important;
    }

.v4 .lblSmall {
    font-size: 0.875rem;
    color: #373737;
    padding: 0.5rem 0;
}

.v4 .apply-container{
    padding: 0.5rem 0;
}

@media only screen and (max-width: 920.1px) {
    .container-fluid
    {
        padding-right: 0;
        padding-left: 0;
    }
}

@media only screen and (max-width : 821px )
{
    .body-image
    {
        padding: 1rem;
        width: 100%;
        margin: 0;
    }

    .v4.container
    {
        padding: 1rem;
        max-width: 100%;
    }

    .v4 h1
    {
        font-size: 1.5rem;
    }

    .v4 h2
    {
        font-size: 1.25rem;
    }

    .v4 h3
    {
        font-size: 1rem;
    }

    .v4 .selected-box
    {
        width: 90%;
        height: 2.5rem;
        padding: 0 0.75rem;
        margin: 1rem 0;
    }
}

@media only screen and (max-width : 540px ) {
    .v4.container {
        font-size: 0.9rem;
    }

    .v4 hr {
        width: 100%;
        margin: 1.5rem 0;
    }

    .v4 h1 {
        font-size: 1.25rem;
        padding: 0;
    }

    .v4 h2 {
        font-size: 1.0rem;
        padding: 0;
    }

    .v4 h3 {
        font-size: 1.0rem;
        padding: 0;
    }

    .v4 .selected-box {
        width: 90%;
        height: 2.5rem;
        padding: 0 0.75rem;
        margin: 1rem 0 2rem;
    }

    .v4 .icons {
        width: 20px;
        height: 16.8px;
        margin: 0;
    }

    .v4 .mobile-label {
        font-size: 1rem;
    }

    .v4 .reviewLabel
    {
        font-size: 1rem;
    }

    .v4 .textAlignSm {
        text-align:  end;
    }

    .v4 .order-padding{
        padding: 0 1rem;
    }

    .thank-you-text {
        font-size: 1rem !important;
    }

    .link-with-underline {
        font-size: 1rem !important;
    }
}