body{
 margin: 0;	
}
.sitbiner{
	width:100%;
	height:auto;
}
.container{
	width:100%;
	height:auto;
	margin-top:50px;
}
.verify-page{
	width:95%;
	height:auto;
	margin: auto;
	margin-top:50px;
}
.home-container{
	width:100%;
   	height:100vh;
}
.sub-container{
	width:100%;
	height:auto;
}

.sub-container h1{
	font-size:26px;
	font-family: Tahoma, sans-serif;
	font-weight: 400;
	color: #13aa9d;
	text-align: center;
}
.sub-container h2{
	font-size:25px;
	font-family: Tahoma, sans-serif;
	font-weight: 400;
	color: #13aa9d;
	text-align: center;
}
.sub-container p {
	text-align: center;
	font-size: 15px;
	font-family: Tahoma, sans-serif;
	font-weight: 400;
	color: #4d4d4d;
	margin-left: 5px;
	margin-right: 5px;
}
.sub-container h6 {
	text-align: center;
	font-size: 18px;
	font-family: Tahoma, sans-serif;
	font-weight: 400;
	color: #4d4d4d;
	margin-left: 15px;
	margin-right: 15px;
}
.sub-container a{
	text-decoration: none;
	color: rgb(10, 146, 184);
}

.lanbtn{
   width: 95px;
   height: 32px;
   margin: auto;
   margin-top: 6vh;
}
.lanbtn select{
   width: 100%;
   height: 100%;
   padding-left:10px;
   border:5px solid transparent;
   border-radius: 10px;
}
.logo-space{
    width:300px;
	height: 300px;
	margin: auto;
	margin-top:50px;
	border-radius:100%;
	border: 5px solid  #006bb3;
}
.logo-space img{
	width:100%;
	height: 100%;
}
.chatbtn{
	width: 90%;
	height: 40px;
	margin: auto;
	margin-top: 100px;
}
.chatbtn2{
	width: 50%;
	height: 40px;
	margin: auto;
	margin-top: 100px;
}
.chatbtn2 button{
	width:100%;
	height: 100%;
	border-radius:25px;
	background-color:#13aa9d;
	border: none;
	color: white;
	font-size:18px;
 }
 .chatbtn2 button:hover{
	background-color:#18dccb;
 }
.chatbtn button{
   width:100%;
   height: 100%;
   border-radius:25px;
   background-color:#13aa9d;
   border: none;
   color: white;
   font-size: 18px;
}
.chatbtn button:hover{
	background-color:#18dccb;
}
.mob-outerdiv{
   width:65%;
   height:auto;
   margin:auto;
   margin-top:70px;
   display:flex; 
}
.mob-outerdiv input{
	width:100%;
	height:35px;
	border:none;
	outline:none;
	font-size:17px;
	border-bottom:1px solid  #666666;
}

.instectin{
   width:15%;
   height:35px;
   z-index:5;
}
.instectin input{
   width:90%;
   height:100%;
   border:none;
   outline:none;
   text-align:center;
   font-size:17px;
   border-bottom:1px solid #666666;
}
.full-inputs{
	width:85%;
	height:35px;
	display:flex;
 }
 .full-inputs input {
	width:100%;
	height:100%;
	margin-left:1%;
	font-size:17px;
	border:none;
	outline:none;
	border-bottom:1px solid  #666666;
 }
.inputs{
   width:85%;
   height:35px;
   display:flex;
}
.otp{
   width:85%;
   height:35px;
   margin:auto;
   display:flex;
}
.inputs input {
   width:9%;
   height:100%;
   margin-left:1%;
   font-size:20px;
   border:none;
   outline:none;
   text-align:center;
   border-bottom:1px solid  #666666;
}

