.right {
	text-align: right;
}

.left {
	text-align: left;
}

.kolom-1 {
	position: relative;
	width: 8.33333333%;
	min-height: 1px;
	float: left;
}

.kolom-1koma5 {
	position: relative;
	width: 12%;
	min-height: 1px;
	float: left;
}

.kolom-6koma5 {
	position: relative;
	width: 45.33333333%;
	min-height: 1px;
	float: left;
}

.kolom-2 {
	position: relative;
	width: 16.66666667%;
	min-height: 1px;
	float: left;
}

.kolom-2koma5 {
	position: relative;
	width: 21%;
	min-height: 1px;
	float: left;
}

.kolom-3 {
	position: relative;
	width: 25%;
	min-height: 1px;
	float: left;
}

.kolom-3koma5 {
	position: relative;
	width: 28%;
	min-height: 1px;
	float: left;
}

.kolom-4 {
	position: relative;
	width: 33.33333333%;
	min-height: 1px;
	float: left;
}

.kolom-6 {
	position: relative;
	width: 50%;
	min-height: 1px;
	float: left;
}

.kolom-7 {
	position: relative;
	width: 58.33333333%;
	min-height: 1px;
	float: left;
}

.kolom-9 {
	position: relative;
	width: 75%;
	min-height: 1px;
	float: left;
}

.kolom-8 {
	position: relative;
	width: 66.66666667%;
	min-height: 1px;
	float: left;
}

.kolom-12 {
	position: relative;
	width: 100%;
	min-height: 1px;
	float: left;
}

.padding-rigt10 {
	padding-right: 10px;
}

.padding-rigt5 {
	padding-right: 5px;
}

.padding-bottom5 {
	padding-bottom: 5px;
}

.padding-top25 {
	padding-top: 75px;
}

.paginationright {
	padding-left: 110px;
	right: 0;
}

.float_right {
	border: 2px solid;
	text-align: right;
}

.blue {
	color: blue
}

.red {
	color: red
}

.borderku {
	padding-left: 110px;
	width: 500px;
}

.loading_anim {
	background-image: url("../img/loading.gif");
	background-repeat: no-repeat;
	width: 160px;
	height: 24px;
	margin-top: 12px;
	margin-left: 15px;
	margin: 1px solid;
}

.loading_anim2 {
	background-image: url("../img/loading.gif");
	background-repeat: no-repeat;
	height: 24px;
	margin-top: 4px;
	padding-top: 5px;
	padding-left: 165px;
	text-align: left;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
}

.dropdown {
	position: relative;
	display: inline-block;
	z-index: 999999;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 999999;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	z-index: 999999;
}

.dropdown-content a:hover {
	background-color: #ff0000
}

.show {
	display: block;
}

.iw-contextMenu {
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	border: 1px solid #E6E6E6;
	display: none;
	z-index: 100000;
}

.iw-cm-menu {
	background: #F4F4F4;
	color: #333;
	margin: 0px;
	padding: 0px;
}

.iw-cm-menu li {
	list-style: none;
	padding: 3px;
	padding-left: 30px;
	padding-right: 20px;
	border-bottom: 1px solid #CCC;
	cursor: pointer;
	position: relative;
}

.iw-mOverlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #FFF;
	opacity: .5;
}

.iw-contextMenu li.iw-mDisable {
	opacity: .3;
}

.iw-mSelected {
	background-color: #003366;
	color: #F2F2F2;
}

.iw-cm-arrow-right {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #333333;
	position: absolute;
	right: 3px;
	top: 50%;
	margin-top: -3px;
}

.iw-mSelected>.iw-cm-arrow-right {
	border-left: 5px solid #FFF;
}

.iw-mIcon {
	width: 20px;
	height: 20px;
	left: 0px;
	top: 3px;
	position: absolute;
}

.border1 {
	border: 1px solid;
}

.border2 {
	border: 1px solid red;
}

.image-shopee {
	background-image: url("../img/shopee.png");
	background-repeat: no-repeat;
	width: 113px;
	height: 113px;
	cursor: pointer;
}

.btnproses {
	background-color: #3a73ab;
	border: none;
	color: white;
}

.white {
	color: white;
}

.white:hover {
	color: #effa08;
}

.display_block {
	display: block;
}

