@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300);
@font-face /*perintah untuk memanggil font eksternal*/
  {
    font-family: 'CinzelDecorative'; /*memberikan nama bebas untuk font*/
    src: url('asset/font/CinzelDecorative-Bold.ttf');/*memanggil file font eksternalnya di folder nexa*/
  }

body {
	background: #eee;
	margin:0;
	font-family: 'Open Sans', sans-serif;
}
 
hr {
	border:0;
	background:#dedede;
	height:1px;
}		
 
header{
	text-align: center;
	color: #232323;
}
 
header .judul{
	font-size: 15pt;
}
 
header .deskripsi{
	font-size: 11pt;
}

 header .image_head {
     margin-top: 20px;
  width: 100px ;
 }

.nama_brand
  	{
	margin-bottom: 5px;
    font-family: 'CinzelDecorative';
	font-size: 40px;
	color:#38B505;
  	}
.nama_brand2
	{
	margin-top: 20px;
	font-size:25px;
	font-weight:bold;
	color:#FF8E00;
	}
.login-page
	{
	  width: 85%;
	  padding: 8% 0 0;
	  margin: auto;
	}

.login_head 
	{
	margin-bottom: 20px;
	font-size:18px;
	color: #363636;
	font-weight: 500;
	}

a.one:link
{
color:#CC3300;
text-decoration:none;
font-weight:400;
}
a.one:visited {color:#CC3300;}
a.one:hover {color:#ffcc00;}

a.two:link
{
color:#00BB09;
text-decoration:none;
font-weight:400;
}
a.two:visited {color:#00BB09;}
a.two:hover {color:#ffcc00;}

a.three:link
{
color:#4885FF;
text-decoration:none;
font-weight:400;
}
a.three:visited {color:#4885FF;}
a.three:hover {color:#ffcc00;}

.wrap {
	width: 80%;
	margin:5px auto;
}
 
 	
nav.menu ul {
	overflow:hidden;
	color:#fff;
	list-style: none;
	float:inherit;
	padding:0;
	width: 100%;
	margin:0 0 0;
	background: #1c87c9;;
	-webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
	-moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
	box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
}
 
nav.menu ul li {
	margin:0;
	float:left;
	
}
 
nav.menu ul a {
	padding:8px;
	display:block;
	font-weight:600;
	font-size: 12px;
	color:#fff;
	text-transform: uppercase;
	transition: all 0.5s ease;
	text-decoration: none;
}
 
nav.menu ul a:hover {
	text-decoration: none;
	background:#004293;
}
nav.menu ul a[id=rstTL]:hover {
	text-decoration: none;
	background:#C10003;
}
.link_download {
	padding:3px;
	font-weight:600;
	font-size: 13px;
	color:#B10002;
	background:#F1DC4F;
	text-transform: uppercase;
	transition: all 0.5s ease;
	text-decoration: none;
	border-radius: 5px;
}
.link_download:hover {
	text-decoration: none;
	color:#0A3FBB;
	background:#79BDFC;
}
.dropdown-content {
  display:none;
  position: absolute;
  background-color:#37BAF1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.menu ul li:hover .dropdown-content {
  display: block;
}
.sidebar {
		width:100%;
		margin:25px 0 0;
		float:right;
	}
 
.sidebar .widget {
	padding:25px;
	margin:0 0 25px;
	background:#fff;
	border-bottom: 2px solid #fff;
	transition: all 0.5s ease;
}
 
.sidebar .widget:hover {
	border-bottom: 2px solid #3498db;
}
 
.sidebar .widget h2 {
	padding:0;
	margin:0 0 15px;
	color:#3498db;
	font-size: 18px;
	font-weight:800;
	text-transform: uppercase;
}
 
.sidebar .widget p {
	font-size: 14px;
}
 
.sidebar .widget p:last-child {
	margin:0;
}
 

 
.blog {
	float:inherit;
	width:90%

}

 
	
.conteudo {
	float:inherit;
	margin:10px auto 10px;
	width:101%;
	padding:5%;  
	background: #fff;
	border:1px solid #dedede;
	-webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
	-moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
	box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
	
}

.conteudo img {
	min-width: 650px;
	margin:0 0 25px -25px;
	max-width: 650px;
}
 
.conteudo h1 {
	padding:0;
	margin:0 0 20px;
	font-weight: normal;
	color: #666;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	text-align:center;
}
 
.conteudo p:last-child {
	margin: 0;
}
 
.conteudo .continue-lendo {
	color:#000;
	transition: all 0.5s ease;
	text-decoration: none;
	font-weight: 700; 
}
 
.conteudo .continue-lendo:hover {
	margin-left:10px;
}
 
.post-info {
	float: right;
	font-size: 12px;
	margin: -10px 0 15px;
	text-transform: uppercase;
}
.table {
width:100%;
border: none;
border-spacing:1px;
background-color:#CCCCCC;
color:#FFFFFF;
font-size:14px;
}
.table td {
height:15px;
padding: 5px 3px;
}
.table_rowHead {
	font-size: 14px;
	font-weight: 600;
}

.table_list1 {
background-color:#F0F0F0;
color:#000000;
}
.table_list1:hover {
background-color:#F6FDC3;
}
.table_list2 {
background-color:#FFFFFF;
color:#000000;
}
.table_list2:hover {
background-color:#F6FDC3;
}

/*succes list*/
.Tlist_succes {
background-color:#DEFBD6;
color:#000000;
}
.Tlist_succes:hover {
background-color:#F6FDC3;
}

.table_list4 {
background-color:#FFFFFF;
color:#990000;
}
.table_list_nonaktif {
background-color:#F9DADA;
color:#000000;
}
.table_list_nonaktif:hover {
background-color:#F6FDC3;
}
/*==========*/
.tooltip {
  position: relative;
  display:inline;
}

.tooltiptext {
  visibility: hidden;
  width: 100px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 210%;
  right: 0%;
  margin-left: -60px;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 90%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}


.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.form {
	  padding: 25px;
      margin: 25px;
      box-shadow: 0 2px 5px #f5f5f5; 
	border:solid 1px #0A1F70;
	border-radius: 10px;
      background:#E9F1F8; 
	width: 80%;
      }
.form2 {
	  padding: 25px;
      margin: 25px;
      box-shadow: 0 2px 5px #f5f5f5; 
	border:solid 1px #0A1F70;
	border-radius: 10px;
      background:#E9F1F8; 
	width: 100%;
      }
input, textarea, select {
      padding: 12px 20px;
      margin-bottom: 20px;
      border: 1px solid #1c87c9;
	border-radius: 5px;
	outline: none;
      }
input[type=text] {
width:calc(100% - 40px);
}
input[type=number], select[id=retribusi] {
min-width: 80%;
}

input[type=file] {
width:calc(80% - 40px);
background: #FFF492;

}
input[type=text]:focus {
	background-color:#FCF9F0;
	border-color:#FB9E35;
}
input::placeholder {
      color: #666;
      }
input[disabled] {
width:calc(60% - 80px);
background:#DFD9D9;
font-weight: bold;
}
input[disabled]:focus {
background:#DFD9D9;
border-color:#1c87c9;
}

input:read-only {
width:calc(50% - 120px);
background:#FDE9B7;
font-weight: bold;
}
select[disabled] {
width:calc(60% - 80px);
background:#DFD9D9;
font-weight: bold;
}
select[disabled]:focus {
background:#DFD9D9;
border-color:#1c87c9;
}
.option {color:#666666;}
button {
      padding: 7px;
	margin: 2px;
	border-radius: 5px;
      border: none;
      background: #1c87c9; 
      font-size: 16px;
      font-weight: 400;
      color: #fff;
      }
button:hover {
      background: #2371a0;
      }
button:hover+.dropdown-content {
     display: block;
      }

	  .main-block{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 50vh;
      }
      
      .fas {
      margin: 25px 10px 0;
      font-size: 72px;
      color: #fff;
      }
      .fa-envelope {
      transform: rotate(-20deg);
      }
      .fa-at , .fa-mail-bulk{
      transform: rotate(10deg);
      }
	  p {
      margin: 0 0 5px;
      }
.button_tambah{
      background:#FF8600;
      }
     /*Tabel Responsive 1*/
.table-container {
    overflow: auto;
}
.bar {
  	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

/* DROPDOWN MENU NAV*/


.notif_succes {
	color:#328305;
	background:#E6F7E2;
	border:#7FED52 1px solid;
	border-radius: 3px;
	padding: 3px;
	margin: 3px;
	font-size: 13px;
	
}
.notif_failed {
	color:#770406;
	background:#FBC7C7;
	border:#F7686B 1px solid;
	border-radius: 3px;
	padding: 3px;
	margin: 3px;
	font-size: 13px;
	
}
.ket_small{
	font-size: 13px;
}
@media screen and (max-width: 560px) {
  	.header {
		position:inherit;
	}
 
	.wrap {
		width: 95%;
		margin:10px auto;
	}
	.sidebar {
		width:100%;
		margin:25px 0 0;
		float:right;
	}
 
	.sidebar .widget {
		padding:5%;
	}
 
	nav.menu ul {
		width: 100%;
	}
 
	nav.menu ul {
		float:inherit;
	}
 
	nav.menu ul li {
		float:inherit;
		margin:0;
	}
 
	nav.menu ul a {
		padding:8px;
		font-size: 12px;
		border-bottom:1px solid #3366CC;
		
	}
 
	.blog {
		width:90%;
	}
 
	.conteudo {
		float:inherit;
		margin:20px auto 25px;
		width:101%;
		border:1px solid #dedede;
		padding:5%;  
		background: #fff;
	}
 
	.conteudo img {
		max-width: 110%;
		margin:0 0 25px -5%;
		min-width: 110%;
	}
 
	.conteudo .continue-lendo:hover {
		margin-left:0;
	}
	.table td {
	height:15px;
	padding: 5px 3px;
	}
	/*.hide_colom1 {
	display:none;
	}*/
}
@media screen and (max-width: 460px) 
{

	nav.menu ul a {
		padding:5px;
		font-size: 14px;
	}
 
	.sidebar {
		display:none
	}
	.post-info {
		display:none;
	}
	/*.hide_colom1 {
	display:none;
	}
 	.hide_colom2 {
	display:none;
	}*/
	.conteudo {
		margin:20px auto;
		padding:5%;
	}
 
	.conteudo img {
		margin:-5% 0 25px -5%;
	}			
}