/* Custom colors */
:root {
  --bs-putih: #fff;
  --bs-hitam: #000;
  --bs-hijau: #5bda78;
  --bs-hijau-hover: #4c9c5f;
  --bs-merah: #ff6878;
  --bs-merah-hover: #da4f5d;
  --bs-kuning: #fff43a;
  --bs-kuning-hover: #edbe33;
  --bs-biru: #4ad5eb;
  --bs-biru-hover: #3f99a7;
  --bs-ungu: #9f75f4;
  --bs-orange: #fd7e14;

  --bs-orange-90: #fee3cd;
  --bs-orange-80: #fec79a;
  --bs-orange-70: #fdab68;
  --bs-orange-60: #fd8f35;
  --bs-orange-50: #fc7303;
  --bs-orange-40: #ca5c02;
  --bs-orange-30: #974502;
  --bs-orange-20: #652e01;
  --bs-orange-10: #321701;

  --bs-yellow-90: #fff2cc;
  --bs-yellow-80: #ffe699;
  --bs-yellow-70: #ffd966;
  --bs-yellow-60: #ffcc33;
  --bs-yellow-50: #ffbf00;
  --bs-yellow-40: #cc9900;
  --bs-yellow-30: #997300;
  --bs-yellow-20: #664d00;
  --bs-yellow-10: #332600;

  --bs-red-90: #f7d4d7;
  --bs-red-80: #f0a8af;
  --bs-red-70: #e87d88;
  --bs-red-60: #e05260;
  --bs-red-50: #d92638;
  --bs-red-40: #ad1f2d;
  --bs-red-30: #821722;
  --bs-red-20: #570f16;
  --bs-red-10: #2b080b;

  --bs-green-90: #d4f7e7;
  --bs-green-80: #a9efce;
  --bs-green-70: #7ee7b6;
  --bs-green-60: #53df9e;
  --bs-green-50: #28d785;
  --bs-green-40: #20ac6b;
  --bs-green-30: #188150;
  --bs-green-20: #105635;
  --bs-green-10: #082b1b;

  --bs-blue-90: #cde1fe;
  --bs-blue-80: #9ac2fe;
  --bs-blue-70: #68a4fd;
  --bs-blue-60: #3585fd;
  --bs-blue-50: #0367fc;
  --bs-blue-40: #0252ca;
  --bs-blue-30: #023e97;
  --bs-blue-20: #012965;
  --bs-blue-10: #011532;

  --bs-indigo-90: #e0cffc;
  --bs-indigo-80: #c19efa;
  --bs-indigo-70: #a26ef7;
  --bs-indigo-60: #843df5;
  --bs-indigo-50: #650df2;
  --bs-indigo-40: #510ac2;
  --bs-indigo-30: #3c0891;
  --bs-indigo-20: #280561;
  --bs-indigo-10: #140330;

  --bs-dark-90: #e6e6e6;
  --bs-dark-80: #cccccc;
  --bs-dark-70: #b3b3b3;
  --bs-dark-60: #999999;
  --bs-dark-50: #808080;
  --bs-dark-40: #666666;
  --bs-dark-30: #4d4d4d;
  --bs-dark-20: #333333;
  --bs-dark-10: #1a1a1a;

  --bs-body-bg: #fff1e6;
  --bs-body-color: #190c00;
  --bs-border-color: #fdab68;
  --bs-card-border-color: #fdab68;
}
body {  min-height: 100vh; overflow-x: hidden; font-family:'Fira Sans Condensed',sans-serif; background-color: var(--bs-putih); color: var(--bs-body-color); background-image:linear-gradient(135deg, var(--bs-putih), var(--bs-putih), var(--bs-body-bg), var(--bs-orange-90)); background-size:cover; background-attachment:fixed; }
a{color:var(--bs-orange);text-decoration:none;background-color:transparent}
a:hover{color:var(--bs-orange-30);text-decoration:none}
a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}

