*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a{
	text-decoration: none;
}

li{
	list-style: none;
}

ol, ul {
    padding-left: 0rem;
}

:root{
	--poppins: 'Poppinnns', sans-serif;
	--lato: 'Lato', sans-serif;

	--light: #f9f9f9;
	--blue: #3c91e6;
	--light-blue: #cfe8ff;
	--gray: #eee;
	--dark-gray: #aaa;
	--dark: #3f3944;
	--red: #db504a;
	--yellow: #ffce26;
	--light-yellow: #fff1c2;
	--orange: #fd7238;
	--light-orange: #fdceba;
}

.btn,.form-control:focus {
	border-color: var(--primary-color);
	box-shadow: none;
}

body{
	background: var(--gray);
}

/* side scroll bar*/

/* width */
::-webkit-scrollbar {
  width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

/* SIDEBAR */
#sidebar{
	position: fixed;
	top: 0;
	left: 0;
	width: 280px;
	height: 100%;
	background: var(--light);
	z-index: 1000;
	font-family: var(--poppins);
	transition: all .3s ease;
	overflow-x: hidden;
}

#sidebar.hide{
	width: 60px;
}

#sidebar .brand{
	font-size: 24px;
	font-weight: 700;
	height: 56px;
	display: flex;
	align-items: center;
	color: var(--blue);
}


#sidebar .brand .fa-solid{
	min-width: 60px;
	display: flex;
	justify-content: center;
}

#sidebar .side-menu{
	width: 100%;
	margin-top: 48px;
}

#sidebar .side-menu li{
	height: 48px;
	background-color: transparent;
	margin-left: 6px;
	border-radius: 48px 0 0 48px;
	padding: 4px;
}

#sidebar .side-menu .side_web_menu{
	margin-left: 15px;
	margin-top: 10px;
	padding: 4px;
}

@media(max-width:992px){
	#sidebar .side-menu .side_web_menu{
		margin-left: 8px;
		margin-top: 6px;
		padding: 0px;
	}
	
	#sidebar .side-menu .side_web_menu .website_mobile_menu{
		display:none;
	}
	
	#sidebar .side-menu .fa-globe{
		margin-left: 16px;
	}
	
	#sidebar .side-menu .fa-angle-down{
		display:none;
	}
	
	

}

#sidebar .side-menu .side_web_menu li{
	height: 48px;
	background-color: transparent;
	/*margin-left: 6px;*/
	border-radius: 48px 0 0 48px;
	/*padding: 4px;*/
}

#sidebar .side-menu li.active{
	background-color: var(--gray);
	position: relative;
}

#sidebar .side-menu li.active::before{
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	top: -40px;
	right: 0;
	box-shadow: 20px 20px 0 var(--gray);
	z-index: -1;
}

#sidebar .side-menu li.active::after{
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	bottom: -40px;
	right: 0;
	box-shadow: 20px -20px 0 var(--gray);
	z-index: -1;
}

#sidebar .side-menu li a{
	width: 100%;
	height: 100%;
	background: var(--light);
	display: flex;
	align-items: center;
	border-radius: 48px;
	font-size: 16px;
	font-weight:500;
	color: var(--dark);
	white-space: nowrap;
	overflow-x: hidden;
}

#sidebar.hide .side-menu li.active a{
	color: var(--blue);
}

#sidebar.hide .side-menu li a{
	width: calc(48px - (4px * 2));
	transition: width .3s ease;
}

#sidebar .side-menu li a.logout{
	color: var(--red);
}

#sidebar .side-menu.top li a:hover{
	color: var(--blue);
	
}

#sidebar .side-menu li a span{
	color: var(--dark);
}

#sidebar .side-menu li a .fa-solid{
	min-width: calc(60px - ((4px + 6px) * 2));
	display: flex;
	justify-content: center;
}





/* SIDEBAR */



/* CONTENT */
#content{
	position: relative;
	width: calc(100% - 280px);
	left: 280px;
	transition: .3s ease;
}

