@charset "utf-8";
/* New Font Family */

@font-face {
  font-family: din;
  src: url(../css/d-din/D-DIN.otf);
}


/* Top Header MenuBar */
.top-navbar{
	width:100%;
	min-height:60px;
	padding:5px 10px;
	background-color:#f2f2f2;
	border-bottom: 2px solid #f2f2f2;
}
.menu-open{
	font-size:40px;
	padding:10px;
	cursor:pointer;
	margin-left:20px;
	margin-right:10px;
	position:relative;
	float:left;
	color:#ffffff;
}
.nav_title{
	position:relative;
	float:left;
	font-size:30px;
	font-family: din, sans-serif;
	font-weight:900;
	letter-spacing:1px;
	padding:5px;
	color:#5f626e;
	padding-left:20px;
}
.logo{
	float:left;
	position:absolute;
	transform: translateX(-50%);
	left:50%;
}
.logo img{
	width:48px;
	height:48px;
}
/* Top Profile Popup */
.profile-popup{
	position:relative;
	float:right;
	margin-right:20px;
	width:250px;
	font-family: din, sans-serif;
}
.profile-img{
	position:relative;
	min-width:48px;
	min-height:48px;
	max-width:48px;
	max-height:48px;
	background-color:#d2d3d5;
	margin:0px;
	border-radius:50%;
	cursor:pointer;
	float:right;
	overflow:hidden;
	border:1.5px solid #d2d3d5;
}
.popup-det{
	position:absolute;
	display:block;
	width:250px;
	height:150px;
	margin-top:55px;
	float:right;
	box-shadow: 0 0 4px 0 rgb(207 207 207 / 50%);
	background-color:#fff;
	z-index:10;
	text-align:center;
	font-size:15px;
	display:none;
}
.popup-name{
	width:100%;
	color:#6699ff;
	position:relative;
	font-size:17px;
	padding:4px;
	font-weight:800;
	margin-top:10px;
}
.popup-des{
	width:100%;
	position:relative;
	font-size:15px;
	font-weight:800;
	text-transform:capitalize;
}
.last-login{
	width:100%;
	color:#4f5767;
	position:relative;
	font-size:17px;
	padding:5px;
}
.last-login>span{
	font-weight:900;
}
.option-cont{
	position:absolute;
	width:100%;
	bottom:0px;
}
.option-cont>.option{
	width:50%;
	position:relative;
	float:left;
	padding:5px;
	font-weight:800;
	color:#ffffff;
	background-color:#3399ff;
	font-size:15px;
}
.option-cont>.option:first-child{
	border-right:1px solid #fff;
}

/* Top Body */
.full-body{
	position:absolute;
	width:100%;
	height:calc(100%);
}

