@import "../../../styles/generic/variables";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

$open-sans: 'Open Sans';


#sfc-gp-cart{
    fieldset{
        border: 0;
        padding: 0;
        margin: 0;
    }
    .cart-summary.top{
        display: none;
        @media screen and (max-width: 849px) {
            display: block;
            margin-top: 40px;
        }
    }
    .cart-summary.bottom{
        @media screen and (max-width: 849px) {
            display: none;
        }
    }
    .cart-summary{
        padding-right: 0;
        font-family: $open-sans, sans-serif;
        font-size: 14px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: $cart-text;

        @media screen and (min-width: 576px) {
            margin-top: 0;
        }
        @media screen and (min-width: 850px) {
            margin-top: 40px;
        }

        .summary-header {
            display: flex;
            justify-content: space-between;
            margin: 30px 24px 26px;

        }

        .form-wrapper{

            border-radius: 3px;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 1px 0 rgba(0, 0, 0, 0.1);
            border: solid 1px #e9e9e9;
            background-color: white;
            padding: 0;
            float: right;

            @media screen and (min-width: 300px) {
                width: 270px;
            }
            @media screen and (min-width: 576px) {
                width: 558px;
            }
            @media screen and (min-width: 850px) {
                width: 262px;
            }
            @media screen and (min-width: 1160px) {
                width: 358px;
            }
        }
        h4.summary-title {
            text-align: left;
            font-size: 20px;
            font-weight: 600;
            font-style: normal;
            font-stretch: normal;
            line-height: 1.1;
            letter-spacing: normal;
            color: $cart-text;
            display: inline-block;
            margin: 0;
        }
        .edit-link{
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: normal;
            letter-spacing: normal;
            color: #047a9c;
            padding: 6px 0 0 0;
            display: inline-block;
            text-decoration: underline;
        }
        .show {
            display: block;
        }
        .item-qty.show, .cart-summary .show{
            display: inline-block;
        }
        .hidden, .cart-summary .hidden {
            display: none;
        }
        .has-cart-icon:before {
            content: '\f07a';
            font-family: FontAwesome;
            font-size: inherit;
            color: #4d4d4d;
            display: inline-block;
            padding-left: 6px;
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
            -webkit-transform: scale(-1,1);
            transform: scale(-1,1);
        }
        form.form-horizontal{
            .control-label {
                text-align: left;
                display: block;
            }
            .secure-label {
                font-family: $open-sans;
                font-size: 14px;
                font-weight: normal;
                font-style: italic;
                font-stretch: normal;
                line-height: normal;
                letter-spacing: normal;
                color: #6a7070;
                margin-top: 17px;
                text-align: center;
                margin-bottom: 0;
            }
            .secure-label:before {
                content: '\f023';
                font-family: FontAwesome;
                font-size: 16px;
                font-style: normal;
                color: #4d4d4d;
                display: inline-block;
                padding-right: 6px;
            }
            .cart-items {
                border-top: 1px solid $border-color;
            }
            .cart-titles{
                padding: 8px 25px;
                border-radius: 3px;
                border-bottom: solid 1px $border-color;

                .qty {
                    display: table-cell;
                    width: 34px;
                }
                .item{
                    text-align: left;
                    display: table-cell;
                    vertical-align: middle;
                    width: 225px;

                    @media screen and (max-width: 850px) {
                        width: 424px;
                    }
                }
                .price{
                    display: table-cell;
                    width: 51px;
                    text-align: right;
                }
            }
            .cart-body{
                padding: 20px 25px;
                text-align: left;
                padding-bottom: 0;
                margin-bottom: 27px;
                .item-row {
                    .item-qty {
                        display: table-cell;
                        width: 34px;
                        margin-right: 18px;
                        margin-left: 6px;
                    }
                    .item-name{
                        text-align: left;
                        display: table-cell;
                        vertical-align: middle;

                        @media screen and (min-width: 850px) {
                            width: 424px;
                        }
                        @media screen and (min-width: 1160px) {
                            width: 225px;
                        }
                    }
                    #itemTotal, .itemTotal{
                        display: table-cell;
                        width: 51px;
                        text-align: right;
                    }

                }

                @media screen and (min-width: 850px) {
                    width: 214px;
                }
                @media screen and (min-width: 1160px) {
                    width: 312px;
                }

            }
            .total-section {
                padding-right: 25px;
                label{
                    margin-bottom: 0;
                }

                .control-label{
                    text-align: right;
                }
            }
        }
        fieldset.outline.no-legend {
            padding-top: 20px;
        }

        .btn.btn-primary {


        }
        .checkout-button-container {
            float: right;
            margin-right: 24px;
            margin-bottom: 53px;
        }
        .checkout-button-container a {
            &:hover {
                text-decoration: none;
            }
        }
        .checkout-button {
            width: 149px;
            height: 36px;
            border-radius: 18px;
            background-color: #047a9c !important;
            color: #ffffff;
            cursor: pointer;
            font-size: 16px;
            box-shadow: none;
            font-weight: 500;
            border: none;

            &:hover{
                background-image: none;
                background-color: #005a70 !important;
                border: solid 1px  #005a70;
            }
            &:active, &:focus{
                outline: 0;
                -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1977d4;
                box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1977d4;
            }
        }
        .total-section #subTotal{
            text-align: right;
            margin-right: 9px;
        }
        .total-section #shipping {
            text-align: right;
            margin-right: 27px;
        }
        .order-total{
            height: 60px;
            background-color: rgba(216, 216, 216, 0.15);
            margin-bottom: 26px;
            margin-top: 31px;
            text-align: left;
            position: relative;

            .order-total-title{
                position: absolute;
                padding: 21px 26px 18px 26px;
            }
            .order-total-title, .order-total-amount{
                font-size: 14px;
                font-weight: 600;
                font-style: normal;
                font-stretch: normal;
                line-height: 1.29;
                letter-spacing: normal;
                color: $cart-text;
            }

            #orderTotal{
                float: right;
                padding: 21px 25px;;
            }
        }
        .order-total.no-button{
            margin-bottom: 40px;
        }

        .miniCartItems{
            display: table-row;
        }
        .miniCartItems .cell{
            display: table-cell;
        }
    }



}