.icms-messages {
    &.modal-messages {
        background-color: $white;
    }
    height: calc(100vh - #{$modal-dialog-margin * 2} - #{$modal-header-padding-y * 2} - #{$modal-title-line-height * $h4-font-size});
    .contact_nickname {
        line-height: 1.4;
    }
    .icms-messages-chat {
        overflow-y: auto;
        flex: 1 1 auto;
        scrollbar-width:thin;
        scrollbar-color: $gray-700 rgba(0,0,0,0);

        &::-webkit-scrollbar {
            display: block;
            width: 10px;
            height: 10px
        }

        &::-webkit-scrollbar-thumb {
            background: $gray-700;
            border-radius: 4px
        }

        &::-webkit-scrollbar-track {
            background: rgba(0,0,0,0)
        }
    }
    .markItUp .markItUpEditor {
        height: auto;
    }
    .content {
        &:before {
            position: absolute;
            top: 8px;
            left: -8px;
            display: inline-block;
            background: inherit;
            width: 16px;
            height: 16px;
            border-color: inherit;
            content: '';
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
        }
    }
    .message-my {
        .content {
            &:before {
                right: -8px;
                left: auto;
            }
        }
        .selected {
            background-color: lighten($primary, 30) !important;
        }
    }
    .pannel-toolbar {
        height: 54px;
    }
    .layout, .layout > *, .layout &__contacts-block {
        height: inherit;
    }
    .icms-messages__contacts-list {
        display: flex;
        flex-direction: column;
        padding-left: 0;
        margin-bottom: 0;
        border-radius: 0;
        height: calc(100% - 54px);
        overflow-y: auto;
    }
}

@include media-breakpoint-up(sm) {
    .icms-messages {
        &.modal-messages {
            margin: -$modal-inner-padding !important;
        }
        height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2} - #{$modal-header-padding-y * 2} - #{$modal-title-line-height * $h4-font-size});
    }
}
@include media-breakpoint-down(sm) {
    .icms-messages {
        &.modal-messages {
            height: 100%;
        }
    }
    .modal-dialog-icms-messages {
        .modal-body {
            height: 100%;
            padding: 0;
        }
        .modal-header {
            display: none;
        }
        .modal-content {
            border: none;
            border-radius: 0;
            height: inherit;
        }
        margin: 0;
        width: 100%;
        height: 100%;
    }
}
.bg-gray {
    background-color: $gray-200;
}
.bg-success_light {
    background-color: lighten($success, 40);
}
#pm_contact {
    height: inherit;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    .smilepanel {
        position: absolute;
        top: -51px;
        padding: 0 $spacer*0.25;
        background-color: $white;
        right: 0px;
        border: 1px solid $gray-400;
        box-shadow: $box-shadow;
    }
}
