@dark_blue: #262262; //Purple
@light_blue: #ca2b62; //Pink 
body.store{
    font-family: "OpenSans";
    font-size: 1.0em;
}
.wrapper{
    width: 1200px;
    margin: 0 auto;
}
.title a{
    text-decoration: none;
}
#slider .fader-items .items:first-child{
    position: relative;
}
h1.title{
    background: transparent;
    margin: 0;
    color: white;
    width: auto;
    display: inline-block;
    
    display: flex;
    content-align: center;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 4em;
    a{ 
        color: white;
        background: rgba(29, 58, 80, 0.75);
        padding: 7px 35px;
    }
}
#login-panel{
    background-color: @dark_blue;
    text-align: center;
    padding: 15px 0;
    
    .customer-login{
        display:inline-block;
        vertical-align:middle;

        h1.login{
            vertical-align:middle;
            display:inline-block;
            font-size: 1.43em;
            color: @light_blue;
            text-transform: uppercase;
            font-weight: normal;
            padding: 0 10px;
            margin:0;                
        }
        form{
            display:inline-block;
            vertical-align:middle;

            input[type="text"], input[type="password"]{
                display:inline-block;
                vertical-align:middle;
                padding: 5px 10px;                    
            }
            input[type="submit"]{
                display:inline-block;
                vertical-align:middle;
                background-color: @light_blue;
                border:1px solid @light_blue;
                color: #FFF;
                font-size: 0.87em;
                padding: 5px;   
            }
        }
        #options{
            margin:0 20px;
            display:inline-block;
            vertical-align:middle;
            .advanced{
                color: @light_blue;
                display:inline-block;
                font-size: 1.2em;
                margin: 0 0.1em;
                a{
                    background-color: @light_blue;
                    color: #FFF;
                    text-decoration: none;
                    padding: 5px;
                    font-size: 0.7em;
                    &:nth-child(even){
                        //background-color: 
                        }
                }
            }
        }
    }
    .setup-link{
        display:inline-block;
        vertical-align:middle;
        padding: 0 25px; 
        a{
            background-color: #FFF;
            text-decoration:none;
            padding: 5px 10px;
            color: @light_blue;
        }   
    }
    .cart{
        display:inline-block;
        vertical-align:middle;
        a{
            color: #FFF;
            text-decoration: none;
            font-size: 1.12em;
            border: 1px solid #FFF;
            padding: 5px 15px 5px 0;
            i{
                margin-right: 5px;
                padding-left:5px;
            }
            img{
                vertical-align:-8px;
                margin:5px;
            }
        }    
    }
}

