@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css');

/* *********** DEALS Ribbon **************** */


 
#shop-content div.single-product.grid-view.deals,
#shop-content tr.single-product.list-view.deals,
div.featured_products div.featured-product.deals,
div.featured_products div.single-product.grid-view.deals,
table.cart-product-list tr.cart-single-product.deals  {
    position: relative;
    overflow: hidden;
}

.ribbon_inner {
    /* Displayed at the top left corner */
    left: 0px;
    position: absolute;
    top: 0px;

    /* Size */
    height: 100px;
    width: 100px;

    /* Hide the part of its children which is displayed outside */
    overflow: hidden;
}

.ribbon_ribbon {
    cursor: pointer;
    /* Position */
    left: 14px;
    position: absolute;
    top: 14px;

    /* Size */
    height: 24px;
    width: 180px;

    /* Displayed diagonally */
    transform: translate(-75px, -8px) rotate(-45deg);

    /* Background color */
    background-color:#0068a2;

    /* Centerize the text content */
    text-align: center;
    padding-right: 16px;
}


.ribbon_ribbon:after {
   content: "DEAL";
   color: white;
   font-weight: bold;
}


/* *********** DEALS POPOVER **************** */

    #dealsPopup {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.6);
        z-index: 5999;
        width: 100%;
        height: 100%;
        display: none;
    }

        #dealsPopup .content {
            width: 800px;
            height: 400px;
            margin: auto;
            margin-top: 200px;
            background-color: white;
            padding-top: -4px;
            padding-left: 0px;
            max-width: 80% !important; 
        }

            #dealsPopup .content .header {
                background-color: #0685f1;
                height: 40px;
                padding-top: 2px;
                padding-left: 4px;
                padding-right: 4px;
                color: white;
            }

                #dealsPopup .content .header .close {
                    float: right;
                    font-size: 24px;
                    font-weight: 500;
                    color: white;
                    text-shadow: none;
                    opacity: 1;
                    margin-top: 8px;
                    margin-right: 8px;
                }

                #dealsPopup .content .header .title {
                    float: left;
                    font-size: 24px;
                    font-weight: 500;
                    color: white;
                }

            #dealsPopup .content .body {
                padding-top: 10px;
                padding-left: 0px;
                padding-right: 10px;
            }

                #dealsPopup .content .body li {
                    padding-top: 8px;
                    list-style: none;
                }

                    #dealsPopup .content .body li:before {
                        content: '\f005';
                        font-family: FontAwesome;
                        font-size: 18px;
                        font-weight: normal;
                        font-style: normal;
                        color: red;
                        padding-right: 8px;
                    }

                    #dealsPopup .content .body li.campaign:before {
                        content: '\f02d';
                        font-family: FontAwesome;
                        font-size: 18px;
                        font-weight: normal;
                        font-style: normal;
                        color: red;
                        padding-right: 8px;
                    }