/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
    [CHECKOUT]
        (CHECKOUT ACCORDIAN PANELS)
        (ORDER SUMMARY)
        (PAYMENT OPTIONS)
        (SHIPPING TYPES)
        (MODIFY DETAILS)
        (USER DEATILS)
        (SHOPPING BAG)
        (ORDER STATUS)

    [MEDIA QUERIES]

*/

/* [CHECKOUT] --------------------------------------------------- */

/* (CHECKOUT ACCORDIAN PANELS) */
#checkout-accordion .panel {
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

    #checkout-accordion .panel + .panel {
        margin-top: .5rem;
    }

#checkout-accordion .panel-title {
    position: relative;
}

#checkout-accordion .panel-heading {
    padding: 0;
    text-align: left;
}

    #checkout-accordion .panel-heading a {
        display: block;
        padding: 0.938rem;
        position: relative;
        text-transform: uppercase;
        font-size: .9rem;
    }

        #checkout-accordion .panel-heading a:not(.modify) {
            padding: 1rem 1rem 1rem 4rem;
        }

        #checkout-accordion .panel-heading a.modify {
            font-size: 0.9em;
            position: absolute;
            top: 0;
            right: 0;
            text-transform: initial;
            background: none !important;
            line-height: 1;
            border: 0 !important;
        }

        #checkout-accordion .panel-heading a:hover,
        #checkout-accordion .panel-heading a:focus {
            text-decoration: none;
        }


        #checkout-accordion .panel-heading a span.no {
            display: inline-block;
            height: 100%;
            left: 0;
            margin-right: 0.938rem;
            padding: 1rem 0;
            position: absolute;
            text-align: center;
            top: 0;
            font-size: 1em;
            width: 2.5rem;
        }


            #checkout-accordion .panel-heading a span.no:after {
                height: 100%;
                position: relative;
                content: '';
                display: inline-block;
                vertical-align: top;
            }

#checkout-accordion .panel-title .collapsed + .modify {
    color: #fff;
}


#checkout-accordion .bordered-box {
    margin-bottom: 1.88rem;
}

#checkout-accordion .btn-xs {
    margin-top: 0.44rem;
}

#checkout-accordion .panel-title {
    margin-bottom: 0;
    font-size: 1.1rem;
}

#checkout-accordion .panel-body {
    padding: 1rem;
}

#checkout-accordion .panel-heading {
    margin-top: -1px;
}

#checkout-accordion .panel-body {
    border-top: 0;
}

.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    vertical-align: middle;
    margin-right: .3rem;
}

#button-confirm {
    cursor: pointer;
}
/* (CHECKOUT ACCORDIAN PANELS) END */


/* (ORDER SUMMARY) */

#checkout-accordion .order-summary {
    margin-top: 0;
}
/* (ORDER SUMMARY) END */


/* (PAYMENT OPTIONS) */

#checkout-accordion .payment-options.bordered-box {
    margin-top: 1.56rem;
    padding-top: 0.63rem;
    padding-bottom: 0.63rem;
}

/* (PAYMENT OPTIONS) END */

/* (SHIPPING TYPES) */
#checkout-accordion .shipping-types.bordered-box {
    margin-bottom: 1.25rem;
    margin-top: 0;
}

#checkout-accordion .shipping-options-box .cost {
    margin-left: .5rem;
}
/* (SHIPPING TYPES) END */


/* (MODIFY DETAILS) */
#checkout-accordion .modify.CheckOutSignInModifyLink fa {
    margin-right: 0.25rem;
}

/* (MODIFY DETAILS) END */


/* (USER DEATILS) */
#checkout-accordion .checkout-content #newuser, #checkout-accordion .checkout-content #reguser {
    margin-bottom: 0.938rem;
}

/* (USER DEATILS) END */


/* (SHOPPING BAG) */
#checkout-accordion .shopping-bag-details {
    margin-top: 0;
}

#checkout-accordion .container-shopping-cart .sub-section-heading {
    padding: 1.25rem 0;
    text-transform: uppercase;
}

div#checkout-accordion div#divShopInfo.alert.alert-success {
    margin-bottom: 0;
    margin-top: 0.938rem;
}

/* (SHOPPING BAG) END */


/* (ORDER STATUS) */

.container-order-confirmation .icon {
    width: 10%;
    padding-right: 1.25rem;
    display: table-cell;
    font-size: 2.63rem;
    text-align: right;
    vertical-align: top;
}



.text-order-success .fa, .text-order-payment-failed .fa, .text-order-payment-pending .fa {
    font-size: 1.5rem;
    color: #00af33;
    width: 40px;
    height: 40px;
    line-height: 35px;
    border: 2px solid #00af33;
    border-radius: 50%;
    background: #c0efce;
    text-align: center;
    margin-right: .5rem;
}

.text-order-payment-failed .fa, .text-order-payment-pending .fa {
    color: red;
    border: 0;
    background: none;
    width: auto;
    height: auto;
    font-size: 2.5rem;
}

.text-order-payment-pending .fa {
    color: #e25831;
}

.order-info {
    background: #fdf9ee;
    padding: 1rem;
    display: inline-block;
}

.type-order-status .order-info {
    font-size: 0.81rem;
}

.instructions {
    color: #e25831;
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.1;
    margin-bottom: .5rem;
}



.text-order-success, .text-order-payment-failed, .text-order-payment-pending {
    font-size: 1.8rem;
    line-height: 1.1;
    color: #00af33;
    margin-bottom: 1.5rem;
}

.text-order-payment-failed {
    color: red;
}

.text-order-payment-pending {
    color: #e25831;
}

svg {
    width: 40px;
    display: block;
}

.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

    .path.circle {
        -webkit-animation: dash .9s ease-in-out;
        animation: dash .9s ease-in-out;
    }

    .path.check {
        stroke-dashoffset: -100;
        -webkit-animation: dash-check .9s .35s ease-in-out forwards;
        animation: dash-check .9s .35s ease-in-out forwards;
    }


@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes dash-check {
    0% {
        stroke-dashoffset: -100;
    }

    100% {
        stroke-dashoffset: 900;
    }
}

@keyframes dash-check {
    0% {
        stroke-dashoffset: -100;
    }

    100% {
        stroke-dashoffset: 900;
    }
}

/* (ORDER STATUS) END */

/* [CHECKOUT] END --------------------------------------------------- */



/* [MEDIA QUERIES] --------------------------------------------------- */

@media screen and (max-width: 767.98px) {
    #checkout-accordion#checkout-accordion .panel-body {
        margin-left: 0;
    }

    .shopping-bag .order-summ-cart-total {
        font-size: 1.2rem;
        margin-bottom: 3rem;
    }

    #checkout-accordion .panel-heading a {
        font-size: 1rem;
    }

    .text-order-success, .text-order-payment-failed, .text-order-payment-pending {
        font-size: 1.5rem;
    }

        .text-order-success span {
            width: calc(100vw - 80px);
        }
}


/* [MEDIA QUERIES] END --------------------------------------------------- */