@charset "utf-8";
/* CSS Document */
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#666666;
}
.container {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	box-sizing:border-box;
	width:100%;
	height:auto;
	background-color:#006666;
}
.active {
	background-color:#CCCCCC;
}
.main {
	position:absolute;
	top:50px;
	right:0;
	left:0;
	bottom:0;
	box-sizing:border-box;
	width:100%;
	height:auto;
}
.main2 {
	position:absolute;
	top:5px;
	right:0;
	left:0;
	bottom:5px;
	box-sizing:border-box;
	width:100%;
	height:auto;
	overflow:auto;
}
.page {
	box-sizing:border-box;
	position:absolute;
	width:1000px;
	bottom:0;
	right:0;
	top:0;
	left:0;
	background-color:#FFFFFF;
	margin:auto;
	padding:10px;
	overflow:auto;
}

.content-left {
	width:200px;
	box-sixing:border-box;
	background-color:#F4F4F4;
	padding:10px;
	height:auto;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	box-shadow:0 0 5px rgba(0,0,0,0.2);
}
.content-left ul{
	margin:0;
	padding:0;
}
.content-left li {
	list-style:none;
	margin:5px;
	border-bottom:solid 1px #EBEBEB;
	padding:5px;
}

.content-left li a {
	text-decoration:none;
	color:#000200;
}

.content-left li a:hover {
	color:#0000FF;
	cursor:pointer;
}

input[type=text]{
	padding:5px;
	width:100%;
	box-sizing:border-box;
}
input[type=number]{
	padding:5px;
	width:100%;
	box-sizing:border-box;
}
select{
	padding:5px;
	width:100%;
	box-sizing:border-box;
}

input[type=email]{
	padding:5px;
	width:100%;
	border-radius:4px;
}
input[type=submit]{
	padding:5px;
	border-radius:4px;
}

button{
	padding:5px;
	border-radius:4px;
}

input[type=reset]{
	padding:5px;
	border-radius:4px;
}
button:hover {
	cursor:pointer;
	background-color:#66FFFF;
}
input[type=reset]:hover {
	cursor:pointer;
	background-color:#66FFFF;
}
input[type=submit]:hover {
	cursor:pointer;
	background-color:#66FFFF;
}


.content-center {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	box-sizing:border-box;
	width:720px;
	height:580px;
	background-color:#FFFFFF;
	padding:20px;
	overflow:auto;
	border-radius:24px;
	box-shadow:0 0 5px rgba(0,0,0,0.2);
}

.content-right {
	position:absolute;
	top:10px;
	left:230px;
	bottom:10px;
	right:10px;;
	box-sizing:border-box;
	width:auto;
	height:auto;
	background-color:#F4F4F4;
	padding:20px;
	overflow:hidden;
	border-radius:10px;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
}

.content-right .atas{
	position:absolute;
	height:70px;
	width:100%;
	box-sizing:border-box;
	left:0;
	top:0;
	border-bottom:solid 1px #999999;
	padding:10px;
	background-color:#006666;
	font-size:13px;
	color:#FFFFFF;
}

.content-right .atas_kiri{
	position:absolute;
	height:70px;
	width:25%;
	box-sizing:border-box;
	left:0;
	top:0;
	border-bottom:solid 1px #999999;
	padding:10px;
	color:#FFFFFF;
}

.content-right .atas_kiri button{
	box-sizing:border-box;
	padding:5px;
	height:40px;
	width:60px;
	font-size:11px;
	border-radius:10px;
}

.content-right .atas_kiri a{
	color:#000000;
	text-decoration:none;
}

.content-right .atas_kanan{
	position:absolute;
	height:70px;
	width:70%;
	box-sizing:border-box;
	right:0;
	top:0;
	border-bottom:solid 1px #999999;
	padding:10px;
	font-size:13px;
}

.content-right .atas_kanan table {
	float:right;
}

.content-right .tengah {
	position:absolute;
	width:auto;
	height:auto;
	top:70px;
	right:0px;
	bottom:70px;
	left:0px;
	overflow:auto;
	padding:10px;
	background-color:#F4F4F4;
}

