/*========================================================
        DARK LAYOUT
=========================================================*/
.chat-application .content-area-wrapper .content-right .content-wrapper
{
    padding: 0;
}

.chat-application .content-area-wrapper
{
    border: 1px solid #dae1e7;
    border-radius: .25rem;
}

.chat-application .chat-profile-sidebar
{
    position: fixed;
    z-index: 6; 

    width: 400px;
    height: -webkit-calc(100vh - 13rem);
    height:    -moz-calc(100vh - 13rem);
    height:         calc(100vh - 13rem);
    margin: 0;

    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;
    -webkit-transform: translateX(-110%);
       -moz-transform: translateX(-110%);
        -ms-transform: translateX(-110%);
         -o-transform: translateX(-110%);
            transform: translateX(-110%);

    border-right: 1px solid #e4e7ed;
    border-radius: .25rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #fff;
}
.chat-application .chat-profile-sidebar.show
{
    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease; 
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);
}
.chat-application .chat-profile-sidebar .chat-profile-header
{
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;

    text-align: center;

    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.chat-application .chat-profile-sidebar .chat-profile-header .header-profile-sidebar
{
    margin: 2rem auto .5rem;
}
.chat-application .chat-profile-sidebar .chat-profile-header .avatar
{
    margin-bottom: 1.25rem;
}
.chat-application .chat-profile-sidebar .chat-profile-header .close-icon
{
    font-size: 1.75rem;

    position: absolute;
    top: 14px;
    right: 13px;

    cursor: pointer;
}
.chat-application .chat-profile-sidebar .profile-sidebar-area .scroll-area
{
    position: relative; 

    height: -webkit-calc(100vh - 24.25rem);
    height:    -moz-calc(100vh - 24.25rem);
    height:         calc(100vh - 24.25rem);
    padding: 2rem;
}

.chat-application .sidebar-content
{
    width: 400px;
    height: -webkit-calc(100vh - 13rem);
    height:    -moz-calc(100vh - 13rem);
    height:         calc(100vh - 13rem);
    margin: 0;

    border-right: 1px solid #e4e7ed;
    border-radius: .25rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
}
.chat-application .sidebar-content .sidebar-close-icon
{
    font-size: 1.25rem;

    position: absolute;
    z-index: 1;
    top: .25rem;
    right: .25rem;

    visibility: hidden; 

    cursor: pointer;
}
.chat-application .sidebar-content .chat-fixed-search
{
    position: fixed;

    width: 400px;
    padding: .65rem; 

    border-bottom: 1px solid #e4e7ed;
}
.chat-application .sidebar-content .chat-fixed-search .sidebar-profile-toggle .avatar
{
    display: inline-table;

    width: -webkit-calc(32px + 8px);
    width:    -moz-calc(32px + 8px);
    width:         calc(32px + 8px);
}
.chat-application .sidebar-content .chat-fixed-search input.form-control
{
    height: -webkit-calc(1.25em + 1.4rem + 4px);
    height:    -moz-calc(1.25em + 1.4rem + 4px);
    height:         calc(1.25em + 1.4rem + 4px); 
    padding: .9rem 1rem .9rem 3rem;
}
.chat-application .sidebar-content .chat-fixed-search .form-control-position
{
    top: 5px;
}
.chat-application .sidebar-content .chat-fixed-search .form-control-position i
{
    left: 9px;
}
.chat-application .sidebar-content .chat-user-list
{
    width: 400px; 
    height: -webkit-calc(100% - 5rem);
    height:    -moz-calc(100% - 5rem);
    height:         calc(100% - 5rem);
    margin-top: 5rem;
}
.chat-application .sidebar-content .chat-user-list ul
{
    margin-bottom: 0; 
    padding-left: 0;
}
.chat-application .sidebar-content .chat-user-list li
{
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;

    margin-right: 1px; 
    padding: 1.322rem .85rem;

    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
    -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
    -ms-flex-align: center;
            align-items: center;
}
.chat-application .sidebar-content .chat-user-list li:not(:first-child)
{
    border-top: 1px solid #e4e7ed;
}
.chat-application .sidebar-content .chat-user-list li .user-chat-info
{
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;
    overflow: hidden; 

    width: 100%;

    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
    -ms-flex-pack: justify;
            justify-content: space-between;
}
.chat-application .sidebar-content .chat-user-list li .contact-info
{
    width: -webkit-calc(100% - 1rem - 50px);
    width:    -moz-calc(100% - 1rem - 50px);
    width:         calc(100% - 1rem - 50px);
    margin-top: .3rem;
}
.chat-application .sidebar-content .chat-user-list li .contact-info .truncate
{
    margin: 0;
}
.chat-application .sidebar-content .chat-user-list li:hover
{
    cursor: pointer;

    background: #eee;
}
.chat-application .sidebar-content .chat-user-list li.active
{
    color: #fff; 
    background: -webkit-linear-gradient(332deg, #7367f0, rgba(115, 103, 240, .7));
    background:    -moz-linear-gradient(332deg, #7367f0, rgba(115, 103, 240, .7));
    background:      -o-linear-gradient(332deg, #7367f0, rgba(115, 103, 240, .7));
    background:         linear-gradient(118deg, #7367f0, rgba(115, 103, 240, .7));
    -webkit-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
            box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
}
.chat-application .sidebar-content .chat-user-list li.active h1,
.chat-application .sidebar-content .chat-user-list li.active h2,
.chat-application .sidebar-content .chat-user-list li.active h3,
.chat-application .sidebar-content .chat-user-list li.active h4,
.chat-application .sidebar-content .chat-user-list li.active h5,
.chat-application .sidebar-content .chat-user-list li.active h6
{
    color: #fff;
}
.chat-application .sidebar-content .chat-user-list li img
{
    border: 2px solid #fff;
}
.chat-application .sidebar-content .card
{
    margin-bottom: 0;
}

.chat-application .chat-overlay
{
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: block;
    visibility: hidden;

    border-radius: .25rem;
}
.chat-application .chat-overlay.show
{
    visibility: visible;

    background-color: rgba(0, 0, 0, .2);
}

.chat-application .chat-app-window .favorite,
.chat-application .chat-app-window .sidebar-toggle
{
    cursor: pointer;
}

.chat-application .chat-app-window .user-chats
{
    position: relative;

    height: -webkit-calc(100vh - 23.5rem);
    height:    -moz-calc(100vh - 23.5rem);
    height:         calc(100vh - 23.5rem); 
    padding: 20px 30px;

    text-align: center;
}

.chat-application .chat-app-window .start-chat-area,
.chat-application .chat-app-window .user-chats
{
    background-color: #dfdbe5; 
    background-image: url('../../images/backgrounds/chat-bg.svg');
}

.chat-application .chat-app-window .start-chat-area
{
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;
            flex-direction: column; 

    height: -webkit-calc(100vh - 13rem);
    height:    -moz-calc(100vh - 13rem);
    height:         calc(100vh - 13rem);

    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
    -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
}
.chat-application .chat-app-window .start-chat-area .start-chat-icon,
.chat-application .chat-app-window .start-chat-area .start-chat-text
{
    background: white;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
}
.chat-application .chat-app-window .start-chat-area .start-chat-text
{
    cursor: pointer; 

    border-radius: -webkit-calc(.5rem * 4);
    border-radius:    -moz-calc(.5rem * 4);
    border-radius:         calc(.5rem * 4);
}
.chat-application .chat-app-window .start-chat-area .start-chat-icon
{
    font-size: 4rem;

    padding: 2rem; 

    border-radius: 50%;
}

.chat-application .chat-app-form
{
    padding: 20px 10px;

    background-color: white;
}

.chat-application .chats
{
    padding: 0;
}
.chat-application .chats .chat-body
{
    display: block;
    overflow: hidden; 

    margin: 10px 30px 0 0;
}
.chat-application .chats .chat-body .chat-content
{
    display: block;
    float: right;
    clear: both;

    margin: 0 20px 10px 0;
    padding: .75rem 1rem;

    text-align: right;

    color: #fff;
    border-radius: .5rem;
    background: -webkit-linear-gradient(332deg, #7367f0, rgba(115, 103, 240, .7));
    background:    -moz-linear-gradient(332deg, #7367f0, rgba(115, 103, 240, .7));
    background:      -o-linear-gradient(332deg, #7367f0, rgba(115, 103, 240, .7));
    background:         linear-gradient(118deg, #7367f0, rgba(115, 103, 240, .7));
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
}
.chat-application .chats .chat-body .chat-content p
{
    margin: 0;
}
.chat-application .chats .chat-avatar
{
    float: right;
}
.chat-application .chats .chat-left .chat-avatar
{
    float: left;
}
.chat-application .chats .chat-left .chat-body
{
    margin-right: 0;
    margin-left: 30px;
}
.chat-application .chats .chat-left .chat-content
{
    float: left;

    margin: 0 0 10px 20px;

    text-align: left;

    color: #626262;
    background: none;
    background-color: white;
}

.chat-application .user-profile-sidebar
{
    position: fixed;
    z-index: 6;
    right: 4.2rem;
    bottom: 5.25rem;

    width: 400px;
    height: -webkit-calc(100vh - 13rem);
    height:    -moz-calc(100vh - 13rem);
    height:         calc(100vh - 13rem);
    margin: 0;

    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;
    -webkit-transform: translateX(110%);
       -moz-transform: translateX(110%);
        -ms-transform: translateX(110%);
         -o-transform: translateX(110%);
            transform: translateX(110%);

    opacity: 0; 
    border-right: 1px solid #e4e7ed;
    border-radius: .25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: #fff;
}
.chat-application .user-profile-sidebar.show
{
    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease; 
    -webkit-transform: translateX(7%);
       -moz-transform: translateX(7%);
        -ms-transform: translateX(7%);
         -o-transform: translateX(7%);
            transform: translateX(7%);

    opacity: 1;
}
.chat-application .user-profile-sidebar .user-profile-header
{
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;

    text-align: center;

    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.chat-application .user-profile-sidebar .user-profile-header .header-profile-sidebar
{
    margin: 2rem auto .5rem;
}
.chat-application .user-profile-sidebar .user-profile-header .avatar
{
    margin-bottom: 1.25rem;
}
.chat-application .user-profile-sidebar .user-profile-header .close-icon
{
    font-size: 1.75rem;

    position: absolute;
    top: 14px;
    right: 13px;

    cursor: pointer;
}
.chat-application .user-profile-sidebar .user-profile-sidebar-area
{
    position: relative; 

    height: -webkit-calc(100vh - 24.25rem);
    height:    -moz-calc(100vh - 24.25rem);
    height:         calc(100vh - 24.25rem);
}

@media (max-width: 767.98px)
{
    .chat-application .chat-app-window
    {
        height: -webkit-calc(100% - 132px);
        height:    -moz-calc(100% - 132px);
        height:         calc(100% - 132px);
    }
    .chat-application .sidebar-content .sidebar-close-icon
    {
        visibility: visible;
    }
}

@media (max-width: 575.98px)
{
    .chat-application .sidebar-content
    {
        left: -4px !important; 

        width: 260px;
    }
    .chat-application .sidebar-content .chat-fixed-search,
    .chat-application .sidebar-content .chat-user-list
    {
        width: 260px;
    }
    .chat-application .chat-profile-sidebar
    {
        width: 260px;
    }
    .chat-application .user-profile-sidebar
    {
        right: 2.35rem; 

        width: 260px;
    }
}

@media (max-width: 991.98px)
{
    .content-right
    {
        width: 100%;
    }
    .chat-application .sidebar-content
    {
        position: fixed;
        z-index: 5;
        left: 0;
        left: -2px; 

        -webkit-transition: all .3s ease-in-out;
           -moz-transition: all .3s ease-in-out;
             -o-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out;
        -webkit-transform: translateX(-110%);
           -moz-transform: translateX(-110%);
            -ms-transform: translateX(-110%);
             -o-transform: translateX(-110%);
                transform: translateX(-110%);
    }
    .chat-application .sidebar-content.show
    {
        display: block; 

        -webkit-transition: all .3s ease;
           -moz-transition: all .3s ease;
             -o-transition: all .3s ease;
                transition: all .3s ease;
        -webkit-transform: translateX(8.5%);
           -moz-transform: translateX(8.5%);
            -ms-transform: translateX(8.5%);
             -o-transform: translateX(8.5%);
                transform: translateX(8.5%);
    }
}

@media (max-width: 349.98px)
{
    .chat-application .sidebar-content
    {
        left: -2px !important; 

        width: 230px;
    }
    .chat-application .sidebar-content .chat-fixed-search,
    .chat-application .sidebar-content .chat-user-list
    {
        width: 230px;
    }
    .chat-application .chat-profile-sidebar
    {
        width: 230px;
    }
    .chat-application .user-profile-sidebar
    {
        width: 230px;
    }
}