.main-header,.skin-red,.logo,.navbar{
	
}
.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;

}

.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}
 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}
#btn-to-top {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background: none !important;
  color: #444; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  text-shadow: 1px 2px 2px #333;
  opacity: 0.4;
  font-size: 40px; /* Increase font size */
}

#btn-to-top:hover {
  color: red; /* Add a dark-grey background on hover */
  opacity: 0.7;
}
.pagination {
  display: flex;
  float: right !important;
  text-align: right;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;

}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
/*.main-sidebar{
   	position: fixed;
   	top: 0;
   	left:0;
   }	
.sidebar{
	height: 100vh !important;


}*/
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #adadad !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #adadad !important;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #adadad !important;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #adadad !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #adadad !important;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #adadad !important;
}
.select2-selection__rendered{
    color:#333 !important;
}