#container_2 {
	display: flex;
	/* establish flex container */
	flex-direction: row;
	/* default value; can be omitted */
	flex-wrap: nowrap;
	/* default value; can be omitted */
	justify-content: space-between;
	/* switched from default (flex-start, see below) */
}

.vertical-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.tombol-tengah-wrap {
	text-align: center;
}

div.tombol-tengah {
	margin: 0 auto;
	text-align: center;
	width: inherit;
	display: inline-block;
}

.PopupPanel {
	border: solid 1px black;
	position: fixed;
	left: 50%;
	top: 50%;
	background-color: #b2b7bd;
	font-size: larger;
	z-index: 100;
	margin-top: -200px;
	width: 600px;
	margin-left: -300px;
	padding: 15px;
}



#tabelsaldo {
	border-collapse: collapse;
	width: 100%;
	font-size: 12px;
	background-color: #fff;
}

/* #tabelsaldo tr:nth-child(odd){
	background-color:rgb(255, 255, 255); 
} */

#tabelsaldo th {
	padding: 10px;
	background-color: #413838;
	color: #ffffff;
	border-left: 1px solid #424242;
	border-right: 1px solid #424242;
	font-size: 14px;
	box-shadow: 1px 1px 5px grey;
}

#tabelsaldo th {
	padding-left: 4px;
}

#tabelsaldo td,
#tabelsaldo td input {
	padding-top: 7px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 7px;
	border-left: 1px solid #afafaf;
	/* rgba(165,  175,  181, 0.9) vs #148ed4 */
	border-bottom: 1px solid #afafaf;
	/* rgba(165,  175,  181, 0.9) vs #148ed4 */
	cursor: default;
}

#tabelsaldo td:last-child {
	text-align: center;
	border-right: 1px solid #afafaf;
	/* rgba(165,  175,  181, 0.9) vs #148ed4 */
	width: 100px;
}

#tabelsaldo button,
#tabelsaldo button {
	padding: 6px;
	margin-bottom: 2px;
	margin-top: 2px;
	border: 0;
	border-radius: 4px;
	color: #fff;
	background-color: #ff9a00;
}

.tombol{
	background-color: #ff0000;	
}

#tabelsaldo button:hover,
#tabelsaldo button:hover {
	background-color: #ff7400;
	border-top: 0px;
	cursor: pointer;
}

.box_saldo {
	border: 1px solid gray;
	box-shadow: 0 0 6px 4px rgba(100, 100, 100, 0.1);
	padding: 10px;
}

.box_saldo2 {
	border: 2px solid red;
	box-shadow: 0 0 6px 4px rgba(100, 100, 100, 0.1);
	padding: 9px;
}

.total_label {
	font-size: larger;
	font-weight: bold;
}

/* Firefox */
@-moz-document url-prefix() {
	.pagenumber select {
		height: 27px;
	}
}

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.pagenumber select {
		height: 25px;
	}
}

/*Page number*/
.pagenumber {
	border-left:
		1px solid #148ed4;
	border-left: 1px solid #d2d2d2;
	border-right: 1px solid #d2d2d2;
	border-bottom: 1px solid #d2d2d2;
	border-top: 5px solid #d2d2d2;
	height: 45px;
	padding-bottom: 3px;
	margin: 0;
	background-color: #f1f1f1;
}

.pagenumber table {
	height: 100%;
	margin-top: 2px;
	width: 100%;
}

.pagenumber button {
	border: 0;
	color: #fff;
	padding: 5px;
	margin: 2px 5px 3px 3px;
	background-color: #417895;
	box-shadow: 1px 1px 5px grey;
	font-size: 12px;
	font-family: "Segoe UI", Arial;
	border-radius: 2px;
	min-width: 35px;
}

.pagenumber button:hover {
	background-color: red;

}

.pagenumber .btn-click {
	background-color: #ff6300;
}

.pagenumber table td:last-child {
	text-align: right;
}

#btn_tambah_penarikan:hover {
	background-color: #FF0000;
	color: white;
}

#btn_tambah_penarikan {
	background-color: #ff5100;
	color: white;
}

.highlight_row_ctrl {
	/* background-color:#cdf5ffa4;  */

	background-color: #cdf5ff;
}

.lbl-center-vertical {
	height: 35px;
	display: flex;
	align-items: center;
}

.warning-orange {
	border: 1px solid red;
	background-color: #ff5100;
	color: white;
	margin-bottom: 5px;
}