.preloader{display:-ms-flexbox;display:flex;background-color:#f4f6f9;height:100vh;width:100%;transition:height .2s linear;position:fixed;left:0;top:0;z-index:9999}
.custom-small{font-size: 0.75rem;}

.sidebar {
	height: 100vh;
	padding: 0.5rem;
	position: fixed;
	top: 0;
	left: 0;
	background: var(--bs-gray-dark);
	color: var(--bs-white);
	width: 60px; /* Default collapsed width */
	transition: width 0.3s ease, transform 0.3s ease;
	overflow-x: hidden;
}
.sidebar.expanded {
	width: 220px; /* Expanded width on hover */
}
.sidebar a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--bs-body-bg);
	padding: 0.5rem;
	font-size: 1rem;
}
.sidebar .nav-link.active {
	background-color: var(--bs-orange);
	border-left: 4px solid var(--bs-yellow);
	color: white;
}
.sidebar .nav-sub.active {
	background-color: var(--bs-orange);
	border-left: 4px solid var(--bs-yellow);
	color: white;
}
.sidebar .sub-link.active {
	background-color: var(--bs-secondary);
	border-left: 4px solid var(--bs-gray-300);
	color: white;
}
.content {
	padding: 5px 15px;
	margin-left: 60px; /* Space for collapsed sidebar */
	margin-bottom: 60px; /* Space for collapsed sidebar */
	transition: margin-left 0.3s ease;
}
.sidebar.expanded ~ .content {
	margin-left: 220px; /* Adjust margin for expanded sidebar */
}
/* Display text only in expanded sidebar */
.sidebar a span {
	display: none; /* Hide text by default */
}
.sidebar.expanded a span {
	display: inline; /* Show text when expanded */
}
.sidebar a i {
	font-size: 1rem;
	margin-right: 0;
}
.sidebar.expanded a i {
	margin-right: 10px; /* Add space for icon in expanded mode */
}
/* Mobile adjustments */
@media only screen and (max-width: 1080px) {
	.content { margin-left: 0; }
	.content {
		margin-left: 0;
	}
	/* Show mobile toggle button */
	.mobile-toggle {
		display: inline-block;
	}
}
/* Hide toggle button on desktop */
.mobile-toggle {
	display: none;
}
.rotate-icon {
	transition: transform 0.3s ease; /* Smooth rotation */
}
.rotate-icon.active {
	transform: rotate(-90deg); /* Rotate 180 degrees */
}
.submenu a i {
	padding-left: 10px;
	font-size: 0.9em;
}
.offcanvas {
	background: var(--bs-gray-dark);
	color: var(--bs-white);
}
.offcanvas a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--bs-body-bg);
	padding: 0.5rem;
	font-size: 1rem;	
}
.offcanvas a i {
	font-size: 1rem;
	margin-right: 0;
}
.offcanvas a span {
	margin-left: 10px;
}
.offcanvas .nav-link.active {
	background-color: var(--bs-orange);
	border-left: 4px solid var(--bs-yellow);
	color: white;
}
.offcanvas .nav-sub.active {
	background-color: var(--bs-orange);
	border-left: 4px solid var(--bs-yellow);
	color: white;
}
.offcanvas .sub-link.active {
	background-color: var(--bs-secondary);
	border-left: 4px solid var(--bs-gray-300);
	color: white;
}

