.chat-with-trainer {position: fixed;bottom: 0;right: 0;z-index: 1000000;}
.chat-with-trainer .chat-trigger {position: fixed; right: 30px; bottom: 20px; display: flex; align-items: center; flex-wrap: wrap; cursor: pointer; background: var(--c-main); color: #fff; border-radius: 30px; padding: 3px 25px 3px 3px; font-weight: 600; font-size: 14px; }
.chat-with-trainer .chat-trigger .photos {margin: 0 10px 0 0;display: flex;}
.chat-with-trainer .chat-trigger .photos .photo {
    margin: 0 -15px 0 0px;
}
.chat-with-trainer .chat-trigger .photos .photo:nth-child(1) {z-index: 1;}
.chat-with-trainer .chat-trigger .photos .photo:nth-child(1) {z-index: 2;}
.chat-with-trainer .chat-trigger .photos .photo:nth-child(3) {z-index: 3;}
.chat-with-trainer .chat-trigger .photos .photo:nth-child(4) {z-index: 4;}
.chat-with-trainer .chat-trigger .photos .photo:nth-child(5) {z-index: 5;}
.chat-with-trainer .chat-trigger .photos .photo:nth-child(6) {z-index: 6;}
.chat-with-trainer .chat-trigger .photos .photo:nth-child(7) {z-index: 7;}
.chat-with-trainer .chat-trigger .photos .photo:last-child {margin:0}

.chat-with-trainer .chat-trigger .photos .photo img {max-width: 45px;border-radius: 50%;border: solid 1px var(--c-main);}
.chat-with-trainer .chat-trigger span {}
.chat-with-trainer .chat-trigger .new-messages {background: #d50000; color: #fff; width: 24px; height: 24px; font-weight: 600; font-size: 12px; text-align: center; line-height: 24px; position: absolute; top: -6px; right: 0; border-radius: 50%; font-size: 10px; }
.chat-with-trainer .chat-content {background: #f2f2f2;padding: 30px;border-radius: 15px;position: fixed;right: 30px;bottom: 100px;box-shadow: 0 0 14px rgb(0 0 0 / 18%);max-width: 490px;display: none;}
.chat-with-trainer.open .chat-content {display:block}


.chat-with-trainer .chat-content .messages::-webkit-scrollbar {-webkit-appearance: none; width: 7px; }
.chat-with-trainer .chat-content .messages::-webkit-scrollbar-thumb {border-radius: 4px; background-color: rgba(0, 0, 0, .3); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .3); }


.chat-with-trainer .chat-content .messages {max-height: 500px; overflow: auto; padding: 0 10px 0 0; }
.chat-with-trainer .chat-content .messages .item {margin: 0 0 30px 0;text-align: right;}
.chat-with-trainer .chat-content .messages .item .message {background: var(--c-main); color: #fff; padding: 15px; border-radius: 15px; max-width: 80%; margin: 0 0 0 auto; font-weight: 400; font-size: 13px; }
.chat-with-trainer .chat-content .messages .item .files {
    display: flex;
    margin: 10px 0 20px 0;
    text-align: right;
    width: 100%;
    justify-content: flex-end;
}
.chat-with-trainer .chat-content .messages .item .files:empty {display:none}
.chat-with-trainer .chat-content .messages .item .files a {
    margin: 0 0 0 12px;
    display: flex;
    align-items: center;
    text-decoration: none;
    text-align: left;
    color: inherit;
}
.chat-with-trainer .chat-content .messages .item .files a img {
    height: 60px;
    width: 60px;
    margin: 0;
    object-fit: cover;
    display: block;
    max-width: none;
    border-radius: 5px;
}
.chat-with-trainer .chat-content .messages .item .files a i {
    font-size: 26px;
    margin: 0;
    width: 44px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    background: #fff;
    color: #fff;
    border-radius: 5px;
    background: rgb(255 255 255 / 0.3);
}
.chat-with-trainer .chat-content .messages .item .files a span {
    font-size: 11px;
    text-decoration: none;
    color: #000;
    line-height: 1.2;
}
.chat-with-trainer .chat-content .messages .item .meta {display: inline-flex; align-items: center; margin: 10px 0 0px auto; }
.chat-with-trainer .chat-content .messages .item .meta img {max-width: 40px; border-radius: 50%; order: 2; margin: 0 0 0 10px; }
.chat-with-trainer .chat-content .messages .item .meta .text {font-weight: 600; font-size: 13px; line-height: 1.2; }
.chat-with-trainer .chat-content .messages .item .meta .text .date {display: block; font-weight: 300; font-size: 11px; opacity: 0.7; }
.chat-with-trainer .chat-content .submit-message {margin: 30px 0 0 0; display: flex; align-items: center; }
.chat-with-trainer .chat-content .submit-message textarea {flex: 1; border: none; border-radius: 30px; height: 46px; padding: 12px 15px; font-weight: 300; font-size: 14px; resize: none; }
.chat-with-trainer .chat-content .submit-message button.send-message {margin: 0 0 0 20px;border: none;width: 46px;height: 46px;background: var(--c-main);border-radius: 50%;color: #fff;text-align: center;padding: 0;font-weight: 300;font-size: 18px;line-height: 46px;/* display: none; */}
.chat-with-trainer .chat-content .submit-message button.send-message i {}
.chat-with-trainer .chat-content .submit-message button.add-file {
    margin: 0 15px 0 0;
    border: none;
    padding: 0;
    font-size: 21px;
    color: var(--c-main);
    line-height: 46px;
    background: none;
}
.chat-with-trainer .chat-content .submit-message button.add-file i {}
.chat-with-trainer .chat-content .close-chat {position: absolute; width: 40px; height: 40px; color: #fff; background: #000; text-align: center; line-height: 40px; border-radius: 50%; font-size: 13px; top: -20px; right: -20px; cursor: pointer; }
.chat-with-trainer .chat-content .close-chat i {}


.chat-with-trainer .chat-content .messages .item.trainer {text-align: left; }
.chat-with-trainer .chat-content .messages .item.trainer .message {margin: 0 auto 0 0; background: var(--c-white); color: var(--c-black); }
.chat-with-trainer .chat-content .messages .item.trainer .meta {}
.chat-with-trainer .chat-content .messages .item.trainer .meta img {order: 1; margin: 0 10px 0 0; }
.chat-with-trainer .chat-content .messages .item.trainer .meta .text {order: 2; }
.chat-with-trainer .chat-content .messages .item.trainer .meta .text span {}