.warning-hijau {
	border: 1px solid rgb(0, 80, 17);
	background-color: #047000;
	color: white;
	margin-bottom: 5px;
}

.warning-grey {
	border: 1px solid rgb(10, 10, 10);
	background-color: #3d3d3d;
	color: white;
	margin-bottom: 5px;
}

.header_utama button {
	padding: 8px;
	border: 0;
	margin: 7px 0 0 0;
	color: #ffffff !important;
	font-size: 16px;
	background-color: #686868;
	font-family: "Times New Roman", "Franklin Gothic Medium", "Franklin Gothic Demi", "Franklin Gothic Book";
	border-top: 4px solid #686868;
}

.header_utama button:hover {
	background-color: #ff6300;
	cursor: pointer;
	border-top: 4px solid #ac4300;
}

.b_transfer {
	cursor: pointer;
}

.curr_pointer {
	cursor: pointer;
	color: blue;
}

.curr_pointer:hover {
	cursor: pointer;
	color: red;
}

.bg_yellow {
	background-color: yellow
}

.polling_message {
	color: white;
	float: left;
	margin-right: 50px;
}

.view_port {
	padding: 4px;
	height: 25px;
	width: 100%;
	overflow: hidden;
}

.bg_black {
	background-color: black;
}

.bg_red {
	background-color: red;
}


.cylon_eye {
	padding-bottom: 5px;
	background-color: red;
	background-image: linear-gradient(to right,
			rgba(0, 0, 0, .9) 25%,
			rgba(0, 0, 0, .1) 50%,
			rgba(0, 0, 0, .9) 75%);
	color: white;
	height: 100%;
	width: 80%;

	-webkit-animation: 0.8s linear 0s infinite alternate move_eye;
	animation: 0.8s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye {
	from {
		margin-left: -20%;
	}

	to {
		margin-left: 100%;
	}
}

@keyframes move_eye {
	from {
		margin-left: -20%;
	}

	to {
		margin-left: 100%;
	}
}

#tbarang_import_xls table {
	border-collapse: collapse;
}

#tbarang_import_xls th,
#tbarang_import_xls td {
	padding: 0.25rem;
	text-align: left;
	border: 1px solid #ccc;
	white-space: nowrap;
}

/* #tbarang_import_xls tbody tr:nth-child(odd) {
	background: #eee;
} */

.bg_green {
	background: rgb(218, 255, 220);
}

.bg_red_lunak {
	background: rgb(255, 224, 224);
}

.hijau {
	color: rgb(0, 122, 41);
}

.cp-spinner {
	width: 24px;
	height: 24px;
	display: inline-block;
	box-sizing: border-box;
	position: relative;
}

.cp-skeleton {
	border-radius: 50%;
	border-top: solid 6px #f56151;
	border-right: solid 6px transparent;
	border-bottom: solid 6px transparent;
	border-left: solid 6px transparent;
	animation: cp-skeleton-animate 1s linear infinite
}

.cp-skeleton:before {
	border-radius: 50%;
	content: " ";
	width: 24px;
	height: 24px;
	display: inline-block;
	box-sizing: border-box;
	border-top: solid 6px transparent;
	border-right: solid 6px transparent;
	border-bottom: solid 6px transparent;
	border-left: solid 6px #f56151;
	position: absolute;
	top: -6px;
	left: -6px;
	transform: rotateZ(-30deg)
}

.cp-skeleton:after {
	border-radius: 50%;
	content: " ";
	width: 24px;
	height: 24px;
	display: inline-block;
	box-sizing: border-box;
	border-top: solid 6px transparent;
	border-right: solid 6px #f56151;
	border-bottom: solid 6px transparent;
	border-left: solid 6px transparent;
	position: absolute;
	top: -6px;
	right: -6px;
	transform: rotateZ(30deg)
}

@keyframes cp-skeleton-animate {
	0% {
		transform: rotate(0);
		opacity: 1
	}

	50% {
		opacity: .7
	}

	100% {
		transform: rotate(360deg);
		opacity: 1
	}
}

.button-bulat {
	border-radius: 10%;
	font-size: 20px;
	padding-top: 4px;
	padding-left: 9px;
	width: 35px;
	height: 35px;
	color: rgb(24, 121, 0);
	margin-left: 5px;
	background-color: rgb(238, 238, 237);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 3px 3px rgba(0, 0, 0, 0.22);
}

