body{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh;
	background:#CCC;
	}
	
	.wrapper{
		background:#FFF;
		width:500px;
		border-radius:16px;
		box-shadow:0 0 128px 0 rgba(0,0,0,0), 0 32px 64px -45px rgba(0,0,0,0.5);
		}
		
		/* Signup Css Code*/
		
		.form{
			padding:25px 30px;
			}
			
			.form header{
				font-size:25px;
				font-weight:600;
				padding-bottom:10px;
				border-bottom:1px solid #e6e6e6;}
				
				.form form{
					margin:20px 0;
					}
					
					.form form .error-txt{
	background: #479736;
	padding: 8px 10px;
	text-align: center;
	border-radius: 5px;
	margin-bottom: 10px;
	border: 1px solid #f5c6cb;
	color: #FF0;
						}
						
						.form form .name-details{
							display:flex;
							}
							
							.form .name-details .field:first-child{
								margin-right:10px;
							}
							
							.form .name-details .field:last-child{
								margin-left:10px;
							}
							
							.form form .field{
								display:flex;
								position:relative;
								flex-direction:column;
								margin-bottom:10px;
								}
								
								.form form .field label{
									margin-bottom:2px;
									color:#479736;
									font-size:18px;
									}
									
									.form form .field input{
										outline:none;
									}
									
									.form form .input input{
										height:40px;
										width:100%;
										font-size:16px;
										padding:0 10px;
										border:1px solid #ccc;
										border-radius:5px;}
										
										.form form .select input{
										height:40px;
										width:100%;
										font-size:16px;
										padding:0 10px;
										border:1px solid #ccc;
										border-radius:5px;}
										
										.select{
											background-color:#FFF;
											height:40px;
										width:100%;}
										
										.form form .image input{
											font-size:17px
											}
											.form form .button input{
	margin-top: 13px;
	height: 45px;
	border: none;
	font-size: 17px;
	font-weight: 400;
	background: #479736;
	color: #FFF;
	border-radius: 5px;
	cursor: pointer;
												}
												
												.form form .field i{
										position:absolute;
										right:15px;
										color:#ccc;
										top:70%;
										transform:translateY(-50%);
										cursor:pointer;
										}
												
												.form .link{
													text-align:center;
													margin:10px 0;
													font-size:17px;
													}
							
							.form .link a{
								color:#333;
	
									}
									
									.form .link a:hover{
										color:#090;
										text-decoration:underline;
	
									}
									
									
									/* users  Css Code*/
									
									
									.users{
										padding:25px 30px;
										}
										
									.users header,
									.users-list a{
										display:flex;
										align-items:center;
										padding-bottom:20px;
										justify-content:space-between;
										border-bottom:1px solid #e6e6e6;
									}
										
										.wrapper img{
											object-fit:cover;
											border-radius:50%;
											}
										
										
										
										
										:is(.users, .users-list) .content{
											display:flex;
												align-items:center;
												}
										
										.users header .content img{
												height:40px;
												width:40px;
												}
										
										:is(.users, .users-list) .details{
													color:#000;
													margin-left:15px;
												}
													
													.user header .details{
														margin-left:15px;
														}
														
														
													:is (.users, .users-list) .details span{
														font-size:18px;
														font-weight:500;
														}
				
														
														.users header .logout{
															color:#FFF;
															font-size:17px;
															padding:7px 15px;
															background:#333;
															border-radius:5px;
															}
															
															.users .search{
																margin:20px 0;
																display:flex;
																position:relative;
																align-items:center;
																justify-content:space-between;
																}
																
																.users .search .text{
															font-size:18px;
															}
															
															.users .search input{
																position:absolute;
																height:42px;
																width:calc(100% - 50px);
																border:1px solid #ccc;
																padding:0 13px;
																font-size:16px;
																border-radius:5px 0 0 5px;
																outline:none;
															
															}
															
															.users .search button{
															width:47px;
															height:42px;
															border:none;
															outline:none;
															color:#FFF;
															background:#333;
															cursor:pointer;
															font-size:17px;
															border-radius: 0 5px 5px 0;
															
															}
															
															.users-list{
																max-height:80px;
																overflow-Y:auto;
																}
																
																.users-list a{
																	page-break-after:10px;
																	padding-right:15px;
																	margin-bottom:10px;
																	border-bottom-color:#999;
																}
																
																
																.users-list a .content img{
																	height:40px;
																	width:40px;}
																	
																.users-list a .status-dot{
																	font-size:12px;
																	color:#090;}
																	
																	.users-list a:last-child{
																		border:none;
																		margin-bottom:0px;}
																		
																		.user-list a .content p{
																			color:#67676a;
																			}
																			.users-list a .status-dot .offline{
																				color:#ccc;
																	}