*{
	box-sizing:border-box;
	margin:0;
	padding:0;
	font-family: 'Rubik', sans-serif;
	font-weight:normal;
	text-transform:capitalize;
}
h3{
	font-size:25px;
	text-transform:capitalize;
	margin-bottom:15px;
}
h1{
color:white;
margin:10px 0 10px 20px;
padding-left:20px;
text-transform:capitalize;
}
p{
	color:gray;
	font-size:15px;
	text-transform:capitalize;
	margin:15px 0px 20px 0px;
	font-weight:normal;
}
a:not(.sidebar a):not(.welcome a){
	color:white;
	padding:5px 10px ;
	font-size:16px;
background-color:hsl(207, 90%, 54%) !important;
	border-radius:8px;
	margin-left:auto;
	display:inline-block;
	width:fit-content;
	outline:none;
	border:none;
	cursor:pointer;
	text-decoration:none;
	margin-right:15px;
	font-weight:normal
}
span:not(.sidebar)span{
	display:block;
	color:gray;
	margin-top:10px;
	text-transform:capitalize;
	font-size:16px;


}
label{
	font-size:18px;
	margin-left:10px;
	cursor:pointer;
}

ul{
	list-style-type:none;
}
@media(max-width:767px){
	.content .items{
		padding:10px !important;
	}
	.items > div{
	padding:10px !important;
	}
	p{
		font-size:13px !important;
}
}
/*start dashbord page*/
.save{
	text-decoration:none;
	font-weight:normal;
	
}

.sidebar{
	background-color:#030917;
	text-align:center;
	min-width:230px;
	padding:10px;
	box-shadow:1px 1px 15px gray inset ;
	z-index:1;
	border-radius:0;
	color:lightgray;
}

.sidebar > span{
	width:30px;
	height:2px;
	background-color:lightgray;
	display:inline-block;
	margin-bottom:40px;
	margin-top:10px;
	
}

.sidebar .circle{
	border-radius:50%;
	background-color:hsl(207, 90%, 54%);
	width:12px;
	height:12px;
	position:relative;
	top:5px;
	color:
}
	
.sidebar li{
	margin-bottom:20px;
text-align:left;
padding:10px;
color:lightgray;
transition:0.3s;
cursor:pointer;
}
.sidebar li a{
	color:lightgray !important;
	text-decoration:none;
	padding:0;
	margin:0;
}
.sidebar li a span{
	color:lightgray;
	font-size:16px;
	text-transform:capitalize;
}
	.sidebar li a i{
		color:lightgray;
		margin-right:5px;
	}
	.sidebar li:hover{
		background-color:hsl(207, 90%, 54%);
		border-radius:10px;
		margin-left:20px;
		
	}
	.mainpage{
		display:flex;
		
		
	}
	.mainpage .icons img{
		max-width:30px;
	}
	
	.mainpage .header{
		display:flex;
		padding:15px;
		background-color:white;
		justify-content:space-between;
		align-items:center;
		border-radius:0;
	}
	.mainpage .icons{
		display:flex;
		align-items:center;
		gap:10px;
	}
	.mainpage .icons i{
	position:relative
	}
	.mainpage .icons i:after{
		content:"";
		position:absolute;
		width:10px;
		height:10px;
		background-color:red;
		top:-15px;
		right:-5px;
		border-radius:50%;
	}
	.mainpage .search{
		text-transform:capitalize;
		font-size:14px;
		outline:none;
		border:none;
		margin-left:15px;
		border-radius:10px;
		border:lightgray solid 1px;
		padding:5px 10px 5px 20px;
		transition:.3s;
		width:160px;
	}
	.input{
		position:relative;
	}
	.mainpage .input:before{
font-family:"Font Awesome 6 Free";
    content:"\f002";
    font-weight:900;
    position:absolute;
    left:20px;
    top:50%;
    font-size:14px;
    color:gray;
	transform:translatey(-50%);
	margin-right:10px;
}
.search:focus::placeholder{
	visibility:hidden;
}
.search:focus{
	width:200px;
}
.content{
		width:100%;
		overflow:hidden;
		background:url(../images/image-three.jpg);
		border-radius:0;
		background-size:cover;
		background-attachment:fixed;
		
		
	}

.content .one{
	display:inline-block;
	height:3px;
	width:30px;
	background-color:hsl(207, 90%, 54%);
	margin-left:30px;
}
.content .two{
	width:100px;
	background-color:white;
	display:inline-block;
	height:3px;
}
.content > .items{
		padding:20px;
		display:grid;
		grid-template-columns:
		repeat(auto-fill,minmax(450px,1fr));
		gap:20px;
		flex-wrap:wrap;
		
}
.items > div:not(.welcome){
	padding:20px;
	background-color:white;
	overflow:hidden;
}
*{
	border-radius:10px;
}

