@media only screen and (max-width: 768px) {
	.nav-title{
		padding: 0 65px !important;
	}

	.tableResponsive {
		width: 100%;
		overflow-x: scroll;
	}
}

@media only screen and (max-width: 480px) {
	.tableResponsive {
		width: 100%;
		overflow-x: scroll;
	}
}

/* ===== portal ==== */
.content-portal{
	margin-top: 10px; 
	padding: 10px;
	text-align: center; 
	border: solid 1px #bdbdbd; 
	border-radius: 15px;
}
.content-portal i{
	color: #424242; 
}
.content-portal p{
	color: #424242; 
	font-size: 11px;
}
.content-portal:hover{
	border: solid 1px #b71c1c; 
}

.morris-hover.morris-default-style{
	z-index: 1 !important;
}

.kas-besar .saldo{
	text-align: right;
	font-size: 42px; 
	font-weight: bold;
	color: #ffffff; 
	
}

.box-rekap{
	color: #ffffff;
}
.box-rekap .jumlah{
	font-size: 42px; 
	font-weight: bold;
	text-align: right !important; 
}

.box-summery-broadcast{
	text-align: center;
}

.box-summery-broadcast .total{
	font-size: 28px;
}

/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));

  background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 150ms infinite linear;
  -moz-animation: spinner 150ms infinite linear;
  -ms-animation: spinner 150ms infinite linear;
  -o-animation: spinner 150ms infinite linear;
  animation: spinner 150ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.btn-min{
	margin-right: 15px !important;
}
.btn-plus{
	margin-left: 15px !important;
}
.input-qty-so{
	width: 10% !important; 
	height: 2rem !important; 
	text-align: right; 
	border-bottom: none !important;
}
.input-harga-so{
	height: 2rem !important; 
	text-align: right; 
	border-bottom: none !important;
}
.input-total-so{
	height: 2rem !important; 
	text-align: right; 
	border-bottom: none !important;
}

.btn-change-payment{
	border-bottom: none !important;
}

.btn-payment{
	border-bottom: none !important;
}

.select2-container--default .select2-results > .select2-results__options{
	max-height: 600px !important;
}
.input-field label{
	color: #616161 !important;
}
.tabs .indicator{
	background-color: #b71c1c !important;
}
.btn-small{
	height: 32.4px;
	line-height: 32.4px;
	font-size: 13px; 
	border: 1px solid #b71c1c; 
	padding: 5px;
	border-radius: 5px;
	background-color: #b71c1c; 
	color: #ffffff;
}
.btn-small:hover{
	background-color: #ffffff !important; 
	color: #b71c1c;
}
.btn-small.blue {
	border: 1px solid #2196F3; 
}
.btn-small.blue:hover {
	color: #2196F3;
}
.btn-small.green {
	border: 1px solid #4CAF50; 
}
.btn-small.green:hover {
	color: #4CAF50;
}

#content-dashboard{
	padding: 90px 0;
}

.modal-small{
	width: 350px;
}

#login-page{
	margin-top: -90px !important;
}

.header-trx{
	color: #ffffff;
	font-size: 32px; 
	height: 30px !important;
}

.summary{
	margin-top: 10px;
}
.content-box{
	position: relative;
	overflow: hidden;
}
.content-box-icon{
	height: 130px !important;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
	display: block;
}
.content-box-icon i{
	position: absolute;
	left: 20px;
	font-size: 130px;
	opacity: .2; 
	color: #212121;
}
.content-box .content-box-icon:hover {
	-moz-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}
.content-box-number{
	position: absolute;
	top: 20%;
	right: 10%;
	color: #ffffff; 
	font-size: 42px !important;
}
.content-box span{
	position: absolute;
	top: 70%;
	right: 10%;
	color: #ffffff; 
	font-size: 16px !important;
}
.content-box-action{
	padding: 5px;
}
.content-box-action span{
	color: #e0e0e0; 
	font-size: 16px; 
}
.content-box-action:hover span{
	color: #ffffff; 
}

