body {margin:0px; background-color: #f7f5f5; }

html,body{
    margin: 0;
}

header { background-color: rgba(37,37,37); padding:0px; z-index:999; position: -webkit-sticky; position: sticky; top: 0; box-shadow: 0 4px 10px -2px gray; }

#tengah { margin-top:0px; }

#cards { padding-top:10px; padding-bottom:10px; max-width: 600px; margin:0px auto; font-size:0.9em !important; }

div.hr {
  margin-top: 25px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #dbdbdb;
  text-align: center;
  height: 0px;
  line-height: 0px;
}

.hr-title {
  background-color: #f7f5f5;
  color: #474747;
  margin:0px auto;
  padding:0 5px;
  font-size:0.8em;
}

.card { margin-bottom:15px; box-shadow: 0 4px 10px -2px gray; }
.card-header { font-weight:bold; color:white }
.hd-danger { background-color: #e83815; }
.hd-success { background-color: #249c8c; }
.hd-warning { background-color: #d4810d; }
.hd-add { background-color: #3367ab; }
.hd-dark { background-color: #333; }

.card-body { background-color:white; color:#474747; border-bottom-left-radius:3px; border-bottom-right-radius:3px; padding:8px 10px; }

.card-footer { text-align:right } 

.dropdown { padding:5px; }
a.dropdown-toggle { color:black; text-decoration:none; }   

footer { background-color: rgba(37,37,37); padding:0px; padding-top:20px; z-index:999; position: -webkit-sticky; position: sticky; bottom: 0; }
	
	.float1{
	position:fixed;
	width:80px;
	bottom:20px;
	right:30px;
	text-align:center;
	box-shadow: 1px 1px 1px #999;
	z-index: 100;
	}
	
	.float2{
	position:fixed;
	width:80px;
	bottom:20px;
	left:30px;
	text-align:center;
	box-shadow: 1px 1px 1px #999;
	z-index: 100;
	}
		
	.float1:hover, .float2:hover { color: white; cursor: pointer}
	
.tabel_form .form-control, .form-check-label { font-size:0.9em }
.form-check-label { vertical-align:middle; padding:3px; }
.tombol .btn { padding:10px; }

@media only screen and (max-width: 767px) {
	
	}

@viewport {
   width: device-width;
   zoom:1;
}

.modal-header { padding:8px; }
.modal-footer { padding: 10px 0 0 0; }
.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}
.modalform .modal-body {width: 350px; padding: 0 0 0 0;}
input[type="text"], input[type="password"], button[type="submit"], button[type="button"] {font-size: 1em; font-family: "Arial"; }

.modalform button[type="submit"], .modalform button[type="button"] {font-size: 0.8em}