/*Side Menu*/
.side-name{
	width:auto;
	display:inline-block;
	margin-left:5px;
	font-family: din, sans-serif;
    font-weight: 900;
	color:#7594e1;
	font-size:14px;
	max-width:125px;
	min-width:125px;
	word-break: break-all;
	text-align:center;
}
.side-profile-img{
	width:100%;
}
.side-profile-img img{
	position:relative;
	min-width:75px;
	min-height:75px;
	max-width:75px;
	max-height:75px;
	background-color:#d2d3d5;
	margin:0px;
	border-radius:50%;
	overflow:hidden;
	border:1.5px solid #ffffff;
	margin-left:-5px;
}
.cs-bg{
	background: rgb(114,144,223);
	background: linear-gradient(0deg, rgba(114,144,223,1) 0%, rgba(150,195,245,1) 95%, rgba(151,194,246,1) 95%);
}
.side-menu{
	position:fixed;
	width:15%;
	height:100%;
	background-color:#ffffff;
	transition: 0.3s;
	overflow:hidden;
	border-right:2px solid #f2f2f2;
}
.menu-sm{
	display:none;
	width:100%;
	transition: 0.3s;
}
.menu-logo{
	position:absolute;
	width:100%;
	padding:10px 6px;
	transition: 0.3s;
	bottom:0px;
	background: rgb(114,144,223);
	background: linear-gradient(0deg, rgba(114,144,223,1) 0%, rgba(150,195,245,1) 95%, rgba(151,194,246,1) 95%);
	padding-bottom:10px;
}
.menu-logo img{
	width:100%;
}
.menu-items{
	margin-top:10px;
	width:100%;
	position:relative;
}
.menu-item{
	padding:8px;
	font-size:15px;
	font-weight:900;
	font-family: din, sans-serif;
	color:#7594e1;
	letter-spacing:1px;
	margin:2px 0px;
}
.menu-item i{
	margin:0px 10px;
	font-size:17px;
	color:#4390ef;
}
.menu-item:hover, .menu-item:hover i{
	background-color:#96c3f5;
	color:#ffffff;
}
.menu-item.selected{
	background-color:#96c3f5;
	color:#ffffff;
	border-left:5px solid #7594e1;
}
.selected i{
	color:#ffffff;
}
.wave-layout{
	background-image:url(../pic/wave-removebg-preview2.png);
	background-position:bottom;
	width:100%;
	position:relative;
	height:198px;
    background-repeat: no-repeat;
	padding:10px 10px;
}
.pro-title{
	text-align:center;
	font-size: 14px;
    font-family: din, sans-serif;
    font-weight: 900;
    letter-spacing: 1px;
	margin-left:-5px;
	color:#ffffff;
	margin-top:2px;
}
/*Side Menu Small*/
.sm-side-menu{
	width:5%;
	transition: 0.3s;
}
.sm-side-menu .menu-logo img:first-child{
	display:none;
}
.sm-side-menu .menu-item{
	margin:5px 0px;
}
.sm-side-menu .menu-item span{
	display:none;
	transition: 0.3s;
}
.sm-side-menu .menu-item i{
	font-size:24px;
	margin:0px 10px;
}
.sm-side-menu .menu-sm{
	display:block;
}
/*Body Full*/
.body-cont{
	width:85%;
	position:relative;
	float:left;
	height:100%;
	margin-left:15%;
	transition: 0.3s;
}
.full-cont{
	width:95%;
	margin-left:5%;
}


/* Extra */

body{
	margin:0px;
}
.row{
	margin-right: 0px;
	margin-left: 0px;
}
a{
	text-decoration:none;
	color:inherit;
}
a:hover{
	text-decoration:none;
	color:inherit;
}
.overlay-black{
	height: 100%;
	width: 100%;
	position: fixed; 
	z-index: 12; 
	left: 0;
	top: 0;
	background-color: rgb(0,0,0); 
	background-color: rgba(0,0,0, 0.7); 
	overflow-x: hidden;
	display:none;
}
.circle {
   width: 32px !important;
   height: 32px !important;
   padding: 9px !important;
   border-radius: 50% !important;
}
.my_aleart{
	position:fixed;
	top:20px;
	float:right;
	right:30px;
	z-index:25;
	padding:8px !important;
	font-size:15px;
}
.my_aleart>i{
	margin-left:15px;
}

/* Color */

.bg_lightgray{
	background-color:#f2f2f2;
}
.bg_gray{
	background-color:rgba(242, 242, 242, 0.6);
}
.bg-lightgreen{
	background-color:rgba(0, 153, 115, 0.9);
}
.bg-black {
   background-color: #4f585d;
}
.bg-spblue{
	background-color: #2196f3 !important;
}
.bg-green{
	background-color: #66bb6a !important;
}
.bg-lightblue{
	background-color: #64b5f6 !important;
}
.bg-lightred{
	background-color: #e57373 !important;
}
.bg-deeporange{
	background-color: #ff8a65 !important;
}
.bg-skyblue{
	background-color: #4dd0e1 !important;
}

.loader {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.3);
}
.loader>img{
	position:relative;
	left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
	opacity: 1;
}

/* Mobile Responsive */

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