.content-right .tengah table{
	width:100%;
	border-collapse:collapse;
	float:left;
	background-color:#FFFFFF;
	font-size:13px;
}

.content-right .tengah table tr:hover{
	background-color:#EBEBEB;
	cursor:pointer;
}

.content-right .tengah table td{
	color:#333333;
	padding:5px;
	border:solid 1px #999999;
}

.content-right .tengah table thead td{
	color:#333333;
	padding:5px;
	border:solid 1px #999999;
	font-weight:bold;
}

.content-right .bawah{
	position:absolute;
	height:70px;
	width:100%;
	box-sizing:border-box;
	left:0;
	bottom:0;
	border-top:solid 1px #999999;
	padding:10px;
}

.content-right .bawah_kiri {
	display:inline-block;
	box-sizing:border-box;
	width:50%;
	padding:5px;
}
.content-right .bawah_kanan {
	display:inline-block;
	box-sizing:border-box;
	width:50%;
	padding:5px;
	float:right;
}

.content-right .bawah_kanan table {
	float:right;
}

.container-grid {
	width:100%;
	height:auto;
	box-sizing:border-box;
	border-radius:8px;
	background-color:#F4F4F4;
	float:left;
	padding:20px;
	margin-top:5px;
	box-shadow:0 0 5px rgba(0,0,0,0.1);
}
.grid {
	position:relative;
	width:107px;
	height:107px;
	border-radius:8px;
	box-shadow:0 0 5px rgba(0,0,0,0.1);
	float:left;
	margin:10px;
	text-align:center;
	vertical-align:middle;
	background-color:#FEFEFE;
}
.judul-grid {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:20px;;
}
.grid:hover{
	background-color:#66FFFF;
	cursor:pointer;
}
.tombol {
	background-color:#F4F4F4;	
}

.tombol_btn {
	font-size:10px;
}

.tombol:hover {
	cursor:pointer;
	text-decoration:underline;
}
.modal {
	display:none;
    position: absolute; /* Stay in place */
    left: 0;
    top: 0px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	z-index:0;
}
.modal-content {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width:100%;
	height:100%;
	background-color:#FFFFFF;
	border:solid 1px #999999;
	padding:30px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	overflow:auto;
	box-sizing:border-box;
}

