body{
margin: 0;
padding: 0;
font-family: sans-serif;
}

.chatLogin{
background-color: green;
background-image: url('/images/chatLogin_bg.png');
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}

.chatLogin .chatLogin_con{
background-color: #fff;
width: 400px;
height: auto;
padding: 15px;
border-radius: 10px;
}

.chatLogin .chatLogin_con .chatLogin_box .loginChat_img{
text-align: center;
}

.chatLogin .chatLogin_con .chatLogin_box .chatLoginForm .form-control:first-child{
margin-top: 0;
}

.chatLogin .chatLogin_con .chatLogin_box .chatLoginForm .form-control{
margin-top: 15px;
}

.errorMes p{
color: #bd0000;
font-size: 12px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
line-height: 1.5em;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

.dflexInput{
background-color: transparent;
display: flex;
align-items: center;
}

.dflexInput span{
display: inline-flex;
align-items: center; 
font-size: 14px;
font-weight: 500;
letter-spacing: .07em;
margin-right: 5px;
}

.dflexInput span img{
width: 24px;
height: 24px;
margin-right: 5px;
}

.chatLogin .chatLogin_con .chatLogin_box .chatLoginForm .form-control label{
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
color: #444444;
}

.chatLogin .chatLogin_con .chatLogin_box .chatLoginForm .form-control input{
width: -webkit-fill-available;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 14px;
letter-spacing: .07em;
margin-top: 6px;
}

input:focus, button:focus, select:focus, textarea:focus{
outline: none;
}

::placeholder{
text-transform: capitalize;
font-size: 14px;
letter-spacing: .07em;
}

.chatLogin .chatLogin_con .chatLogin_box .chatLoginForm .chatSubmitBtn{
margin-top: 15px;
display: flex;
justify-content: center;
}

.chatLogin .chatLogin_con .chatLogin_box .chatLoginForm .chatSubmitBtn button{
padding: 12px;
width: 150px;
border-radius: 8px;
border: none;
background-color: green;
color: #fff;
font-size: 14px;
letter-spacing: .07em;
text-transform: capitalize;
cursor: pointer;
transition: .5s ease-in;
}

.chatLogin .chatLogin_con .chatLogin_box .chatLoginForm .chatSubmitBtn button:hover{
background-color: rgb(1, 83, 1);   
}

.loginFooter{
text-align: center;
margin-top: 15px;
}

.loginFooter p{
font-size: 12px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
color: #444444;
}

.loginFooter p b{
color: dodgerblue;
cursor: pointer;
}

#msgAlert{
position: fixed;
right: 15px;
top: 15px;
padding: 12px 24px;
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
color: #fff;
display: none;
z-index: 5;
}

.bg_danger{
background-color: #bd0000;
}

.bg_success{
background-color: green;
}

.chatDiv{
background-color: #e4e4e4;
width: 100%;
height: 100%;
position: fixed;
}
.chatDiv .row{
width: 100%;
height: 100%;
display: flex;
box-sizing: border-box;
}
.chatDiv .row .col:first-child{
width: 30%;
height: 100%;
background-color: #fff;
}
.chatDiv .row .col:last-child{
width: 70%;
height: 100%;
}
.chatDiv .row .col .chatSideDiv{
background-color: #fff;
padding: 10px;
}

.chatDiv .row .col .chatSideDiv .searchChat label{
border: 1px solid #ccc;
border-top-left-radius: 10px;
display: flex;
align-items: center;
}

.chatDiv .row .col .chatSideDiv .searchChat label i{
margin-left: 8px;
}

.chatUserListDiv{
margin-top: 10px;
height: 450px;
overflow: hidden;
overflow-y: auto;
padding-bottom: 25px;
}

.chatDiv .row .col .chatSideDiv .searchChat input{
width: -webkit-fill-available;
padding: 12px;
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
border: none;
}

.chatUserCard .cardRow{
display: flex;
box-sizing: border-box;
width: 100%;
border-bottom: 1px solid #ccc;
cursor: pointer;
transition: .5s ease-in;
}

.chatUserCard .cardRow:hover{
background-color: #e7e7e7;
}

.chatUserCard .cardRow:last-child{
border-bottom: none;
}

.chatUserCard .cardRow .cardCol{
padding: 10px;
}

.chatUserCard .cardRow .cardCol:first-child{
width: 15%;
background-color: transparent;
display: inline-flex;
justify-content: center;
align-items: center;
}

.chatUserCard .cardRow .cardCol:last-child{
width: 85%;
background-color: transparent;
}

