/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(/fonts/glyphicons-halflings-regular.eot);
  src: url(/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(/fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(/fonts/glyphicons-halflings-regular.woff) format('woff'), url(/fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg');
}
body {
    font-family: Urbanist, Roboto, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: .03em;
    color: #4d4e53;
    margin: 0;
    background-color: white;
    margin-bottom: 1rem;
    font-size: 1rem;

    .validation-info {
        color: #db0020
    }

    .italicSmall {
        font-weight: normal;
        font-style: italic;
        font-size: 12px;
    }

    span {
        line-height: 24px;
    }

    a {
        color: #0070D1;
        text-decoration: none;
        &:hover {
            text-decoration: underline;
            color: #167cac;
        }
    }

    .form-group {
        display: block;
        position: relative;
    }

    .headerlinecontainer {
        color: #000;
        .headerline1 {
            margin-bottom: .75rem;
            margin-top: 0rem;
            font-weight: 600;
            font-size: 1.25rem;
            line-height: 1.375rem;
        }
        .headerline5v2 {
            display: block;
            padding: .75rem 0;
            color: #db0020;
            font-style: italic;
            font-size: 12px;
        }
    }

    input,
    select {
        height: 2.8125rem;
        border: solid 1px #b3b4b5;
        border-radius: 4px;
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
        color: #525656;
        font-family: inherit;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        font-size: 16px;
        line-height: 1.56;
        padding: 10px;
        width: 100%;
        &:focus,
        &:focus-visible {
            border: solid 2.5px #0070d1;
            outline: none;
        }
    }

    select {
        border-radius: 4px;
        background: url(/icons/select.png) no-repeat 98% #ffffff;;
        background-size: 10px 17px;
        appearance: none;
        font-size: 16px;
        color: #000;
    }

    h3 {
        font-size: 1rem;
        font-weight: 600;
        margin-top: 1.375rem;
        margin-bottom: .6875rem;
        color: #000;
    }

    .creditCardSpecific {
        div {
            label {
                font-weight: 500;
            }
        }
        #infoRow2 {
            margin-bottom: 0;
        }
    }

    #cardExpirationContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
        @media (min-width: 400px) {
            flex-direction: row;
            .card_expirationYear,
            .card_expirationMonth {
                display: flex;
                flex-direction: column;
                width: 100%;
            }
            .card_expirationYear {
                margin-left: 16px;
            }
        }
    }

    .optional-label {
        span {
            display: none;
        }
    }

    .buttonContainer {

        #sghopcancelbutton {
            float: left;
        }

        #sghopsubmitbutton {
            float: right;
        }

        #sghopsubmitbutton.creditCardSpecific {
            float: right;

            @media(max-width: 500px) {
                float: left;
                width: 100%;
            }
        }

        #selectPaymentTypeButton {
            float: right;

            @media(max-width: 500px) {
                float: left;
                width: 100%;
            }
        }
        .btn-success {
            width: 99%;
            height: 45px;
            border: none;
            border-radius: 22.5px;
            font-size: 16px;
            line-height: 0.94;
            font-weight: 600;
            color: #ffffff;
            background-color: #0c7e47;
            border-color: #0a673a;
            font-family: Urbanist;
            cursor: pointer;

            &:hover {
                background-color: #084f2d;
            }
            &:focus,
            &:active {
                outline: none;
                background-color: #0c7e47;
                box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px #0c7e47;                
            }
        }
    }

    //Error Styling
    .has-error {
        input,
        select {
            border-color: #db0020;
        }
        select {
            background: url(/icons/select-error.png) no-repeat 98% #ffffff;;
            background-size: 10px 17px;
            appearance: none;
        }
        small {
            margin-top: 4px;
            color: #d4281c;
        }
    }

    .cc-error-container {
        #alert-message {
            background-color: #fcbfbb;
            border: 1px solid #d4281c;
        }
    }
}

#fmg-checkout-shared {
    .form-group {
        .list-group {
            &.radio {
                .list-group-item {
                    border-radius: 5px;

                    &.active {
                        box-shadow: 0 0 0 5px #b9d7e6;
                    }

                    label {
                        padding: 12px 20px;
                    }
                }
            }
        }
    }

    #applepay-and-paypal-container {
        display: inline-flex;
        width: 80%;
        justify-content: space-between;

        #paypalParentDiv {
            padding-left: 10px;
        }

        .form-group {
            margin: 0;
            width: 48%;

            .list-group {
                &.paymentSelection {
                    .list-group-item {
                        border-radius: 35px;

                        &#applepayParentLink {
                            margin: 0;
                            border: none;
                            box-shadow: none;

                            label {
                                padding: 0;

                                apple-pay-button {
                                    width: 100%;
                                    vertical-align: middle;
                                    --apple-pay-button-height: 47px;
                                    --apple-pay-button-border-radius: 35px;
                                    --apple-pay-button-padding: 2px 0;
                                }
                            }
                        }
                    }
                }

                #paypalParentLink {
                    margin: 0;

                    #paypalImage {
                        max-width: 90px;
                    }
                }
            }
        }

        &.no-applepay {
            .form-group {
                width: 100%;

                &#applepayParentDiv {
                    display: none;
                }

                &#paypalParentDiv {
                    padding-left: 0;
                }

                .list-group {
                    &.paymentSelection {
                        width: 100%;
                    }

                    #paypalParentLink {

                        #paypalImage {
                            max-width: 5.3125rem;
                        }
                    }
                }
            }
        }
    }

    #other-payments-container {
        label {
            display: block;
            text-align: left;

            align-items: flex-start;
            justify-content: space-between;

            font-size: 16px;
            font-weight: 600;
            line-height: 1.56;

            &.control-label {
                justify-content: start;
            }

            span {
                &.paymentOptionText {
                    margin: auto 0;
                    padding-left: 0;
                    font-weight: 600;
                }
            }
        }

        #afterpayParentLink {
            label {
                > span {
                    &:first-of-type {
                        width: 100%;
                    }

                    &:last-of-type {
                        width: 0;
                    }
                }
            }
        }

        #creditCardParentDiv {
            #creditCardParentLink {
                margin-bottom: 0;

                @media (max-width: 33.9em) {
                    min-height: 3.5rem;
                }

                label {
                    display: flex;
                    .paymentOptionText {
                        text-align: left;
                    }
                }
            }
            &.active {
                padding-bottom: 10px;
                border: 1px solid #0070D1;
                border-radius: 5px;

                > .paymentSelection {
                    #creditCardParentLink {
						min-height: unset;
                        border-bottom-color: #0070D1;
                        border-bottom-right-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                }
            }

            .paymentSelection {
                #creditCardImages {
                    display: flex;
                    flex-direction: row;
                    width: 50%;
                    justify-content: flex-end;

                    img {
                        max-width: fit-content;
                        width: 25%;

                        &:not(:last-of-type) {
                            margin-right: 1%;
                        }
                    }
                }
            }

            .creditCardSpecific {
                padding: 0 2%;

                > .form-group {
                    width: 100%;
                    margin-bottom: .5rem;
                }
            }
        }

        .italicSmall {
            margin-top: 10px;
        }

        .disclaimerContainerv2 {
            margin: 1rem 0;
        }
    }

    @media only screen and (max-device-width: 767px) {
        #applepay-and-paypal-container {
            width: 100%;
        }

        #other-payments-container {
            > .form-group {
                width: 100%;
            }
        }
    }
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: Glyphicons Halflings;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    pointer-events: none;
    top: 27px;
}
.glyphicon-remove:before {
    content: "\e014";
}
.glyphicon-ok:before {
    content: "\e013";
}