.main-header,.skin-red,.logo,.navbar{
	background-color: #000 !important;
}
.main-header{
	box-shadow: 1px 2px 4px 1px #999;
}
.content-header{
	margin-top: 50px;
}
.boxthumb{
	width: 40px;
	height: 40px;
	margin:0 auto;
	border:1px #ccc solid;
	border-radius: 5px;
	overflow: hidden;
}
.thumb{
	width: 40px;
	margin: 0 auto;
}
.boxtable{
	width: 100%;
	overflow: auto;
	display: inline-block;
	padding: 0px;

}
#maintable{
	width: 100%;
	background: #fff;
}
hr{
	background-color: #ccc; 
	height: 1px; 
	border: 0;
}
.header-table{
	display: inline-block;
	width: 100%;
	padding: 10px 5px 3px 5px;
	border:1px #ccc solid;

background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );

}
.tombol_tabel{
	font-size: 16px;
	padding: 1px 5px 1px 5px;
}
.loading{
	display: none;
}
.load1{
	display:block;
	position: fixed;
    /* center the element */
    right: 0;
    left: 0;
	top:0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    height: 100%;
    width: 100%;
	border:1px #ccc solid;
	padding:none;
background-color: rgba(0, 0, 0, 0.1);
	z-index:2;

}
.blok-bawah-kiri{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100px;
    height: 23px;
    background: #fff;
    z-index: 12;
}
.blok-bawah-kanan{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100px;
    height: 23px;
    background: #fff;
    z-index: 12;
}
.load2{
	display:block;
	position: fixed;

    /* center the element */
    right: 0;
    left: 0;
	top: 50%;
	transform: 			translateY(-50%);
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
	z-index:3;
	overflow:none;
}
#bloksatu,#blokdua{
	display: block !important;

}
.box-modal{
	padding: 20px;
}
.modal_keterangan{
	cursor: pointer;
	color:blue;
}

.modal-header{
	background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
border:1px #ccc solid;
}
.deskripsi{
	display: inline-block;
	width: 100%;
	margin: auto;
	padding: 10px;
	border:1px #eee solid;
	background: #eee;
	border-radius: 5px;
}
.box{
	padding: 10px;
	box-shadow: 0px 4px 5px 0 #ccc;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
.grup-aksi{
	display: inline-block;
	margin: 0 auto;
	width: 100px;
	text-align: center;
}
.blok-blue{
	display: inline-block;
	width: 100%;
	padding: 10px;
	font-size: 18px;
	text-shadow: 0 1px 1px #000;
	color: #fff;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */

}
.blok-red{
	display: inline-block;
	width: 100%;
	padding: 10px;
	font-size: 18px;
	text-shadow: 0 1px 1px #000;
	color: #fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}
.blok-light{
	display: inline-block;
	width: 100%;
	padding: 10px;
	font-size: 18px;
	text-shadow: 0 1px 1px #fff;
	color: #000;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eeeeee+0,cccccc+100;Gren+3D */
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

}
.blok-dark{
	display: inline-block;
	width: 100%;
	padding: 10px;
	font-size: 18px;
	text-shadow: 0 1px 1px #000;
	color: #fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */


}
.blok-span{
	margin-left: 25px;
}

.image-pick{
	width: 154px !important;
	border:1px #ccc solid;
	border-radius: 10px;
}
#boxi{

	box-shadow: 0px 4px 5px 0 #ccc !important;
	display: inline-block;

}
.kurung-gambar:hover{
	box-shadow: 0px 1px 5px 2px #000;
	cursor: pointer;
}
.kurung-gambar{
	width: 154px;
	height: 154px;
	border:1px #ccc solid;
	border-radius: 10px;
	box-shadow: 0px 1px 5px 2px #ccc ;
	margin: 5px;
	display: block;
	float: left;
	z-index: 2;
	position: relative;
	overflow: hidden;
}
.tulisan-gambar{
	width: 100%;
	z-index: 1;
	display: block;
	position: absolute;
	bottom: 0px;
	background: rgba(68,68,68,0.6);
	padding: 2px 0 2px 0;
	text-align: center;
	color: #fff;
}
.select2{
	width: 99%;
}
.delpik{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	padding: 2px 8px;
	border:1px #ccc solid;
	border-radius: 35px;
	background: #ccc;
	color: #333;
	text-shadow: 0 1px 1px #fff;
	text-align: center;
	z-index: 14;
	box-shadow: 0px 1px 5px 2px #ccc ;
}
.delpik:hover{
	background: #333;
	color: #fff;
	text-shadow: 0 1px 1px #000;
}
.tbl-confirm{
	padding:3px 7px;
	border:1px #3399ff solid;
	background:#3399ff;
	color:#fff;
	cursor: pointer;
	margin:2px;
	width: 100px;
	text-align: right;
}
.tbl-confirm2{
	padding:3px 7px;
	border:1px #ccc solid;
	background:#ccc;
	color:#fff;
	cursor: not-allowed;
	margin:2px;
	width: 100px;
	text-align: right;
}
.tbl-confirm:hover{
	box-shadow: 0px 1px 5px 2px #333 ;
}
.tbl-confirm:active{
	box-shadow: 0px 1px 5px 2px #333 inset;
}
.side-right{
      height:62vh;
      background: #fff;
    }
.preview-poto{
	width: 100%;
	position: relative;
	overflow: hidden;
	z-index: 9;
}
.preview-poto-img{
	width: 100%;
	display: block;
}

.pop-action{
  display: none;
  position: absolute;
  right:16px;

}
#myTable td,#myTable th{
	padding: 3px !important;
	font-size: 12px !important;
}
.btn-sm{
	padding: 2px !important;
	margin:0 0 0 3px;
	width:30px;
}
.btn-md{
	padding: 2px 10px !important;
	margin:0 0 0 3px;
}
#myTable th{white-space: nowrap;padding-right: 20px}
@media (max-width: 767px) {
  #bloksatu,#blokdua{

	float: none;
	}
  .modal-dialog {
      width: 90% !important; 
      margin:0 auto !important;
      margin-top: 70px;
   }
   .image-pick{
   	width: 45%;
   }
   .tombol-kiri{
   	margin-bottom: 20px;
   }
}