#sidebar.hide ~ #content{
	width: calc(100% - 60px);
	left: 60px;
	/* overflow-x: hidden; */
}


/* NAVBAR */
#content nav{
	height: 56px;
	background: var(--light);
	padding: 0 24px;
	display: flex;
	align-items: center;
	grid-gap: 24px;
	font-family: var(--lato);
	position: relative;
}

#content nav::before{
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	/* background: var(--blue); */
	bottom: -40px;
	left: 0;
	border-radius: 50%;
	box-shadow: -20px -20px 0 var(--light);
}

#content nav a{
	color: var(--dark);
}

#content nav .fa-solid.fa-angles-right{
	cursor: pointer;
}

#content nav .nav-link{
	font-size: 16px;
	transition: all .4s ease;
}

#content nav .nav-link:hover{
	color: var(--blue);
}



#content nav .profile img{
	height: 36px;
	width: 36px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid #000;
	padding: 4px;
}

/* NAVBAR */

/* MAIN */
#content main{
	width: 100%;
	padding: 36px 24px;
	font-family: var(--poppins);
}

#content main .head-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	grid-gap: 16px;
	flex-wrap: wrap;
}

#content main .head-title .left h1{
	font-size: 36px;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--dark);
}

#content main .head-title .left .breadcrumb{
	display: flex;
	align-items: center;
	grid-gap: 12px;
}

#content main .head-title .left .breadcrumb li a{
	color: var(--dark-gray);
	pointer-events: none;
}

#content main .head-title .left .breadcrumb li a.active{
	color: var(--blue);
	pointer-events: unset;
}


#content main .box-info{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	grid-gap: 24px;
	margin-top: 36px;
}

#content main .box-info li{
	padding: 24px;
	background: var(--light);
	border-radius: 10px;
	display: flex;
	align-items: center;
	grid-gap: 24px;
}

#content main .box-info li .fa-solid{
	width: 80px;
	height: 80px;
	border-radius: 10px;
	background: var(--gray);
	font-size: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#content main .box-info li:nth-child(1) .fa-solid{
	background: var(--light-blue);
	color: var(--blue);
}

#content main .box-info li:nth-child(2) .fa-solid{
	background: var(--light-yellow);
	color: var(--yellow);
}

#content main .box-info li:nth-child(3) .fa-solid{
	background: var(--light-orange);
	color: var(--orange);
}


/* MAIN */
/* CONTENT */








@media screen and (max-width: 992px) {
	#content{
		/*width: calc(100% - 60px);*/
		/* left: -60px; */
		overflow:hidden;
	}

	#content nav .nav-link{
		display: none;
	}
	
}


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

	#content nav form .form-input input{
		display: none;
	}

	#content nav form .form-input button{
		width: auto;
		height: auto;
		background: transparent;
		border-radius: none;
		color: var(--dark);
	}

	#content nav form.show .form-input input{
		display: block;
		width: 100%;
	}

	#content nav form.show .form-input button{
		width: 36px;
		height: 100%;
		border-radius: 0 36px 36px 0;
		color: var(--light);
		background: var(--red);
	}

	#content nav form.show ~ .notification,
	#content nav form.show ~ .profile{
		display: none;
	}
	
	
}






.login-form-fields{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	height:100vh;
	background:var(--gray);
	text-align:center;
	}
	
.login-form-fields .login-form input{
	height:50px;
	padding:5px 20px;
	border:1px solid #000;
	margin:10px 0;
	border-radius:0;
	outline:none;
	width:400px;
}

@media (max-width:992px){
	.login-form-fields .login-form input{
		width:260px;
	}
}

.login-form-fields .login-form .log-in{
	border: 0;
}

.login-form-fields .user-icon {
	background:#fff;
	height:60px;
	width:60px;
	padding:20px;
	border-radius: 50%;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	margin: 10px auto;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}

.login-input-group{
	background:red;
	padding: 40px 30px;
}