.btn-submit{
	text-transform: uppercase;
	text-decoration: none;
	color: #424242;
	background-color: #ffffff;
	text-align: center;
	letter-spacing: .5px;
	cursor: pointer;
	border: 3px solid #b71c1c;
	line-height: 30px;
	border-radius: 10px; 
}
.btn-submit:hover{
	color: #ffffff;
	background-color: #b71c1c;
}

.btn-cancel{
	text-transform: uppercase;
	text-decoration: none;
	color: #424242;
	background-color: #ffffff;
	text-align: center;
	letter-spacing: .5px;
	cursor: pointer;
	border: 3px solid #bdbdbd;
	line-height: 30px;
	border-radius: 10px;
}
.btn-cancel:hover{
	color: #ffffff;
	background-color: #bdbdbd;
}

.btn-add{
	text-transform: uppercase;
	text-decoration: none;
	color: #424242;
	background-color: transparent;
	text-align: center;
	letter-spacing: .5px;
	cursor: pointer;
	border: 3px solid #b71c1c;
	line-height: 30px;
	border-radius: 10px; 
}
.btn-add:hover{
	color: #ffffff;
	background-color: #b71c1c;
}

.btn-bayar{
	text-transform: uppercase;
	text-decoration: none;
	color: #424242;
	background-color: #ffffff;
	text-align: center;
	letter-spacing: .5px;
	cursor: pointer;
	border: 3px solid #ffffff;
	line-height: 30px;
	border-radius: 10px; 
}
.btn-bayar:hover{
	color: #ffffff;
	background-color: #b71c1c;
}

.nav-title{
	padding: 0 25px;
	font-size: 32px;
}

.nav-avatar{
	width: 30px;
	height: 35px;
	margin-top: 15px;
}

.icon-update-foto{
	position: absolute; 
	top: -10px; 
	right: 0px; 
	background: #ffffff; 
	padding: 0 7px;; 
	border-radius: 50%;
}

.pad15{
	padding: 15px !important;
}
.padt15{
	padding-top: 15px!important;
}
.padt5{
	padding-top: 5px !important;
}
.padt25{
	padding: 25px 0 0 0 !important;
}
.no-margin{
	margin: 0 !important;
}
.mt-min-20{
	margin-top: -20px !important;
}

.barcode-text{
	font-size: 32px !important;
	color: #b71c1c !important;
}
.price-text{
	font-size: 32px !important;
	color: #b71c1c !important; 
	text-align: right !important;
}
.price-text-black{
	font-size: 32px !important;
	color: #424242 !important; 
	text-align: right !important;
}
.cari-nota-text{
	font-size: 32px !important;
	font-weight: bold;
	color: #ffffff; 
	text-align: right; 
	border-bottom: 1px solid #ffffff !important;
}

.running-text{
	color: #ffffff;
	font-size: 32px !important;
	font-weight: bold;
}
.modal-add-barang{
	height: 100% !important;
	max-height: 90% !important;
}

.current-total{
	font-size: 21px; 
	color: #b71c1c; 
	font-weight: bolder;
}

.total-belanja-text{
	margin-top: -10px;
	font-size: 32px;
	font-weight: bold;
	color: #ffffff;
}

.total-retur{
	font-size: 85px;
	font-weight: bolder;
	color: #b71c1c; 
	text-align: right;
}

.cari-nota{
	padding: 0 20px !important;
}

/* loader product */
/* Absolute Center Spinner */
.loader-product {
	position: fixed;
	z-index: 999;
	height: 2em;
	width: 2em;
	overflow: show;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

/* Transparent Overlay */
.loader-product:before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));

	background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
}

/* :not(:required) hides these rules from IE9 and below */
.loader-product:not(:required) {
	/* hide "loading..." text */
	font: 0/0 a;
	color: transparent;
	text-shadow: none;
	background-color: transparent;
	border: 0;
}

