.admin-bar #stark_side_bar {

    top: 32px;

}



#stark_side_bar.active {

    opacity: 1;

    -webkit-transform: translateX(0);

    transform: translateX(0);

}



#stark_side_bar {

    position: fixed;

    right: 0;

    top: 32px;

    bottom: 0px;

    z-index: 99;

    width: 520px;

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    justify-content: space-between;

    touch-action: none;

    border-radius: 0 !important;

    backdrop-filter: blur(30px);

    -webkit-backdrop-filter: blur(30px);

    background-color: #48445c80 !important;

    transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.25s cubic-bezier(0.77, 0.2, 0.05, 1), top 0.3s;

    transform: translateX(100%);

    left: auto;

    color: #fff;



    .title-bar {

        position: relative;

        z-index: 999;

        opacity: 0;

        transition: opacity 0.5s ease-in-out;



        .modal-back-button {

            width: 38px;

            height: 38px;

            position: absolute;

            top: 10px;

            left: 20px;

            cursor: pointer;

            font-size: 0;

            z-index: 9;

        }



        .modal-back-button::after {

            content: "";

            margin-right: 0;

            background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/sf-1/arr-modal-back-2.svg);

            background-size: contain;

            width: 20px;

            height: 20px;

            position: absolute;

            top: 9px;

            left: 9px;

            transform: rotate(270deg);

        }



        .modal-title {

            position: relative;

            text-align: center;

            height: 36px;

            font-family: 'Poppins';

            background: #00000000;

            color: #ffffff;

            font-size: 16px;

            margin: 0 1em;

            font-weight: 600;

            cursor: pointer;

            display: flex;

            flex-direction: row;

            flex-wrap: nowrap;

            justify-content: center;

            align-items: center;

            border-bottom: 1.5px solid #ffffff52;

        }



        .close-modal {

            width: 36px;

            height: 36px;

            position: absolute;

            top: 0;

            right: 16px;

            cursor: pointer;

            font-size: 0;

            z-index: 9;

        }



        .close-modal::after {

            content: "";

            margin-right: 0;

            background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/cross-title.svg);

            background-size: contain;

            width: 14px;

            height: 14px;

            position: absolute;

            top: 11px;

            right: 12px;

        }



    }



    .stark_modal_page {

        overflow-y: hidden;

        height: 100%;



        h3.stark-page-title {

            display: none;

        }



        #reviews {

            display: flex;

            flex-direction: column;

            flex-wrap: nowrap;

            left: unset !important;

            width: 100%;

            margin: unset;

            height: 100%;



            #comments {

                width: unset !important;

                padding: unset !important;

                height: 100%;



                .reviews-butt-cont {

                    margin: 0 5px;

                    display: flex;

                    flex-direction: column;

                    justify-content: space-between;

                    height: 100%;



                    .all-reviews-butt-cont {

                        display: flex;

                        flex-direction: row;

                        flex-wrap: nowrap;

                        justify-content: space-between;

                        margin: 0 1em 0;

                        border-top: 1.5px solid var(--light-trans-bg);



                        .all-reviews-butt {

                            color: var(--dark-theme-text-color);

                            width: 100%;

                            padding: 7px 20px !important;

                            border-radius: 10px;

                            font-size: 14px;

                            background: var(--dark-orange-clr);

                            height: 38px;

                            margin: 1em 0;

                            text-transform: uppercase;

                            font-weight: 600;

                            text-align: center;

                        }

                    }



                    .reviews-butt {

                        display: flex;

                        flex-direction: column;

                        justify-content: space-between;

                        overflow-y: hidden;

                        height: 100%;



                        .commentlist {

                            width: 100%;

                            margin: 0;

                            list-style-type: none;

                            padding: 1em 1.2em 0;

                            width: 100%;

                            margin: 0;

                            list-style-type: none;

                            padding: 1em 1.2em 0;

                            scrollbar-gutter: stable;

                            display: flex;

                            scrollbar-width: thin;

                            overflow: scroll;

                            gap: 1em;

                            scrollbar-color: #ebeaf2 transparent;

                            flex-direction: column;

                            flex-wrap: nowrap;



                            li.review {

                                background: #00000075 !important;

                                box-shadow: 0 0px 0 0 #e3e3e3;

                                overflow: hidden;

                                max-height: unset;

                                box-sizing: border-box;

                                margin-top: 0em !important;

                                margin-bottom: 0em !important;

                                padding: 0.5em 0.5em 15px !important;

                                width: 100%;

                                display: flex;

                                flex-direction: column;

                                flex-wrap: nowrap;

                                align-items: stretch;

                                height: fit-content;

                                position: unset;

                                border-radius: 15px;



                                .open-full-cont {

                                    display: none;

                                }



                                .comment_container {



                                    .comment-header {

                                        display: flex;

                                        flex-direction: row;

                                        flex-wrap: nowrap;

                                        align-items: center;

                                        width: 100%;



                                        .avatar {

                                            width: 65px !important;

                                            height: 65px !important;

                                            padding: 3px !important;

                                            background: transparent !important;

                                            border-radius: 50%;

                                            margin-right: 10px !important;

                                            line-height: 1;

                                            position: unset !important;

                                            border: unset !important;

                                        }



                                        .comment-meta {

                                            display: flex;

                                            flex-direction: column;

                                            height: 60px;

                                            justify-content: space-between;



                                            .review-product-rating {

                                                display: flex;

                                                flex-direction: row;

                                                flex-wrap: nowrap;

                                                width: fit-content;

                                                justify-content: flex-start;

                                                gap: 0.5em;



                                                .rating {

                                                    display: none;

                                                }



                                                .star-rating::before {

                                                    top: 0;

                                                    left: 0;

                                                    position: absolute;

                                                    background-image: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/a1-star-g.svg);

                                                    content: '';

                                                    display: block;

                                                    height: 100%;

                                                    width: 100%;

                                                    background-size: contain;

                                                }



                                                .star-rating {

                                                    position: relative;

                                                    height: 20px;

                                                    width: 7.1em;



                                                    span::before {

                                                        background-image: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/a1-star-o.svg);

                                                        content: '';

                                                        background-size: contain;

                                                        top: 0;

                                                        position: absolute;

                                                        left: 0;

                                                        width: 100%;

                                                        height: 100%;

                                                    }



                                                    span {

                                                        float: left;

                                                        top: 0;

                                                        left: 0px;

                                                        position: absolute;

                                                        height: 100%;

                                                    }

                                                }

                                            }



                                            .meta {

                                                display: flex;

                                                flex-direction: column;

                                                flex-wrap: nowrap;

                                                align-items: flex-start;

                                                margin: 0;

                                                justify-content: center;



                                                strong {

                                                    color: #ffffff;

                                                }



                                                time.woocommerce-review__published-date {

                                                    color: #ffffff82;

                                                }



                                            }



                                            .comment-media-count {

                                                display: none;

                                            }

                                        }

                                    }



                                    .comment-text {

                                        background: #ffffff32;

                                        border-radius: 12px;

                                        position: relative;

                                        display: flex;

                                        flex-direction: row;

                                        gap: 0.5em;

                                        margin: 1.5em 3em 0px 1em !important;

                                        border: unset !important;

                                        padding: 0px !important;

                                        width: fit-content;

                                        max-width: calc(100% - 4em);



                                        .description {

                                            width: 100%;



                                            p::before {

                                                content: "";

                                                background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/tongue_tr.svg);

                                                background-size: cover;

                                                position: absolute;

                                                top: 0;

                                                left: 0;

                                                width: 30px;

                                                height: 30px;

                                                margin-right: 0;

                                                transform: translate(25px, -24.9px);

                                            }



                                            p {

                                                padding: 3px 0;

                                                min-width: 50px;

                                                display: flex;

                                                margin: 1em 1.5em;

                                            }



                                            .scroll-arrow {

                                                background: #00000075 !important;

                                                backdrop-filter: blur(2px);

                                                box-shadow: unset !important;

                                                z-index: 10 !important;

                                            }



                                            .scroll-arrow::before {

                                                content: '';

                                                background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/arr-w.svg) !important;

                                                background-size: cover !important;

                                                width: 38px;

                                                height: 38px;

                                                position: absolute;

                                                top: 0px;

                                                left: 0px;

                                            }



                                            .comment-text-media {

                                                display: flex;

                                                align-items: flex-start;

                                                width: 100%;

                                                margin: 10px 0;

                                                position: relative;



                                                .scroll-arrow {

                                                    background: #00000075 !important;

                                                    backdrop-filter: blur(2px);

                                                    box-shadow: unset !important;

                                                    z-index: 10 !important;

                                                }



                                                .scroll-arrow::before {

                                                    content: '';

                                                    background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/arr-w.svg) !important;

                                                    background-size: cover !important;

                                                    width: 38px;

                                                    height: 38px;

                                                    position: absolute;

                                                    top: 0px;

                                                    left: 0px;

                                                }



                                                .all-comment-media-cont {

                                                    position: relative;

                                                    overflow: hidden;

                                                    scrollbar-width: thin;

                                                    scrollbar-color: #bababa transparent;

                                                    scrollbar-gutter: stable;



                                                    .all-comment-media {

                                                        list-style-type: none;

                                                        margin: 0px;

                                                        padding: 0;

                                                        display: flex;

                                                        flex-direction: row;

                                                        flex-wrap: nowrap;

                                                        justify-content: flex-start;



                                                        li:first-child {

                                                            margin-left: 1.5em !important;

                                                        }



                                                        li:last-child {

                                                            margin-right: 1.5em !important;

                                                        }



                                                        li {

                                                            margin: 3px;

                                                            display: flex;

                                                            align-items: center;

                                                            border-radius: 6px;

                                                            position: relative !important;

                                                            z-index: unset !important;



                                                            a {



                                                                img {

                                                                    width: 85px !important;

                                                                    object-fit: cover;

                                                                    padding: 0;

                                                                    position: relative;

                                                                    border-radius: 6px;

                                                                    display: block;

                                                                    max-width: unset;

                                                                    max-height: unset;

                                                                    height: unset !important;

                                                                    aspect-ratio: 3 / 4 !important;

                                                                    z-index: 9;

                                                                }

                                                            }

                                                        }



                                                        .all-comment-video-item {



                                                            a::before {

                                                                width: 85px !important;

                                                                z-index: 999 !important;

                                                            }

                                                        }



                                                    }

                                                }

                                            }

                                        }

                                    }

                                }



                                .children {

                                    display: flex;

                                    flex-direction: column;

                                    flex-wrap: nowrap;

                                    padding: 0;



                                    li {



                                        .comment_container {

                                            align-items: flex-end;



                                            .comment-header {

                                                flex-direction: row-reverse;



                                                img.avatar {

                                                    transform: scaleX(-1) !important;

                                                    margin-left: 10px;

                                                }



                                                .comment-meta {

                                                    justify-content: center;



                                                    .meta {

                                                        align-items: flex-end;

                                                    }

                                                }

                                            }



                                            .comment-text {



                                                .description {

                                                    margin: 1.5em 1.5em 0 5em !important;



                                                    p::before {

                                                        content: "";

                                                        transform: translate(15px, -24.9px) scaleX(-1);

                                                    }

                                                }

                                            }

                                        }

                                    }

                                }

                            }

                        }

                    }

                }

            }

        }

    }                                        

}



