/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.wt-fbt-outer{
    padding: 10px;
    float: left;
    margin: 5px;
    width: 100%;
    /*overflow-x: scroll;*/
}

.wt-fbt-cart, .wt-fbt-cart > div, .wt-fbt-variation {
    padding: 5px;

}
.wt-fbt-pdt-section{
    padding: 5px;

    /*overflow-x: scroll;*/
}

.wt-fbt-pdt {
    display: flex !important;
    flex-direction: row;
    padding: 5px;
    align-items: center;
}

.wt-fbt-pdt > div {
    padding: 10px;
}

.wt-fbt-thumbnail{
    /*flex: 0 0 50px;*/
    /*flex: 0 0 10%;*/
    /*width: 50px;*/
    min-width: 50px;

}

.table > .wt-fbt-title{
    flex-grow: 1;
    /*flex: 0 0 30%;*/

}

.wt-fbt-qty, .wt-fbt-price{
    float: right;
}

.table > .wt-fbt-price{
    flex: 0 0 30%;
}
.wt-fbt-section-title{
    padding: 5px;
    color: #131315;
    font-size: 1.5em;
}

.wt-fbt-thumbnail.list{
    width: 50px;
}

/*css for label layout*/
    .wt-fbt-outer-row {
        display: flex;
        flex-direction: row;
    }
    .wt-fbt-images{
        padding: 5px 10px 5px 5px ;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 75%;
        overflow-x: auto;
    }
    .wt-fbt-images > div{
        padding: 5px;

        /*try*/
        width: 100%;
    }

    .wt-fbt-images > .wt-fbt-thumbnail{
        flex: 0 0 20%;
    }
    .wt-fbt-add-to-cart.alt.label {
        padding-bottom: 30%;
    }
    .wt-fbt-title.label{
        text-align: center;
    }


/*Galery layout*/
    .wt-fbt-outer.wt-fbt-gallery{
        border: 1px solid rgba(0,0,0,.05) !important;
        border-radius: 10px;
        width: 98%;
    }   
    .wt-fbt-pdt-section.wt-fbt-gallery{
        display: flex;
        flex-direction: row;
        overflow-y: hidden;
        overflow-x: auto;

    }
    .wt-fbt-pdt-section.wt-fbt-gallery > div{
        display: flex;
        flex-direction: column !important;

        width: 50%;

    }
    .wt-fbt-cart.wt-fbt-gallery {
        display: flex;
        padding: 5px;
        align-items: center;
        border-top: 1px solid rgba(0,0,0,.05) !important;
    } 
    .wt-fbt-cart.wt-fbt-gallery  > div{
        padding: 5px;

    }
    .wt-fbt-total-outer.wt-fbt-gallery {
        display: flex;
        width: 75%;
    }
    .wt-fbt-total-outer.wt-fbt-gallery > div {
        padding: 10px;
        width: 50%;
    }
    
    .wt-fbt-title.wt-fbt-gallery{
        text-align: center;
    }

    .wt-fbt-thumbnail.wt-fbt-gallery, .wt-fbt-thumbnail.label{
        min-width: 100px;
    }
    .wt-plus-icon {
        /*margin-top: 10%;*/
        text-align: center;
        width: 45px !important;
        /*commented to align when image width increased
        position: relative;
        top: 65px;*/
    }
    /* Added to align when image width increased*/
    .wt-plus-icon-spn{
        position: relative;
        top: 23%;
    }
    .wt-fbt-pdt-selection.wt-fbt-gallery {
        align-self: flex-start;
        padding: unset !important;
        position: relative;
        top: 20px;
    }