.chatUserCard .cardRow .cardCol .imgBox{
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 100%;
}

.chatUserCard .cardRow .cardCol .imgBox img{
width: 100%;
height: 100%;
}

.chatUserCard .cardRow .cardCol .chatuserDetails .cardColRow{
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
}

.chatUserCard .cardRow .cardCol .chatuserDetails .cardColRow .cardColRowCol:first-child{
width: 70%;
}

.chatUserCard .cardRow .cardCol .chatuserDetails .cardColRow .cardColRowCol:last-child{
width: 30%;
}

.chat_username{
font-size: 14px;
font-weight: 600;
text-transform: capitalize;
letter-spacing: .07em;
color: #444444;
}

.chat_date{
font-size: 12px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
color: #444444;   
}

.lastMesChat{
font-size: 12px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
color: #444444;  
margin-top: 8px;    
}

h1,h2,h3,h4,h5,h6,p{
margin: 0;
padding: 0;
}

.chatDiv .row .col:last-child .chatBody{
background-color: #c8ffcc;
background-image: url('/images/chat/chatbg.png');
width: 100%;
height: 100%;
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
object-fit: cover;
position: relative;
}

.chatDiv .row .col:last-child .chatBody .defaultChatBody{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #fff;
opacity: .7;
}

.chatDiv .row .col:last-child .chatBody .defaultChatBody h3{
font-size: 16px;
font-weight: 600;
text-transform: capitalize;
letter-spacing: .07em;
color: #444444;
margin-top: 10px;
}

.chatDiv .row .col:last-child .chatBody .defaultChatBody p{
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
color: #444444;
margin-top: 6px;
}

.orignamChatBody{
width: 100%;
height: 100%;
}

.orignamChatBody .chatHeader{
background-color: #eeeded;
padding: 10px;
display: flex;
align-items: center;
box-sizing: border-box;
}

.orignamChatBody .chatHeader .cHcol:first-child{
width: 70%;
}

.orignamChatBody .chatHeader .cHcol:last-child{
width: 30%;
display: inline-flex;
justify-content: end;
}

.orignamChatBody .chatHeader .cHcol:last-child span{
margin-right: 10px;
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
cursor: pointer;
}

.orignamChatBody .chatHeader .cHcol:last-child i{
font-size: 20px;
cursor: pointer;
color: #444444;
margin-right: 10px;
}

.orignamChatBody .chatHeader .cHcol:first-child .ChIrow{
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
}

.orignamChatBody .chatHeader .cHcol:first-child .ChIrow .ChIrowCol:first-child{
width: 10%;
}

.orignamChatBody .chatHeader .cHcol:first-child .ChIrow .ChIrowCol:last-child{
width: 90%;
}

.orignamChatBody .chatHeader .cHcol:first-child .ChIrow .ChIrowCol:first-child .chatImgSm{
width: 35px;
height: 35px;
border-radius: 100%;
object-fit: cover;
}

.chatImg p{
margin: 0;
padding: 0 !important;
font-size: 13px !important;
}

.mesPrvTime{
display: flex;
font-size: 12px !important;
color: #777;
justify-content: end;
}

.orignamChatBody .chatHeader .cHcol:first-child .ChIrow .ChIrowCol:first-child .chatImgSm img{
width: 100%;
width: 100%;
}

.orignamChatBody .chatHeader .cHcol:first-child .ChIrow .ChIrowCol:last-child .chatUsrNam h3{
font-size: 14px;
font-weight: 600;
text-transform: capitalize;
letter-spacing: .07em;
color: #444444;
}

.chatContentsWrap{
width: 100%;
height: 100%;
position: relative;
}

.chatContents{
width: 100%;
height: 80%;
overflow: hidden;
overflow-y: auto;
background-color: transparent;
position: relative;
}

.mediaExampleChat{
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
align-items: center;
display: none;
z-index: 5;
flex-direction: column;
justify-content: center;
}

.mediaCap{
width: 90%;
border: 1px solid #ccc;
border-radius: 25px;
padding: 6px;
margin-top: 100px;
display: flex;
align-items: center;
}

.mediaCap input{
width: -webkit-fill-available;
border: none;
}

.mediaCap span{
display: block;
width: 50px;
text-align: center;
}

.mediaCap span i{
cursor: pointer;
}

.chatMediaClose{
position: absolute;
top: 10px;
right: 10px;
font-size: 24px !important;
color: #444444;
cursor: pointer;
}