#progress-bar-container {

    height: 100%;

    width: 100%;

    margin: 0;

    display: none;

    z-index: 9999;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: #0000008f;

    border-radius: unset !important;



    .progress-circle circle {

        stroke: var(--light-trans-bg);

        stroke-linecap: round;

    }



    .progress-circle circle:nth-child(2) {

        stroke: var(--bright-orange-color) !important;

        transition: stroke-dashoffset 0.5s ease;

    }

}



#comment-status-message {

width: 100%;

height: 100%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: #ffffffdb;

border-radius: unset !important;

display: none;

z-index: 9999;

backdrop-filter: blur(2px);

-webkit-backdrop-filter: blur(2px);



    #back-response {

        position: absolute;

        bottom: 0;

        left: 50%;

        transform: translate(-50%, 0px);

        padding: 7px 24px;

        color: #fff;

        background: #000;

        border-radius: 10px;

        font-weight: 600;

        font-family: 'Poppins';

        font-size: 13px;

        margin: 1em 0px;

        text-transform: uppercase;

        cursor: pointer;

        width: 95%;

        text-align: center;

        z-index: 99;

    }



    #complete-anim {



        lottie-player {

            width: 200px !important;

            height: 200px !important;

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -60%);

            z-index: 99;

        }

    }

}





@media screen and (max-width: 900px) {



    #stark_side_bar {

        bottom: 71px !important;

    }

}



@media screen and (max-width: 600px) {



    #stark_side_bar {

        left: 0;

        width: unset !important;

    }

}