.loading_image {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.modal-content-sedang {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width:720px;
	height:440px;
	background-color:#FFFFFF;
	border:solid 1px #999999;
	padding:26px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	overflow:auto;
	border-radius:24px;
}

.modal-content .header {
	box-sizing:border-box;
	background-color:#00CCFF;
	height:100px;
	width:100%;
	position:relative;
	top:0;
	left:0;
	right:0;
	padding:10px;
	border-radius:5px;
}

.header h3 {
	padding:1px;
	margin:1px;
}

.modal-content .header h2 a{
	text-decoration:none;
	color:#000000;
}

.modal-content .header h2 a:hover{
	text-decoration:underline;
	color:#FFFFFF;
}

.modal-content .content {
	box-sizing:border-box;
	height:auto;
	width:90%;
	position:relative;
	margin:0 auto;
	left:0;
	right:0;
	bottom:10%;
	padding:5px;
	overflow:auto;
}

.modal-content-kecil {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width:320px;
	height:320px;
	background-color:#FFFFFF;
	border:solid 1px #999999;
	padding:26px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	overflow:auto;
	border-radius:10px;
}
.modal-content-kecil2 {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width:300px;
	height:200px;
	background-color:#FFFFFF;
	border:solid 1px #999999;
	padding:26px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	overflow:auto;
	border-radius:10px;
}

.modal-content-kecil  table {
	width:100%;
	border-collapse:collapse;
}

.modal-content-kecil  table td {
	padding:8px;
	border-bottom:solid 1px #EBEBEB;
}

.modal-content-kecil input[type=text]{
	padding:8px;
	border:solid 1px #000000;
}
.modal-content-kecil input[type=number]{
	padding:8px;
	border:solid 1px #000000;
}
.modal-content-kecil input[type=email]{
	padding:8px;
	border:solid 1px #000000;
}

.modal-close {
	font-size:11px;
	margin-right:10px;
	background-color:#FF0000;
	color:#FFFFFF;
	border-radius:100px;
	width:30px;
	height:30px;
	text-align:center;
	line-height:30px;
	float:right;
}

.modal-close-kecil {
	font-size:11px;
	margin-right:10px;
	background-color:#FF0000;
	color:#FFFFFF;
	border-radius:100px;
	width:30px;
	height:30px;
	text-align:center;
	line-height:30px;
	float:right;
}
.modal-close-sedang {
	font-size:11px;
	margin-right:10px;
	background-color:#FF0000;
	color:#FFFFFF;
	border-radius:100px;
	width:30px;
	height:30px;
	text-align:center;
	line-height:30px;
	float:right;
}
.modal-close:hover {
	cursor:pointer;
	font-weight:bold;
}
.modal-close-sedang:hover {
	cursor:pointer;
	font-weight:bold;
}
.modal-close-kecil:hover {
	cursor:pointer;
	font-weight:bold;
}
.table-modal {
	width:100%;
	border-collapse:collapse;
}

.table-modal thead td{
	font-weight:bold;
	padding:10px;
	border-bottom:solid 1px #999999;
}

.table-modal tbody td{
	padding:5px;
	border-bottom:solid 1px #999999;
	color:#333333;
}

.table-modal tbody tr:hover {
	background-color:#66FFFF;
	cursor:pointer;
}
.font-kecil {
	font-size:12px;
}
.font-kecil2 {
	font-size:9px;
}
.numbering {
	text-align:right;
}

.data-list {
	border-collapse:collapse;
	width:100%;
}

.data-list td{
	padding:5px;
	border-bottom:solid 1px #999999;
	vertical-align:top;
}

.data-list tr:hover {
	background-color:#EBEBEB;
	cursor:pointer;
}

.data-barang {
	width:100%;
	border-collapse:collapse;
	background-color:#FFFFFF;
	box-sizing:border-box;
	font-size:13px;
}
.data-barang td{
	padding:5px;
	border-bottom:solid 1px #999999;
	vertical-align:top;
}

.data-barang thead td{
	padding:8px;
	border-bottom:solid 1px #999999;
	font-weight:bold;
}
.data-barang tbody tr:hover{
	background-color:#66FFFF;
}
.pagination {
	display:inline-block;
	margin:auto;
}
.pagination td {
	padding:8px;
}
.result{
	display:none;
	position:absolute;
	width:300px;
	border: solid 1px #999999;
	overflow:auto;
	padding:5px;
	margin:5px;
	background-color:#FFFFFF;
	overflow:auto;
	border-radius:5px;
	padding:5px;
}

.result table {
	width:100%;
	border-collapse:collapse;
}

.exit {
	background-color:#FF3300;
	color:#FFFFFF;
}

.list-menu li{
	padding:5px;
	margin:5px;
}
.menu-kanan{
	position:absolute;
	right:5px;
	bottom:5px;
}

.pencarian {
	position:absolute;
	top:25px;
	right:50px;
}

.table-profil-toko {
	width:100%;
	border-collapse:collapse;
	box-sizing:border-box;
	margin: 10px 0px 10px 0px;
}

.table-profil-toko td {
	vertical-align:text-top;
	border:solid 1px #EBEBEB;
	padding:4px;
}

.table-icon-header {
	border-collapse:collapse;
	width:100%;
	float:left;
}

.table-icon-header td {

}
.btn-cancel {
	background-color:red;
	color:whitesmoke;
}
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip:hover {
	background-color:#FFFFFF;
}
.tooltip .tooltiptext {
	display:none;
  width: 120px;
  background-color:#F6F6F6;
  position: absolute;
  z-index: 1;
  top:-20%;
  right: 100%;
  margin-left: -60px;
  text-align:left;
  border:solid 1px #CCCCCC;
  padding:5px;
  border-radius:5px;
  font-size:12px;
}

.tooltip .tooltiptext ul {
	margin:0;
	padding:2px;
}

.tooltip .tooltiptext li {
	padding:5px;
	list-style:none;
	border-top:solid 1px #CCCCCC;
}

.tooltip .tooltiptext li:hover {
	background-color:#FFFFFF;
	color:#999999;
}