@font-face{
	font-family: 'Segoe UI';
	src: url('../font/segoe-ui/segoeui.eot');
	src: url('../font/segoe-ui/segoeui.eot?#iefix') format('embedded-opentype'), 
	       url('../font/segoe-ui/segoe-ui-webfont.woff') format('woff'), 
	       url('../font/segoe-ui/segoeui.ttf')  format('truetype'), 
	       url('../font/segoe-ui/segoe-ui-webfont.svg#svgFontName') format('svg');
}
@font-face{
	font-family: 'FontAwesome';
	font-style: normal;
	font-weight: 900;
	src: url("../plugins/fontawesome/web-fonts-with-css/webfonts/fa-solid-900.eot");
	src: url("../plugins/fontawesome/web-fonts-with-css/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../plugins/fontawesome/web-fonts-with-css/webfonts/fa-solid-900.woff2") format("woff2"), url("../plugins/fontawesome/web-fonts-with-css/webfonts/fa-solid-900.woff") format("woff"), url("../plugins/fontawesome/web-fonts-with-css/webfonts/fa-solid-900.ttf") format("truetype"), url("../plugins/fontawesome/web-fonts-with-css/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}

body { 
  color: #000; 
  font-family: 'Segoe UI','Open Sans', sans-serif;
  padding: 0px !important;
  margin: 0px !important;
  font-size:13px; 
  direction: ltr;
}

/*
Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't 
properly apply the media queries in Bootstrap's CSS. To address this, 
you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.
*/
@-webkit-viewport { 
  width: device-width; 
}

@-moz-viewport { 
  width: device-width; 
}

@-ms-viewport { 
  width: device-width; 
}

@-o-viewport { 
  width: device-width; 
}

@viewport { 
  width: device-width; 
}

/* Internet Explorer 10 doesn't differentiate device width from viewport width, 
and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, following CSS code applied */
@-ms-viewport { 
  width: auto !important; 
}

/* Page print */

/***
General typography 
***/
h1 small,
h2 small,
h3 small, 
h4 small, 
h5 small,
h6 small {
  color: #444;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300 !important;
}

h1.block, 
h2.block, 
h3.block, 
h4.block, 
h5.block, 
h6.block {
  padding-top: 10px;
  padding-bottom: 10px;
}

.spacer{
	margin-bottom: 1rem;
}
.header{
	width: 100%;
	border-bottom: 4px solid #FFA44C;
	background-color: white;
}

.header.navbar{
	padding: 0;
}

.header .kiri{
	width: 100%;
	background: #F5F6F3;
	height: 50px;
	min-height: 50px;
	padding-left: 20px;
	padding-right: 10px;
}

.adm-picture{
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.adm-picture img{
	max-width: 100px;
}

.adm-picture .nama{
	font-weight: 700;
	color: #727174;
	font-size: 14px;
}

.adm-picture .level{
	font-weight: 700;
	color: #727174;
	font-size: 13px;
}

.header .logo{
	display: flex;
	width: 70%;
	height: 50px;
	min-height: 55px;
}

.header .logo > img {
	height: 100%;
}

a.collapse-icon{
	position: relative;
	float: right;
	color: #606062;
}
a.collapse-icon:hover,a.collapse-icon:focus,a.collapse-icon:active{
	text-decoration: none;
	color: #FFA44C;
}

/*Menu Header*/

.nav-right{
	height: 50px;
	margin-right: 20px;
	display: none;
}
.nav-right>li{
	height: 50px;
	display: flex;
	align-items: center;
}
.nav-right>li.dropdown,.nav-right>li.dropdown>a{
	text-decoration: none;
	color: #606062;
	/*font-size: 20px;*/
	padding-right: 6px;
	padding-left: 6px;
}
.nav-right > li.dropdown .dropdown-toggle .badge {
  position: absolute;
  top: 3px;
  right: 2px;
  border-radius: 50%  !important;
  min-width: 20px;
  max-width: 20px;
  padding: 4px 2px 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-right > li.dropdown .dropdown-toggle img {
  height: 45px;
}
.nav-right > li.dropdown .dropdown-toggle:after{
	display: none;
}

.nav-right>li.dropdown:hover,.nav-right>li.dropdown:focus,.nav-right>li.dropdown:active,.nav-right>li.dropdown>a:hover{
	background-color: #FFA44C;
	color: #F5F6F3;
}

.nav-right .dropdown-menu {
  margin-top: 3px !important;
	border-radius: 4px !important;
	box-shadow: 5px 5px rgba(102, 102, 102, 0.1);
	border-color: 1px solid white;
}

.nav-right > li > .dropdown-menu::before {
	position: absolute;
	top: -7px;
	left: 17px;
	display: inline-block !important;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #ccc;
	border-left: 7px solid transparent;
	border-bottom-color: rgba(0, 0, 0, 0.2);
	content: '';
}
.nav-right > li > .dropdown-menu::after{
	position: absolute;
	top: -6px;
	left: 16px;
	display: inline-block !important;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #fff;
	border-left: 6px solid transparent;
	content: '';
}

.dropdown-menu.notifications {
  padding: 0 0 4px 0;
  border-radius: 4px !important;
  min-width: 160px !important;
  max-width: 300px !important;
  width: 233px !important;
	background-color: #ffffff !important;
}

.dropdown-menu.notifications:before,
.dropdown-menu.notifications:after {
  border-bottom-color: #eee !important;
}

.dropdown-menu.notifications li p{
	border-radius: 4px 4px 0px 0px !important;
  padding: 10px;
  background-color: #eee;
  margin: 0px;
  font-size: 14px;
  font-weight: 300;
  color: #333;
}
.dropdown-menu.notifications li a{
	text-decoration: none;
  display: block;
  padding: 5px 10px !important;
  clear: both;
  font-weight: normal;
  color: #000;
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  white-space: normal !important;
  border-bottom: 1px solid #f4f4f4 !important;
}

.dropdown-menu.notifications li a:hover{
  background-color: #F5F6F3;
  color: #000;
  filter:none;
}
.dropdown-menu.notifications li:first-child a {
  border-top: none;
  border-bottom: 1px solid #f4f4f4 !important;
}

.dropdown-menu.notifications li.more{
  font-size: 13px;
  font-weight: 400;    
  border-bottom: 0 !important;
}

.dropdown-menu.notifications li.more a{  
  border-bottom: 0 !important;
}

.notifList{
	padding-left: 0;
	list-style: none;
}

.notifList>li>a{
	display: flex !important;
	flex-direction: row;
	align-items: center;
	font-size: 13px !important;
	font-weight: 300 !important;
}

.notifList>li .hmico{
	border-radius: 4px;
}

.notifList>li .hmico img{
	height: 45px;
	padding: 0px;
}

.dropdown-menu.user li {
	padding: 5px 10px !important;
  border-bottom: 1px solid #f4f4f4 !important;
}
.dropdown-menu.user li:last-child {
	padding: 5px 10px !important;
  border-bottom: none !important;
}

.dropdown-menu.user li a{
	text-decoration: none;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: black;
}
.dropdown-menu.user li:hover{
  background-color: #F5F6F3;
  color: #000;
  filter:none;
}


/*End Menu Header*/

.content-wrapper{
	width: 100%;
	background-color: #F5F6F3;
}

/*Side Bar Menu */
.sidebar-wrapper{
	width: 100%;
	position: fixed;
	z-index: 1030;
	background-color: white;
	-moz-box-shadow:    3px 0px rgba(102, 102, 102, 0.1);
  -webkit-box-shadow: 3px 0px rgba(102, 102, 102, 0.1);
  box-shadow:         3px 0px rgba(102, 102, 102, 0.1);
}

.sidebar-content{
	max-height: auto !important;
}

.sidebar-menu{
	list-style: none;
	float: left;
	padding: 0;
	width: 100%;
}

.sidebar-menu>li>a{
	display: block;
	padding: 10px 20px 10px 20px;
	color: #727174;
	text-decoration: none;
	font-weight: 400;
}

.sidebar-menu li.active a{
	color: #F66F3D;
	background-color: #F5F6F3;
}

.sidebar-menu li a:hover,.sidebar-menu li a:focus,.sidebar-menu li a:active{
	color: #F66F3D;
	background-color: #F5F6F3;
}

.sidebar-menu>li>a>.sub-toggle:before{
	float: right;
	font-family: FontAwesome;
	content: "\f067";
}
.sidebar-menu>li.active>a>.sub-toggle:before{
	float: right;
	font-family: FontAwesome;
	content: "\f068";
}

.sidebar-menu>li.spacer{
	height: 58px;
	border-bottom: 2px solid #F5F6F3;
	display: none;
	align-items: center;
	margin-bottom: 20px;
	padding-left: 20px;
}
.sidebar-menu>li.spacer>span{
	font-weight: 600;
	text-transform: uppercase;
	color: #BBBBBE;
}

.sidebar-menu .sub-menu {
  padding: 0;
}

.sidebar-menu > li > ul.sub-menu {
  display: none;
  list-style: none;
  clear: both;
  margin: 3px 0px 3px 0px;
}

.sidebar-menu > li.active > ul.sub-menu {
  display: block;
}

.sidebar-menu > li > ul.sub-menu > li {
  background: none;
  margin: 0px;
  padding: 0px;
  margin-top: 1px !important;
}

.sidebar-menu > li > ul.sub-menu > li > a {
  display: block;
	color: #727174;
  margin: 0px 0px 0px 0px;
  padding: 5px 0px;
  padding-left: 35px !important;
  padding-right: 20px !important;
  text-decoration: none;
  font-weight: 300;
  background: none;
}

.sidebar-menu > li > ul.sub-menu > li > a:hover,.sidebar-menu > li > ul.sub-menu > li > a:focus, .sidebar-menu > li > ul.sub-menu > li > a:active{
	color: #F66F3D;
	background-color: #F5F6F3;
}
.sidebar-menu > li > ul.sub-menu > li.active>a{
	color: #F66F3D;
	background-color: #F5F6F3;
}

/* 3rd level sub menu */
.sidebar-menu > li > ul.sub-menu  > li ul.sub-menu {
  display: none;
  list-style: none;
  clear: both;
  margin: 0px 0px 0px 0px;
}

.sidebar-menu > li > ul.sub-menu  li > a > .sub-toggle:before   {  
   float: right;
   font-family: FontAwesome;
   height: auto;
   content: "\f067";
   font-weight: 300;
}

.sidebar-menu > li > ul.sub-menu  li.active > a > .sub-toggle:before {   
   float: right;
   display: inline;
   font-family: FontAwesome;
   height: auto;
   content: "\f068";
   font-weight: 300;
   text-shadow:none;
}

.sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu {
  display: block;
}

.sidebar-menu > li > ul.sub-menu > li  ul.sub-menu li {
  background: none;
  margin: 0px;
  padding: 0px;
  margin-top: 1px !important;
}

.sidebar-menu > li > ul.sub-menu  li > ul.sub-menu > li > a {
  display: block;
	color: #727174;
  margin: 0px 0px 0px 0px;
  padding: 5px 0px;
  text-decoration: none;
  font-weight: 300;
  background: none;
}

.sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {  
  padding-left: 60px;
}

.sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,.sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:focus, .sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:active{
	color: #F66F3D;
	background-color: #F5F6F3;
}

.sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li.active > a {  
  color: #F66F3D;
	background-color: #F5F6F3;
}

.sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {  
  padding-left: 80px;
}

.sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu > li.active ul.sub-menu {
  display: block;
}

/*End Collapse*/

/*End Sidebar*/

.page-pager{
	flex-grow: 1;
	padding: 10px 0 0 0;
	/*width: 100%;*/
}

/*Breadcrumb*/
.breadcrumb{
	background-color: white;
}
.breadcrumb-item a{
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	color: #5A595A;
}
.breadcrumb-item + .breadcrumb-item::before {
  /*display: inline-block;*/
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: #5A595A;
	font-weight: 700;
  content: ">";
}
.breadcrumb-item.active{
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	color: #FF9E63;
}
/*End Breadcrumb*/
.cards-stat{
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	padding: 5px;
	max-height: 100px;
}

.cards-stat .stat-icon{
	padding-right: 20px;
	font-size: 74px;
}
.cards-stat .stat-number{
	font-weight: 700;
	font-size: 24px;
	display: flex;
	flex-direction: column;
}
.cards-stat .stat-number span{
	font-weight: 300;
	font-size: 13px;
	text-transform: uppercase;
}
.cards-stat.red{
	background-color: #E85E70;
}
.cards-stat.yellow{
	background-color: #F5AB58;
}
.cards-stat.green{
	background-color: #009E85;
}
.cards-stat.dark{
	background-color: #3F4F62;
}
.card{
	color: #B8B8B8;
	font-weight: 400;
	border: none;
}
.card-title{
	color: #FF9E63;
	text-transform: uppercase;
	font-weight: 700;
}

.styleSwitcher {background:#fff; position:fixed; top:55px; width:155px;right: -155px;z-index:9999}
.switcher.dark{background:#555;}
.styleSwitcher ul li{display:inline-block;}
.styleSwitcher ul {display:block; padding:10px; margin:0}
.styleSwitcher ul li a {display:block; text-indent:-3000px; overflow:hidden; border:1px solid #555; width:20px; height:20px; margin:0 5px 5px 0;}
.styleSwitcher h1 {padding:0 0 0 10px;font-size:14px; text-transform:uppercase; color:#555;border:none; margin:0; text-align:left;}
.styleSwitcher h1:after {content:none;}
.styleSwitcher #showHideSwitcher{
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	outline:none;
	width:40px;
	height:40px;
	position:absolute;
	left:-40px;
	background:#555;
	top:0; font-size:24px;
	text-align:center;
	color:#fff;
}
.styleSwitcher #showHideSwitcher:hover i{
	-webkit-animation:spin 1s linear infinite;
  -moz-animation:spin 1s linear infinite;
  animation:spin 1s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* Login Style */
.login {
	position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.login:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: #fff url('../img/login-background.jpg') center center fixed no-repeat;
	background-size: cover;
/* 	filter: blur(10px) brightness(.5);
	-webkit-filter: blur(10px) brightness(.5);
	-moz-filter: blur(10px) brightness(.5);
	-o-filter: blur(10px) brightness(.5);
	-ms-filter: blur(10px) brightness(.5); */
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
}

.login-wrapper{
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	overflow: auto;
}

.login-container{
	width: 90%;
	background-color: white;
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3)
}
.login-header{
	padding: 30px 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	display: --webkit-flex;
	-webkit-align-items: center;
	-webkit-justify-content: center;
	width: 100%;
	box-shadow: 0px 2px rgba(0,0,0,.3)
}
.login-header > img{
	width: 150px;
}
.login-body{
	padding: 30px 30px;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
}

.login-body .input-group-text{
	background-color: transparent;
	border-right: none;
}
.login-body .input-group-prepend .sperator{
	display: flex;
	align-items: center;
	justify-content: center;
	display: -webkit-flex;
	-webkit-align-items: center;
	-webkit-justify-content: center;
	padding: .78rem .1rem;
	border-top: 1px solid #ced4da;
	border-bottom: 1px solid #ced4da;
}
.login-body .input-group-prepend .sperator:after{
	content: '';
	border: 1px solid #ced4da;
	height: 100%;
}
.login-body .input-group .form-control{
	border-left: none;
	padding: 1rem .75rem;
}

.login-footer{
	bottom: 0;
	min-height: 100px;
	padding: 30px 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	display: -webkit-flex;
	-webkit-align-items: center;
	-webkit-justify-content: center;
	width: 100%;
	box-shadow: 0px -2px rgba(0,0,0,.3)
}
.invalid-feedback{
	font-size: 100%;
}
@media only screen and (min-width: 992px){
	.header .kiri{
		width: 250px;
	}
	.nav-right{
		display: flex;
	}
	.sidebar-menu>li.spacer{
		display: flex;
	}
	.sidebar-wrapper{
		width: 250px;
		position: inherit;
		z-index: 0;
		/*float: left;*/
	}
	.navbar-collapse.collapse{
		display: block;
	}

	.content-wrapper{
		display: flex;
		align-items: stretch;
	}

	.login-container{
		width: 460px;
	}

	.login-header > img{
		width: 240px;
	}
}