.rse-diag-comment {
    position: fixed;
    z-index: 100;
    bottom: 88px;
    right: 30px;
}

.rse-diag-comment__opener {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgb(255, 222, 89);
    outline: 0!important;
    transition: all 450ms ease-out;
}

.rse-diag-comment__opener:hover {
    background: rgb(245, 164, 59);
}

.comment-form-opener__label {
    position: absolute;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow : hidden;
    opacity: 0;
}

.comment-form-opener__icon {
    font-size : 20px;
    color: black;
}

.rse-diag-comment-form {
    position: absolute;
    bottom: 56px;
    right: 56px;
    width: 420px;
    transform: translateY(-25%);
    max-width: calc(95vw - 85px);
    background: white;
    box-shadow: 0 0 30px rgba(0,0,0,0.25);
    border-radius: 12px;
    padding: 16px;
    transition: all 450ms ease-out;
    pointer-events: none;
    opacity: 0;
}

.rse-diag-comment-form.is-loading::before {
    content: '';
    position: absolute;
    z-index: 2;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.8;
}

.rse-diag-comment-form.is-loading::after {
    content : '';
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform : translate(-50%, -50%);
    width : 45px;
    height: 45px;
    background: url('../images/loader.gif');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.rse-diag-comment-form.rse-diag-comment-form--active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.rse-diag-comment-form__label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: black;
    text-transform: none!important;
}

.rse-diag-comment-form__textarea {
    display: block;
    background : #F8F8F8;
    border: 1px solid #CCCCCC;
    border-radius: 12px;
    min-height: 190px;
    max-height: 340px;
    height: auto;
    outline: 0;
}

.rse-diag-comment-form__textarea:focus {
    border: 1px solid #419587;
}

.rse-diag-comment-form__info {
    font-size : 12px;
    color : #444;
    margin-top : 5px;
}

.rse-diag-comment-form__info--success {
    padding : 3px 16px;
    background : #F8F8F8;
    color : #419587;
    border-radius: 8px;
}

.rse-diag-comment-form__info--error {
    background: red;
    padding : 3px 16px;
    color : white;
    border-radius: 8px;
}

.rse-diag-comment-form__submit-wrapper {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 5px;
   
}

.rse-diag-comment-form__submit {
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    background: #419587;
    border-radius: 8px;
    outline: 0;
}

@media (max-width: 620px) {
    .rse-diag-comment {
        bottom: 78px;
        right: 40px;
    }

    .rse-diag-comment__opener {
        width: 40px;
        height: 40px;
    }

    .comment-form-opener__icon {
        font-size : 18px;
        color: black;
    }

    .rse-diag-comment-form {
        bottom: 46px;
        right: 52px;
    }
}