@import url("variables.css");

    html, body, #mainContent, .main-container{
        height: 100%;
    }
    body{
        margin: 0;
    }
    .welcome-screen h1{
        text-align: center;
    }
    .first-screen .body{
        height: 100%;
        position: relative;
        padding: 50px;
    }

    .chat-screen{
        height: 100%;
        position: relative;
    }
    .chat-screen .body{
        width: 100%;
        position: absolute;
        top: 100px;
        bottom: 90px;
        padding: 50px;
        min-height: inherit;
        overflow-y: auto;
    }
    .chat-screen .body::-webkit-scrollbar {
        width: 10px;
    }
    .chat-screen .body::-webkit-scrollbar-thumb:hover {
        background-color: lightgray;
    }

    .chat-screen .body::-webkit-scrollbar-track {
       // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

    .chat-screen .body::-webkit-scrollbar-thumb {
      background-color: none;
      border-right: 3px solid lightgray;
    }
    .friend-chat{
        display: flex;
    }

    .my-chat{
        display: flex;
        justify-content: flex-end;
    }
    .chat-time{
        font-size: 13px
    }
    .selected-user-chat{
        width: 60%;
        white-space:pre-wrap;
    }
    .chat-screen .bottom{
        border-top: 1px solid #ddd;
        height: 80px;
        width: 100%;
        position: absolute;
        bottom: 10px;
        display: flex;
        padding: 20px 50px;
    }
    #chat-box{
        resize: none;
        border-top: none;
        border-left: none;
        border-right: none;
        height: 50px !important;
        width: 90%;
        font-size: 13px;
    }
    .send-btn{
        position: absolute !important;
        right: 30px;
    }
    .main-container{
        overflow: hidden;
        background-color: white;
    }
    .left-side{
        height: 100%;
        width: var(--left-side-width);
        min-width: var(--left-side-width);
        float: left;
        background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        padding: 15px;
        position: relative;
    }

    .right-side{
        height: 100%;
        padding: 10px;
        position: fixed;
        left: var(--left-side-width);
        right: 0;
    }
    .left-side.open{
        transform: translateX(0);
    }
    .right-side.open{
        transform: translateX(0);
    }
    .side-btn{
        display: none;
        width: 50px;
        padding: 5px;
        height: 100%;
        margin: 0;
    }
    .top{
        height: 100px;
        border-bottom: 1px solid #ddd;
    }
    .top-right-btn-group{
        line-height: 100px;
        margin-right: 25px;
    }
    .left-inside-top{
        height: 190px;
        border-bottom: 1px solid #ddd;
        padding-top: 5px;
        position: relative;
    }
    .top-left-btn-group{
        position: absolute;
        right: 65px;
    }
    .left-inside-bottom{
        padding-top: 10px;
        position: absolute;
        top: 250px;
        bottom: 0;
        right: 0px;
        left: 0;
    }
    .friend-list{
        padding: 0;
        list-style-type: none;
        overflow-y: auto;
        position: absolute;
        left: 0;
        top: 65px;
        bottom: 0;
        right: 0;
    }

    .search-list{
        padding: 0;
        list-style-type: none;
        overflow-y: auto;
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        right: 0;
    }
    .recent-list{
        padding: 0;
        list-style-type: none;
        overflow-y: auto;
        position: absolute;
        left: 0;
        top: 65px;
        bottom: 0;
        right: 0;
    }

    .notification-list{
        padding: 0;
        list-style-type: none;
        overflow-y: auto;
        position: absolute;
        left: 0;
        top: 65px;
        bottom: 10px;
        right: 0;
    }

    .friend-list::-webkit-scrollbar {
        width: 10px;
    }
    .friend-list::-webkit-scrollbar-thumb:hover {
        background-color: lightgray;
    }

    .friend-list::-webkit-scrollbar-track {
       // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

    .friend-list::-webkit-scrollbar-thumb {
      background-color: none;
      border-right: 3px solid lightgray;
    }

    .notification-list::-webkit-scrollbar {
        width: 10px;
    }
    .notification-list::-webkit-scrollbar-thumb:hover {
        background-color: lightgray;
    }

    .notification-list::-webkit-scrollbar-track {
       // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

    .notification-list::-webkit-scrollbar-thumb {
      background-color: none;
      border-right: 3px solid lightgray;
    }

    .channel-list{
        list-style-type: none;
        overflow-y: auto;
        position: absolute;
        left: 0;
        top: 110px;
        bottom: 10px;
        right: 0;
    }
    .channel-list::-webkit-scrollbar {
        width: 10px;
    }
    .channel-list::-webkit-scrollbar-thumb:hover {
        background-color: lightgray;
    }

    .channel-list::-webkit-scrollbar-track {
       // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

    .channel-list::-webkit-scrollbar-thumb {
      background-color: none;
      border-right: 3px solid lightgray;
    }
    .recent-list::-webkit-scrollbar {
        width: 10px;
    }
    .recent-list::-webkit-scrollbar-thumb:hover {
        background-color: lightgray;
    }

    .recent-list::-webkit-scrollbar-track {
       // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

    .recent-list::-webkit-scrollbar-thumb {
      background-color: none;
      border-right: 3px solid lightgray;
    }

    .friend{
        background: white;
        height: 70px;
        position: relative;
        cursor: pointer;
    }
    .friend-body{
        //width: 300px;
        padding: 10px 0;
        display: flex;
        border-bottom: 1px solid #eee;
        height: 70px;
        position: absolute;
        left: 25px;
        right: 25px;
    }

    .friend:hover{
        background-color: #f5f5f5;
    }

    .current-user-image{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        margin: auto;
        display: block;
    }
    .user-image, .selected-user-image{
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        border-radius: 50%;
        object-fit: cover;
    }

    .selected-user{
        width: 300px;
        display: inline-flex;
        position: absolute;
        left: 50px;
        top: 20px;
    }

    .selected-user-info{
        padding: 2px 10px;
        width: 100%;
        word-wrap: break-word;
    }
    .selected-user-full-name{
        margin: 0;
        font-size: 15px;
        font-weight: bold;
    }

    .selected-user-status{
        margin: -4px 0 0 0;
        font-size: 13px;
    }

    .current-user-full-name{
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 0;
    }
    .user-full-name{
        font-size: 14px;
        font-weight: bold;
        margin-top: 5px;
        margin-bottom: 0;
    }

    .user-info{
        padding-left: 10px;
        width: 80%;
    }

    .user-thought{
        font-size: 12px;
        padding: 0;
        margin-top: -7px;
    }

    .user-activity{
        font-size: 12px;
        text-align: right;
        position: absolute;
        right: 5px;
        bottom: 2px;
    }
    .current-user-status{
        font-size: 12px;
        text-align: center;
        margin-top: -3px;
        color: #4f4f4f;
    }
    .user-status{
        width: 10%;
        position: relative;
    }
    .user-status>.dot{
        position: absolute;
        bottom: 10px;
        right: 5px;
    }
    .green-dot{
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #00dc00;
        display: inline-block;
    }
    .grey-dot{
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #ccc;
        display: inline-block;
    }
    .bmd-form-group {
        padding-top: 12px;
        padding-left: 10px;
        padding-right: 10px
    }
    .form-control-feedback {
        top: 20px;
        color: #ccc!important;
        padding-right: 15px;
    }

    #search_box{
        width: 100%;
    }
    .request-status{
        display: flex;position: absolute;right: 0;
    }
    .channelDiv{
        display: flex;
        margin-left : 30px;
        margin-right : 30px;
    }
    .width-83per{
        width: 83%;
    }
    .nav-item .nav-link {
        min-width: 85px !important;
        padding: 5px 5px !important;
    }
    .btn.btn-fab, .btn.btn-just-icon {
        font-size: 20px;
        height: 35px;
        min-width: 35px;
        width: 35px;
        line-height: 35px;
    }
    .btn.btn-fab .material-icons, .btn.btn-fab .fa, .btn.btn-just-icon .material-icons, .btn.btn-just-icon .fa {
        line-height: 35px;
        font-size: 18px;
    }
    .card-profile .card-avatar, .card-testimonial .card-avatar {
        width: 130px;
        height: 130px;
    }
    .card-profile .card-avatar img, .card-testimonial .card-avatar img {
        width: inherit;
        height: inherit;
        object-fit: cover;
    }
    .shared-img{
        height: 150px !important;
        width: 250px !important;
        object-fit: cover;
    }

    .color-red{
        color : red;
    }
    .color-green{
        color : green;
    }
    .color-blue{
        color : blue;
    }
    #content_loading{
       text-align: center;
    }
    #content_loading{
        height : 150px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 170px;
    }

    @media (max-width: 998px) {
        .left-side{
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }
        .right-side{
            transform: translateX(calc(-1 * var(--left-side-width)));
            transition: transform 0.6s ease;
            right: calc(-1 * var(--left-side-width));
        }
        .side-btn{
            display: inline-block;
        }

        .top{
            height: 65px;
            transition: transform 0.6s ease;
        }
        .selected-user{
            top: 5px;
        }
        .top-right-btn-group{
            line-height: 55px;
        }

        .chat-screen .bottom {
            height: 50px;
            bottom: 10px;
            padding: 5px 50px;
        }

        .send-btn {
            top: 10px;
        }
    }

   @media (max-width: 450px) {

       .chat-screen .body {
            padding: 10px;
            bottom: 65px;
            top: 70px;
        }
       .right-side {
            padding: 5px;
        }
       #chat-box{
           width: 85%;
       }
       .send-btn {
            right: 10px;
        }
       .chat-screen .bottom {
            padding: 5px 10px;
        }

       .shared-img {
            height: 100px !important;
            width: 150px !important;
        }
    }