.messages_wrapper {
    width: 100%;
    height: calc(100vh - 200px);
    background: white;
    display: flex;
}

.messages_wrapper .panel_chats {
    width: 25%;
    height: 100%;
    border-right: 1px solid #ccc;
    overflow: hidden;
}

.messages_wrapper .panel_chats .chat {
    width: 100%;
}

.messages_wrapper .panel_chats .chat a {
    width: 100%;
    height: 100%;
    display: block;
    border-bottom: 1px solid #ccc;
    padding: 20px;
}

.messages_wrapper .panel_chats .chat a:hover,
.messages_wrapper .panel_chats .chat a.active {
    background: #ccc;
}

.messages_wrapper .panel_message {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: flex-end;
}

.messages_wrapper .panel_message .chat-activity-list {
    flex-grow: 1;
    overflow-y: scroll;
}

.messages_wrapper .panel_message .chat-activity-list::-webkit-scrollbar {
    width: 2px; /* ширина всей полосы прокрутки */
}

.messages_wrapper .panel_message .chat-activity-list::-webkit-scrollbar-track {
    background: white; /* цвет зоны отслеживания */
}

.messages_wrapper .panel_message .chat-activity-list::-webkit-scrollbar-thumb {
    background-color: #ccc; /* цвет бегунка */
    border-radius: 10px; /* округлось бегунка */
    border: none; /* отступ вокруг бегунка */
}

.messages_wrapper .panel_message .chat-activity-list .chat-element {
    padding: 5px 20px;
}

.messages_wrapper .panel_message .chat-form {
    padding-top: 20px;
    flex-grow: 0;
}

.label-purple, .badge-purple {
    background-color: #6900C6;
    color: #FFFFFF;
}

.chat-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.8rem;
}
.chat-element {
    margin: 0 -20px !important;
    padding: 15px 20px !important;
}
.chat-element .chat-title .form-control {
    font-weight: 600;
    border-color: #676a6c;
}
.chat-element.right .chat-title > small {
    padding-right: 0.5rem;
}
.chat-element.right .chat-title .form-control {
    text-align: right !important;
}
.chat-element:not(.right) .chat-title > small {
    padding-left: 0.5rem;
    order: 9;
}
.chat-element .chat-content {
    font-size: 14px;
}
.chat-title > small {
    flex-shrink: 0;
}

.chat-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.chat-element.right .chat-actions {
    flex-direction: row-reverse;
    margin-right: -0.5rem;
}

.chat-actions > * {
    margin-right: 0.5rem;
}
.chat-actions .onoffswitch-label {
    margin: 0;
}

.showswitch {
    text-align: left;
}

.showswitch .onoffswitch-inner:before,
.showswitch .onoffswitch-inner:after {
    font: normal normal normal 16px/1 FontAwesome;
}
.showswitch .onoffswitch-inner:before {
    content: "\f06e";
}
.showswitch .onoffswitch-inner:after {
    content: "\f070";
}

.clipboard-text {
    cursor: copy;
    text-decoration: underline dotted;
}

.mirrors-list-group > li:first-child {
    background-color: #1ab394;
    color: #ffffff;
}