html,body{ margin:0; padding:0; font-family: "Poppins", sans-serif; font-style: normal;}
body{   background: #eee;}
ul,li,p,label{ margin:0; padding:0; list-style: none;}
button{ margin:0; padding:0; cursor: pointer; color:#405D72;}
button:hover{opacity: .7;}
.chat-top-bar-outer {
    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    width: 100%;
    float: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
    box-sizing: border-box;
    position: fixed;
    z-index: 91;
}
.inner-chat-work-area-header-left {
    display: flex;
    align-items: center;
    gap: 30px;
}
.support-button button {
    border: none;
    background: none;
    padding: 2px;
    margin: 0;
    width: 30px;
    height: 30px;
}
.support-button svg {
    width: 22px;
}
.search-area {
    position: relative;
    width: 490px;
}
.channel-box-btns {
    display: flex;
    gap: 10px;
}
.search-area svg{ position: absolute;}
.search-area input {
    background: #fff;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 3px;
    padding-left: 34px;
    box-sizing: border-box;
}
.search-area svg {
    position: absolute;
    color: #ccc;
    width: 20px;
    top: 6px;
    left: 8px;
}
.label {
    display: none;
}
.help-box button {
    background: none;
    border: none;
}
.help-box svg {
    color: #fff;
}
ul.left-top-nav button {
    width: 50px;
    text-align: center;
    color: #fff;
    background: none;
    border:none
}
ul.left-top-nav {
    text-align: center;
    position: absolute;
    top: 26px;
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
}

ul.left-top-nav li {
    margin-bottom: 20px;
}
.left-side-bar-outer {
    background: rgba(2, 0, 36, 1);
    width: 60px;
    float: left;
    position: fixed;
    top: 0;
    height: calc(100% - 73px);
    left: 0;
    padding-top: 50px;
    box-sizing: border-box;
    z-index: 9;
    margin-top: 73px;
}
.inner-chat-area {
    padding: 0;
    background: #E3F4F4;
    height: calc(100vh - 73px);
    box-sizing: border-box;
    display: flex;
    gap: 20px;
    padding-left: 77px;
    padding-top: 48px;
    margin-top: 73px;
}
ul.left-bottom-nav {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
}
.user-img img {
    width: 100%;
    border-radius: 10px;
    border: #fff 1px solid;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.user-box {
    padding: 10px;
    position: relative;
}
.user-box:hover .label{ display: block; background-color: #0000009A; padding:5px; border-radius: 5px; color: #fff; position: absolute; top:0; font-size: 12px; white-space: nowrap; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } 

.help-box:hover .label{ display: block; background-color: #0000009A; padding:5px; border-radius: 5px; color: #fff; position: absolute; right: 0; top:23px; font-size: 12px; white-space: nowrap; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } 


.user-img {
    max-width: 37px;
    position: relative;
    left: 2px;
    top: 5px;
}
ul.nav-action {
    display: flex;
}
ul.nav-action button {
    background: none;
    border: none;
    color: #fff;
    height: 22px;
}
.help-box {
    position: relative;
    top: 3px;
    right: 5px;
}
button.create-new {
    background: none;
    border: none;
    color: #fff;
    text-align: center;
}
button.create-new svg {
    width: 24px;
    height: 24px;
    border: #fff 1px solid;
    border-radius: 100px;
    padding: 5px;
}
.inner-chat-left-section {
    width: 300px;
    height: 100%;
}
.left-top-part {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 5px;
    border-bottom: #ddd 1px solid;
    margin-bottom: 0px;
    position: relative;
}
.inner-chat-area-rt {
    display: flex;
    gap: 10px;
}
button.group-name {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: bold;
}
.left-top-part button {
    background: none;
    border: none;
}
ul.list-options li {
    width: 100%;
    float: left;
}
ul.list-options button {
    width: 100%;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    padding: 8px 10px;
    font-size: 15px;
    font-weight: 100;
}
.channels-box {
    width: 100%;
    float: left;
}

.heading-txt {
    width: 100%;
    background: none;
    text-align: left;
    padding: 9px;
    font-size: 17px;
    border:none;
    border: none;
    font-weight: 600;
}
ul.channels-list, .members-list {
    max-height: 155px;
    overflow-y: scroll;
}
.member-img img {
    max-width: 25px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
}
.member-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
ul.members-list li {
    width: 100%;
    float: left;
    padding: 2px 10px;
    font-size: 12px;
    box-sizing: border-box;
}
ul.members-list {
    margin-top: 10px;
    width: 100%;
    float: left;
}
.online {
    background: #88D66C;
    width: 7px;
    height: 7px;
    border: #fff 2px solid;
    border-radius: 10px;
    position: absolute;
    right: -5px;
    bottom: 0;
}
.offline {
    background: #dedede;
    width: 7px;
    height: 7px;
    border: #fff 2px solid;
    border-radius: 10px;
    position: absolute;
    right: -5px;
    bottom: 0;
}
.member-img {
    position: relative;
}
button.btn.btn-list {
    width: 100%;
    border: none;
    background: none;
    margin-bottom: 10px;
}
.channel-box {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
}
.channel-box button {
    text-align: left;
    background: none;
    border: none;
}
button.setting-icon svg {
    width: 18px;
}
.popup-wrap {
    background: #0000009B;
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100%;
    left: 0;
    height: 100%;
}
.popup-contain {
    max-width: 520px;
    margin: 30px auto;
}
.popup-box {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-sizing: border-box;
    box-shadow: #0000005A 0 0 60px;
    width: 100%;
    float: left;
}
.settings button {
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
    background: #D8EFD3;
    border: #80B9AD 1px solid;
    border-radius: 4px;
    color: #365E32;
}
.popup-header {
    display: flex;
    justify-content: space-between;
}
.popup-header h2 {
    margin: 0;
    padding: 0;
}
.popup-header button {
    background: none;
    border: none;
    font-size: 26px;
}
.tabs-btns{ display: flex;}
.tabs-btns button {
    font-size: 18px;
    background: none;
    border: none;
    border-bottom: #ccc 1px solid;
}
    .opt-rights input {
    scale: 2;
    margin: 10px;
}
.settings button {
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
    background: #D8EFD3;
    border: #80B9AD 1px solid;
    border-radius: 4px;
    color: #365E32;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tabs-btns {
    display: flex;
    justify-content: space-evenly;
    margin-top: 30px;
    margin-bottom: 20px;
}
.information-tabs {
    margin-bottom: 20px;
}
.information-tabs {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 37px;
}
button.leave-channel {
    background: #FFCBCB;
    text-align: center;
    width: 100%;
    border: none;
    padding: 15px;
    border-radius: 5px;
    color: #C80036;
    letter-spacing: 2px;
}
.search-member input {
    width: 100%;
    padding: 10px;
    border: #ddd 1px solid;
    box-sizing: border-box;
    border-radius: 6px;
    margin-bottom: 10px;
}
button.add-people-btn {
    border: none;
    background: none;
    width: 100%;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
}
ul.members-list-pop li {
    width: 100%;
    float: left;
    padding: 10px 0;
    font-size: 12px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: #eee 1px solid;
}
.member-box-pop {
    display: flex;
    gap: 10px;
    align-items: center;
}
.action-box button {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 3px;
}
.action-box {
    display: flex;
    gap: 13px;
}
.member-text label{display: block}
.tab-button.active {
    background: white;
    border-bottom: 1px solid white;
}
.tab-content > div {
    display: none;
    border-top: none;
}
.tab-content > div.active {
    display: block;
}
.tab-button{
    padding: 10px 20px;
}

.tab-button.active {
    background: #FDFFE2;
    color: #fff;
    padding: 10px 20px;
    color: #000;
}
.result{ text-align: center;}
.left-bottom-nav li{position: relative;}
div#newActivityBox {
    position: absolute;
    bottom: 50px;
    width: 280px;
    background: #fff;
    left: 50px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: #999 0 0 10px;
}
.create-new-box h2 {
    padding: 0;
    margin: 0;
}
ul.new-activity-box li button {
    display: flex;
    text-align: left;
    background: none;
    border: none;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 21px;
    gap:6px
}
.invite-people {
    display: flex;
    gap: 6px;
}
.create-new-box-header {
    padding: 0;
    border-bottom: #ccc 1px solid;
    margin-bottom: 20px;
    margin-top: 0;
    display:flex;
    justify-content: space-between;
}

.create-new-box-text label {
    display: block;
    font-size: 18px;
}
button.closebtn {
    background: none;
    border: none;
}

.inner-chat-work-area-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    border-top: #eee 1px solid;
    padding-bottom: 0;
}
.extra-links button {
    margin-right: 7px;
}
.logo-qteam {
    color: #fff;
    position: absolute;
    left: 62px;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #FF6969;
}
.inner-chat-work-area-header {
    position: sticky;
    top: 40px;
    width: 100%;
    background: #FFF2CC;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    box-shadow: #ccc 0 0 5px;
    box-sizing: border-box;
    align-items: center;
}
.thred-chat-window .inner-chat-work-area-header {
    position: sticky;
    top: 40px;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    box-shadow: #ccc 0 0 5px;
    box-sizing: border-box;
    align-items: center;
}
.inner-chat-work-area-header-title button{ margin:0; padding:0; background: none; border:0;}
.inner-chat-work-area-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.inner-chat-work-area-header-title h2{ margin:0; padding:0; font-weight: 500; font-size: 18px;}
.date-box {
    display: flex;
    justify-content: center;
    background: #eee;
    margin-bottom: 5px;
    position: relative;
    top: 0;
    padding: 5px;

}
.date-box span {
    display: inline-block;
    text-align: center;
    background: #fff;
    margin-top: 0;
    position: relative;
    top: 0;
    padding: 5px 10px;
    border-radius: 10px;
    border: #eee 1px solid;
    font-size: 11px;
}
.msg-box {
    border: #ccc 1px solid;
    border-radius: 5px;
    margin-bottom: 23px;
}
.msg-box-img img {
    max-width: 38px;
    border-radius: 10px;
}
.inner-chat-work-area-content {
    padding: 20px;
}
.msg-box-header {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.msg-box-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.msg-box-header-right svg {
    height: 22px;
}
.time-box {
    font-size: 14px;
    color: #999;
}
.msg-box-content {
    padding: 0;
    box-sizing: border-box;
    font-size: 13px;
    margin-bottom: 20px;
    padding-left: 56px;
    color: #45474B;
}
.msg-box-title {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    align-items: center;
}
.msg-box-header-right button {
    background: none;
    border: none;
}
.msg-box-header-right {
    display: flex;
    gap: 10px;
}
.inner-chat-work-area {
    width: 81%;
    background: #fff;
    border-radius: 0;
    box-shadow: #ccc 0 0 10px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    position: relative;
    display: flex;
}
.main-chat-window {
    width: 100%;
    position: relative;
}
.thred-chat-window {
    width: 46%;
    background: #fff;
    box-shadow: #0000003A 0 0 10px;
    position: relative;
}
.thred-actions {
    display: flex;
    gap: 20px;
}
.thred-actions button {
    background: none;
    border: none;
    font-size: 22px;
}
.filter-box {
    position: relative;
}
ul.filter-box-opt {
    background: #fff;
    border-radius: 7px;
    position: absolute;
    right: 0;
    width: 190px;
}
ul.filter-box-opt button {
    padding: 10px;
    border-bottom: #eee 1px solid;
    width: 100%;
}
ul.channels-list button {
    font-size: 16px;
}
.channel-header {
    display: flex;
}
button.add-new-channel {
    background: #fff;
    border: none;
    width: 34px;
    height: 30px;
    line-height: 46px;
    border-radius: 40px;
}
.newworkspace-wrap {
    width: 100%;
    position: fixed;
    background: rgba(0, 0, 0, .6);
    top: 0;
    height: 100%;
    z-index: 99999;
}
.newworkspace-contain {
    max-width: 500px;
    margin: 0 auto;
}
.workspace-header {
    display: flex;
    justify-content:space-between;
}
.workspace-box {
    width: 100%;
    float: left;
    background: #fff;
    border-radius: 10px;
    margin-top: 20%;
}
.workspace-box h1{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}
.workspace-header button {
    border: none;
    background: none;
}

.workspace-box input {
	width: 100%;
    padding: 14px;
    box-sizing: border-box;
    font-size: 16px;
}
.createbtn {
    width: 100%;
    background: rgba(2, 0, 36, 1);
    color: #fff;
    padding: 10px;
    margin-top: 10px;
    border: none;
    font-size: 22px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.workspace-header h1 {
    font-size: 22px;
    text-align: left;
    margin: 0;
    padding: 0;
}
.workspace-header {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    border-bottom: #ddd 1px solid;
}
.subheading {
    background: #eee;
    padding: 10px 20px;
    font-weight: 600;
    text-align: center;
}

.teamspace-box h2 {
    padding: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}   
.workspacelist span {
    font-size: 11px;
}
.direct-msg-area h2 {
    font-size: 18px;
}

.direct-msg-area {
    width: 100%;
}
.thred-actions {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
}
.member-count {
    font-size: 14px;
}
.teamspace-box h2 span {
    font-weight: 300;
    font-size: 13px;
}
ul.extra-links select {
    border: #ccc 1px solid;
    padding: 5px;
    border-radius: 6px;
}
.teamspace-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    border-radius: 6px;
    padding: 10px;
    border:none;
    width: 100%;
}
    ul.workspacelist li {
        margin-bottom: 12px;
        display: flex;
        gap: 10px;
        align-items: center;
        border: #ccc 1px solid;
        padding: 5px;
        border-radius: 6px;
        margin-bottom: 10px;
    }
.workspacelist button {
    border: none;
    padding: 0;
    background: none;
}
hr{ border: #fff 1px solid;}

.register-outer {
    height: 100%;
    width: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}
.register-container {
    max-width: 650px;
    margin: 0 auto;
    background: #fff;
    margin-top: 5%;
    border-radius: 10px;
    box-shadow: #ccc 0 0 5px;
}.register-form {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
ul.register-form {
    margin: 0;
    padding: 0;
    display: block;
}
.register-form h2 {
    text-align: center;
    background: #eee;
    padding: 10px;
    margin: 0;
    margin-bottom: 10px;
}

ul.register-form label {
    width: 100%;
    display: block;
    font-size: 16px;
    padding-bottom: 5px;
    color: rgba(0, 0, 0, .7);
}
ul.register-form input, ul.register-form textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: #ccc 1px solid;
    border-radius: 7px;
    box-shadow: #eee 0 0 9px;
    font-size: 22px;
}
ul.register-form select {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: #ccc 1px solid;
    border-radius: 7px;
    box-shadow: #eee 0 0 9px;
    font-size: 18px;
}
ul.register-form li {
    width: 49%;
    box-sizing: border-box;
    display: inline-block;
    padding: 0;
    margin: 10px 0;
    vertical-align: bottom;
}
button.verify-email-btn {
    background: none;
    border: none;
    color: #6EACDA;
    border: #6EACDA 1px solid;
    padding: 15px;
    border-radius: 7px;
    font-weight: 600;
    margin: 0px 0;
}
li.full-size {
    width: 99% !important;
    clear: both;
}
ul.register-action-btn {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
button.register-btn, button.login-btn {
    background: #694F8E;
    color: #fff;
    border: #694F8E 1px solid;
    padding: 12px 20px;
    font-size: 17px;
    border-radius: 7px;

}
.login-btn-border{
    background: #fff;
    border: #694F8E 1px solid;
    color: #694F8E;
    padding: 12px 20px;
    font-size: 17px;
    border-radius: 7px;
    text-decoration: none;
    display: block;
}
ul.register-form em {
    color: #ff0000;
}
.main-group-img img {
    max-width: 37%;
    border-radius: 6px;
}
.group-profile {
    text-align: center;
    padding: 10px;
    background: #CDE8E5;
    font-size: 13px;
}
.group-action-list {
    border: #fff 7px solid;
    box-shadow: #ccc 0 0 7px;
}
.main-group-txt label {
    width: 100%;
    text-align: center;
    display: block;
    font-weight: 600;
}
.qteam {
    display: flex;
    align-items: center;
    margin-top: 77px;
}
.qteam-left {
    width: 50%;
    height: calc(100vh - 77px);
    padding: 20px;
    box-sizing: border-box;
}
.banner-login {
    background: #5CC1B1 url(../images/chat-web.webp) no-repeat;
    height: 100%;
    border-radius: 20px;
    padding: 30px;
    box-sizing: border-box;
    background-size: 80%;
    background-position: bottom center;
}
.banner-login h2{
color: #fff;
letter-spacing: 6px;
}
.qteam-right {
    width: 370px;
    margin: 0 auto;
}
.login-box h2 {
    text-align: center;
    font-size: 39px;
}
.login-box-field li label {
    display: block;
    width: 100%;
}
.login-box-field li {
    margin-bottom: 15px;
}
.login-box-field input {
    border: #cccc 1px solid;
    padding: 10px;
    border-radius: 9px;
    font-size: 22px;
    margin-top: 6px;
}
.banner-login p {
    width: 50%;
    color: #000;
    line-height: 25px;
    font-size: 17px;
}
.login-box-field input {
    width: 100%;
}
.login-box h2 {
    margin: 0;
    padding: 0;
    font-size: 30px;
}
.login-box p {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: #ccc 1px solid;
    padding-bottom: 20px;
}
ul.login-action-btn button {
    width: 100%;
}
a.btn-border {
    display: inline-block;
    padding: 20px 0;
}
ul.login-action-btn {
    text-align: center;
}
.login-box h2 span {
    color: #FF6969;
    font-weight: 300;
}
.invitebox {
    box-shadow: #ccc 0 0 10px;
    border-radius: 5px;
    padding: 10px;
}
.invitegroupName {
    font-weight: 600;
    font-size: 14px;
}
.invite-left {
    display: flex;
    justify-content: space-between;
    border-bottom: #eee 1px solid;
    align-items: center;
}
.invitegroupName {
    font-weight: 600;
    padding-bottom: 5px;
    margin-bottom: 0;
}
ul.workspacelist li {
    margin-bottom: 12px;
}
.invite-info {
    font-size: 12px;
    display: flex;
    gap: 10px;
}
.invite-info span {
    border-left: #eee 1px solid;
    padding-left: 10px;
    color: #999;
}
.invite-opt {
    padding-top: 7px;
}
.invite-info svg {
    width: 14px;
    height: 14px;
    position: relative;
    top: 2px;
}
button.accept-btn {
    padding: 0;
    margin: 0;
    background: #fff;
    color: #40A578;
    width: 22px;
    height: 22px;
    border: #40A578 1px solid;
    border-radius: 20px;
}
button.decline-btn{
    padding: 0;
    margin: 0;
    background: #fff;
    color: #EE4E4E;
    width: 22px;
    height: 22px;
    border: #EE4E4E 1px solid;
    border-radius: 20px;
}
.invite-btns-opt button svg {
    width: 15px;
    position: relative;
    top: -1px;
}
.workspace-box ul {
    padding: 20px;
    box-sizing: border-box;
    height: 290px;
    overflow: auto;
}
.invitebox.new-invitation {
    border: #39A7FF 1px solid;
}
.buttons-action-group {
    width: 100%;
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.buttons-action-group button {
    display: flex;
    justify-content: center;
    gap: 7px;
    align-items: center;
}

button.accept-action-btn {
    border: none;
    border-radius: 6px;
    background: none;
    color: #39A7FF;
}
button.decline-action-btn {
    border: none;
    border-radius: 6px;
    background: none;
    color: #A9A9A9;
}
button.accept-action-btn svg {
    width: 20px;
    height: 20px;
    padding: 1px;
    box-sizing: border-box;
    color: #39A7FF;
}
button.decline-action-btn svg {
    width: 20px;
    height: 20px;
    padding: 1px;
    box-sizing: border-box;
    color: #A9A9A9;
}

.ql-toolbar.ql-snow {
    width: 100%;
}
button.send-btn {
    border: none;
    background: none;
}
.editor-box {
    width: 100%;
}
.nodata img {
    max-width: 300px;
    margin-bottom: 20px;
}
.nodata-md img {
    max-width: 180px;
    display: inline-block;
}
.nodata-md { text-align: center;}
.nodata-sm { text-align: center;}
.nodata-sm img {
    max-width: 120px;
    display: inline-block;
}


button.small-icon svg {
    width: 16px;
}
button.audio-icon, button.pin-icon {
    background: none;
    border: #ccc 1px solid;
    border-radius: 40px;
    width: 30px;
    height: 30px;
}
button.audio-icon svg, button.pin-icon svg{
    width: 15px;
}
.editor-box .ql-editor {
    height: 90px;
    font-size: 18px;
    padding: 15px 15px;
}
.main-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.extra-links {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

button.savedraft-btn {
    background: #eee;
    border: none;
    padding: 10px;
    border-radius: 38px;
    color: #000;
    border: #ccc 1px solid;
}
.extra-links li {
    display: flex;
    align-items: center;
    gap: 7px;
}
.lms_header ul.dotPanel li {
    padding: 10px 0px;
}
.modal-body {
    padding: 20px;
}
.invite-btn {
    position: relative;
}   
.new-invite {
    position: absolute;
    background: #ff0000;
    width: 5px;
    height: 5px;
    border-radius: 20px;
    right: 14px;
    border: #ffffff2a 1px solid;
}
.msg-box-wrap {
    height: calc(100vh - 440px);
    overflow: scroll;
}
.channels-box .nodata-sm img {
    max-width: 85px;
}
.ql-container{ height: auto !important;}
.inner-chat-work-area-content {
    padding: 20px;
    height: calc(100% - 250px);
}
div#editor2 {
    padding: 0;
}
ul.new-teamspace-area {
    height: auto;
}
.workspace-box.h-auto ul {
    height: auto;
}
.no-action, .no-action:hover {
    opacity: .3;
    cursor: auto;
}
.speech-to-text {
    background: #fff url(../images/speech-to-text.svg);
    width: 20px;
    height: 20px;
    display: block;
    background-size: 100%;

 
}
button.speech-to-text-icon {
    background: none;
    border: #ccc 1px solid;
    border-radius: 30px;
    padding: 4px;
}
button.active-btn {
    color: #ff0000;
}
.active-btn .speech-to-text {
    background: #fff url(../images/speech-to-text-active.svg);
    width: 20px;
    height: 20px;
    display: block;
    background-size: 100%;
}
.form-container .form-box label {
    margin-bottom: 10px;
    display: inline-block;
}
.pocket-box-wrap .msg-box {
    border: #387478 1px solid;
    background: #E2F1E7;
}
.pocket-box-wrap .date-box {
    background: #387478;
}