:root {
    --green-dark: #094658;
    --green-dark1: #142D3C;
    --green-dark2: #1C4009;
    --green-dark3: #003948;
    --green-dark4: #165B50;
    --green-dark5: #00545C;
    --green-dark6: #20594E;
    --green-dark7: #254C4C;
    --green-dark8: #03545C;
    --green-dark9: #035459;
    --green-dark10: #111B33;
    --green-dark11: #00565B;
    --green-medium: #117577;
    --green-medium1: #00484C;
    --green-medium2: #065544;
    --green-medium3: #6A9496;
    --green-medium4: #005D5F;
    --green-medium5: #688716;
    --green-medium6: #389472;
    --green-medium7: #228A89;
    --green-medium8: #278B8B;
    --green-medium9: #238B8D;
    --green-medium10: #218C8F;
    --green-medium11: #00555A;
    --green-normal: #719849;
    --green-light: #CEDC27;
    --green-main: #114A5B;
    --green-light1: #BDD102;
    --green-light2: #B0C200;
    --green-light3: #B8CB0B;
    --green-light4: #A3AF98;
    --green-light5: #C0D103;
    --green-light6: #C3D600;
    --green-light7: #CFDF41;
    --green-light8: #D3D882;
    --green-light9: #CDE043;
    --green-light10: #E2F078;
    --green-light11: #AABC26;
    --green-light12: #C0DB35;
    --blue1: #5C9098;
    --blue2: #D0D3E2;
    --gray-dark: #4D4D4D;
    --gray-light: #F1F1F1;
    --gray-light1: #EFF7FA;
    --gray-bg: #EEEEEE;
    --blue-dark: #3B4D61;
    --blue-dark1: #15313E;
}

.chat-app-window .user-chats {
    background-color: #F2F0F7;
    padding: 1rem;
    position: relative;
    height: calc(100% - 65px - 65px);
    background: var(--gray-light);
}

    .chat-app-window .user-chats .avatar img {
        border: 2px solid #FFF
    }

.chat-app-window .active-chat {
    height: inherit
}

    .chat-app-window .active-chat .chat-header {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        height: 65px;
        background-color: #FFF;
        padding: 0 1rem;
        border-bottom: 1px solid #EBE9F1
    }

.chat-app-window .chats .chat-avatar {
    float: right
}

.chat-app-window .chats .chat-body {
    display: block;
    margin: 10px 30px 0 0;
    overflow: hidden
}

    .chat-app-window .chats .chat-body .chat-content {
        float: right;
        padding: .7rem 1rem;
        margin: 0 1rem 10px 0;
        clear: both;
        color: #FFF;
        background-image: -webkit-linear-gradient(10deg,var(--green-light11),var(--green-light3));
        background-image: linear-gradient(80deg,var(--green-light11),var(--green-light3));
        border-radius: .357rem;
        box-shadow: 0 4px 8px 0 rgba(34,41,47,.12);
        max-width: 75%
    }

        .chat-app-window .chats .chat-body .chat-content p {
            margin: 0
        }

.chat-app-window .chats .chat-left .chat-avatar {
    float: left
}

.chat-app-window .chats .chat-left .chat-body .chat-content {
    float: left;
    margin: 0 0 10px 1rem;
    color: #6E6B7B;
    background: #fff
}

.chat-app-window .chat-app-form {
    height: 65px;
    padding: 0 1rem;
    background-color: #FFF;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: 1px solid #EBE9F1
}

.chat-widget .card-header {
    padding-top: .8rem;
    padding-bottom: .8rem
}

.chat-widget .chat-app-window .user-chats {
    background-color: #F8F8F8;
    height: 390px
}

.chat-widget .chat-app-window .chat-app-form {
    border-top: 0;
    border-bottom-left-radius: .357rem;
    border-bottom-right-radius: .357rem;
    height: 56px
}

    .chat-widget .chat-app-window .chat-app-form .input-group-text, .chat-widget .chat-app-window .chat-app-form .message {
        border: 0;
        padding-left: 0
    }

    .chat-widget .chat-app-window .chat-app-form .input-group:not(.bootstrap-touchspin):focus-within {
        box-shadow: none
    }