.notification { background-color: var(--bs-yellow-90); border-left: 5px solid #ffc107; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; }
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #f8f9fa;
	border-top: 1px solid #ddd;
	display: flex;
}
.bottom-nav a {
	flex-grow: 1;
	text-align: center;
	color: #495057;
	font-size: 1.25rem;
	padding-top: 5px;
}
.bottom-nav a.active {
	color: #007bff;
}
/* Make Add Order icon larger and centered */
.bottom-nav .add-order {
	position: relative;
	font-size: 2.5rem;
	background-color: var(--bs-orange);
	color: white;
	border-radius: 0 0 25px 25px;
	padding: 0.5rem;
	width: 0.1rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ui-autocomplete { z-index: 1060; max-height: 200px; overflow-y: auto; overflow-x: hidden; position: absolute; }
.ui-menu-item-wrapper { font-size: 1rem; color: var(--bs-body-color); }
.ui-state-active { background-color: var(--bs-body-bg); color: var(--bs-body-color); }

.text-hijau{color:var(--bs-hijau)!important}a.text-hijau:focus,a.text-hijau:hover{color:var(--bs-hijau-hover)!important}
.text-merah{color:var(--bs-merah)!important}a.text-merah:focus,a.text-merah:hover{color:var(--bs-merah-hover)!important}
.text-kuning{color:var(--bs-kuning)!important}a.text-kuning:focus,a.text-kuning:hover{color:var(--bs-kuning-hover)!important}
.text-biru{color:var(--bs-biru)!important}a.text-info:focus,a.text-biru:hover{color:var(--bs-biru-hover)!important}
.text-ungu{color:var(--bs-ungu)!important}
.text-orange{color:var(--bs-orange)!important}
.text-red{color:var(--bs-merah)!important}
.text-green{color:var(--bs-hijau)!important}
.text-putih{color:var(--bs-putih)!important}

.bg-gradient-orange{color:var(--bs-putih); background-image:linear-gradient(180deg, var(--bs-orange-70), var(--bs-orange-50)); background-size:cover; background-attachment:fixed;}
.bg-gradient-red{color:var(--bs-putih); background-image:linear-gradient(180deg, var(--bs-red-70), var(--bs-red-50)); background-size:cover; background-attachment:fixed;}
.bg-gradient-dark{color:var(--bs-putih); background-image:linear-gradient(180deg, var(--bs-dark-50), var(--bs-dark-30)); background-size:cover; background-attachment:fixed;}
.bg-gradient-light{color:var(--bs-hitam); background-image:linear-gradient(180deg, var(--bs-dark-90), var(--bs-dark-70)); background-size:cover; background-attachment:fixed;}

.bg-orange{background-color:var(--bs-orange)!important;color:var(--bs-putih)!important;}
.bg-orange,.bg-orange>a{color:var(--bs-putih)!important}
.bg-orange.btn:hover{border-color:#dc6502;color:#121a24}
.bg-orange.btn.active,.bg-orange.btn:active,.bg-orange.btn:not(:disabled):not(.disabled).active,.bg-orange.btn:not(:disabled):not(.disabled):active{background-color:#dc6502!important;border-color:#cf5f02;color:#fff}

.btn-outline-orange{color:var(--bs-orange);border-color:var(--bs-orange);}
.btn-outline-orange:hover{color:#1f2d3d;background-color:var(--bs-orange);border-color:var(--bs-orange)}
.btn-outline-orange.focus,.btn-outline-orange:focus{box-shadow:0 0 0 0 rgba(255,193,7,.5)}
.btn-outline-orange.disabled,.btn-outline-orange:disabled{color:var(--bs-orange);background-color:transparent}
.btn-outline-orange:not(:disabled):not(.disabled).active,.btn-outline-orange:not(:disabled):not(.disabled):active,.show>.btn-outline-orange.dropdown-toggle{color:#1f2d3d;background-color:var(--bs-orange);border-color:var(--bs-orange)}
.btn-outline-orange:not(:disabled):not(.disabled).active:focus,.btn-outline-orange:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-orange.dropdown-toggle:focus{box-shadow:0 0 0 0 rgba(255,193,7,.5)}

.form-control, .form-select, .form-check-input {border-color:var(--bs-orange-50)!important;}

.swiper { width: 100%; }
.swiper-slide img { display: block; object-fit: cover; }
.swiper-slide { width: 95%; }
.swiper-pagination-bullet-active { background-color: var(--bs-orange) !important; }
.swiper-pagination-bullet-inactive { background-color: var(--bs-orange-80) !important; }

.h50 { height: 50px; }.h75 { height: 75px; }.h100 { height: 100px; }.h125 { height: 125px; }.h150 { height: 150px; }.h175 { height: 175px; } .h200 { height: 200px; }
.w50 { width: 50px; }.w75 { width: 75px; }.w100 { width: 100px; }

#status{-webkit-text-stroke: 1px black;}

#map { height: 50vh; width: 100%; z-index: 1; border-radius:15px; }#mapK { height: 50vh; width: 100%; z-index: 1; border-radius:15px; }

.size-10 {font-size: 10px;line-height: 12px;}
.size-12 {font-size: 12px;}
.size-18 {font-size: 18px;}
.size-20 {font-size: 20px;}
.size-22 {font-size: 22px;}
.size-24 {font-size: 24px;}
.size-32 {font-size: 32px;}