/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body >
.container .text-muted {

  margin: 10px 0;
}
.merah {

  font-colour: #FF0000;
}

.pivot{
    margin-top: 10px;
	max-width:1500px;
	font-size: 8px;
	background: #fff;
	overflow: hidden;
	padding: 10px;
}



.menuatas{
    width: 60%;
	float:left;
	overflow:visible;
	margin-top:0;
	background: #fff;
}




.cari{
		width: 900px;
		padding: 10px;
		margin-top: 5px;
		margin-right: 10px;
		margin-bottom:0px;
		margin-left: 10px;
	}
.container{
    margin-top: 10px;
	max-width:1300px;
	
	background: #fff;
	overflow: hidden;
	padding: 10px;
}

.header{
  
	border: 1px solid #dedede;
	padding: 10px;
	margin: 10px;
}

.navbar{
  
 font-size: 12px;
}
.dropdown-menu{
  
 font-size: 12px;
}

.panel hr{
  
 width: 250px;
 border-top: 2px solid ;
}


.form-mini-container{
 max-width: 315px;
 margin:0 auto;
 font: normal 14px sans-serif;
 text-align: center;
 color: #5f5f5f;
}

.form-mini-container h1{
 color: #4c565e;
 font-size:24px;
 padding-bottom:30px;
 border-bottom:2px solid #6caee0;
 font-weight: bold;
 margin:0;
}
.form-mini{
box-sizing:border-box;
padding:40px;
background-color: #ffffff;
box-shadow:0 1px 3px 0 rgba(0,0,0,0,0.1);
}
.form-mini .form-row{

display: block;
text-align:left;
margin-bottom: 23px;
}

.form-mini input,
.form-mini select{
box-sizing:border-box;
width: 240px;
box-shadow: 1px 2px 4px 0 rgba(0,0,0,0,0.8);
padding:12px 18px;
border: 1px solid #dbdbdb;
}

.form-mini select{
color:inherit;
background-color: #ffffff;
}
.form-mini .form-last-row{
margin: 35px auto 0;
}


@media )max-width: 600px) {

.form-mini-container{
margin-top:0;
}
}




/* Main */
	.left{
		width: 400px;
		border: 1px solid #dedede;
		/*background: #e5e5e5;*/
		padding: 10px;
		margin-left : 200px;
		
		float: left;
	}
		.kiri_m{
		width: 600px;
		border: 1px solid #dedede;
		/*background: #e5e5e5;*/
		padding: 10px;
		margin-top:10px;
		margin-left :50px;
		
		float: left;
	}
	.kiri{
		width: 500px;
		border: 1px solid #dedede;
		/*background: #e5e5e5;*/
		padding: 10px;
		margin-top:10px;
		margin-left : 50px;
		
		float: left;
	}
	.middle{
		width: 450px;
		border: 1px solid #dedede;
		padding: 10px;
		margin-left : 10px;
		
		float: left;
	}
		.middle img{
			max-width: 100%;
			height: auto;
		}
			.kanan_m{
		width: 275px;
		border: 1px solid #dedede;
		padding: 10px;
		margin-top:10px;
		margin-left : 10px;
		
		float: left;
	}
	.kanan{
		width: 450px;
		border: 1px solid #dedede;
		padding: 10px;
		margin-top:10px;
		margin-left : 10px;
		
		float: left;
	}
		.kanan img{
			max-width: 100%;
			height: auto;
		}
	.right{
		width: 1100px;
		border: 1px solid #dedede;
		padding: 10px;
		margin-top: 20px;
		margin-left: 100px;
		float: left;
	}	
	
.merah {
  font-size: 12 px;
  color : #FF0000;
}	
	
.footer {
  position: absolute;
  bottom: 0;
  width: 75%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f3f3f3;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}
.tittle {
 font-size: 16px;
}
code {
  font-size: 80%;
}


.tombol{
  background:#2C97DF;
  color:white;
  border-top:0;
  border-left:0;
  border-right:0;
  border-bottom:5px solid #2A80B9;
  padding:10px 20px;
  text-decoration:none;
  font-family:sans-serif;
  font-size:11pt;
}
/* Table mempertahankan bentuk */

.table-container {
	overflow: auto;
}



/* Table */
		table {
			margin: auto;
			font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
			font-size: 12px;

		}
		.demo-table {
			border-collapse: collapse;
			font-size: 12px;
		}
		.demo-table th, 
		.demo-table td {
			border-bottom: 1px solid #e1edff;
			border-left: 1px solid #e1edff;
			padding: 5px 10px;
			
		}
		.demo-table th, 
		.demo-table td:last-child {
			border-right: 1px solid #e1edff;
		}
		.demo-table td:first-child {
			border-top: 1px solid #e1edff;
		}
		.demo-table td:last-child{
			border-bottom: 0;
		}
		caption {
			caption-side: top;
			margin-bottom: 10px;
			
		}
		
		/* Table Header */
		.demo-table thead th {
			background-color: #508abb;
			color: #FFFFFF;
			border-color: #6ea1cc !important;
			text-transform: uppercase;
			
		}
		
		/* Table Body */
		.demo-table tbody td {
			color: #353535;
		}
		
		.demo-table tbody tr:nth-child(odd) td {
			background-color: #f4fbff;
		}
		.demo-table tbody tr:hover th,
		.demo-table tbody tr:hover td {
			background-color: #ffffa2;
			border-color: #ffff0f;
			transition: all .2s;
		}
		
		.table-container {
	overflow: auto;
}
@media screen and (max-width: 480px) {
	table {
		width: 100%;
	}
	thead th.column-primary {
		width: 100%;
	}

	thead th:not(.column-primary) {
		display:none;
	}
	
	th[scope="row"] {
		vertical-align: top;
		
	}
	
	td {
		display: block;
		width: auto;
		text-align: right;
	}
	thead th::before {
		text-transform: uppercase;
		font-weight: bold;
		content: attr(data-header);
	}
	thead th:first-child span {
		display: none;
	}
	td::before {
		float: left;
		text-transform: uppercase;
		font-weight: bold;
		content: attr(data-header);
	}
	@media screen and (max-width: 400px) {
	table {
		width: 100%;
	}
	thead th.column-primary {
		width: 100%;
	}

	thead th:not(.column-primary) {
		display:none;
	}
	
	th[scope="row"] {
		vertical-align: top;
		
	}
	
	td {
		display: block;
		width: auto;
		text-align: right;
	}
	thead th::before {
		text-transform: uppercase;
		font-weight: bold;
		content: attr(data-header);
	}
	thead th:first-child span {
		display: none;
	}
	td::before {
		float: left;
		text-transform: uppercase;
		font-weight: bold;
		content: attr(data-header);
	}
}