/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
/* CSS for mobile devices */
@media only screen and (max-width: 767px) {
  /* Write CSS rules specific to mobile devices here */
  /* For example, you can hide certain elements or modify their styling */
    .wt-fbt-outer{
        padding: 10px;
        /*float: left;*/
        margin: 5px;
        width: 100%;
    }


    .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{
        min-width: 50px;

    }  

}

/* CSS for desktop devices */
@media only screen and (min-width: 768px) {
    /* Write CSS rules specific to desktop devices here */
    /* For example, you can show additional elements or modify their styling */


    .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;
        }


    /*Gallery 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;
    }

    .wt-fbt-outer.wt-fbt-layout-popup {
        position: fixed;
        top: 15%;
        left: 24%;
        z-index: 999;
        bottom: 30%;
        right: 30%;
        width: 50%;
        border-radius: 12px;
        height: 75%;
        background-color: #ffff;
        box-shadow: 0px 3px 30px 0px #191E2333;
        z-index: 1000;
    }

    .wt_fbt_overlay {
        position: absolute;
        z-index: 999;
        background: #a7aaad5e;
        width: 100%;
        height: 100%;
    }

    .wt-fbt-checkout{
        /*margin: 8px;*/
        background-color: #EEEEEE;
        width: 50%;
        /*height: 100%;*/
        padding: 1px;
    }
    .wt-fbt-layout-popup .wt-fbt-pdt-section{
        /* height: 60%; */
        overflow-y: scroll;
    }
    .wt-fbt-layout-popup .wt-fbt-cart{
        height: 47%;
    }
    .wt-fbt-layout-popup .wt-fbt-popup-footer{
        height: 10%;
        border-radius: 12px, 12px;
        border-top: 1px solid #BDC1C6;
        padding: 10px 6px 10px 4px;
            text-align: center;
    }
    .wt-fbt-popup-inner{
        padding: 0px 30px;
        display: flex;
        flex-direction: column;
        height: 85%;
    }
    .wt-fbt-popup-footer input{
        width: 48%;
    }
    .wt_fbt_popup_close{
        display: inline-block;
        text-align: right;
        width: 100%;
        cursor: pointer;
    }
    .wt-fbt-checkout-single.fbt-product{
        background-color: #333333;
        color: #ffffff;
    }
    .wt-fbt-shopping.fbt-product, .wt-fbt-checkout-single.fbt-cart{
        background-color: #eeeeee;
        color: #333333;
    }
    

}