#login_contianer, #account_container, #order_view, .checkout-forms{
    box-sizing: border-box;

    & > div {
        width: 44%;
        margin: 0 3%;
        box-sizing: border-box;

        h1{
            background: @dark_blue;
            color: white;
            margin: 0; padding: 5px 10px;
        }
        .container{
            background: white;
            padding: 20px 20px;
            box-sizing: border-box;
            width: auto !important;
            /*label{ margin-bottom: 10px; display: inline-block; }*/
            input, select, textarea{
                width: 100%;
                box-sizing: border-box;
                padding: 5px 3px;
                margin-bottom: 7px;

                &[type="radio"]{
                    width: auto;    
                }
                &[type="submit"]{
                    float: right;
                    width: 120px;
                    background-color: #4fa4b0;
                    border: 1px solid #4fa4b0;
                    color: #FFF;
                    font-size: 0.87em;
                    padding: 5px;
                }
            }
        }

        &.login { float: left; }
        &.register { float: right; }
    }
}
form.checkout{
    input[type="submit"]{
        margin: 10px 3%;
        float: right; 
    }
}
.cart-bordered{
    padding: 20px 0 0;
}
.button{
    background-color: @light_blue;
    font-family: "Open Sans";
    width: auto;
    cursor: pointer;
    border: 0;
    color: #FFF;
    padding: 5px;
    font-size: 0.96em;
    display:inline-block;
    text-decoration: none;
    text-transform: uppercase;
}
#title-container{
    border-bottom: 1px solid @light_blue;
    padding-bottom: 10px;
    margin-bottom: 15px;
    h1.category-title, h3{
        font-size: 1.81em;
        color: @dark_blue;
        margin: 0;       
        text-transform: uppercase;        
        font-weight:600;
        display: inline-block;
    }
    a{
        float:right;
        margin-top: 10px;
    }
}
#store-content{
    background-color: #f5f5f5;
    padding: 50px 0;
    #store-products{
        .left{
            float:left;
            width: 25%;
            box-sizing: border-box;    
        }
        .right{
            float:left;
            width: 75%;
            box-sizing: border-box;
            padding: 0 10px;    
        }
    }

}
ul.catalogue-list{
    background-color: #FFF;
    padding: 0;
    margin: 0;
    list-style:none;
    padding: 20px 30px;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    ul.children, ul.grand-children{
        display:none;
    }
    li{
        &.hasChildren{
            position: relative; 
            a{
                display:inline-block;

            }
        }
        &.active a.active {
            color: @light_blue;
        }
        border-bottom: 1px solid #dedede;
        a{
            text-decoration: none; 
            display:block;
            padding: 10px 15px;
            color: #000;
            &:hover{
                color: @light_blue;
            }    
        }
        &:last-child{
            border-bottom:none;
        }
        span.drop-down{
            padding: 10px 5px;
            color: @dark_blue; 
            position: absolute;
            top:0;
            right:0;   
        }

    }
}
#store-content{
    section.product{
        float:left;        
        width: 33.333%;
        &:nth-of-type(3n-2){
            .product-container{
                padding-left:0;
            }    
        }
        &:nth-of-type(3n-0){
            .product-container{
                padding-right:0;
            }
        }
        .product-container{
            box-sizing: border-box;
            width: 100%;
            padding: 10px;
            .product-image{
                background-size: cover;
                background-repeat:no-repeat;
                background-position: center center;
                height: 272px;
                background-color: #FFF;
            }
            .product-decriptions{
                text-align: center;
                a{
                    text-decoration: none;
                    color: @light_blue;
                }
                .product-title{
                    font-size: 1.26em;
                    text-transform: capitalize;
                    font-weight: 600;
                    letter-spacing: -2px;
                }
                .additional-info{
                    ul{
                        padding: 0;
                        margin:0;
                        list-style:none;
                        li.price{
                            font-size: 1.26em;
                            font-weight: 600;
                            color: @dark_blue;
                            letter-spacing: -2px;
                        }
                        li.sku{
                            display:none;
                        }
                    }
                }
                .product-actions{
                    display:none;

                }
            }
        }
    }
}
#product-details{
    #details-gallery{
        float: left;
        width: 48%;
        ul#image-gallery{
            background-color: #FFF;
            li{
                height: 429px;
                background-position: center center;
                background-size: cover;
            }    
        }
    }
    #details-basic-info{
        float:left;
        width: 52%;
        padding:0 0 0 40px;
        box-sizing: border-box;
        .product-name{
            font-size: 2.54em;
            color: @light_blue;
            letter-spacing: -2px;
            font-weight: normal;
            text-transform: capitlize;
            margin:0;
            padding: 10px 0 20px; 
        }
        .product-description{
            font-size: 0.875em;
        }
        .product-price,.product-pricing{
            font-size: 2.11em;
            color: @dark_blue;
            display:inline-block;
            vertical-align: middle;

            .price_change{
                display:inline-block;
                vertical-align: middle;
            }
            .select-box{
                display:inline-block;
                vertical-align: 1px;
                margin-left: 20px;
            }
        }
        .product-box{
            display:inline-block;
            vertical-align: middle;
            .qty{
/*                display:none;*/
            }
        }
        .product-attrib{
            display:inline-block;
            vertical-align: middle;
        }
        form[name="Product"]{
            display:inline-block;
            vertical-align: top;
            label{
                display:none;
            }
            input[type="text"]{
/*                display:none;*/
            }
            input[type="submit"]{
                background-color: @light_blue;
                color: #FFF;
                padding: 10px;
                border:none;
                font-size: 1.13em;
                margin-left: 20px;
            }
        }
    }
    #details-product-info{
        .audio{
            padding: 15px;
            background-image: url(/images/store/play.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            border: 0;
            background-color: transparent;
        }
        .details-product-sub-products{
            h3{
                font-size: 2.0em;
                font-weight:normal;
                color: @dark_blue;
            }
            table{
                width: 100%;
                text-align: center;
                th {
                    background-color: @dark_blue;
                    color: #FFF;
                    font-weight: normal;
                    padding: 10px;
                }
                tr {
                    &:nth-child(odd){
                        background-color: #efefef;
                    }
                }
                td {
                    padding: 10px;

                    a {
                        padding: 5px;
                        background: @dark_blue;
                        color: white;
                        text-decoration: none;
                        display: block;
                    }
                }
            }
        }
    }
}

.float{
    &.left{ float: left; }
    &.right{ float: right; }
}

#checkout-process{
    .steps{
        background-color: @light_blue;
        text-align:center;
        padding: 10px;
        .step{
            display:inline-block;
            padding: 5px 20px;
            font-size: 1.2em;
            color: #FFF;
            text-transform: uppercase;
        }
        .active{
            border: 1px solid #FFF;
        }    
    }
}
table.list-table{
    width: 100%;
    text-align: center;
    th{
        background-color: @dark_blue;
        color: #FFF;
        font-weight: normal;
        padding: 10px;
    }
    tbody{
        tr{
            &:nth-child(odd){
                background-color: #efefef;
            }
            td { padding: 10px; }
        }
    }
    tfoot {
        tr {
            background-color: transparent;
            td{ padding: 5px; }

            &:first-child{
                td{ padding-top: 15px; }
            }
        }
    }
}

#account_container, #order_view{
    table.list-table th{
        background-color: @light_blue;    
    }
}

/* Quantity button */
#product-details #details-basic-info .product-box {
    .inner-box {
        display: flex;
    }
    .qty {
        display: flex;
        .input-group-append, .input-group-prepend {
            button {
                background: #ca2b62;
                color: #fff;
                border: none;
                border-radius: 0.25rem;
                padding: 0.175rem 0.75rem;
                font-weight: bold;
                outline: 1px solid white;
                outline-offset: -3px;
        /*        width: 160px;*/
                margin: 0 auto;
                text-transform: uppercase;
            }
        }
        .input-group-append, .input-group-prepend {
            display: -ms-flexbox;
            display: flex;
        }
        .input-group-prepend {
            margin-right: -1px;
            button {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
        .input-group-append {
            margin-left: -1px;
            button {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        }
        input {
            width: 2.5rem;
            padding-left: 0.5rem;
            font-size: 1.5em;
            text-align: right;
        }
    }
}