html {
	position: relative;
	min-height: 100%;
	padding-top: 100px;
}

body {
	background-color: #F1F4F8 !important;
	height: 100%;
	margin-bottom: 60px;
}

.container {
	flex: 1;
	margin: 20px auto;
}

.navbar-inverse {
	background-color: #45295a;
	border: 0px;
	border-radius: 0;
	height: 80px;
	font-family: 'Roboto', sans-serif;
	padding-top: 20px;
	box-shadow: 2px 2px 20px rgba(77, 45, 100, 0.5);
}

.navbar-inverse .navbar-nav>li>a {
	color: #fbfafb;
}

.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
	background: transparent;
	color: #fbfafb;
}

ul.nav.navbar-nav .dropdown.open .dropdown-toggle {
	background: transparent;
	color: #fbfafb;
}

.dropdown-menu li a:hover {
	background: #ddd;
	color: #555;
}

.dropdown-menu li a i {
	border: 1px solid #45295a;
	color: #45295a;
	padding: 5px;
	border-radius: 5px;
	margin-right: 10px;
}

.dropdown-menu li a:hover i {
	background: #45295a;
	color: #fbfafb;
}

.navbar-inverse .navbar-right {
	margin-right: 5px;
}

.navbar-inverse .navbar-brand {
	color: #FFF;
	font-family: 'Righteous', cursive;
}

.navbar-inverse .navbar-header img {
	width: 220px;
	margin-top: -25px;
}

/* vertical nav */

.navbar-default {
	padding: 0 !important;
	border: none;
	background: linear-gradient(rgba(255, 255, 255, 0.9),
			rgba(255, 255, 255, 0.8)), url(images/bg5.jpg);
	background-size: cover;
	background-position: center;
}

.navbar-default .navbar-collapse {
	padding: 0;
}

.navbar-default .collapse .dropdown li a {
	padding-left: 35px;
	font-size: 9pt;
	font-weight: 500;
}

.navbar-default .collapse .dropdown a:hover,
.navbar-default .collapse .dropdown a:focus {
	background-color: transparent;
	color: rgba(77, 45, 100, 0.9) !important;
}

.navbar-default .navbar-toggle {
	width: 100%;
	background-color: transparent;
	border: none;
}

.navbar-default .navbar-header button,
.navbar-default .navbar-header button:hover,
.navbar-default .navbar-header button:focus {
	padding: 0;
	margin: 0;
	height: 50px;
	background-color: #45295a;
	color: #fff;
	border: none;
	border-radius: 0;
	box-shadow: 1px 1px 20px rgba(77, 45, 100, 0.3);
}

.navbar-default li a {
	width: 100%;
	color: #6e768e !important;
	font-weight: 600;
	font-size: 10pt;
}

.navbar-default li a:focus {
	background-color: rgba(77, 45, 100, 0.1);
}

.navbar-default .logo {
	padding: 20px 0 0 0;
}

.navbar-default img {
	width: 100%;
}

.panel-default {
	height: 100%;
	border: 1px solid rgba(77, 45, 100, 0.1);
	border-radius: 0;
}

.panel-default .panel-heading {
	background-color: #45295a;
	color: #F1F4F8;
	text-align: center;
	border-radius: 0;
}

.panel-default .panel-heading i {
	background-color: #F1F4F8;
	color: #45295a;
	padding: 5px;
	border-radius: 5px;
}

.panel-default .angka {
	font-weight: bolder;
	font-size: 36px;
	font-family: 'Lobster', cursive;
	color: #6e768e;
}

.panel-default h5 {
	font-weight: bolder;
}

.well {
	background: rgba(77, 45, 100, 0.1);
	border: 1px solid rgba(77, 45, 100, 0.5);
	border-radius: 0;
}

.table-bordered {
	background: #fbfafb;
}

th.rotate {
	height: 155px;
	white-space: nowrap;
	padding: 0 !important;
	font-weight: 100;
	font-size: 7pt !important;
}

th.rotate>div {
	transform:
		translate(0px, 40px) rotate(270deg);
	max-width: 60px;
}

th.rotate>div>span {
	padding: 0px;
}

tr.kecil {
	font-size: 8pt;
}



form label {
	font-size: 9pt;
}

.modal-header {
	background-color: #45295a;
	color: #FFF;
}

a:hover .table-bordered {
	box-shadow: 2px 2px 10px rgba(77, 45, 100, 0.4);
	transition: 0.3s;
	margin-top: -1px;
}

.table-bordered tr th {
	background-color: rgba(77, 45, 100, 0.5);
	color: #F1F4F8;
	font-size: 10pt;
	text-align: center;
	vertical-align: middle !important;
}

.btn-primary,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
	background: #45295a;
	color: #fbfafb;
	border: 2px solid #45295a;
	transition: 0.5s;
}

.btn.btn-primary:hover {
	background: #fbfafb;
	color: #45295a;
	border: 2px solid #45295a;
}

.btn-default {
	width: 100%;
	cursor: pointer;
}

.pagination li a,
.pagination li a:hover {
	color: #45295a;
}

.pagination .active a,
.pagination .active a:hover {
	background: #45295a;
	border: 1px solid #45295a;
}


hr {
	border: 1px solid #262626;
}

trix-toolbar [data-trix-button-group="file-tools"] {
	display: none !important;
}

footer {
	background: #45295a;
	width: 100%;
	height: 60px;
	color: #fbfafb;
	position: absolute;
	bottom: 0;
	left: 0;
}

@media (min-width: 1200px) {
	.navbar-default {
		width: 220px;
		padding: 25px 0px;
		box-shadow: 1px 1px 20px rgba(77, 45, 100, 0.3);
		min-height: 600px;
		position: fixed;
		top: 80px;
		left: 0;
	}
}

@media (max-width: 1200px) {
	.navbar-header {
		float: none;
	}

	.navbar-toggle {
		display: block;
	}

	.navbar-collapse.collapse {
		display: none !important;
	}

	.navbar-nav>li {
		float: none;
	}

	.collapse.in {
		display: block !important;
	}

	.collapsing,
	.in {
		background-color: #f7f7f7;
	}

	.collapsing ul li a,
	.in ul li a {
		color: #555 !important;
	}

	.collapsing ul li a:hover,
	.in ul li a:hover,
	.in ul li a:focus {
		color: #262626 !important;
		background: transparent !important;
	}

}

@media only screen and (max-width: 479px) {
	.navbar-inverse {
		height: auto;
	}

	.navbar-header img {
		width: 200px;
	}

}