.button-bulat:hover {
	border-radius: 10%;
	color: white;
	background-color: rgb(245, 110, 0);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 3px 3px rgba(0, 0, 0, 0.22);
}

table.dataTable tbody tr.selected {
	background-color: #dcf8ff;
}

table.dataTable tbody td:nth-child(1) {
	white-space: nowrap;
}

/*

#tbarang_import_xls td, #tbarang_import_xls th {
border: 1px solid #999;
padding: 0.5rem;
text-align: left;
} */
/* div.scroll {
	margin:4px, 4px;
	padding:4px;
	background-color: green;
	width: 500px;
	height: 110px;
	overflow-x: hidden;
	overflow-y: auto;
	text-align:justify;
} */
/*   
body {
	font: normal medium/1.4 sans-serif;
  }
  table {
	border-collapse: collapse;
	width: 100%;
  }
  th, td {
	padding: 0.25rem;
	text-align: left;
	border: 1px solid #ccc;
  }
  tbody tr:nth-child(odd) {
	background: #eee;
  } */

#container {
	height: 45px;
	border: 1px solid #bbb;
	border-radius: 5px;
	padding-top: 5px;
	padding-left: 2px;
	padding-right: 8px;
	position: relative;
}

#container input,
#container select,
#container textarea {
	border: 0px solid transparent;
	background-color: #fff;
}

#label {
	position: absolute;
	top: -10px;
	left: 8px;
	background-color: white;
	border: 0px solid transparent;
	border-radius: 5px;
	text-align: center;
	padding-right: 8px;
	padding-left: 8px;
	padding-top: 1px;
	padding-bottom: 1px;
	font-size: smaller;
	color: #333;
}



#autocomplete-container {
	position: relative;
	display: inline-block;
}

#autocomplete-input {
	width: 200px;
}

.autocomplete-list {
	position: absolute;
	z-index: 1;
	list-style: none;
	padding: 0;
	margin: 0;
	border: 1px solid #ccc;
	max-height: 150px;
	overflow-y: auto;
	background-color: #f0f0f0;
}

.autocomplete-list-item {
	padding: 8px;
	cursor: pointer;
}

.autocomplete-list-item:hover {
	background-color: #a3be0d;
}

.container22 {
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.kiri22 {
	float: left;
}

.right22 {
	float: right;
}


/* Combobox melayang pada laporan SHU pada pilihan pelanggan */

.listbox {
    position: absolute;
    top: 109px; /* Adjust based on inputText height */
    width: 400px;
    border: 1px solid #ccc;
    background-color: white;
    max-height: 150px;
    overflow-y: auto;
    display: none; /* Hidden by default */
}

.listbox-item {
    padding: 10px;
    cursor: pointer;
}

.listbox-item:hover {
    background-color: #f0f0f0;
}

.listbox-item .code {
    display: none;
}

.clear-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: #aaa;
}

.clear-button:hover {
    color: #000;
}

.input-container {
    position: relative;
}

#tambah_baru_hb,#tambah_baru_hb2,#tambah_baru_hb3,#tambah_baru_hb4{
	font-weight: bold;
	cursor: pointer;
	color: orange;
}

#tambah_baru_hb:hover,#tambah_baru_hb2:hover,#tambah_baru_hb3:hover,#tambah_baru_hb4:hover{
	color: red;
}

#barang_diskon tr td i.fa,#barang_diskon2 tr td i.fa,#barang_diskon3 tr td i.fa,#barang_diskon4 tr td i.fa{
	cursor: pointer;
	font-size:x-large;
	color: orange;
}

#barang_diskon tr td i.fa:hover,#barang_diskon2 tr td i.fa:hover,#barang_diskon3 tr td i.fa:hover,#barang_diskon4 tr td i.fa:hover{
	color: orangered;
}

.file-input-group {
    display: flex;
    align-items: center;
}

.file-label {
    margin-right: 10px; /* Adds spacing between the label and input */
	margin-top: 3px;
    font-weight: bold;   /* Optional: makes the label bold */
}

.form-control-file {
    max-width: 250px; /* Adjust the width as needed */
}

.kuning {
	color:yellow !important;
}

.toolbar2 #btn_expired, .toolbar2 a{
	border: none;
	margin-bottom: 6px;
}