.otp  input {
   width:15%;
   height:100%;
   margin-left:1%;
   font-size:20px;
   border:none;
   outline:none;
   text-align:center;
   border-bottom:1px solid  #666666;
}
/**Home Page **/
.header{
	width:95%;
	height:45px;
	margin: auto;
	padding-top:20px;
	display: flex;
}
.bottom-header{
	width:95%;
	height:45px;
	margin: auto;
	padding-top:20px;
	display: flex;
}
.left{
	width:80%;
	height:100%;
	float: left;
}
.right{
	width:10%;
	height:100%;
}
.right2{
	width:10%;
	height:100%;
}
.left i{
	font-style:normal;
	font-size:20px;
	color:#00918d;
	font-weight:600;
	font-family: Tahoma, sans-serif;   
}
.seach-icon{
	width:50px;
	height:50px;
	background-image:url(svg/search-icons.svg);
	background-repeat:no-repeat;
	background-size:100% 100%;
	width:20px;
	height:20px;
	float:right;
}
.setting-icon{
	background-image:url(svg/setting.svg);
	background-repeat:no-repeat;
	background-size:100% 100%;
	width:20px;
	height:20px;
	float:right;
}
.search-bar{
	width:95%;
	height:50px;
	margin: auto;
	margin-top:5px;
	background-color:#f2f2f2;
	display: flex;
	border-radius:25px;
	display:none;
}
.search-icon{
	width:20%;
	height:100%;
}
.search-icon  i{
	width:50px;
	height:50px;
	background-image:url(svg/search-icons.svg);
	background-repeat:no-repeat;
	float:right;
	margin-top:12px;
}
.search-input{
	width:80%;
	height:100%;
}
.search-input input{
	width:90%;
	height:90%;
	background-color:#f2f2f2;
	border: none;
	outline:none;
    font-size: 20px;
}
.all-contact{
	width:95%;
	height: auto;
	margin: auto;
	margin-top: 15px;
}
.contact-cell{
	position: relative;
	width: 100%;
	height: auto;
	margin-top:10px;
	display: flex;
}
.contact-img{
	width:22%;
	height: auto;
}
.img-space{
	width:70px;
	height: 70px;
	border-radius: 100%;
}
.img-space img{
	width:100%;
	height: 100%;
	border-radius: 100%;
}
.contact-name{
	width:78%;
	height: 70px;
}
.contact-name ul{
	list-style: none;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
}
.contact-name li:first-child{
    margin-top:4px;
}
.contact-name li:nth-child(2){
    margin-top:17px;
}
.contact-name i{
	font-style: normal;
}
.contact-name i:first-child{
	font-size:18px;
	font-weight: 600;
	font-family: Tahoma, sans-serif; 
	letter-spacing:0px;
	word-spacing:-2px;
	color: #404040;
}
.contact-name i:nth-child(2){
	float: right;
	margin-top:5px;
	font-size: 13px;
	font-weight: 400;
	font-family: Tahoma, sans-serif; 
	color: #25a500;
}
.contact-name span:first-child{
	font-family: Tahoma, sans-serif; 
	font-size:15px;
	color: #404040;
	letter-spacing:.5px;
	float: left;
}
.contact-name span:nth-child(2){
	font-family: Tahoma, sans-serif; 
	font-size:12px;
	width:15px;
	height: 15px;
	padding:2px 2px 2px 2px ;
	border-radius: 100%;
	background-color:#25a500;
	color:white;
	text-align: center;
	float: right;
	margin-top:-1px;
}
.footer{
	position:fixed;
	width:100%;
	height:auto;
	bottom:15px;
	background-color: white;
	border-top:1px solid #f2f2f2;
}
.footer-margin-setter{
	width:95%;
	height:auto;
	margin:auto;
	margin-top:15px;
	display: flex;
}
.footer-content-box{
	width:20%;
	height:80px;
}
.content-rapper{
	width:80%;
	height:100%;
	margin:auto;
}
.devider{
	width:100%;
	height: 50%;
	display:flex;
}
.chat-icon{
	background-image:url(svg/chat.svg);
	background-repeat:no-repeat;
	background-size: 100% 100%;
	width:25px;
	height:25px;
	margin:auto;
}
.call-icon{
	background-image: url(svg/call.svg);
	background-repeat:no-repeat;
	background-size: 100% 100%;
	width:25px;
	height:25px;
	margin:auto;
}
.private-icon{
	background-image: url(svg/private.svg);
	background-repeat:no-repeat;
	background-size: 100% 100%;
	width:25px;
	height:25px;
	margin:auto;
}
.icon-name{
	width:80px;
	height:20px;
	margin:auto;
	font-family:Tahoma, sans-serif; 
	color: #8e8d8d;
	font-size:18px;
	font-weight:600;
	font-style:normal;
	text-align:center;
}
/**Enough Home Page **/


/** Chat page  **/
.chat-page-container{
	width:100%;
	height:auto;
}
.chat-header-creator{
	position:fixed;
	top:0px;
	width:100%;
	height:75px;
	background-color: white;
	border-bottom:1px solid #f2f2f2;
	z-index: 100;
}
.chat-page-header{
	width:95%;
	height:45px;
	margin: auto;
	padding-top:20px;
	padding-bottom:10px;
	display: flex;
}
.back-button{
	width:10%;
	height:36px;
	padding-top:9px;
}
.chat-person-idt{
	width:80%;
	height:100%;
	display: flex;
}
.chat-img-box{
	width:42px;
	height:42px;
	border-radius: 100%;
}
.chat-img-box  img{width: 100%;height: 100%;border-radius: 100%;}
.who-is-chating-info{
    width:80%;
	height:100%;
	margin-left: 5px;
}
.camera-box{
	width:10%;
	height: 100%;
	height:36px;
	padding-top:9px;
}
.setting{
	width:10%;
	height: 100%;
	height:36px;
	padding-top:12px;
}
.left-arrow-icon{
	background-image: url(svg/left-arrow.svg);
	background-repeat:no-repeat;
	background-size: 100% 100%;
	width:25px;
	height:25px;
	margin:auto;
	float: left;
}
.list-style{
	list-style: none;
	margin-top:1px;
	margin-bottom: 0px;
	padding-left: 0px;
}
.ione{
    font-style: normal;
	font-family: Geneva, Verdana, sans-serif;
	font-weight: 600;
	color:#666666;
	font-size:18px;
}
.itwo{
	font-style: normal;
	font-family: Geneva, Verdana, sans-serif;
	color:#666666;
	font-size:13px;
}