.mediaExampleChat .mediaExampleChat_con{
width: 250px;
height: 250px;
margin-top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #ccc;
border-radius: 10px;
padding: 10px;
}

.mediaExampleChat .mediaExampleChat_con img{
width: 100%;
height: 100%;
}

.orignamChatBody .chatFooter {
background-color: #fff;
margin: 5px;
border: 1px solid #ccc;
border-radius: 100px;
}

.orignamChatBody .chatFooter .chatInput{
display: flex;
align-items: center;
padding: 10px;
}

.orignamChatBody .chatFooter .chatInput .smInputChatIco{
width: 5%;
position: relative;
}

.absEmoji{
position: absolute;
bottom: 200%;
display: none;
}

.orignamChatBody .chatFooter .chatInput .smInputChatIco i{
cursor: pointer;
}

.orignamChatBody .chatFooter .chatInput .inputDivChat{
width: -webkit-fill-available;
}

.orignamChatBody .chatFooter .chatInput .inputDivChat input{
width: -webkit-fill-available;  
padding: 6px; 
border: none;
}

.orignamChatBody .chatFooter .chatInput .inputDivChat input:focus{
outline: none;
}

.lastIcoChat{
text-align: center;
}

.chatContents .chatConWra{
padding: 10px;
width: 100%;
}

.chatLeftCon{
width: 250px;
height: auto;
}

.chatLeftCon div{
background-color: #fff;
padding: 10px;
border-radius: 10px;
margin: 5px;
}

.chatLeftCon p{
width: -webkit-fill-available;
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
line-height: 1.5em;
}

.chatLeftCon .chatImg{
background-color: #fff;
padding: 5px;
margin: 5px;
width: -webkit-fill-available;
height: auto;
border-radius: 10px;
}

.chatLeftCon .chatImg img{
width: 100%;
height: 100%;
border-radius: 10px;
}

.chatLeftCon .chatImg audio, .chatLeftCon .chatImg video{
width: -webkit-fill-available;
}

.chatLeftCon a{
font-size: 14px;
}

.WrapChat_size{
width: 100%;
display: flex;
box-sizing: border-box;
justify-content: start;
align-items: center;
}

.WrapChat_size_right{
justify-content: end !important;
}

.noPrvChatCon{
background-color: #fff;
padding: 15px;
border-radius: 10px;
width: 50%;
margin: auto;
text-align: center;
}

.noPrvChatCon p{
font-size: 12px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
line-height: 1.5em;
color: #777;
}

.chatRightCon{
width: 250px;
height: auto;
float: right;
margin-right: 20px;
}

.chatRightCon div{
background-color: #fff;
padding: 10px;
border-radius: 10px;
margin: 5px;
}

.chatRightCon p{
width: -webkit-fill-available;
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
line-height: 1.5em;
}

.chatRightCon .chatImg{
background-color: #fff;
padding: 5px;
margin: 5px;
width: -webkit-fill-available;
height: auto;
border-radius: 10px;
}

.chatRightCon .chatImg img{
width: 100%;
height: 100%;
border-radius: 10px;
}

.chatRightCon .chatImg audio, .chatRightCon .chatImg video{
width: -webkit-fill-available;
}

.chatRightCon a{
font-size: 14px;
}

.chatDropIco{
position: absolute;
width: max-content;
bottom: 40px;
background-color: #fff;
z-index: 10;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: none;
}

.chatDropIco ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.chatDropIco ul li{
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
padding: 8px 16px;
cursor: pointer;
transition: .5s ease-in;
}

.chatDropIco ul li:first-child:hover{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.chatDropIco ul li:hover{
background-color: #e7e7e7;
}

.chatDropIco ul li i{
color: #0086bb;
margin-right: 5px;
}

.chatDropIco span{
position: relative;
width: -webkit-fill-available;
display: inline;
cursor: pointer;
}
.chatDropIco input{
opacity: 0;
position: absolute;
width: 100%;
left: 0;
}

.backChat{
display: none;
}

@media only screen and (max-width: 768px) {
.chatDiv .row, .backChat{
display: block;
}
.chatDiv .row .col{
width: 100% !important;
}
.orignamChatBody .chatHeader .cHcol:first-child .ChIrow .ChIrowCol:first-child{
width: 16%;
}
.orignamChatBody .chatHeader .cHcol:first-child .ChIrow .ChIrowCol:last-child{
width: 84%;
}
.orignamChatBody .chatFooter .chatInput .smInputChatIco{
width: 8%;
}

}