@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@300;400;500;600;700&display=swap');

body {font-family: "Montserrat", sans-serif;font-weight: 400;font-style: normal;font-size: 14px;width: 100%;background: #fff;display: flex;
height: 100vh;}
img {max-width: 100%;}
li {list-style: none;}
a:hover {text-decoration: none !important;}
p:hover {text-decoration: none !important;}
h1,h2,h3,h4,h5,h6,ol,li,ul,a,img,p,span,strong {padding: 0px;margin: 0px;}
h1,h2,h3,h4,h5,h6 {font-weight: normal}
a:hover,
a:focus {outline: none;text-decoration: none}
* {padding: 0;margin: 0;box-sizing: border-box}
section {float: left;width: 100%}
/*.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {max-width: 1170px;}*/
a {text-decoration: none;}

/*------------Header---------------*/
.TopHeader {display: inline-block;width: 100%;position: fixed;left: 0;top: 0;z-index: 99;background: #05080f;color: #fff;padding: 6px 0;}
.ChannelsOptions {padding-top: 5px;}
.ChannelsOptions a {font-size: 16px;font-weight: 600;color: #d5d5d5;}
.ChannelsOptions a i {display: inline-block;width: 28px;vertical-align: top;margin-right: 15px;opacity: 0.7;}
.ChannelsOptions a i.DashBoardIcon {width: 22px;}
.SlideBarChatSection {display: flex;width: 100%;padding-top: 48px;overflow: hidden;}
.sidebar {width: 300px;background: #0f1a2e;color: white;padding: 20px 0;display: flex;flex-direction: column;
 border-right: 1px solid rgba(255, 255, 255, 0.1);}
.SidebarOption {list-style: none;margin-top: 30px;}
.SidebarOption li {padding: 10px;background: #40444b;margin-bottom: 5px;border-radius: 5px;cursor: pointer;transition: 0.3s;}
.SidebarOption li:hover {background: #7289da;}
.main-content {flex: 1;display: flex;flex-direction: column;background: #0a111f;}
.chat-header {padding: 15px;background: #0a111f;color: white;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.chat-headerTop h2 {display: inline-block;font-size: 20px;font-weight: 600;padding-right: 10px;}
.chat-headerTop span i {font-size: 20px;color: white;position: relative;}
.UserConversDropDownMenu li .dropdown-item i.fa-star, .chat-headerTop span i.fa-star {color: #f7c81a;}
.UserStutas {margin-top: 7px;}
.UserStutas ul li {display: inline-block;padding-right: 20px;}
.chat-headerTop span i:hover::after {position: absolute;left: 50%;top: 25px;content: "Add to Favorites";background: #000;width: 133px;
 height: 30px;text-align: center;font-family: "Montserrat", sans-serif;font-size: 14px;align-content: center;border-radius: 5px;
 transform: translate(-50%,0);font-weight: 500;color: #ddd;}
.chat-headerTop span i.fa-star:hover::after {content: "Remove From Favorites";width: 186px;}
.ChackIconUser {background: #256c0a;border-radius: 50%;width: 16px;display: inline-block;height: 16px;align-content: center;text-align: center;
 line-height: 17px;margin-right: 5px;}
.ChackIconUserAway {background: #fbc040;border-radius: 50%;width: 16px;display: inline-block;height: 16px;align-content: center;text-align: center;
 line-height: 17px;margin-right: 5px;}
.ChackIconUserNotDis {background: #ca4a4c;border-radius: 50%;width: 16px;display: inline-block;height: 16px;align-content: center;
 text-align: center;line-height: 17px;margin-right: 5px;}
.ChackIconUserOffline {border: 2px #fff solid;border-radius: 50%;width: 14px;display: inline-block;height: 14px;align-content: center;
 text-align: center;line-height: 17px;margin-right: 5px;vertical-align: middle;}
.ChackIconUserOffline img{ display: none;}
.UserOnline span {vertical-align: middle;}
.ChackIconUserCount {background-color: #0a111f;border-radius: 50%;width: 12px;display: inline-block;height: 12px;align-content: center;
text-align: center;line-height: 17px;margin-right: 5px;}
.ChackIconUser img, .ChackIconUserAway img, .ChackIconUserNotDis img {width: 10px;}
.UserOnline .fa-thumb-tack {margin-left: 10px;color: #aaa;margin-right: 5px; vertical-align: top; margin-top: 4px;}
.UserStutas ul li a {color: #aaa;}
.UserAddHeader i {margin-right: 5px;}
.UserNameIcon {width: 40px;height: 40px;background: #d9ffd8;text-align: left;text-align-last: left;align-content: center;border-radius: 50%;
 color: #256c0a;font-size: 20px;font-weight: 700;display: inline-block;font-style: normal;padding-left: 12px;margin-right:4px;vertical-align: top;}
.UserName {font-size: 34px;padding: 10px 0;font-weight: 600;}
.UsaerDetails p {background: transparent;padding: 0;font-size: 17px;color: #8c8c8c;}
.UsaerDetails ul {margin-top: 10px;margin-bottom: 20px;}
.UsaerDetails ul li {display: inline-block;margin-right: 10px;}
.UsaerDetails ul li a {background: transparent;padding: 6px 10px;border-radius: 5px;display: inline-block;color: #fff;}
.UsaerDetails ul li a:hover {background: rgba(255, 255, 255, 0.1);}
.UsaerDetails ul li a i {margin-right: 5px;}
.ChatDate {margin: 20px 0;text-align: center;position: relative;}
.ChatDate {margin: 0 0;text-align: center;position: relative;border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
/* .ChatDate::before {position: absolute;left: 0;top: 11px;content: "";background: rgba(255,255,255,0.2);width: 100%;height: 1px;} */
.ChatDate span {position: absolute;background: #0a111f;font-size: 13px;font-weight: 500;padding: 2px 10px;left: 50%;top: -14px;
 transform: translate(-50%, 0);border-radius: 30px;z-index: 9;}
.chat-messages {flex: 1;padding: 15px 0;overflow-y: auto;color: white;scrollbar-width: thin;}
/* .UserSendMessageBx {position: relative;padding: 15px 0 15px 70px;} */
.UserSendMessageBx {position: relative;padding: 15px 0 15px 20px;}
/* .UserSendMessageIconBx {position: absolute;left: 14px;top: 13px;width: 40px;} */
.UserSendMessageIconBx {position: relative;width: 40px; float: left;}
.UserSendMessageText {overflow: hidden;padding-left: 20px;}
.UserSendMessageIconBx i {line-height: 23px;width: 40px;height: 40px;background: #d9ffd8;text-align: center;text-align-last: left;
 align-content: center;border-radius: 50%;color: #256c0a;font-size: 19px;font-weight: 700;display: inline-block;font-style: normal;
 padding-left: 12px;padding-top: 4px;}
.UserSendMessageIconBx .OnlineStatus {bottom: -2px;box-shadow: 0 0 0 2px #0a111f;}
.UserSendMessageIconBx .awayStatus {bottom: -2px;box-shadow: 0 0 0 2px #0a111f;}
.UserSendMessageIconBx .donotdistrubStatus {bottom: -2px;box-shadow: 0 0 0 2px #0a111f;}
.UserSendMessageIconBx .offlineStatus {bottom: -2px;box-shadow: 0 0 0 2px #0a111f;}
.UserSendMessageText h4 {font-size: 15px;font-weight: 600;padding-bottom: 5px; color: #fff;}
.UserSendMessageText h4 span {font-weight: normal;padding-left: 10px;font-size: 14px;}
.reply-group-sender h4 {font-size: 17px;font-weight: 600;padding-bottom: 5px;}
.reply-group-sender h4 span {font-weight: normal;padding-left: 10px;font-size: 15px;}
.UserSendMessageText p {color: #ccc;font-size: 14px;white-space: pre-line;}
.chat-messages strong {display: block;color: #7289da;}
.chat-input {padding: 20px;background: #0a111f;display: flex;/* border-top: 1px solid rgba(255, 255, 255, 0.1); */}
.chat-input .form-control {flex: 1;padding: 12px;border: none;border-radius: 5px;font-size: 16px;background: transparent;color: white;
 resize: none;box-shadow: none;}
.SendIcon {padding: 5px;border: none;background: #576380;color: white;cursor: pointer;border-radius: 5px;font-size: 15px;transition: 0.3s;
 width: 50px;float: right;}
.SendIcon:disabled {background-color: #ccc;color: #666;cursor: not-allowed;opacity: 0.6;}
.SendIcon img {max-width: 20px;opacity: 0.5;}
.SendIcon:hover {background: #6a799d;}
.SendIcon:hover img {opacity: 1;}
.ChatWriteBx {display: inline-block;width: 100%;border: 2px #7e7e7e solid;border-radius: 7px;}
.ChatAttachmentBx {background: rgba(255, 255, 255, 0.1);padding: 7px 20px;display: inline-block;width: 100%;}
.ChatAttachmentBx ul {display: inline-block;margin-top: 5px;}
.ChatAttachmentBx ul li {display: inline-block;padding: 0 10px 0 0;}
.ChatAttachmentBx ul li a {display: inline-block;}
.LetterText {border-right: 2px solid rgba(255, 255, 255, 0.3);}
.AttachmentIcon img {max-width: 22px;}
.SmileIcon img {max-width: 20px;}
.room-info {position: relative;display: inline-block;font-size: 16px;padding-right: 20px;padding-bottom: 5px;}
/* .unread-msg-count {min-width: 20px;height: 25px;padding: 0 5px;font-size: 11px;border-radius: 999px;background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);} */
.unread-msg-count {min-width: 29px;height: 25px;padding: 0 5px !important;font-size: 11px;border-radius: 999px;background-color: rgb(255, 255, 255);color: rgb(0, 0, 0);float: right;height: 18px;
text-align: center;margin: 5px 0 0 8px;align-content: center;}
.unread-msg-count1 {position: absolute;top: -2px;right: -10px;width: 20px;height: 20px;background-color: rgb(255, 255, 255);color: rgb(0, 0, 0);
 font-size: 10px;border-radius: 50%;display: inline-flex;justify-content: center;align-items: center;}
.SearchBx {position: relative;display: flex;}
.SearchIcon {position: absolute;width: 18px;left: 10px;top: 6px;opacity: 0.7;}
.SearchBx .form-control {background: #222c3e;padding-left: 45px;border: none;color: #fff;width: 90%;box-shadow: none;}
.SearchBx .form-control::placeholder {color: #fff;opacity: 0.8;}
.HelpIcon {padding: 6px;opacity: 0.6;}
.HeaserRight {text-align-last: right;}
.HeaderRightIcon {margin-right: 10px;opacity: 0.6;display: inline-block;margin-top: 4px;vertical-align: top;}
.UserIcon a {display: inline-block;width: 30px;height: 30px;background: #d9ffd8;text-align: center;text-align-last: center;align-content: center;
 border-radius: 50%;color: #ff0606;font-size: 16px;font-weight: 600;}
.UserIcon {position: relative;}
.OnlineStatus {position: absolute;right: -3px;bottom: -12px;background: #52b886;width: 14px;height: 14px;border-radius: 50%;
 border: 2px #52b886 solid;line-height: 9px;box-shadow: 0 0 0 2px #092000;}
.awayStatus {position: absolute;right: -4px;bottom: -6px;background: #efaa00;width: 14px;height: 14px;border-radius: 50%;
 border: 2px #efaa00 solid;line-height: 9px;box-shadow: 0 0 0 2px #092000;}
.donotdistrubStatus {position: absolute;right: -4px;bottom: -6px;background: #ca4a4c;width: 14px;height: 14px;border-radius: 50%;
 border: 2px #ca4a4c solid;line-height: 9px;box-shadow: 0 0 0 2px #092000;}
.offlineStatus {position: absolute;right: -4px;bottom: -6px;background: #0a111f;width: 14px;height: 14px;border-radius: 50%;
 border: 2px #ffffff solid;line-height: 9px;box-shadow: 0 0 0 2px #092000;}
.LsChatDropDown .dropdown-toggle {border: none;background: transparent;color: #fff;font-size: 18px;font-weight: 600;box-shadow: none;}
.LsDropdownMenu li a span {display: block;font-size: 14px;font-weight: 400;}
.invite-people strong {font-weight: 500;}
.LsDropdownMenu {background: #0a111f;border: 1px #403f3f solid;padding: 0;overflow: hidden;}
.LsDropdownMenu li a {color: #a4a4a4;padding: 10px 10px 10px 40px;background: transparent !important;}
.LsDropdownMenu li a:hover {background: #202633 !important;}
.LsDropdownMenu li a i {position: absolute;left: 15px;top: 21px;}
.LsDropdownMenu li a:hover, .LsDropdownMenu li a.active {background: rgba(255, 255, 255, 0.2);color: #fff;}
.SideBarCreteTeam {position: relative;margin: 0 20px;}
.LsChatCreateDropDown {position: absolute;right: 0;top: 0;}
.LsChatCreateDropDown .dropdown-toggle {border: none;background: #233e18;}
.LsChatCreateDropDown .dropdown-toggle::after {display: none;}
.LsChatCreateDropDown .dropdown-toggle {border: none;background: #222c3e;width: 30px;height: 30px;border-radius: 50%;padding: 8px;
 line-height: 12px;}
.LsCreateDropdownMenu {background: #091505;border: 1px #535252 solid;}
.LsCreateDropdownMenu li a {color: #a4a4a4;padding: 10px;}
.LsCreateDropdownMenu li a i {margin-right: 7px;}
.LsCreateDropdownMenu li .dropdown-divider {border-color: #535252;}
.LsCreateDropdownMenu li a:hover, .LsCreateDropdownMenu li a.active {background: rgba(255, 255, 255, 0.2);color: #fff;}
.SearchChannels {position: relative;margin: 20px 20px 30px;}
.SearchChannels .form-control::placeholder {color: #fff;opacity: 0.8;}
.SearchChannels .form-control {background: #222c3e;padding-left: 45px;border: none;color: #fff;width: 100%;box-shadow: none;}
.SideBarUserList {margin-top: 30px;max-height: 100%;overflow-y: auto;scrollbar-width: thin;}
.SideBarUserList .accordion {background: transparent;border: none;border-radius: 0;}
.SideBarUserList .accordion .accordion-item {background: transparent;border: none;border-radius: 0 !important;margin-bottom: 40px;}
.SideBarUserList .accordion .accordion-item .accordion-button {background: transparent;border: none !important;padding: 0;
 border-radius: 0 !important;color: #a4a4a4;font-size: 15px;padding-left: 20px;text-transform: uppercase;font-weight: 700;box-shadow: none;}
.SideBarUserList .accordion .accordion-item .accordion-body {padding: 0;}
.SideBarUserList .accordion .accordion-item .accordion-button::after {position: absolute;left: 0;top: 0;background-image: url(../img/up-arrow.png);
 background-repeat: no-repeat;background-size: 12px;opacity: 0.6;background-position: left top;line-height: 10px;width: 12px;height: 16px;}
.SideBarUserList .accordion .accordion-item .accordion-button.collapsed::after {top: 3px;}
.DirectMessagesUserList ul li:nth-child(2n-3) .DirectUserIcon i, 
.SideBarUserDropdownMenu li:nth-child(2) .SideBarUserIcon i {background: #ee52ce;color: #fff;}
.DirectMessagesUserList ul li:nth-child(3n-1) .DirectUserIcon i, 
.SideBarUserDropdownMenu li:nth-child(3) .SideBarUserIcon i {background: #52d1ee;color: #fff;}
.DirectMessagesUserList ul li:nth-child(4n-2) .DirectUserIcon i, 
.SideBarUserDropdownMenu li:nth-child(4) .SideBarUserIcon i {background: #0e9f4e;color: #fff;}
.DirectMessagesUserList ul li:nth-child(6n-1) .DirectUserIcon i, 
.SideBarUserDropdownMenu li:nth-child(5) .SideBarUserIcon i {background: #ee9b52;color: #fff;}
.SideBarUserList .accordion .accordion-item .accordion-header {position: relative;margin: 0 20px;}
.DirectMessageMx {position: absolute;top: -1px;right: 4px;width: 17px;height: 17px;line-height: 12px;z-index: 999;cursor: pointer;}
.DirectMessageMx img {opacity: 0.7;}
.DirectMessagesModal .modal-dialog {max-width: 800px;}
.DirectMessagesModal .modal-content {background: #0a111f;border: 1px solid rgba(255, 255, 255, 0.1);}
.DirectMessagesModal .modal-header {background: #152231;border-bottom-color: rgba(255, 255, 255, 0.1);color: #fff;font-size: 18px;
 font-weight: 600;}
.DirectMessagesModal .modal-body {padding: 20px 0;}
.DirectMessagesSearch {display: flex;padding: 0 20px;}
.DirectMessagesInput {width: 100%;margin-right: 7px;}
.DirectMessagesInput .form-control {border-color: #6c6c6c;background: #092000;height: 48px;font-size: 17px;color: #fff;padding: 4px 8px;}
.DirectMessagesBtn .btn-primary {background: #386fe5;height: 48px;font-size: 18px;font-weight: 600;line-height: 36px;border-color: #386fe5;}
.UseTag {color: #aeaeae;font-size: 16px;padding: 10px 20px 0;}
.UseTag span {float: right;}
.DirectUserIcon {position: relative;}
.DirectMessagesUserList {margin-top: 30px;max-height: 400px;overflow-y: auto;scrollbar-width: thin;}
.DirectMessagesUserList ul li a {position: relative;padding: 20px 20px 20px 70px;display: inline-block;width: 100%;color: #fff;font-size: 16px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.DirectMessagesUserList ul li a:hover {background: rgba(255, 255, 255, 0.1);}
.DirectUserSendMessage {position: absolute;right: 30px;top: 29px;width: 15px;opacity: 0.7;display: none;}
.DirectMessagesUserList ul li a:hover .DirectUserSendMessage {display: block;}
.DirectUserIcon {position: absolute;left: 13px;top: 20px;}
.DirectUserMessages h6 {font-weight: 600;color: #eaeaea;}
.DirectUserMessages h6 span {color: #9f9f9f;}
.DirectUserMessages p {color: #8a8a8a;font-weight: 600;}
.DirectUserIcon i {width: 40px;height: 40px;text-align: left;align-content: center;border-radius: 50%;font-style: normal;font-size: 18px;
 font-weight: 600;display: inline-block;background: #ee52ce;color: #fff;padding-left: 10px;}
.DirectUserIcon .OnlineStatus {box-shadow: 0 0 0 2px #092000;bottom: -3px;}
.DirectUserIcon .awayStatus {box-shadow: 0 0 0 2px #092000;bottom: -3px;}
.DirectUserIcon .donotdistrubStatus {box-shadow: 0 0 0 2px #092000;bottom: -3px;}
.DirectUserIcon .offlineStatus {box-shadow: 0 0 0 2px #092000;bottom: -3px;}
.DirectMessagesModal .modal-header .btn-close {background-image: none;box-shadow: none;}
.DirectUserIcon .OffLineStatus {background: #092000;}
.DirectUserIcon .OffLineStatus img {display: none;}
.SideBarUserList .SideBarUserDropdownMenu .nav-link {color: #a4a4a4;font-size: 15px;padding: 10px 15px;width: 100%;}
.SideBarUserList .navbar-nav {width: 100%;display: inline-block;}
.SideBarUserList .navbar-nav .SideBarUserDropdown {width: 100%;}
.SideBarUserList .SideBarUserDropdown .SideBarUserDropdownMenu {position: static;width: 100%;background: transparent;border: none;border-radius: 0;
 padding: 0;}
.SideBarUserIcon {position: relative;display: inline-block;}
.SideBarUserIconCount {position: relative;display: inline-block;}
.SideBarUserIconCount i {line-height: 23px;width: 24px;height: 24px;background: #928d8d;text-align: center;text-align-last: left;
 align-content: center;border-radius: 10%;color: #ffffff;font-size: 13px;font-weight: 600;display: inline-block;font-style: normal;padding-left: 8px;}
.SideBarUserIcon i {line-height: 23px;width: 24px;height: 24px;background: #d9ffd8;text-align: center;text-align-last: left;align-content: center;
 border-radius: 50%;color: #256c0a;font-size: 13px;font-weight: 600;display: inline-block;font-style: normal;padding-left: 7px;}
.SideBarUserIcon .OnlineStatus {bottom: -4px;/* border: 2px #092000 solid; */right: -6px;box-shadow: 0 0 0 2px #103104;}
.SideBarUserIcon .OffLineStatus {background: #092000;}
.SideBarUserIcon .OffLineStatus img {display: none;}
.SideBarUserList .SideBarUserDropdown .SideBarUserDropdownMenu li a {padding: 10px;color: #fff;}
.SideBarUserList .SideBarUserDropdownMenu .nav-link span {padding-left: 10px;font-weight: 600;padding-bottom: 0;}
.SideBarUserList .SideBarUserDropdown .SideBarUserDropdownMenu li a:hover {background: rgba(0, 0, 0, 0.2);}
.LoginSection {background: #fff;padding: 40px 0;overflow-y: auto;}
.LoginSection h2 {font-size: 22px;font-weight: 600;color: #333;}
.LoginMainBx {max-width: 1060px;margin: 70px auto 0;}
.LoginBox {background: #fff;box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);padding: 50px 40px;border-radius: 10px; width: 90%; float: right;}
.LoginBox h4 {font-size: 20px;font-weight: 600;color: #414553;padding-bottom: 40px;}
.LoginBox h2 {font-size: 24px;font-weight: 700;color: #262626;padding-bottom: 24px;}
.LoginForm .form-group {margin-bottom: 20px;}
.LoginForm .form-group label {font-size: 14px;font-weight: 600;color: #414553;}
.LoginForm .form-group .form-control {height: 46px;font-size: 16px;color: #414553;background: #f5f5f5;border: 1px #cecece solid;
 border-radius: 5px;box-shadow: none;}
.Forgotyourpassword a {color: #1773c4;font-weight: 600;}
.LoginBtnBx .btn-primary {font-size: 16px;font-weight: 600;color: #fff;background: #103104;border-radius: 5px;padding: 10px;width: 100%;
 border-color: #103104;}
.LoginBtnBx .btn-primary:hover {background: #0a111f;color: #fff;}
.CreateAccount {text-align: center;margin-top: 17px;font-size: 16px;color: #313131;font-weight: 500;}
.CreateAccount a {font-size: 16px;color: #0a111f;font-weight: 600;}
.LoginLeft {text-align: center;height: 100%;align-content: center;padding: 0 40px;}
.LoginLeft p {font-size: 17px;color: rgba(65, 69, 83, 0.8);padding-top: 10px;}
/*--------------------New Css------------*/
.CreateNewChannelBx {padding: 10px 20px;}
.HelpUrl {color: #868686;font-size: 15px;font-weight: 600;}
.ChooseChannel {margin-top: 20px;}
.ChooseChannel ul li {display: inline-block;width: 48%;}
.PrivateChannel {float: right;}
.ChooseChannel ul li a {display: inline-block;width: 100%;border: 1px #1b2c13 solid;padding: 30px 20px 30px 100px;border-radius: 8px;
 position: relative;}
.ChooseChannel ul li.Active a {border: 1px #233f17 solid;}
.ChooseChannel ul li a i {position: absolute;left: 20px;width: 60px;background: rgba(255, 255, 255, 0.1);height: 60px;border-radius: 50%;
 align-content: center;text-align: center;font-size: 40px;color: rgba(255, 255, 255, 0.5);top: 50%;transform: translate(0, -50%);}
.ActiveChannel {position: absolute;right: 10px;top: 50%;transform: translate(0, -50%);background: #205b08;width: 30px;height: 30px;
 border-radius: 50%;text-align: center;align-content: center;display: none;}
.ChooseChannel ul li.Active .ActiveChannel {display: block;}
.PublicChannel {padding-top: 0;}
.PublicChannel h6 {font-size: 17px;color: #ddd;font-weight: 600;}
.PublicChannel span {font-size: 15px;color: #ddd;}
.ChannelMassege {margin-top: 30px;}
.ChannelMassege .form-control {border-color: #565855;background-color: #092000;height: 100px;resize: none;}
.ChannelMassege p {color: #868686;font-size: 15px;font-weight: 600;margin-top: 10px;}
.CreateChannelBtn {border: none;}
.CreateChannelBtn .btn-primary {font-size: 16px;font-weight: 600;color: #fff;background: #103104;border-radius: 5px;padding: 10px 20px;
 border-color: #103104;}
.CreateChannelBtn .btn-secondary {font-size: 16px;font-weight: 600;border-radius: 5px;padding: 10px 20px;}
.SideBarUserList .navbar {position: static;}
.SideBarUserList .navbar-nav li.nav-item {position: relative;display: flex;align-content: center;}
.UserConversDropDown .btn-secondary {background: transparent;border: none;padding: 0 6px;border-radius: 0;box-shadow: none;opacity: 0;
 margin-top: 0px;}
/* .UserConversDropDown {position: absolute;right: 30px;top: 7px;} */
.UserConversDropDown {float: right;position: absolute;right: 6px;top: 11px;}
.UserConversDropDown .btn-secondary::after {display: none;}
.SideBarUserList .navbar-nav .UserConversDropDownMenu {background: #0a111f;border: 1px solid rgba(255, 255, 255, 0.1);left: 150px;
 padding: 10px 0;list-style: none;position: fixed; text-align: left; margin-top: 40px; left: 290px} 
.UserConversDropDownMenu {display: none;}
.UserPorileDropDownMenu {width: 260px;white-space: normal;word-break: revert-layer;right: 26px !important;background: #0a111f;
 border: 1px solid rgba(255, 255, 255, 0.1);}
.UserPorileDropDownMenu li .dropdown-item {text-align: left;width: 100%;border-radius: 0;background: transparent;text-align-last: left;
 align-content: initial;color: #ddd;font-size: 16px;font-weight: 500;padding: 10px 20px 10px 45px;height: auto;position: relative;}
.UserPorileDropDownMenu li .dropdown-item .SubLine {display: block;font-weight: 400;font-size: 13px;color: #b3b3b3;}
.UserPorileDropDownMenu li .dropdown-item i {position: absolute;left: 16px;top: 13px;font-size: 19px;color: #a4a0a0;}
.UserPorileDropDownMenu li .OnlineColor i {color: #52b886;}
.UserPorileDropDownMenu li .AwayColor i {color: #efaa00;}
.UserPorileDropDownMenu li .DoNotColor i {color: #ca4a4c;}
.ActiveStuts {float: right;}
.UserImageIcon {position: absolute;left: 13px;background: #d9ffd8;color: #000;width: 30px;height: 30px;text-align: center;border-radius: 50%;
 text-align-last: center;align-content: center;}
.UserProfilesIg h5 {font-size: 16px;padding-left: 7px;font-weight: 600;}
.UserProfilesIg h6 {font-size: 15px;padding-left: 7px;font-weight: 400;color: #afaeae;padding-top: 3px;}
.HeaserRight {text-align-last: right;margin-right: 16px;}
.UserConversDropDownMenu li .dropdown-item {color: #d4d4d4;font-size: 15px;background-color: transparent;padding: 8px 20px;font-weight: 600;}
.UserConversDropDownMenu li .dropdown-item:hover {color: #d4d4d4;background-color: rgba(255, 255, 255, 0.1);}
.UserConversDropDownMenu li .dropdown-item i {width: 22px;}
.SideBarUserList .navbar-nav li.nav-item:hover .UserConversDropDown .btn-secondary {opacity: 1;}
.UserConversDropDownMenu li {position: relative;}
.UserConversDropDownMenu li:hover .UserConversDropDownSubMenu {display: block;}
.UserConversDropDownSubMenu {left: 100%;top: 0;background: #092000;border: 1px solid rgba(255, 255, 255, 0.1);}
/*-------------User SendMessage Option--------------*/
.UserSendMessageOption {position: absolute;right: 20px;top: 10px;display: none;}
.UserSendMessageBx:hover .UserSendMessageOption {display: block;}
.UserSendMessageOption ul {list-style: none;margin: 0;border: 1px solid rgba(255, 255, 255, 0.2);padding: 5px 10px;border-radius: 6px;
 background: #0a111f;}
.UserSendMessageOption ul li {display: inline-block;padding: 0;}
.UserSendMessageOption ul li a {display: inline-block;color: #7b7b7b;font-size: 18px;background: transparent;width: 30px;height: 30px;
 text-align: center;border-radius: 5px;align-content: center;position: relative;}
.UserSendMessageOption ul li a:hover {background: rgba(255, 255, 255, 0.1);}
.UserSendMessageOption ul li a span {position: absolute;left: 50%;top: -43px;background: #000;text-align: center;font-size: 10px;display: none;
 border-radius: 5px;font-weight: 500;color: #fff;padding: 2px 15px;transform: translate(-50%, 0);white-space: nowrap;}
.UserSendMessageOption ul li a span::before {position: absolute;left: 50%;top: 100%;content: "";border: 5px solid transparent;
 border-top: 5px solid #000;transform: translate(-50%, 0);}
.UserSendMessageOption ul li a:hover span {display: block;}
/* For reply message in center */
.reply-msg {position: relative;}
.self-reply-msg {padding-left: 70px;position: relative;padding-bottom: 0;padding-top: 0;}
.reply-msg p {color: #ccc;font-size: 16px;white-space: pre-line;}
.UserSendMessageOptionR {position: absolute;right: 20px;top: 0;display: none;}
.reply-msg:hover .UserSendMessageOptionR {display: block;}
.self-reply-msg:hover .UserSendMessageOptionR {display: block;}
.UserSendMessageOptionR ul {list-style: none;margin: 0;border: 1px solid rgba(255, 255, 255, 0.2);padding: 5px 10px;border-radius: 6px;
 background: #0a111f;}
.UserSendMessageOptionR ul li {display: inline-block;padding: 0;}
.UserSendMessageOptionR ul li a {display: inline-block;color: #7b7b7b;font-size: 18px;background: transparent;width: 30px;height: 30px;
 text-align: center;border-radius: 5px;align-content: center;position: relative;}
.UserSendMessageOptionR ul li a:hover {background: rgba(255, 255, 255, 0.1);}
.UserSendMessageOptionR ul li a span {position: absolute;left: 50%;top: -43px;background: #000;text-align: center;font-size: 10px;display: none;
 border-radius: 5px;font-weight: 500;color: #fff;padding: 2px 15px;transform: translate(-50%, 0);white-space: nowrap;}
.UserSendMessageOptionR ul li a span::before {position: absolute;left: 50%;top: 100%;content: "";border: 5px solid transparent;
 border-top: 5px solid #000;transform: translate(-50%, 0);}
.UserSendMessageOptionR ul li a:hover span {display: block;}
/* Added by Aruna Paliwal */
.replied-to {font-size: 0.9em;color: #d5d0d0;display: flex;flex-direction: column;position: relative;margin-bottom: 10px;}
.quoted-message {border-left: 3px solid #ccc;padding-left: 10px;color: #444;margin: 5px 0;}
.reply-preview {display: flex;justify-content: space-between;align-items: center;background: #eee;border-left: 4px solid #4caf50;
 border-radius: 8px;padding: 10px 12px;margin-bottom: 6px;position: relative;max-width: 100%;gap: 10px;}
.reply-content {flex: 1;color: #000;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.reply-image-preview img {max-width: 60px;max-height: 60px;object-fit: cover;border-radius: 6px;flex-shrink: 0;}
.highlighted {background-color: #0c1a3a;transition: background-color 0.3s ease;}
.reply-link {color: inherit;text-decoration: none;display: inline;white-space: normal;font-weight: 400;}
.reply-link .inline {display: inline;font-weight: 600;}
.cancel-reply-btn {position: absolute;top: 6px;right: 8px;background: none;border: none;font-size: 16px;cursor: pointer;}
.progress-bar-wrapper {width: 100%;height: 6px;background-color: #eee;margin-top: 6px;border-radius: 3px;overflow: hidden;}
.progress-bar {height: 100%;width: 0%;background-color: #3498db;transition: width 0.2s;}
.message-meta {/* margin-bottom: 4px;position: absolute;left: 70px;top: 0; */width: 200px;}
.message-meta-reply {position: relative;width: 200px;}
.tag {font-size: 12px;font-weight: bold;margin-right: 6px;color: #555;display: none;}
.tag.pinned {color: #007bff;}
.tag.saved {color: #28a745;}
.sidebar {position: relative;}
.errorlist {background-color: rgb(255, 255, 255);padding: 8px;border-radius: 10px;margin-bottom: 8px;}
.ImageShowModel {display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.8);
 justify-content: center;align-items: center;}
#media-container {position: relative;margin: auto;padding: 20px;max-width: 90%;background-color: #fff;
 box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);border-radius: 10px;}
#media-container {position: relative;margin: auto;padding: 2px;max-width: 90%;background-color: #fff;box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
border-radius: 10px;}.close {color: #fff;font-size: 35px;font-weight: bold;position: absolute;top: 20px;right: 25px;cursor: pointer;z-index: 1000;}
.close:hover, .close:focus {color: #bbb;text-decoration: none;cursor: pointer;}
#media-container img {width: 100%;max-width: 800px;display: block;margin: auto;border-radius: 10px;}
#media-container>audio, #media-container>video {width: 100% !important;max-width: 800px;display: block;margin: auto;border-radius: 10px;}
.ImageShowModel .content {display: flex;justify-content: center;align-items: center;height: 100vh;}
.tag-input-wrapper {display: flex;flex-wrap: wrap;align-items: center;gap: 5px;padding: 5px;border: 1px solid #ccc;border-radius: 5px;
 min-height: 35px;position: relative;}
.tag-container {display: none;flex-wrap: wrap;gap: 5px;align-items: center;}
.user-tag {background-color: #e0e0e0;padding: 4px 8px;border-radius: 15px;display: flex;align-items: center;font-size: 14px;}
.user-tag span {margin-right: 6px;color: #000;}
.user-tag .remove-user {cursor: pointer;font-weight: bold;color: #666;}
.tag-input {flex: 1;min-width: 120px;border: none;outline: none;padding: 6px;color: #fff;background-color: #0a111f;}
/* .UserSendMessageOptionReply {position: relative;top: 0;display: none;} */
.UserSendMessageOptionReply {position: absolute;right: 25px;top: 9px;display: none;}
.UserSendMessageTextSide:hover .UserSendMessageOptionReply {display: inline-block;}
.UserSendMessageBx:hover .UserSendMessageOptionReply {display: inline-block;}
.UserSendMessageOptionReply ul {list-style: none;margin: 0;border: 1px solid rgba(255, 255, 255, 0.2);padding: 2px 6px;border-radius: 6px;
 background: #0a111f;}
.UserSendMessageOptionReply ul li {display: inline-block;padding: 0;}
.UserSendMessageOptionReply ul li a {display: inline-block;color: #7b7b7b;font-size: 16px;background: transparent;width: 22px;height: 22px;
 text-align: center;border-radius: 5px;align-content: center;position: relative;}
.UserSendMessageOptionReply ul li a:hover {background: rgba(255, 255, 255, 0.1);}
.UserSendMessageOptionReply ul li a span {position: absolute;left: 50%;top: -43px;background: #000;text-align: center;font-size: 10px;
 display: none;border-radius: 5px;font-weight: 500;color: #fff;padding: 2px 15px;transform: translate(-50%, 0);white-space: nowrap;}
.UserSendMessageOptionReply ul li a span::before {position: absolute;left: 50%;top: 100%;content: "";border: 5px solid transparent;
 border-top: 5px solid #000;transform: translate(-50%, 0);}
.UserSendMessageOptionReply ul li a:hover span {display: block;}
/*-----Add-member------*/
.sidebar-right-container {background: #0a111f;border-left: 1px solid rgba(255, 255, 255, 0.1);width: 30%;color: #fff;}
.sidebar-right-header {padding: 28px 20px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);position: relative;}
.sidebar-right-container-reply .sidebar-right-header {position: absolute;width: 100%;background: #0a111f;z-index: 9;top: 0;left: 0;height: 84px;}
span.HeaderTitle {font-size: 18px;font-weight: 600;color: #fff;}
.subtitle {color: rgba(216, 218, 223, 0.56);font-size: 12px;border-left: 1px solid rgba(222, 224, 230, 0.16);padding: 0 8px;margin: 0 0 0 8px;
 text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.CrossIcon {position: absolute;right: 10px;width: 10px;}
.CrossIcon img {opacity: 0.5;}
.sidebar-right-Member {display: flex;flex-direction: row;-moz-box-align: center;align-items: center;padding: 16px 20px;color: #fff;}
.TitleMembers {flex: 1 1 0%;font-family: "Open Sans", sans-serif;font-weight: 600;font-size: 14px;line-height: 20px;}
.add-members {padding: 5px 19px 5px 30px;border: none;background: #465d8a;color: white;cursor: pointer;border-radius: 5px;font-size: 15px;
 transition: 0.3s;font-weight: 600;position: relative;}
.add-members img {width: 12px;position: absolute;left: 11px;top: 11px;}
.sidebar-right-list {padding: 0;max-height: 82vh;overflow-y: auto;scrollbar-width: thin;margin-top: 0;}
.sidebar-right-list h6 {font-weight: 600;font-size: 12px;line-height: 28px;letter-spacing: 0.02em;text-transform: uppercase;padding: 0 20px;
 color: rgba(220, 221, 225, 0.56);}
.sidebar-right-list .navbar-nav {width: 100%;display: inline-block;}
.sidebar-right-list .navbar-nav li.nav-item {position: relative;}
.sidebar-right-list .SideBarUserDropdownMenu .nav-link {color: #a4a4a4;font-size: 15px;padding: 15px 20px;}
.sidebar-right-list .SideBarUserDropdownMenu .nav-link:hover {background: rgba(255, 255, 255, 0.1);}
.sidebar-right-list .SideBarUserDropdownMenu .nav-link span {padding-left: 10px;font-weight: 600;}
.SendMessage-ikalBe {position: absolute;right: 13px;top: 16px;width: 23px;border: none;padding: 4px;height: 24px;line-height: 15px;
 border-radius: 3px;background: transparent;display: none;}
.sidebar-right-list .SideBarUserDropdownMenu .nav-link:hover .SendMessage-ikalBe {display: block;}
.SendMessage-ikalBe:hover {background: rgba(255, 255, 255, 0.2);}
/* Add by Aruna Paliwal */
.sidebar-right-container-save {background: #0a111f;border-left: 1px solid rgba(255, 255, 255, 0.1);width: 24%;color: #fff;}
.sidebar-right-container-pin {background: #0a111f;border-left: 1px solid rgba(255, 255, 255, 0.1);width: 30%;color: #fff;}
.sidebar-right-container-search {background: #0a111f;border-left: 1px solid rgba(255, 255, 255, 0.1);width: 30%;color: #fff;}
.sidebar-right-container-reply {background: #0a111f;border-left: 1px solid rgba(255, 255, 255, 0.1);width: 30%;color: #fff;}
.sidebar-right {position: relative;align-content: flex-start;width: 100%;}
.new-message-bar {position: fixed;top: 20%;left: 50%;transform: translateX(-50%);width: 50%;background-color: #386fe5;color: white;
 display: none;justify-content: space-between;align-items: center;padding: 12px 20px;border-radius: 8px;z-index: 1000;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);font-family: Arial, sans-serif;font-size: 14px;}
.new-message-link {color: white;text-decoration: none;display: flex;justify-content: space-between;align-items: center;width: 75%;font-size: 16px;
 font-weight: 600;font-family: "Montserrat", sans-serif;}
.new-message-link .left, .new-message-link .center {padding: 0 10px;}
.new-message-link .left {text-align: left;flex: 1;}
.new-message-link .center {text-align: center;flex: 1;}
.close-btn {background: none;border: none;color: white;font-size: 18px;cursor: pointer;}
.message-right {display: inline-flex;align-items: center;gap: 5px;color: #888;font-size: 14px;position: absolute;right: 35px;top: 10px;}
.UserSendMessageBx:hover, 
.SideBarUserList .SideBarUserDropdownMenu .nav-link:hover {background: #222c3f;}
.UsaerDetails {padding: 0 0 15px 15px;}
.sidebar-right-list .navbar {flex-wrap: wrap;justify-content: initial;width: 100%;}
.sidebar-right-container-reply .sidebar-right-list .navbar {margin-top: 104px;}
.sidebar-right-list .navbar .date-group {width: 100%;}#pin-msg-list {width: 100%;}
/* Add by Aruna Paliwal */
.sidebar-right-container-save {background: #0a111f;border-left: 1px solid rgba(255, 255, 255, 0.1);width: 24%;color: #fff;}
.sidebar-right-container-pin {background: #0a111f;border-left: 1px solid rgba(255, 255, 255, 0.1);width: 24%;color: #fff;}
.sidebar-right-container-search {background: #0a111f;border-left: 1px solid rgba(255, 255, 255, 0.1);width: 24%;color: #fff;}
.sidebar-right-container-reply {background: #0a111f;border-left: 1px solid rgba(255, 255, 255, 0.1);width: 24%;color: #fff;}
.new-message-bar {position: fixed;top: 20%;left: 50%;transform: translateX(-50%);width: 50%;background-color: #386fe5;color: white;display: none;
 justify-content: space-between;align-items: center;padding: 12px 20px;border-radius: 8px;z-index: 1000;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 font-family: Arial, sans-serif;font-size: 14px;}
.new-message-link {color: white;text-decoration: none;display: flex;justify-content: space-between;align-items: center;width: 75%;}
.new-message-link:hover {color: #fff;}
.new-message-link .left, .new-message-link .center {padding: 0 10px;}
.new-message-link .left {text-align: left;flex: 1;}
.new-message-link .center {text-align: center;flex: 1;}
.close-btn {background: none;border: none;color: white;font-size: 18px;cursor: pointer;}
.message-right {display: inline-flex;align-items: center;gap: 5px;color: #888;font-size: 14px;position: absolute;right: 35px;top: 10px;}
/* Added for forward message Aruna paliwal */
/* .forward-chat-message {background: #f9fafb;padding: 12px;margin-bottom: 10px;border-radius: 8px;max-width: 60%;} */
.forward-chat-message {background: #f9fafb;padding: 12px;margin-bottom: 10px;border-radius: 8px;max-width: 97%;margin-top: 10px;}
.forwarded-box {background: #ffffff;border: 1px solid #d1d5db;padding: 10px;border-radius: 6px;}
.forwarded-header {display: flex;align-items: center;gap: 10px;}
.forwarded-meta {font-size: 0.8rem;color: #6b7280;margin-bottom: 6px;}
.forwarded-message {font-size: 0.95rem;color: #111827;margin-bottom: 8px;word-break: break-word;}
.FullMessageBx a {color: #fff;}
.sidebar-right-container-pin .sidebar-right-list .navbar {margin-top: 20px;}
.sidebar-right-container-reply .sidebar-right-list .navbar {flex-wrap: wrap;justify-content: initial;width: 100%;}
.sidebar-right-container-save .ChatDate {margin: 0 0 20px;}
.sidebar-right-container-save .navbar.navbar-expand-lg {margin-top: 20px;}
#save-msg-list {width: 100%;}
.sidebar-right-container-pin .ChatDate {margin: 0 0 20px;}
.UserSendMessageText a:hover {color: #ddfbe4;}
.user-avatar {display: inline-block;width: 30px;height: 30px;border-radius: 50%;}
.user-avatar40 {display: inline-block;width: 40px;height: 40px;border-radius: 50%;}
.User-initials40 {width: 40px;height: 40px;background: #d9ffd8;text-align: left;text-align-last: left;align-content: center;border-radius: 50%;
 color: #256c0a;font-size: 20px;font-weight: 700;display: inline-block;font-style: normal;padding-left: 12px;margin-right: 4px;}
.User-initials {line-height: 23px;width: 24px;height: 24px;background: #d9ffd8;text-align: center;text-align-last: left;align-content: center;
 border-radius: 50%;color: #256c0a;font-size: 13px;font-weight: 600;display: inline-block;font-style: normal;padding-left: 5px;}
.deleteImageBtn {width: 24px;height: 24px;border-radius: 50%;padding: 0;font-size: 16px;line-height: 20px;text-align: center;display: flex;
 justify-content: center;align-items: center;top: 0;right: 0;z-index: 10;}
.sideroomimg {line-height: 23px;width: 24px;height: 24px;border-radius: 50%;display: inline-block;}
.invite-people {border: none;background: transparent;color: #ffffff;font-size: 18px;font-weight: 600;box-shadow: none;}
.UserReplyMessageTime {display: none;gap: 8px;position: absolute;left: 5px;top: 50%;transform: translateY(-50%);}
.UserReplyMessageTime span {color: #bfc0c2;}
.reply-msg:hover .UserReplyMessageTime {display: inline-block;}
.self-reply-msg:hover .UserReplyMessageTime {display: inline-block;}
.forward-chat-message-reply {background: #f9fafb;padding: 12px;margin-bottom: 10px;border-radius: 8px;max-width: 60%;margin-left: 70px;}
.edited-label {margin-left: 8px;color: #aaa;font-style: italic;font-size: 12px;vertical-align: middle;}
/*------07July2025------*/
.invitePeopleModal .modal-dialog {max-width: 600px;}
.invitePeopleModal .modal-content {background: #0a111f;border: 1px solid rgba(255, 255, 255, 0.1);}
.invitePeopleModal .modal-header {border-bottom-color: rgba(255, 255, 255, 0.1);padding: 15px 30px;}
.invitePeopleModal .modal-body {padding: 20px 30px;}
.invitePeopleModal .modal-header h5 {color: #fff;font-size: 22px;font-weight: 600;}
.invitePeopleModal .modal-body label {color: #fff;font-size: 16px;font-weight: 500;padding-bottom: 5px;}
.invitePeopleModal .modal-body textarea.form-control {background: #0a111f;height: 120px;border: 1px solid rgba(255, 255, 255, 0.2);
 box-shadow: none;color: #fff;outline: none;resize: none }
.invitePeopleModal .modal-body .btn-outline-primary {color: #fff;background: transparent;border-color: rgba(255, 255, 255, 0.3);font-weight: 500;
 padding: 8px 15px;}
.invitePeopleModal .modal-body .btn-outline-primary:hover {background: rgba(255, 255, 255, 0.1);}
.invitePeopleModal .modal-body .btn-primary {color: #fff;background: #4e5f80;border-color: #4e5f80;font-weight: 500;}
.invitePeopleModal .modal-body .btn-primary:hover {background: #394864;border-color: #394864;}
/* .invitePeopleModal .modal-header .btn-close {background-image: none;box-shadow: none;} */
.editProfileModal .modal-header .btn-close {background-color: #828282;border-radius: 50%;border: 1px solid #ccc;}
/*------07July2025 by Aruna Paliwal------*/
.sidebar-right-container-search .ChatDate {margin: 0 0 20px;}
.invitePeopleModal .card {background: transparent;border: 1px solid rgba(255, 255, 255, 0.2);color: #fff;font-size: 17px;}
.invitePeopleModal .modal-footer {border-top: 1px #2d2d2d solid;}
.modal-header .btn-close {background: url(../img/cross.png) no-repeat center center;background-size: 16px;}
/*------14July2025 by Aruna Paliwal------*/
.UserSendMessageTextSide {padding-left: 70px;padding-bottom: 5px;padding-top: 5px;position: relative;}
.UserSideReplyMessageTime {position: absolute;left: 2px;top: 8px;display: none;}
.UserSideReplyMessageTime span {color: #bfc0c2;}
.UserSendMessageTextSide:hover .UserSideReplyMessageTime {display: inline-block;}
.replied-to:hover {background: #131927;}
.UserSendMessageTextSide:hover {background: #131927;}
.UserSendMessageTextSide:hover .UserSideReplyMessageTime {display: inline-block;}
.tmp-info {align-items: flex-start;}
.UserPorileDropDown .OnlineStatus {width: 16px;height: 16px;/*border: none;background: transparent;*/ align-content: center;}
.UserPorileDropDown .offlineStatus {bottom: -12px;right: -3px;width: 16px;height: 16px;}
.UserPorileDropDown .donotdistrubStatus {bottom: -12px;width: 16px;height: 16px;right: -4px;}
.UserPorileDropDown .awayStatus{bottom: -12px;width: 16px;height: 16px;right: -4px;}



.SidebarSettingsBx {padding: 0 30px;}
.SidebarSettingsLeft {position: relative;margin: 20px 0;border-top: 1px rgba(255, 255, 255, 0.1) solid;padding: 20px 20px;display: inline-block;width: 100%;}
.SidebarSettingsLeft h4 {color: #fff;font-size: 20px;font-weight: 500;}
.SidebarSettingsLeft span {font-size: 18px;color: #a4a4a4;font-weight: 500;padding-top: 10px;display: inline-block;}
.SidebarSettingsLink {position: absolute;right: 0;top: 21px;color: #7ba2ff;font-size: 18px;}
.SidebarSettingsModal .modal-header .btn-close {background: url(../img/cross.png) no-repeat center center;background-size: 16px;}
.SidebarSettingsLeft:first-child {border-top: none;margin-top: 0;}
.GroupUnreadSettings {float: right;width: 80%;margin-top: 20px;display: none;}
.GroupUnreadSettings .form-check {margin-bottom: 10px;}
.GroupUnreadSettings .form-check .form-check-input {width: 18px;height: 18px;margin-right: 7px;}
.GroupUnreadSettings .form-check-label {color: #fff;font-weight: 500;font-size: 18px;}
.GroupUnreadSettings p {color: #fff;font-size: 18px;}
.GroupUnreadSettingsBtn {margin-top: 20px;}
.GroupUnreadSettingsBtn .btn-primary {background: #386fe5;font-size: 18px;font-weight: 600;border-color: #386fe5;padding: 8px 20px;}
.GroupUnreadSettingsBtn .btn-link {font-size: 18px;color: #386fe5;font-weight: 600;text-decoration: none;}
.GroupUnreadSettingsSelect {margin-bottom: 20px;}
.GroupUnreadSettings .form-select {border: 1px rgba(255, 255, 255, 0.3) solid;background-color: #0a111f;color: #fff;font-size: 18px;padding: 10px 20px;}
.NumberdirectSettingsActive .NumberdirectSettingsMain, .SidebarSettingsActive .GroupUnreadSettingsMain {display: block;}
.NumberdirectSettingsActive #numberditectedit{display: none;}
.SidebarSettingsActive #groupunreadedit{display: none;}
.NumberdirectSettingsActive span.NumberdirectSettingsSpan, .SidebarSettingsActive span.GroupUnreadSettingsSpan {display: none;}
.UserPorileDropDown .OnlineStatus img{width: 10px;}
.imagecloseicon {top: 3px;width: 18px;}
.imagedownloadicon {position: absolute;right: 70px;width: 24px;top: 20px;}
.imageSendDetails {display: flex;align-items: center;}
.imageSendNameIcon {width: 50px;height: 50px;font-size: 20px;line-height: 23px;background: #d9ffd8;text-align: center;align-content: center;border-radius: 50%;color: #256c0a;
font-weight: 600;display: inline-block;font-style: normal;}
.imageSendNameDetails {padding-left: 20px;}
.imageSendUserName {color: #fff;font-size: 17px;font-weight: 600;}
.imageSendUserName span {padding-left: 7px;font-size: 15px;font-weight: normal;color: #ddd;}
.reply-group-sender {overflow: hidden;padding-left: 19px;}
#forwardTimestamp {font-size: 14px;color: #bfbfbf;}
.invitePeopleModal .card-body small {color: #bfbfbf;font-size: 14px;}
.imageSendName {font-size: 20px !important;}
.UserSendMessageOption ul li a i {font-style: normal;font-weight: 600;}
.UserSendMessageOption ul li a i.fa {font-style: normal;font-weight: normal;}