@media screen and (max-width:410px) {}

.chat-page-footer{
	position:fixed;
	width: 100%;
	height: auto;
	bottom:0px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: white;
	z-index: 100;
}
.chat-page-footer-box{
	width: 95%;
	height: 45px;
	margin:auto;
	display:flex;
}
.chat-box-space{
	width: 74%;
	height: 100%;
	padding-left: 5%;
	padding-right: 5%;
	background-color:#f2f2f2;
	border-radius:25px;
	display: flex;
	border:1px solid #cdcdcd;
}
.chat-field-itesm{
	width:10%;
	height: 100%;
	display: flex;
}
.modband{
	background-image: url(svg/modband.svg);
	background-repeat:no-repeat;
	background-size: 100% 100%;
	width:25px;
	height:25px;
	margin:auto;
}
.text-input-box{
	width:65%;
	height: 100%;
}
.text-input-box input {
	width:100%;
	height: 95%;
	background-color:#f2f2f2;
	border:none;
	outline: none;
	font-size: 18px;
}
.file-selector{
	width:15%;
	height: 100%;
	display: flex;
}
.camera-btn{
	width:10%;
	height: 100%;
	display:flex;
}
.attachment{
	background-image: url(svg/attachment.svg);
	background-repeat:no-repeat;
	background-size: 100% 100%;
	width:25px;
	height:25px;
	margin:auto;
}
.camera-icon{
	background-image: url(svg/camera.svg);
	background-repeat:no-repeat;
	background-size: 100% 100%;
	width:25px;
	height:25px;
	margin:auto;
}
.voice-chat{
	width:10%;
	height: 100%;
	padding-left: 2.5%;
	padding-right: 2.5%;
}
.sphare-shap{
	width:45px;
	height: 45px;
	border-radius: 100%;
	background-color: #01c442;
	display: flex;
 }
.send-button{
	width:45px;
	height: 45px;
	border-radius: 100%;
	background-color: #01c442;
	display: flex;
	display: none;	
	border: 1px solid red;
}
.voice-icon{ 
	background-image: url(svg/voice.svg);
	background-repeat:no-repeat;
	background-size: 100% 100%;
	width:20px;
	height:20px;
	margin:auto;
}
.send-icon{ 
	background-image: url(svg/send.svg);
	background-repeat:no-repeat;
	background-size: 100% 100%;
	width:25px;
	height:25px;
	margin:auto;
	border: 1px solid red;
}
/** Enough chat page**/ 

/** Chat body **/
.message-space{
    width:100%;
    height:90vh;
    overflow-y:scroll;
}

.chat-message-container{
	width:94%;
	min-height: 20vh;
	padding-top:100px;
	padding-bottom:100px;
	padding-left:3%;
	padding-right:3%;
}
.message-box{
   position: relative;
   width:100%;
   height:auto;
   display: flex;
}
.message-box p{
	position: relative;
	right: 0;
	text-align: left;
	max-width: 65%;
	padding: 12px;
	background: #dcf8c6;
	border-radius: 10px;
	font-size: 1.15em;
	font-family: 'Poppins', sans-serif;
}
.message-box.my-message p::before {
	content : '';
	position: absolute;
	top: 0;
	right: -12px;
	width: 20px;
	height: 20px;
	background: linear-gradient(135deg, #dcf8c6 0%, #dcf8c6 50%, transparent 50%, transparent);
}
.message-box p img {
	max-width: 55%;
}
.message-box p span {
	display: block;
	margin-top: 5px;
	font-size: 0.8em;
	opacity: 0.5;
}
  
.my-message {
	justify-content: flex-end;
}
  
.friend-message p {
	background: #fff;
}
  
.friend-message {
	justify-content: flex-start;
  
}
.message-box.friend-message p::before {
	content : '';
	position: absolute;
	top: 0;
	left: -12px;
	width: 20px;
	height: 20px;
	background: linear-gradient(225deg, #fff 0%, #fff 50%, transparent 50%, transparent);
}
/** Enough chat body**/