.loader-product:not(:required):after {
	content: '';
	display: block;
	font-size: 10px;
	width: 1em;
	height: 1em;
	margin-top: -0.5em;
	-webkit-animation: spinner 150ms infinite linear;
	-moz-animation: spinner 150ms infinite linear;
	-ms-animation: spinner 150ms infinite linear;
	-o-animation: spinner 150ms infinite linear;
	animation: spinner 150ms infinite linear;
	border-radius: 0.5em;
	-webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
	box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
}

.d-flex { display: flex; }
.d-flex.flex-column { flex-direction: column; }
.d-flex.justify-content-start { justify-content: start; }
.d-flex.justify-content-end { justify-content: end; }
.d-flex.justify-content-center { justify-content: center; }
.d-flex.justify-content-between { justify-content: space-between; }

.fs-5 { font-size: 1.25rem; }
.fs-6 { font-size: 1rem; }
.fs-7 { font-size: .75rem; }

.clap-1.fs-7 {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	height: .75rem;
	font-size: .75rem;
	line-height: .75rem;
	overflow: hidden;
}

input::placeholder {
	color: #B71C1C;
	opacity: 1;
}

input:-ms-input-placeholder {
	color: red;
}

input::-ms-input-placeholder {
	color: red;
}

.jumlah-text{
	font-size: 21px !important; 
	text-align: right !important;
}
.dp-text{
	color: #b71c1c !important; 
	font-size: 21px !important; 
	text-align: right !important;
}


/* Custom switch colors */
.switch label #confirm-send-wa[type=checkbox]:checked+.lever:after {
  background-color: #075e54; /* Ubah warna ketika switch ON */
}
.switch label #confirm-send-wa[type=checkbox]:checked+.lever {
  background-color: #25d366; /* Ubah warna latar belakang ketika switch ON */
}

.switch label #confirm-send-wa-sisa[type=checkbox]:checked+.lever:after {
  background-color: #075e54; /* Ubah warna ketika switch ON */
}
.switch label #confirm-send-wa-sisa[type=checkbox]:checked+.lever {
  background-color: #25d366; /* Ubah warna latar belakang ketika switch ON */
}

.switch label input[type=checkbox]:checked+.lever:after {
  background-color: #b71c1c; /* Ubah warna ketika switch ON */
}
.switch label input[type=checkbox]:checked+.lever {
  background-color: #e36262; /* Ubah warna latar belakang ketika switch ON */
}

.custom-confirm-modal.modal {
	width: 300px;
	height: auto;
	border-radius: 8px;
}
.custom-confirm-modal .modal-content {
	padding: 20px;
	text-align: center;
}
.custom-confirm-modal .modal-footer {
	text-align: center;
	padding-bottom: 20px;
}
.custom-confirm-modal .modal-footer .btn {
	margin: 0 10px;
}

/* Membuat Ukuran Modal yang lebih besar */
.modal.modal-higher {
	max-height: 95%;
	top: 2% !important;
}

/* Paksa Menampilkan tfoot meskipun layar kecil */
tfoot.displayable {
    display: table-footer-group !important;
}

.btn-green {
	text-transform: uppercase;
	text-decoration: none;
	color: #424242;
	background-color: transparent;
	text-align: center;
	letter-spacing: .5px;
	cursor: pointer;
	border: 3px solid #4CAF50 !important;
	line-height: 30px;
	border-radius: 10px;
	margin-right: 16px;
}

.btn-green:hover {
	color: #ffffff;
	background-color: #4CAF50;
}

/* Stripped Global */
.striped > *:nth-child(odd) {
    background-color: #ffffff; /* White for odd elements */
}

.striped > *:nth-child(even) {
    background-color: #f0f0f0; /* Light gray for even elements */
}

/* Labels */
.label-box {
	display: flex;
	justify-content: center;
	align-items: center;
    border: 2px solid;
    border-radius: 0.3rem;
}

/* Flex Utils */
.flex-centerized {
	display: flex;
	justify-content: center;
	align-items: center;
}