.welcome{
	background-color:white;
	border-radius:10px;
	overflow:hidden;
}
.welcome > div{
	display:flex;
	justify-content:space-between;
	background-color:hsl(0, 0%, 93%);
	position:relative;
	padding:20px;
}
.welcome > div h3 span{
	display:block;
	font-size:18px;
	margin-top:10px;
	color:gray;
}
.welcome .info{
	justify-content:space-around;
	text-align:center;
	background-color:white;
	flex-wrap:wrap;
	border-top:solid 1px lightgray;
	border-bottom:solid 1px lightgray;
	margin-top:50px;
	border-radius:0!important;
	padding:20px;
	
}
.welcome .info p{
	color:black;
}
.welcome .info span{
	color:gray;
}
.welcome .info div{
	width:calc(100%/3);	
}
.welcome > div .avatar{
	position:absolute;
	width:60px;
	height:60px;
	border-radius:50%;
	border:white solid 5px;
	bottom:-30px;
	left:30px;
	
}
.welcome a{
	color:white;
	padding:5px 10px ;
	font-size:18px;
	background-color:hsl(207, 90%, 54%);
	border-radius:8px;
	margin-left:auto;
	display:block;
	width:fit-content;
	outline:none;
	border:none;
	cursor:pointer;
	text-decoration:none;
	margin-bottom:15px;
	margin-right:15px;
	font-weight:normal;
	margin-top:15px;
}
	
.welcome div img{
	width:200px;
	
}

.quick{
	background-color:white;
}
.quick form{
display:flex;
flex-direction:column;
gap:20px;
background-color:white;
border-radius:10px;
}
.quick form .text,textarea{
background-color:hsl(0, 0%, 93%);
padding:20px;
border-radius:10px;
outline:none;
border:none
}
.quick form textarea{
	height:200px;
}
.quick form .save{
color:white;
	padding:5px 10px ;
	font-size:18px;
	background-color:hsl(207, 90%, 54%);
	border-radius:8px;
	margin-left:auto;
	display:block;
	width:fit-content;
	outline:none;
	border:none;
	cursor:pointer
}
.year{
	background-color:white;
	border-radius:10px;
}
.year .box{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:5px;
padding:5px 20px !important;
}
.year .box > div{
	flex:1;
}
.year .box i{
	text-align:center;
	font-size:20px;
	font-weight:bold;
	padding:50px;
	display:block;
	margin-right:15px;
}
.year div:nth-of-type(1) i{
color:hsl(207, 90%, 54%);
background-color:rgb(204, 227, 255);
}
.year div:nth-of-type(2) i{
color:#F59E0B;
background-color:#FDECCE;
padding:45px;
}
.year div:nth-of-type(3) i{
color:#22C55E;
background-color:#D2F4DF;
}
.year .box div div span{
	height:4px;
	display:block;
}
.year .box div div{
	background-color:lightgray;
	padding:0;
	height:4px;
	width:100%;
	margin-bottom:5px;
}
	.year div .blue{
background-color:hsl(207, 90%, 54%);
width:80%;


	}		
	.year div .orange{
		background-color:#F59E0B;
		width:55%;
	}
		.year div .green{
		background-color:#22C55E;
		width:75%;
	}
	.year .box div div span{
		position:relative;
		z-index:1;
	}
	.year .box div div span:before{
		content:attr(data-text);
		padding:2px 5px;
		position:absolute;
		top:-35px;
		right:-20px;
		color:white;
		font-size:14px;
		border-radius:6px;
	}
	.year .box div div .blue:before,.blue:after{
		background-color:hsl(207, 90%, 54%);
	}
	.year .box div div .orange:before,.orange:after{
		background-color:#F59E0B;
	
	}
	.year .box div div .green:before,.green:after{
		background-color:#22C55E;
	}
	.year .box div div span:after{
		content:"";
		width:0;
		height:0;
		position:absolute;
		top:-20px;
		right:-6px;
		border:solid 5px;
		border-color:transparent transparent transparent transparent;
		transform:rotate(-45deg);
		z-index:-1;
	}
	.ticket{
		background-color:white;
	
	}
	.ticket .boxs{
		display:flex;
		gap:20px;
		flex-wrap:wrap; 
	}
	.ticket .box{
		border:solid 1px lightgray;
		text-align:center;
		padding:20px;
		width:calc(50% - 10px);
	
	}
	.ticket .box h3{
		margin-top:10px;
	}
	.ticket .boxs div:nth-of-type(1) i{
	color:#F59E0B;
	}
	.ticket .boxs div:nth-of-type(2) i{
	color:hsl(207, 90%, 54%);
	}
	.ticket .boxs div:nth-of-type(3) i{
	color:#22C55E
	}
	.ticket .boxs div:nth-of-type(4) i{
	color:red;
	}
	
