
.container_outer_fb_comment_box {    
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
}

.container_for_fb_like_button {
    width: 114px;
    min-height: 32px;
    vertical-align: top;
    margin: 0 32px;
    font-size: 12px;
    background: #fff;
    cursor: default;
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 0px;
    margin-bottom: -10px;
}

.navigation_fb_comment_box_top {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 10px;
    align-items: center;
    padding-top: clamp(10px, 1.5vw, 15px);
    list-style: none;
    margin-block: unset;
    padding-inline-start: unset;
    text-decoration: none;
    color: gray;
    font-weight: 500;
    font-size: clamp(9px, 0.9vw, 12px);
    padding-bottom: 5px;
    border-bottom: solid 1px #cdcdcd;
}

.navigation_fb_comment_box_top a {
    margin: 0 5px;
    color: #dbd0cc;
}
.navigation_fb_comment_box_top a:hover {
    font-weight: 800;
    cursor: pointer;
    color: #4c4c4c;
}

.navigation_fb_comment_box_top a.active {
    font-weight: 500;        
    color: #848484;
}

.container_menu_and_content_fb_comment_box {
    border-radius: clamp(8px, 0.85vw, 16px);    
    background-color: #fff;    
    border-bottom: solid #ffffff 5px;
}

.comment-box-hr {
    margin-block-start: 5px;
    margin-block-end: 0px;
    border-width: 1px;
}


.data_box p {
    font-size:  clamp(10px,1.05vw,16.5px);
    line-height: clamp(13px,1.4vw,24px);
    color: #000;
    margin: unset;       
    margin-bottom: 10px; 
}

.data_box .name_box {
    font-size:  clamp(10px,1.05vw,16.5px) !important;
    font-weight: bold;
    color: #2A5EA1;
    font-family: arial,Helvetica,Helvetica Neue,sans-serif;
}

.container_outer_fb_comment_box .container_menu_and_content_fb_comment_box {
    border-radius: clamp(8px, 0.85vw, 9px);
}


.fb-comment-inner {    
    padding-right: clamp(11px, 1.2vw, 12px);
    padding-left: clamp(11px, 1.2vw, 12px);
    display: flex;
    flex-direction: column;
    /*height: 335px;*/
    width: clamp(200px, 25vw, 340px);
}

#selected {
    border: none !important;
    min-height: unset !important;
    height: clamp(180px, 24vw, 340px) ;    
}

.container_menu_and_content_fb_comment_box div#selected {
    padding: 0 !important;    
    margin: 0;    
}

.container_menu_and_content_fb_comment_box div#selected .parent_box {
    padding: 0;
}

.container_menu_and_content_fb_comment_box div#selected::-webkit-scrollbar, #content_from_user_reviews::-webkit-scrollbar {
    width: 10px;        
}

.container_menu_and_content_fb_comment_box div#selected::-webkit-scrollbar-thumb, #content_from_user_reviews::-webkit-scrollbar-thumb {
    border-radius: 12px;
    background-color: #d9d9d9;
}

.container_outer_fb_comment_box .container_menu_and_content_fb_comment_box .fb-comment-inner .tab-content .tab-pane {
    margin: 0 -10px 0 0;        
}


#selected button {
    display: none;
}

.image_box img {
    height: auto;
    width: 38px;
    border-radius: 3px;
}

#content_from_fb_comment_plugin {
    margin-top: 15px;
}

#content_from_user_reviews {
    display: none;
    overflow: scroll;
    max-height: clamp(220px, 24vw, 340px);
    padding-right: 10px; 
    box-sizing: border-box;
    padding-bottom: 0px;
    margin-top: 20px;
    padding-left: 3px;
    height: clamp(170px, 22vw, 270px);
}

.user_review_summary_and_full_review {
    font-size: clamp(10px, 1.0vw, 15px);
    line-height: clamp(12px, 1.2vw, 16px);
}

.user_name_also_header {
    font-weight: 600;
    margin-bottom: 3px;
    color: #262626;
    margin-bottom: 7px;
}

.user_review_summary {
    margin-bottom: 10px;
}

.user_review_summary span {
    color: blue;
}

.user_review_summary span:hover {
    cursor: pointer;
}

.navigate_back_from_user_review a {
    cursor: pointer;
    padding-bottom: 0px;
    display: block;
    margin: 0px 0px 10px 0px;
}

/* Override styles for screen widths from 768px to 481px */
@media screen and (max-width: 768px) {
    .container_outer_fb_comment_box {
        position: absolute;          
        top: clamp(170px,44vw,362px);      
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
    }    

    .fb-comment-inner {
        width: unset;
    }

    #content_from_fb_comments_from_theme_template {
        height: unset !important;
    }

    #content_from_user_reviews {
        height: unset !important;
    }

    .container_menu_and_content_fb_comment_box {
        border-radius: clamp(8px,0.85vw,16px);
        width: clamp(245px, 55vw, 330px);
        height: clamp(280px, 55vw, 350px);        
        box-shadow: 0 2px 8px 2px rgb(0 0 0/18%);         
        overflow: hidden;
    }

    #selected {
        height: clamp(225px, 44vw, 290px);
    }
}

/* Override styles for screen widths below 480px BTW: there is no screen below 310px*/
@media screen and (max-width: 480px) {
    .container_outer_fb_comment_box {
        display: none;
    }   
}