/* Atas */
.atas {
	min-height: 60px;
	z-index: 1000;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	background-color: #f5f5f5;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.isi_atas {
	padding: 18px 0% 18px 2%;
	font-family: "Raleway", sans-serif;
	font-size: 13px;
}

.logo-atas {
	margin-top: -8px !important;
	margin-bottom: 13px !important;
}

.teks-kanan {
	margin-top: 9px !important;
	letter-spacing: 0.2px !important;
	font-size: 13.5px !important;
	font-weight: 600;
	color: #212121 !important;
}

.teks-kanan a {
	padding: 28px 16px 33px 18px;
	background-color: #e0e0e0;
	color: #212121 !important;
	-webkit-transition: background-color 0.3s ease-out;
}

.teks-kanan a:hover,
.teks-kanan a:focus,
.teks-kanan a:active {
	background-color: #d32f2f !important;
	color: #fff !important;
}

.breadcums {
	top: 0px;
	left: 0px;
	right: 0px;
	min-height: 20px;
	margin-top: 75px;
	background-color: #424242;
	position: fixed;
	z-index: 999;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.breadcums p {
	padding: 8px 24px !important;
	margin: 0px;
	font-family: "Raleway", sans-serif;
	color: #f5f5f5;
	font-size: 13.4px;
}

.breadcums p span {
	color: #ef5350 !important;
	font-weight: bold;
}
/* End Atas */

/* Tubuh */
.tubuh {
	background-image: url(../images/back.png);
	margin-bottom: 3%;
	padding-top: 10%;
}

.ph-jatim,
.ph-pusat,
.ph-dkabkot {
	background-color: #fff !important;
	border-radius: 4px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
	margin-bottom: 20px !important;
}

.ph-jatim h3,
.ph-pusat h3,
.ph-dkabkot h3 {
	margin: 0px 18px !important;
	font-family: "Poppins", sans-serif;
	color: #000;
}

.ph-jatim h3 i,
.ph-pusat h3 i,
.ph-dkabkot h3 i {
	font-size: 22.5px;
	margin-right: 3px;
	color: #d32f2f;
}

.ph-jatim h3 span,
.ph-pusat h3 span,
.ph-dkabkot h3 span {
	color: #d32f2f;
	font-weight: bold;
}

.ph-jatim p,
.ph-pusat p,
.ph-dkabkot p {
	margin: 3px 18px 10px 18px !important;
	font-family: "Raleway", sans-serif;
	font-size: 13.5px !important;
	color: #212121;
	letter-spacing: 0.3px !important;
}

.ph-jatim .col-lg-2,
.ph-pusat .col-lg-2 {
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

.col-lg-2 div {
	font-family: "Raleway", sans-serif;
	font-weight: 600;
	margin-top: 10px;
}

.ph-dkabkot .col-lg-2 {
	text-align: center;
	font-family: "Raleway", sans-serif;
	font-weight: bold;
}

.ph-dkabkot .xx img {
	margin: 12px 0px !important;
}

.kotak {
	padding: 0px 14px;
}

.tombol {
	padding: 36px;
	border-radius: 2px;
	border: transparent !important;
	color: #fff !important;
}

.cari {
	width: 100%;
	padding: 12px 16px;
	font-family: "Poppins", sans-serif;
	background-color: #d32f2f;
	border: transparent !important;
	border-radius: 2px !important;
}

.cari:hover,
.cari:active,
.cari:focus {
	background-color: #b71c1c !important;
}

.notifikasi {
	background-color: #5d4037;
	font-family: "Poppins", sans-serif;
	color: #fff;
	padding: 14px 18px 10px 18px !important;
	border-radius: 2px 2px 0px 0px;
	letter-spacing: 0.3px !important;
	font-size: 14px;
}

.list {
	background-color: #fff;
	border: transparent !important;
}

.list h4 {
	font-family: "Raleway", sans-serif;
	margin-bottom: 5px;
	color: #d32f2f;
}

.list p {
	font-family: "Raleway", sans-serif;
}

.time {
	margin-top: 10px !important;
}
/* end Tubuh */

/* Fancybox */
.fancybox-skin {
	background-color: #fff !important;
	border-radius: 2px;
}
/* end Fancybox */

/* Footer */
.bawah {
	min-height: 40px;
	z-index: 1000;
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: #212121;
	text-align: center;
	box-shadow: 0 -3px 3px 0 rgba(0, 0, 0, 0.15) !important;
}

.isi {
	padding: 12px 0px;
	font-family: "Raleway", sans-serif;
	font-size: 13px;
	color: #f44336;
	font-weight: bold;
}
/* End Footer */

/* Macam - Macam Tombol */
.x1 {
	background-color: #f44336;
}
.x1:hover,
.x1:focus,
.x1:active {
	background-color: #d32f2f;
}

.x2 {
	background-color: #ff5722;
}
.x2:hover,
.x2:focus,
.x2:active {
	background-color: #e64a19;
}

.x3 {
	background-color: #ff9800;
}
.x3:hover,
.x3:focus,
.x3:active {
	background-color: #f57c00;
}

.x4 {
	background-color: #4caf50;
}
.x4:hover,
.x4:focus,
.x4:active {
	background-color: #388e3c;
}

.x5 {
	background-color: #009688;
}
.x5:hover,
.x5:focus,
.x5:active {
	background-color: #00796b;
}

.x6 {
	background-color: #673ab7;
}
.x6:hover,
.x6:focus,
.x6:active {
	background-color: #512da8;
}

.x7 {
	background-color: #000879;
}
.x7:hover,
.x7:focus,
.x7:active {
	background-color: #040fa8;
}

.x8 {
	background-color: #10cab1;
}
.x8:hover,
.x8:focus,
.x8:active {
	background-color: #0a6c79;
}

.y1 {
	background-color: #3f51b5;
}
.y1:hover,
.y1:focus,
.y1:active {
	background-color: #303f9f;
}

.y2 {
	background-color: #9c27b0;
}
.y2:hover,
.y2:focus,
.y2:active {
	background-color: #7b1fa2;
}

.y3 {
	background-color: #e91e63;
}
.y3:hover,
.y3:focus,
.y3:active {
	background-color: #c2185b;
}

.y4 {
	background-color: #ff9800;
}
.y4:hover,
.y4:focus,
.y4:active {
	background-color: #f57c00;
}

.y5 {
	background-color: #607d8b;
}
.y5:hover,
.y5:focus,
.y5:active {
	background-color: #455a64;
}

.y6 {
	background-color: #795548;
}
.y6:hover,
.y6:focus,
.y6:active {
	background-color: #5d4037;
}

.y7 {
	background-color: #2cbe07;
}
.y7:hover,
.y7:focus,
.y7:active {
	background-color: #26c217;
}
/* end Macam - Macam Tombol */