.latest-new{
	background-color:white;
}
.latest-new > h3{
	margin-bottom:20px;
}
.latest-new .box .info img{
	width:120px;
	border-radius:10px;
	margin-right:15px;
}
.latest-new .box{
	display:flex;
	justify-content:space-between;
	align-items:center;
	border-bottom:solid 1px lightgray;
	padding-bottom:20px;
	border-radius:0;
	margin-bottom:20px;
	
}
.latest-new .box h3{
	font-size:20px;
}
.latest-new .box .info{
	display:flex;
	align-items:center;
	justify-content:center;
}
.latest-new > div:last-child{
	border-bottom:none;
	margin-bottom:0;
}
.latest-new .box span:not(.days){
	font-size:14px;
	font-weight:bold;
	color:gray;
}
.latest-new .days{
	background-color:hsl(210, 40%, 96%);
	padding:7px;
	color:black;
	display:inline-block;
	border-radius:6px;
	font-size:13px;
}
.latest-task .box{
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:solid 1px lightgray;
margin-bottom:10px;
border-radius:0;
}
.latest-task .box p{
	margin:10px 0 20px 0;
	color:black;
	font-weight:bold
}
.latest-task .box p:last-child{
	color:gray;
}
.latest-task .box i:hover{
	cursor:pointer;
	color:red;
	opacity:0.8;
}
.top div:not(.box-one) p{
	color:black;
font-size:18px;}
.top div{
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-weight:bold;
	margin-bottom: 15px;
}
.top .box span{
		background-color:hsl(210, 40%, 96%);
	padding:7px;
	color:black;
	display:inline-block;
	border-radius:6px;
	font-size:13px;
}
.upload img{
	width:50px;
	margin-right:15px;
}
.upload .box{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
border-bottom:solid 1px lightgray;
padding-bottom:20px;
border-radius:0;
}
.upload .info{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.upload .info p{
	margin:0;
	color:black;
	font-size:18px;
	text-transform:lowercase
}
.upload .box > span{
	padding:7px;
	background-color:hsl(210, 40%, 96%);
	color:black;
	font-size:13px;
	
}
.last .text{
	border-left:3px solid hsl(207, 90%, 54%);
	border-radius:0;
	padding-left:20px;
	margin-left:15px;
	
}
.last .text li{
color:black;
font-size:18px;
margin-bottom:40px;
position:relative;
}
.last .text li:before{
	content:"";
	background-color:hsl(207, 90%, 54%);
	border-radius:50%;
	width:20px;
	height:20px;
	top:0;
	left:-35px;
	position:absolute;
	border:3px solid white;
	outline:hsl(207, 90%, 54%) solid 4px;
}
.last .text li:last-child:before{
	background-color:white;
}
.last .text li:nth-child(4):before{
animation:color infinite alternate 0.8s linear;
}
@keyframes color{
	from{
		background-color:hsl(207, 90%, 54%);
	}
	to{
		background-color:white;
	}
}
.reminder h3{
		margin-bottom:30px ! important
	}
.reminder .box p{
	color:black;
	font-size:15px;
	margin-bottom:5px;
	font-weight:bold;

	
}
.reminder .box{
	margin-bottom:20px;
	border-radius:0;
	border-left:3px solid red;
	padding-left:20px;
	margin-left:50px;
	padding-bottom:10px;
	position:relative;
		width:fit-content;
		
}
.reminder .box:before{
	content:"";
	position:absolute;
	width:20px;
	height:20px;
	background-color:red;
	top:50%;
	left:-50px;
	transform:translatey(-50%);
	border-radius:50%;
}
	.reminder div:nth-of-type(1):before{
		
		background-color:hsl(212, 89%, 44%);
	}
	.reminder div:nth-of-type(1){
		border-color:hsl(212, 89%, 44%);
	}
	
.reminder div:nth-of-type(2):before{
		
		background-color:hsl(142, 71%, 45%);
	}
	.reminder div:nth-of-type(2){
		border-color:hsl(142, 71%, 45%);
	}
	
 .reminder div:nth-of-type(3):before{
		
		background-color:hsl(38, 92%, 50%);
	}
	.reminder div:nth-of-type(3){
		border-color:hsl(38, 92%, 50%);
	}
	
 .reminder div:nth-of-type(4):before{
		
		background-color:hsl(4, 90%, 58%);
	}
	.reminder div:nth-of-type(4){
		border-color:hsl(4, 90%, 58%);
	}
	.post img{
	width:50px;
	margin-right:10px;
}
.post .box{
	display:flex;
	justify-content:flex-start;
align-items:center;
margin-bottom:20px;
border-bottom:1px solid lightgray;
border-radius:0;
padding-bottom:20px;

}
.post .box P{
	margin:10px 0 0 0;
	font-size:15px;
}
.post .box .text h4{
	margin:0;
	font-size:20px
}
.post > h4{
	font-size:13px;
	text-transform:capitalize;
	padding-bottom:20px;
	line-height:1.6;
	border-bottom:1px solid lightgray;
	margin-bottom:20px;
	font-weight:bold;
	border-radius:0;
	
}
.post .span-box{
	display:flex;
	align-items:centre;
	justify-content:space-between;
}
.post .span-box i{
	margin-right:10px;
}

.social > h3{
	margin-bottom:40px !important;
}
.social .box{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:10px;
	background-color:#D1ECFD;
	border-radius:0;
	padding-right:10px;
}
.social .box > span{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.social .text{
	color:hsl(207, 90%, 54%);
	font-size:15px;
	margin-left:10px;
}
.social .box a{

	margin-right:0 !important;
	margin-top:0!important;
	
}

.social i{
width:52px;
	color:white;
	border-radius:0;
	margin-top:0;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:10px;
	transition:0.3s;
	font-size:30px;
	height:100%;
	
}.social i:hover{
	transform:rotate(10deg);
}
.social .box span:not(.text){
		margin-top:0;
	}
	.social .box:nth-of-type(1) i,
	.social .box:nth-of-type(1) a{
		background-color:#1DA1F2 !important;
	}
	.social .box:nth-of-type(2) i,
	.social .box:nth-of-type(2) a{
		background-color:hsl(214, 89%, 52%)!important;
	}
	.social .box:nth-of-type(3) i,
	.social .box:nth-of-type(3) a{
		background-color:red !important;
	}
	.social .box:nth-of-type(4) i,
	.social .box:nth-of-type(4) a{
		background-color:hsl(201, 100%, 36%)!important;
	}
	.project{
		
		background-color:white;
		padding:20px;
		margin-right:20px;
		margin-left:20px;
		border-radius:10px;
		
	}
		
	.project > h3{
		font-size:30px;
		margin-bottom:15px;
		width:fit-content;
		font-weight:bold;
	}
	.project table{
		min-width:1000px;
		border-spacing:0;
		font-weight:bold;
		text-transform:capitalize;
		font-size:18px;
		text-align:center;

		
	}
	.project .table{
		overflow-x:auto;
	

		
	}
	.project table th,table td{
		padding:15px;
		background-color:#EEEEEE;
		border:1px solid #EEEEEE;
	border-right:transparent;
	border-radius:0;
	min-width:200px;
	}
	.project table td{
	background-color:white;
	border-radius:0;
	font-size: 14px;
    font-weight: bold;
}
	.project table img{
		width:32px;
		background-color:white;
		
	}
	.project table img{
		margin-left:-20px
	}
	.project table img:first-child{
		margin-left:0;
	}
.table span{
	display:block;
	color:white;
	padding:5px;
	background-color:green;
	birder-radius:6px;
	width:120px;
	margin:auto
}
.project table tr:first-child span{
	background-color:orange;
}
.project table tr:nth-child(2) span{
background-color:hsl(142, 71%, 45%);
}
.project table tr:nth-child(3) span,
.project table tr:nth-child(4) span{
	background-color:hsl(207, 90%, 54%);
}
.project table tr:nth-child(5) span,
.project table tr:nth-child(6) span{
	background-color:hsl(4, 90%, 58%);
}

 /*dashbord media quary*/
@media(max-width:768px){
		a{
		font-size:16px !important
	}
	.search{
	margin-left:0 !important;
	width:160px !important ;
}
.search:focus{
width:180px !important
}
.mainpage .header .input:before{
	left:5px;
}
.sidebar li span{
	display:none;
}
.sidebar{
	min-width:60px;
	text-align:center;
	padding:2px
}
.sidebar ul li:hover{
	transform:scale(1);
}
.sidebar h2{
	font-size:12px;
	margin-bottom:20px;
	margin-top:20px;
}
.sidebar ul li{
	text-align:center;
	padding-left:0
}
.sidebar > span{
	display:none;
}
.sidebar li a i{
	margin-right:0;
}
.sidebar li{
	padding:5px 0px;
}
.sidebar li:hover{
	margin-left:0;
}
	.welcome div{
		flex-direction:column;
		width:100%;
		align-items:center;
		gap:0;
	}
	.welcome  div img:nth-child(2){
		display:none;
		
}
.welcome div img:nth-of-type(2){
	border-color:white;
	left:50%;
	transform:translatex(-50%);
	
}
.content > .items{
	gap:10px;
	grid-template-columns:
	minmax(200px,1fr)
}
.items{
	padding:10px;
}
.items > div:not(.welcome){
	max-width:100%;
	padding:10px;
}
.year .box{
	flex-direction:column-reverse;
}
.year .box div,.year .box i{
	width:100%;
	margin-right:0;
}
.year .box div{
	padding:0 !important;
}
.ticket .box{
	width:100%;
}
.last .text li{
	font-size:15px;
}
.latest-new h3{
	text-align:center;
}
.latest-new .box, .latest-new .info{
	flex-direction:column;
	text-align:center;
}
.latest-new img{
	margin-bottom:10px;
}
.project{
	margin:0px 10px;
}
}
footer{
	padding:5px;
	margin-top:10px;
	color:white;
	font-family:'Caveat', cursive;
	text-align:center;
}
/*end dashbord page*/
/*start settings page*/
.settings .items .open{
	display:flex;
	justify-content:space-between;
	align-items:center;
	}
	.settings .text h4{
		font-size:20px;
		margin-bottom:0px;
		font-weight:normal;
	}
	.settings .text p{
		margin:5px 0px;
	}
.check{
	-webkit-appearance:none;
	background-color:black;
	min-width:60px;
	height:30px;
	border-radius:20px;
	position:relative;
	transition:0.3s;
	box-shadow:1px 1px 6px black, 1px 0px 3px white inset;
}

}
.settings > .items{
	display:grid;
	grid-template-columns:
	minmax(200px,1fr);
	padding:20px;
	gap:20px;
	}
.check:before{
	position:absolute;
	top:3px;
	left:0;
	background-color:white;
	border-radius:50%;
	width:24px;
	height:24px;
	content:"\f00d";
	cursor:pointer;
	margin-left:3px;
	font-family:fontawesome;
	display:flex;
	justify-content:center;
	align-items:center;
	color:black;
	transition:0.3s;

}
.check:checked{
	background-color:#2094F3;
}
.check:checked:before{
	left:calc(100% - 30px);
	content:"\f00c";
	color:black;
	background-color:white;
	margin-left:3px;	
}
.settings .items{
padding:20px 
}
.settings .items > div{
	margin-bottom:20px;
}
.settings .items textarea{
	width:100%;
	height:220px;
	background-color:white;
	border:1px solid lightgray;
	margin-top:15px;
	padding:0;
	resize:none;
}
.settings .items .open textarea::placeholder{
	color:red;
	font-weight:bold;
}
.settings .items .info label{
	display:block;
}
.settings .items .info input{
	width:100%;
	height:50px;
	border-radius:6px;
	padding:10px;
	display:block;
	margin:10px 0px;
	border:1px solid lightgray;
	outline:none;
}
.settings .items .info .email{
	width:90%;
	background-color:hsl(210, 36%, 96%);
	color:lightgray;
	display:inline-block;
}
.settings .items .info .button{
	background-color:white;
	color:white;
	font-size:17px;
	width:fit-content;
	display:inline-block;
	float:right;
	color:hsl(207, 90%, 54%);
	border:none;
	cursor:pointer;
}

.security .box{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:20px;
	border-bottom:1px solid lightgray;
	padding-bottom:15px;
	border-radius:0;
}
.security > p{
	margin-left:0;
	margin-bottom:20px;
}
.security .box h4{
	margin-top:5px;
	margin-bottom:5px;
	font-size:16px;
	font-weight:bold;
}
.security .box a {
	margin-top:0;
	margin-right:0 !important;
}
/*settings media quary*/
@media(max-width:767px){
	.settings .items .info .email{
		width:100%;
		padding:0;
	}
	.settings .items .info .button{
		position:relative;
		right:50%;
		transform:translatex(50%);
	}
		.settings .items .box h4{
			font-size:16px;
		}
}
		@media(min-width:1400px){
			.settings >.items{
	display:grid;
	grid-template-columns:
	repeat(auto-fill,minmax(500px,1fr));
	}
		}

.social-info .box{
	display:flex;
	align-items:center;
	border:1px solid lightgray;
	margin-bottom:15px;
	background-color:hsl(0, 0%, 94%);
}
.social-info .box input{
	width:100%;
	padding:15px 10px 15px 10px;
	border:none;
	outline:none;
	border-left:1px solid lightgray;
	background-color:hsl(0, 0%, 94%);
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	
}
.social-info .box i{
	color:gray;
	border-radius:0;
	width:50px;
	text-align:center;
	
}
.social-info .box input:focus i{
	color:lightgray;
	ackground-color:red;
}
.social-info div:focus-within i{
	color:black;
}
.control .box{
	margin-bottom:14px;
}

.control .bassem:checked{
	color:red;
}
.control input{
	appearance:none;
	width:20px;
	height:20px;
	border:1px solid lightgray;
	border-radius:6px;
	vertical-align:middle;
	position:relative;
	overflow:hidden;
}
.control input:before{
	content: "\f00c";
	width:3px;
	height:3px;
	background-color:hsl(207, 90%, 54%);
	color:white;
	top:50%;
	left:50%;
	position:absolute;
	font-family:fontawesome;
	transform:translate(-50%,-50%) rotate(-300deg);
	transition:0.2s;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	visibility:hidden;
	
	
}
.control input:checked:before{
	width:100%;
	height:100%;
	transform:rotate(360deg) translate(-50%,-50%);
	border-radius:0;
	visibility:visible;
}
.backup .radio .box{
	margin-bottom:15px;
	font-size:20px;
	font-weight:bold;
}

.backup .box input{
	width:20px; 
	height:20px;
}
.backup .items{
	display:flex;
	align-items:center;
    padding:20px 0 0 0;
	justify-content:space-between;
	gap:10px;
	border-top:1px solid lightgray;
	margin-top:20px;
	border-radius:0;
	
}
.backup .items .box{
	width:calc(100%/3);
	display:flex;
	felx-direction:column;
	align-items:center;
	justify-content:center;	
	padding:0;
}
.backup .items .box label{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:15px;
	border:1px solid lightgray;
	width:100%;
	height:100%;
	margin-left:0;
	padding:20px;
}

.backup .items input{
	appearance:none;
	
}
.backup .items input:checked + div label{
	color:hsl(207, 90%, 54%);
	border-color:hsl(207, 90%, 54%);
}

/*end settings page*/
/*start profile*/
.profile .items{
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	padding:20px;
}
.profile .bassem{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 !important;
	width:100%;
}
	
.profile .person{
	text-align:center;
	min-width:250px;
	border-radius:0;
	padding:50px 10px;
	position:relative;
	border-right:solid lightgray 1px;
	
}

.profile .items .bassem .person img{
	width:100px;
}
.profile .person i{
color:#F59E0B;
}
.profile .items .bassem .person span{
	display:block;
	color:gray;
	font-size:15px;
	font-weight:normal;
	margin-top:15px;
}
.profile .items .bassem .person div{
	width:150px;
	height:5px;
	background-color:lightgray;
	border-radius:20px;
	margin:auto;
	margin-bottom:15px;
}
.profile .items .bassem .person div span{
	background-color:hsl(207, 90%, 54%);
	width:80%;
	height:100%;
	display:block
}
.profile .info{
	flex:1;

	
}
.profile .info > p{
	padding-left:10px;
}
.profile .info .box{
	display:grid;
	grid-template-columns:
	repeat(auto-fill,minmax(265px,1fr));
	gap:10px;
	border-bottom:1px solid lightgray;
	padding-bottom:15px;
	border-radius:0;
	padding-left:14px;
}
.profile .info .box > span{
	display:block;
}
.profile .info .box > span .text
{
	color:gray;
	font-size:14px;
}
.profile .info .box > span .gender{
	font-size:16px;
	font-weight:normal;
}
.profile .skills{
	flex-grow:1;
}
.profile .skills .box{
	padding:15px 0;
	border-bottom:1px solid lightgray;
	border-radius:0;
}
.profile .skills .box span{
	display:inline-block;
	padding:5px;
	background-color:lightgray;
	foont-size:15px;
	font-weight:normal;
	margin-right:5px;
}
.latestActivities{
	flex:2;
	gap:20px;
}
.latestActivities .box img{
	width:80px;
	margin-right:10px;
	margin-bottom:10px;
}
.latestActivities .box span{
display:block
}
.latestActivities .box{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:15px;
	padding-bottom:15px;
}
.latestActivities .box .text{
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.latestActivities .box .text p{
	margin:5px 0 0 0;
}
.latestActivities .box .image{
display:flex;
	align-items:center;
	justify-content:space-between;
}	
	.latestActivities .box .image p{
margin:5px 0 10px 0;
}	

          /* profile media quary */
		@media(max-width:767px){
		.backup .items{
			flex-direction:column;
		}
		.backup .items .box{
	width:100%;

		}
		.profile .items{
			flex-direction:column;
		}
		.profile .items > div{
			width:100%;
			text-align:center;
		}
		.profile .bassem{
			flex-direction:column;
			padding:0;
		}
		.profile .bassem .person{
			border-right:none;
		}
		.profile .bassem .info{
			width:100%;
			padding:0!important;
			text-align:center;
			
		}
		.latestActivities .box{
		flex-direction:column;
		
		}
		.latestActivities .box .image{
			flex-direction:column;
		}
		}
/*end profile page*/
/*start projects page*/
.projects .items{
	padding:20px;
}
.projects .items div:not(.score > div){
	margin-bottom:20px;
}
.projects .box > h4{
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:18px;
}
.projects .box > p{
	font-size:15px !important;
	line-height:1.6;
}
.projects .box > h4 span{
	color:gray;
	font-size:15px;
}
.projects .box .team img{
	width:50px;
	background-color:white;
	padding:1px;
	border:white 1px solid;
	border-radius:50%;
}
.projects .box img:not(:first-child){
	margin-left:-20px;
}
.projects .box .team img:hover{
	position:relative;
	z-index:2;
}
.projects .box .skills {
	display:flex;
	justify-content:flex-end;
}
.projects .box .skills p{
	color:black;
	font-size:13px !important;
	padding:7px;
	background-color:hsl(143, 61%, 89%);
	width:fit-content;
	margin-left:10px;
}
.projects .box .score div{
	width:250px;
	height:7px;
	background-color:lightgray;
}
.projects .box .score div span{
	background-color:#f44336;
	height:100%;
	display:block;
}
.projects .box .score{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
	
	
	
	
/*projects media quray*/
@media(max-width:767px){
	.projects .box{
		text-align:center;
	}
	.projects .box .skills{
		flex-direction:column;
		gap:10px;
		justify-content:center;
		align-items:center;
	}
	.projects .box .skills p{
		margin-bottom:0;
		margin-top:0;
	}
	.projects .box .score{
		flex-direction:column;
		gap:10px;
	}
}
/*end project*/
/*start courses page*/

.courses .items{
	display:grid;
	grid-template-columns:
	repeat(auto-fill,minmax(300px,1fr));
	gap:20px;
	padding:20px;
}

.courses .items .box{
	padding:0;
	overflow:hidden;
	border-color:black;
	position:relative;
	box-shadow:0px 1px 8px lightgray;
}
.courses .items img:nth-child(1){
	border-radius:0;
	width:100%;
	
}
.courses .items img:nth-child(2){
	width:50px;
	position:absolute;
	top:20px;
	left:20px;
	background-color:white;
	padding:2px;
	border-radius:50%;
	
}
.courses .items .box .text,
.courses .items .box .info
{
padding:20px;
}	
.courses .items .box p{
	font-size:15px !important;
	line-height:1.6;
	
}
.courses .items .box .info{
border-top:1px solid lightgray;
border-radius:0;
padding-top:25px;
display:flex;
justify-content:space-between;
align-items:center;
color:gray;
font-weight:normal;
position:relative;
}
.courses .items .box .info:before{
content:"course info";
background-color:#0075FF;
color:white;
font-size:14px;
padding:5px 10px;
position:absolute;
top:0;
left:50%;
transform:translate(-50%,-50%);
font-weight:bold;
border-radius:6px;
}

/*courses media quary*/
@media(max-width:767px){
	.courses .items{
		grid-template-columns:
		minmax(200px,1fr)
	}
}
/*end courses*/
/*start friends*/
.friends .items{
	padding:20px;
	display:grid;
	grid-template-columns:
	repeat(auto-fill,minmax(350px,1fr));
	gap:20px;
}
.friends .items .box img{
width:100px;
margin-top:10px;
margin-bottom:10px;
}

.friends .items .box .contact i{
	color:gray;
	text-align:left !important;
	margin-right:10px;
	display:inline-block;
	background-color:hsl(0, 0%, 94%);
	border-radius:50%;
	padding:10px;
		cursor:pointer;
	
}
.friends .items .box .contact i:hover{
	background-color:hsl(207, 90%, 54%);
	color:white;
}
.friends .items .image{
	text-align:center;
	border-bottom:1px solid lightgray;
	border-radius:0;
}
.friends .items .icon{
	border-bottom:1px solid lightgray;
	border-radius:0;
}
.friends .items .icon p{
	color:black;
}
.friends .items .icon i{
	margin-right:10px;
	color:black;

}
.friends .items .date{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-top:20px;
	margin-bottom:10px;
}
.friends .items .date a:not(:nth-child(2)){
margin-right:5px;
}
.friends .items .date a:nth-child(2){
background-color:#F44336!important;
margin-right:0;
}	
.friends .items .date p{
margin:0;
}	

/*media quary*/
@media(max-width:767px){
	.friends .items{
		grid-template-columns:
		minmax(200px,1fr)
	}
}
/*end friends*/
/*start files*/
.files .items{
	padding:20px;
	display:flex;
	flex-direction:row-reverse;
	gap:20px;

}
.files .items .content-one{
	gap:20px;
	display:flex;
	flex-direction:column;
	min-width:260px;
	height:fit-content;

}
.files .items .content-one h3{
	margin:0;
}
.files .items .content-one a{
	margin:auto;
	padding:10px 15px;
}
.files .items .content-one a i{
	margin-right:10px;
	animation:up-down 0.3s linear alternate infinite;
	position:relative;
}
@keyframes up-down{
	from{
		bottom:0px;
	}
	to{
		bottom:2px;
	}
}
.files .items .content-one a:hover i{ 

}
.files .content-one .box{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:10px;
	border:1px solid lightgray;
	font-size:14px !important;


}
.files .content-one .box > p{
font-size:14px !important;
margin:0;
}
.files .content-one .box .icon{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.files .content-one .box .icon i{
	margin-right:15px;
	width:40px;
	height:40px;
	border-radius:0;
	display:flex;
	align-items:center;
	justify-content:center;
}
.files .content-one .box .icon p{
	color:black;
	margin:0;
}
.files .content-one .icon p span{
	display:block;
	margin-top:5px;
	font-size:13px;
	color:gray;
}
.files .content-one .box:nth-of-type(1) i{
	background-color:hsl(213, 100%, 90%);
	color:hsl(207, 90%, 54%)
}
.files .content-one .box:nth-of-type(2) i{
	background-color:hsl(143, 61%, 89%);
	color:hsl(142, 71%, 45%);
}
.files .content-one .box:nth-of-type(3) i{
	background-color:hsl(5, 91%, 92%);
	color:hsl(4, 90%, 58%);
}
.files .content-one .box:nth-of-type(4) i{
	background-color:hsl(38, 92%, 90%);
	color:hsl(38, 92%, 50%);
}	
 .files .content-two{
	flex:1;
	display:grid;
	grid-template-columns:
	repeat(auto-fill,minmax(200px,1fr));
	gap:20px;
	background:none !important;
	padding:0 !important;


 } 
 .files .content-two .box{
	 background-color:white;
	 padding:10px;
	 border-radius:10px;
 }
 .files .content-two i{
	 cursor:pointer;
 }
  .files .content-two img{
	 width:70px;
	 display:block;
	 margin:auto;
	 transition:0.3s;
 }
  .files .content-two img:hover{
	  transform:rotate(10deg);
  }
  .files .content-two .box h4{
	  margin-top:15px;
	  text-align:center;
  }
  
   .files .content-two .box p:first-of-type{
	   margin:0;
	   padding:10px 0 15px 0;
	   border-bottom:1px solid lightgray;
	   border-radius:0;
	   font-weight:normal
   }


 .files .content-two .box .date{
	 display:flex;
	 justify-content:space-between;
	 align-items:center;
	 font-weight:normal
 }
 .files .content-two .box p:nth-of-type(2){
	 margin:0;
	 padding-top:10px;
	 font-weight:normal
 }
  .files .content-two .box .date span{
	  font-weight:normal;
  }
  
  
  
  /*files media quary*/
  @media(max-width:767px){
	  .files .items{
		  flex-direction:column;
	  }
  }
  /*end files*/
  /*start plans*/
  .plans .items{
	  display:grid;
	  grid-template-columns:
	  repeat(auto-fill,minmax(450px,1fr));
	  gap:20px;
	  padding:20px;
	 
  }
  .plans .items .box{
	  padding:20px;

  }
   .plans .items .box h1{
	   position:relative;
	   width:fit-content;
	   margin:auto;
	   padding-top:10px;
   }
  .plans .items .box h1:nth-of-type(1){
	 font-size:27px;
  }
  .plans .items .box h1:nth-of-type(2) span{
	position:absolute;
	top:0px;
	left:0px;
	font-size:24px;
  }
  .plans .items .big-box{
	  background-color:#22C55E;
	  border:white 3px solid;
	  outline:2px solid #22C55E;
	  padding:50px;
	  text-align:center;
	  margin-bottom:10px
  }
    .plans .items .box:nth-child(2) .big-box{
	   background-color:hsl(212, 100%, 50%);
	   outline-color:hsl(212, 100%, 50%);
   }
     .plans .items .box:nth-child(3) .big-box{
	   background-color:#F59E0B;
	   outline-color:#F59E0B;
	 }
   .plans .items .box div:not(.big-box){
	   display:flex;
	   justify-content:space-between;
	   align-items:center;
	  border-bottom:1px solid lightgray;
	  border-radius:0;
   }
   
   .plans .items .box div:not(.big-box) p{
	   color:black;
   }
    .plans .items .box div p i{
		color:red;
		font-size:20px;
		margin-right:5px;
	}
   .plans .items .box div p .fa-check{
	color:hsl(142, 71%, 45%); 
   }
  
   .plans .items .box a{
	   margin-top:20px !important;
	   text-align:left !important;
	  padding-right:20px;
	  padding-left:18px;
	
   }
   .plans .items .box h4{
	   color:gray;
	   text-align:center;
	   padding:20px 0 10px 0;
	   font-size:20px;
   }
 
   @media(max-width:767px){
	   .plans .items{
	  grid-template-columns:
	  minmax(200px,1fr)
	 
	  }
	  .plans .items{
		  padding:10px;
   }
   .plans .items .box{
   padding:10px
   }
   }
	  
  /*end plans*/