@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

.dr-load-more-btn{
    border: none;
    background: var(--primary-color);
    color: #fff;
    border-radius: .25rem;
    text-align: center;
    display: block;
    width: 100%;
    padding: 1rem 1.5rem;
    cursor: pointer;
    margin-top: 1rem;
    transition: all .3s ease;
    &:hover{
        background: #259876;
    }
}
.recipe_page_delicious_recipes_analytics_dashboard{
    background-color: #fff;
}
#dr-analitics-dashboard-page-wrapper{
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--font-color);
    padding: 80px 0;
    ::root{
        --font-color: #11142D;
        --font-color-rgb: 17, 20, 45;
    }
    *{
        box-sizing: border-box;
    }
    .container{
        max-width: 1200px;
        padding: 0 15px;
        width: 100%;
        margin: 0 auto;
    }

    .dr-ad__header{
        margin-bottom: 30px;
        .dr-subtitle{
            font-size: 1.375rem;
            margin-bottom: 10px;
        }
        .dr-title{
            font-size: 3rem;
            font-weight: 500;
            margin-bottom: 15px;
            margin-top: 0;
        }
        small{
            font-size: 1rem;
        }
    }
    .dr-ad__card{
        border-radius: 20px;
        padding: 40px 45px;
        background-color: #fff;
        display: flex;
        align-items: center;
        position: relative;
        &::before{
            content: "";
            height: 36px;
            width: calc(100% - 22px);
            border-radius: 20px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -6px;
            margin: auto;
            z-index: -1;
        }
        &::after{
            content: "";
            height: 36px;
            width: calc(100% - 38px);
            border-radius: 20px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -10px;
            margin: auto;
            z-index: -1;
        }
        .dr-ad__card-icon{
            margin-right: 20px;
            svg{
                path{
                    fill: var(--font-color);
                }
            }
        }
        .dr-ad__card-title{
            font-size: 1.125rem;
            font-weight: 500;
        }
        .dr-ad__card-total-number{
            font-size: 3rem;
            font-weight: 600;
            flex: 1;
            text-align: right;
        }
        &.total-recipes{
            background-color: #0FB682;
            color: #fff;
            svg{
                path{
                    fill: #fff;
                }
            }
            &::before, &::after{
                background-color: #E0EDED;
            }
        }
        &.total-likes{
            background-color: #F25C5C;
            color: #fff;
            svg{
                path{
                    fill: #fff;
                }
            }
            &::before, &::after{
                background-color: #FAEBEB;
            }
        }
        &.total-wishlist{
            background-color: #FC7245;
            color: #fff;
            svg{
                path{
                    fill: #fff;
                }
            }
            &::before, &::after{
                background-color: #FBEEE9;
            }
        }
        &.total-ratings{
            background-color: #FFB24E;
            color: #fff;
            svg{
                path{
                    fill: #fff;
                }
            }
            &::before, &::after{
                background-color: #FBF4EA;
            }
        }
        &.total-submission{
            background-color: #007274;
            color: #fff;
            svg{
                path{
                    fill: #fff;
                }
            }
            &::before, &::after{
                background-color: #E3F4EF;
            }
        }
        &.total-pending-recipes{
            background-color: #56B9D8;
            color: #fff;
            svg{
                path{
                    fill: #fff;
                }
            }
            &::before, &::after{
                background-color: #EAF3F7;
            }
        }
    }
    .dr-ad__report-cards{
        margin: 0 -15px;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 70px;
        .card-item{
            padding: 15px;
            max-width: 100%;
            flex: 0 0 100%;
            @media(min-width: 768px){
                max-width: 50%;
                flex: 0 0 50%;
            }
            @media(min-width: 1200px){
                flex: 0 0 33.333%;
                max-width: 33.333%;
            }
        }
    }

    hr{
        height: 0;
        width: 100%;
        border-top: 1px solid rgba(var(--font-color-rgb), .05);
    }

    .dr-ud__report-bar-block{
        box-shadow: 0 5px 57px rgba(#11142D, .04);
        padding: 45px 45px 60px;
        border-radius: 25px;
        position: relative;
        background-color: #fff;
        margin-top: 60px;
        margin-bottom: 75px;
        &::before{
            content: "";
            height: 100%;
            width: calc(100% - 60px);
            background-color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -15px;
            margin: auto;
            z-index: -1;
            box-shadow: 0 35px 57px rgba(#11142D, .04);
            border-radius: 25px;
        }
        .dr-ud__card-header{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 35px;
            .dr-title{
                font-size: 1.5rem;
                font-weight: 500;
            }
            select{
                padding: 10px 12px;
                border-radius: 10px;
                border: 1px solid rgba(#0FB682, .1);
                color: #0FB682;
                font-size: .875rem;
                font-weight: 500;
                line-height: 1;
                padding-right: 24px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.758' height='7.793' viewBox='0 0 12.758 7.793'%3E%3Cpath id='Path_23595' data-name='Path 23595' d='M1423.2,791.035l4.965-4.964,4.965,4.964' transform='translate(1434.542 792.449) rotate(180)' fill='none' stroke='%230fb682' stroke-linecap='round' stroke-width='2'/%3E%3C/svg%3E%0A");
                background-size: 12px 12px;
            }
        }
    }

    .dr-ud__recipe-table-block{
        margin-top: 60px;
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 5px 57px rgba(#11142D, .04);
        .dr-ud__recipe-tab-buttons{
            padding: 0 75px;
            box-shadow: 0 25px 57px rgba(#11142D, .04);
            .dr-ud__tab-btn{
                padding: 45px 0 30px;
                font-size: 1rem;
                font-weight: 500;
                border: none;
                background: none;
                margin-right: 60px;
                cursor: pointer;
                opacity: .6;
                position: relative;
                &::before{
                    content: "";
                    width: 0;
                    height: 2px;
                    background-color: #0FB682;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;
                    transition: all .3s ease;
                }
                &:hover{
                    opacity: 1;
                }
                &.active{
                    &::before{
                        width: 100%;
                    }
                }
            }
        }
        .dr-ud__table-wrapper{
            padding: 50px 45px;
            .dr-status{
                font-size: .875rem;
                font-weight: 500;
                line-height: 1;
                padding: 6px 10px;
                border-radius: 5px;
                &::before{
                    content: "";
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    margin-right: 8px;
                    display: inline-block;
                }
                &.status-published{
                    background-color: rgba(#0FB682, .05);
                    &::before{
                        background-color: #0FB682;
                    }
                }
                &.status-pending{
                    background-color: rgba(#F25C5C, .05);
                    &::before{
                        background-color: #F25C5C;
                    }
                }
            }
            .dr-view-count{
                font-size: .875rem;
                font-weight: 500;
                color: rgba(var(--font-color-rgb), .8);
                &::before{
                    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.96' height='8.204' viewBox='0 0 12.96 8.204'%3E%3Cg id='noun_Eye_2307' opacity='0.7'%3E%3Cpath id='Path_30814' data-name='Path 30814' d='M6.48,8.2C3.02,8.2.308,4.526.194,4.369L0,4.1l.194-.267C.308,3.678,3.02,0,6.48,0s6.172,3.678,6.286,3.835l.194.267-.194.267C12.652,4.526,9.94,8.2,6.48,8.2ZM1.139,4.1C1.808,4.913,3.983,7.3,6.48,7.3S11.153,4.914,11.821,4.1C11.152,3.291,8.977.908,6.48.908S1.807,3.289,1.139,4.1Z' fill='%230fb682'/%3E%3Ccircle id='Ellipse_183' data-name='Ellipse 183' cx='2.512' cy='2.512' r='2.512' transform='translate(3.968 1.59)' fill='%230fb682'/%3E%3C/g%3E%3C/svg%3E%0A");
                    display: inline-block;
                    margin-right: .5rem;
                }
            }
            table{
                width: 100%;
                text-align: left;
                border-collapse: collapse;
                .d-flex{
                    display: flex;
                    align-items: center;
                }
                .text-center{
                    text-align: center;
                }
                .dr-action-btn{
                    padding: 10px 12px;
                    border-radius: 5px;
                    transition: all .3s ease;
                    line-height: 1;
                    background: none;
                    path{
                        transition: all .3s ease;
                    }
                    &.btn-edit{
                        border: 1px solid rgba(#0FB682, .1);
                        svg{
                            path{
                                fill: #0FB682;
                            }
                        }
                        &:hover{
                            background-color: #0FB682;
                            svg{
                                path{
                                    fill: #fff;
                                }
                            }
                        }
                    }
                }
                .dr-ratings-wrapper{
                    svg{
                        margin-right: 5px;
                    }
                    .dr-rating-point{
                        color: rgba(var(--font-color-rgb), .8);
                    }
                }
                .dr-wishlist-wrapper{
                    svg{
                        margin-right: 5px;
                    }
                    .dr-wishlist-count{
                        color: rgba(var(--font-color-rgb), .8);
                    }
                }
                tr{
                    border-bottom: 1px solid rgba(#11142D, .07);
                }
                th{
                    padding: 20px 15px;
                }
                th, td{
                    padding: 15px;
                    font-size: .875rem;
                    font-weight: 500;
                    color: rgba(var(--font-color-rgb), .4);
                }
            }
            .dr-recipe-img{
                margin-right: 15px;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                overflow: hidden;
                background-color: var(--primary-color);
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    vertical-align: middle;
                }
            }
            a{
                color: #0FB682;
                font-weight: 500;
                text-decoration: none;
                font-size: 1rem;
            }
        }
    }
}