


.compass-comments-plugin-inner-comment{
    background:#fff;
    border:1px solid #97999b;
    border-radius:10px;
    padding:10px;
    padding-top:1.5em;
    padding-bottom:1.5em;
    height:270px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    transition:0.2s;

}

.compass-comments-plugin-outer-container{
    display:flex;
        align-items: flex-end;
        height:470px;
        transition: 0.8s  ease-in-out;
}

.compass-comments-plugin-inner{
    width:29.3333333%;
    margin-left:2%;
    margin-right:2%;
    transition: opacity 0.2s ease-in-out
}

.cps-comments-postion{
    color:#1c8392;
    font-weight:550;
    font-size:1.2em;
    line-height:1.25em;
    margin-top:35px;
    margin-bottom:9px;
}

.cps-comments-footer{
    min-height:100px;
}

.cps-comments-company{
    color:#1c8392;
    
    line-height:1em;
}

/* Left-side vertical triangle: 25px high, 16px wide, white */
.compass-comments-plugin-speech {
    position: absolute;
    bottom: -28px;
    left: 25px;

    width: 0;
    height: 0;

    border-bottom: 28px solid transparent;
    border-left: 22px solid #97999b;

    z-index: 1;
}

/* Stroke layer */
.compass-comments-plugin-speech::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -21px;

    width: 0;
    height: 0;

    border-bottom: 25px solid transparent;
    border-left: 19px solid #fff;

    z-index: -1;
}

.compass-comments-plugin_title{
    z-index:2;
    margin-bottom:0px;
}

.compass-comments-plugin_message{
    z-index:2;
    overflow-y:auto;
    max-height:190px;
    margin-top:18px;
}

.compass-comments-plugin_message-inner{
    height:0px;
    overflow:hidden;
}

.compass-comments-plugin-showmessage-container{
  height: 330px;
}

.compass-comments-plugin__image{
    width:70px;
    position:absolute;
    opacity:0.1;
    z-index:0;
}


.compass-comments-plugin__image-top{
    left:10px;
    top:10px;
}

.compass-comments-plugin__image-bottom{
    transform: rotate(180deg);
    right:10px;
    bottom:10px;
}

.compass-comments-navigation-bar{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:8px;
    padding-bottom:20px;
}

.cps-comments-select-button{   
    border-radius:50% 50%;
    border:1px solid #999;
    background:#999;
    width:16px;
    height:16px;
    margin-left:5px;
    margin-right:5px;
    cursor:pointer;
}

.cps-comments-select-button:hover{
       background:#888;
}

.cps-comments-select-button-selected{
    border:1px solid #1c8392;
    background:#1c8392;
}

.compass-comments-plugin-hidecontainer{
    opacity:0;

}

.compass-comments-plugin-outer-container-main{
    width:100%;
    overflow: hidden;
    flex-wrap: nowrap;
    height:470px;
}

.cps-comments-select-button-selected:hover{
    border:1px solid #1c8392;
    background:#1c8392;
}

@media screen and (max-width: 768px) {

    .compass-comments-plugin-outer-container {
        display: flex;
        flex-direction: column;
    }

    .compass-comments-plugin-inner{
        width:100%;
        padding-left:2em;
        padding-right:2em;
        margin-left:0%;
        margin-right:0%;
    }

    .compass-comments-plugin-speech {
        position: absolute;
        bottom: -26px;
        right: 40%;
        left: auto;

        width: 0;
        height: 0;

        border-bottom: 26px solid transparent;
        border-left: 20px solid #97999b;

        z-index: 1;
    }

    .cps-comments-postion{
        text-align:center;
        margin-left:auto;
        margin-right:auto;
    }

    .compass-comments-plugin-outer-container{
        width:100% !important;
    }

    .cps-comments-company{
        text-align:center;
        margin-left:auto;
        margin-right:auto;
        
    }


    .compass-comments-plugin-showmessage-container{
        height: auto;
    }

    .compass-comments-plugin-inner-comment  {
         height: auto;
    }
    
    .compass-comments-plugin-outer-container {
        height: auto;
    }

    .compass-comments-plugin-outer-container-main{
          height: auto;
    }


}




