body {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

body.dark {
	background-color: grey;
}

main {
	overflow-y: auto;
}

header {
	position: sticky;
	z-index: 1;
	top: 0; 
	background-color: #ffffff99;
	backdrop-filter: blur(10px);
	border: 1px solid #ffffff;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	box-shadow: 0px 0 100px 5px white;
}

section {
	background: linear-gradient(-95deg, #FFFFFF, #FFF5F5, #FFFFFF, #FFF5F5);
	background-size: 400% 400%;
	animation: gantiWarna 8s infinite;
	min-height: 100vh;
	margin-bottom: 10px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	box-shadow: 1px -20px 900px 2px #FFDFD4;
}

@keyframes gantiWarna {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

label {
	color: orangered;
	font-weight: bold;
}

input {
	background-color: #f3f3f5;
	padding: 5px;
	border-radius: 5px;
	border: 0;
}

select {
	background-color: #f3f3f5;
	padding: 5px;
	font-size: 1rem;
	border-radius: 5px;
}

.dark table {
	background-color: #dddddd;
}

.dark .modal {
	filter: brightness(0.8);
}

.page-header {

}

.page-header .page-title {

}

.dark .navbar {
	background-color: grey;
}

.navbar .switch {
	margin: auto;
	margin-right: 10px;
}

input + .slider:before {
  position: absolute;
  content: "☀️";
}

input:checked + .slider:before {
  position: absolute;
  content: "🌙";
}

input:checked + .slider {
  filter: brightness(0.8);
}

input:checked + .slider:before {
  filter: brightness(0.8);
}

.badge {
	font-size: 0.8rem;
	color: white;
	background-color: #ff5479;
}

.brand-logo .icon {
	cursor: pointer;
}

.brand-name {
	margin-bottom: 0;
	padding-bottom: 0;
}

.brand-tagline {
	color: #FF6443;
	margin-top: 0;
}

.cart {
	margin: auto;
	user-select: none;
	min-width: 20vh;
}

.cart-info {
	position: relative;
	user-select: none;
	cursor: pointer;
	border: 1px solid #FF5479;
	border-radius: 10px;
	padding: 10px;
	width: fit-content;
}

.cart-info:hover {
	filter: grayscale(0.1);
}

.cart-count {
	position: relative;
	margin: auto;
	margin-left: 5px;
	margin-right: 5px;
}

.count-checkout {
	position: absolute;
	top: -20px;
	right: -10px;
	background-color: #ff5300;
	color: #ffffff;
	font-weight: bold;
	border-radius: 50%;
	padding: 3px;
	min-width: 25px;
	text-align: center;
}

select[name="branch"]:disabled {
	color: black;
	background-color: white;
	font-size: 1.15rem !important;
}

.branch {
	margin: auto;
}

.card {
	border: 1px solid #F19999;
	border-radius: 5px;
	padding: 10px;
	background-color: white;
	position: relative;
}

.card-title {
	flex-grow: 1;
}

.card-description {
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: justify;
	font-size: 0.95rem;
}

.card-content {
	flex-grow: 1;
	padding-left: 10px;
}

.card-content .card-price {
	font-size: 1rem;
	font-weight: bold;
	color: #FF6E00;
}

.card-add {
	max-height: 50px;
	margin: auto;
	margin-right: 10px;
	text-align: right;
}

.card-add-init {
	background-color: #F54900;
	border-radius: 5px;
	color: white;
	font-size: 1rem;
	padding: 8px;
}

.card-add-init::before {
	content: "+";
	border-radius: 10px;
	padding-right: 8px;
	font-size: 1.2rem;
}

.card-add-init[disabled] {
	background-color: #500900;
	color: grey;
}

.card-add-number {
	display: none;
}

.card-add-number-increase {
	border-radius: 5px;
	background-color: #F54900;
	width: 30px;
	text-align: center;
  padding: auto;
  margin: auto;
  line-height: 35px;
	color: #FFFFFF;
	cursor: pointer;
	user-select: none;
}

.card-add-number-amount {
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	width: 100%;
}

.card-add-number-amount input {
	text-align: center;
	width: 90px;
}

.card-add-number-decrease {
	border-radius: 5px;
	background-color: #d7d7d7;
	width: 30px;
	text-align: center;
  padding: auto;
  margin: auto;
  line-height: 35px;
	cursor: pointer;
	user-select: none;
}

.btn-primary {
	margin: 5px;
  background-color: #34bb23;
  border: 1px solid black;
  color: white;
}

.btn-back {

}

.ready-to-checkout {
	display: none;
}

.btn-continue {
	background-color: #F54900;
	text-align: center;
	margin-top: 30px;
	color: white;
	font-weight: bold;
	font-size: 1.2rem;
	cursor: pointer;
	user-select: none;
}

.page-customer .navigation-bar, .page-payment .navigation-bar, .page-complete .navigation-bar {
	background-color: white;
	border-radius: 10px;
}

.page-customer .navigation-bar .position span:nth-child(1), .page-customer .navigation-bar .position span:nth-child(2),
.page-payment .navigation-bar .position :not(span:nth-child(4)), .page-complete .navigation-bar .position span {
	color: orangered;
}

.cart-header {
	background-color: white;
	border-radius: 10px;
}

.navigation-bar .btn-back {
	cursor: pointer;
}

.navigation-bar .btn-back, .navigation-bar .btn-done, .navigation-bar .position {
	width: 50%;
}

.navigation-bar .position :not(span:nth-child(4))::after {
	content: " ───";
}

.text-muted {
	color: #313115;
}

.summary.text-muted {
	font-size: 10pt;
}

.icon {
	height: 100px;
	padding: 25px;
}

.card-img {
	margin: auto;
	width: 100px;
	border-radius: 10px;
}

.row {
	margin: auto;
	margin-bottom: 20px;
	width: 100%;
	max-width: 1000px;
	min-width: auto;
}

.page-product {

}

.page-cart {
	display: none;
}

.page-customer {
	display: none;
}

.page-payment {
	display: none;
}

.page-complete {
	display: none;
}

.products {
	display: flex;
	flex-flow: wrap;
}

.products .product {

}

.products .product .card-product {
	flex-wrap: nowrap;
}

.text-required {
	color: #dd0000;
}

.customer-header {
	background-color: white;
	margin: auto;
}

.customer-info {
	background-color: white;
	margin: auto;
}

.price-label {
	font-weight: bold;
}

.price-total-amount {

}

.payment-info {
	padding: 10px;
	background-color: white;
	border-radius: 10px;
}

.payment-name{
	margin-bottom: 10px;
}

.payment-phone{
	margin-bottom: 10px;
}

.payment-address{
	margin-bottom: 10px;
}

.payment-map{
	margin-bottom: 10px;
}

.payment-note{
	margin-bottom: 10px;
}


.payment-detail-list tbody {
	border-top: 1px dotted #999999;
	border-bottom: 1px dotted #999999;
}

.payment-detail-list tfoot .total-amount-label {
	font-weight: bold;
}

.payment-transfer #qris {
	max-width: 600px;
	width: 100%;
	border-radius: 40px;
	border: 1px solid black;
}

#map {
  height: 400px;
  width: 100%;
  margin-top: 20px;
}

.complete-message {
	background-color: white;
	border-radius: 10px;
	padding: 10px;
}

@media only screen and (min-width: 1024px) {

	.products {
	  
	}

	.products .product {
		flex: 1 1 auto;
		width: 300px;
		margin: 10px;
	}

	.products .product .card-product {
		flex-wrap: wrap;
	}
}

@media print {

	body {
		margin: 0;
		padding: 0;
	}

	.modal {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.modal .modal-content {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.modal-close {
		display: none;
	}

	#print {
		display: none;
	}
}