@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap");

:root {
	--gray-medium: #F7F7F7;
	--gray-light: #EDEBE9;
	--gray-border: #C6C7C8;
	--white-soft: #F9FAFB;
	--highlight-input: #FFCB99;
	--speech-radius: .5em;
	--custom-pg7: #29277A;
}

body, h1, h2, h3, h4, h5, h6, .tooltip, .tooltip-inner { font-family: "Fira Code", monospace !important; }
body {
	margin: 0;
	background-color: var(--gray-light);
	height: 100vh;
	overflow-y: auto;
}

* { letter-spacing: -.05em; }
h1 { text-transform: uppercase; }
a { text-decoration: none; }
li { list-style: none; }
.list-group-item ul li { list-style: circle; }

.wrapper {
	display: flex;
	height: 100vh;
	overflow: hidden;
}

.main {
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: var(--gray-light);
	overflow: hidden;
}

.content {
	flex: 1;
	overflow: hidden;
}

.container-fluid {
	width: 100%;
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
}

.navbar {
	padding: .75em;
	height: 60px;
	color: var(--bs-secondary);
	background-color: var(--gray-medium);
	border-bottom: solid 1px var(--gray-border);
}

.row-menu {
    position: fixed;
    top: 5em;
    left: 210px;
    right: 0;
	margin: 0 .10rem;
	z-index: 999;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.row-menu.hide {
    transform: translateY(-120%);
    opacity: 0;
}

.row-spacing { margin-top: .75rem; }
.row-top-spacing-1 { margin-top: 4rem; }
.row-top-spacing-2 { margin-top: 2rem; }
.row-bottom-spacing-1 { margin-bottom: 4rem; }
.row-bottom-spacing-2 { margin-bottom: 2rem; }

input, textarea { letter-spacing: normal; }
input::placeholder { color: var(--bs-dark); transition: color 0.3s ease; }
input:focus::placeholder { color: var(--bs-dark); }
input:not(:focus)::placeholder { color: var(--bs-secondary); }

.tooltip, .tooltip-inner { opacity: 1; }
a, button, .alert { display: flex !important; align-items: center !important; }
.alert { height: 33.31px !important; }
.bi { font-size: 1rem !important; padding: 0 .25em; }
.custom-dropdown::after { display: none; }
.dropdown-menu { padding: .15em; }

a.disabled {
    pointer-events: none !important; 
    opacity: 0.4; 
    cursor: not-allowed;
}

.modal.loading .modal-content { 
	position: relative; 
	filter: brightness(0.8); 
	pointer-events: none; 
	transition: filter 0.5s ease; 
}
.modal.loading .modal-content::after { 
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(1px);
	z-index: 1000;
}
.modal .modal-content { transition: filter 0.5s ease; }
.modal.fade .modal-dialog { transform: scale(0.95); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }
.modal.fade.show .modal-dialog { transform: scale(1); opacity: 1; }
.modal-backdrop.fade { opacity: 0; transition: opacity 0.3s ease; }
.modal-backdrop.fade.show { opacity: 0.5; }

.input-group .form-control[list] {
	border-top-left-radius: 0.375rem;
	border-bottom-left-radius: 0.375rem;
}

.pencil-btn,
.eye-button { border: none; background-color: transparent; padding: 0.25rem 0.5rem; }
.pencil-btn:focus,
.eye-button:focus { box-shadow: none; outline: none; border: none; }

.form-check-input.form-switch,
.form-check-input[type="checkbox"] {
    transition: background-color .4s ease, border-color .4s ease;
}

.form-check-input.form-switch:before,
.form-check-input[type="checkbox"]::before {
    transition: transform .4s ease;
}

.form-check-input:focus:not(:checked),
.form-check-input { background-color: var(--gray-light); border-color: var(--gray-border); }

.dropdown-item:hover {
	color: var(--bs-dark);
	background-color: var(--bs-light);
	border-color: var(--bs-light);
}

.btn-light { border: 1px solid var(--gray-border); }
.custom-select, 
.custom-input {
	background-color: #E4E5E0 !important;
	color: var(--bs-dark);
	font-weight: bold !important;
	border-color: var(--gray-border);
}

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

.disabled { background-color: #E9ECEF; pointer-events: none; }
.dispMessage { height: 34px; }
.col-auto + .col-auto > button,
.col-auto + .col-auto > .dropdown { margin-left: -10px; }
.inline-message { min-height: 1.5rem; }
.dt-search { padding-left: 2rem; }
.dt-search-placeholder { margin-left: -10px; position: relative; width: 250px; }
.dt-search-placeholder .bi-search { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); font-weight: bold; color: var(--bs-secondary); }
.no-event { pointer-events: none; }
.hidden { display: none !important; }
.trend-arrow { width: 20px; }
.input-group-text:first-child { min-width: 160px; }

.table-hidden {
    visibility: hidden;
    opacity: 0;
}
.table-visible {
    visibility: visible;
    opacity: 1;
    transition: opacity .25s ease-in;
}

table thead tr th {
	margin: 0 !important;
	padding: 0 .5em !important;
	height: 50px;
	text-align: center !important;
	text-transform: uppercase !important;
	vertical-align: middle !important;
}

table tbody tr td, 
table tfoot tr td {
	margin: 0 !important;
	padding: 0 !important;
}

.um tbody tr td:not(:has(button)),
.es tbody tr td:not(:has(button)),
.ip tbody tr td:not(:has(button)) {
	min-width: 150px !important;
	width: auto !important;
	
}

.um tbody tr td input, .um tbody tr td select,
.es tbody tr td input,
.ip tbody tr td input {
	border: none;
	border-radius: 0;
}

.ip tbody tr td:nth-child(2) input,
.es tbody tr td:nth-child(2) input,
.um tbody tr td:nth-child(2) input {
	text-align: right;
	font-weight: bold;
}

.ipep tfoot tr td { font-weight: bold !important; text-align: center !important; background-color: var(--white-soft); }
.ipep tfoot tr td:nth-child(2) { border-bottom-left-radius: .28571429rem; }

.bd tbody tr td:nth-child(3) div { text-align: left !important; font-weight: bold; }
.bd tbody tr td:not(:first-child):not(:nth-child(4)) { padding: 0 .5em !important; text-align: center !important; }
.bd tbody tr td:not(:nth-child(4)) { vertical-align: baseline; }
.bd tbody tr td:not(:has(button)) {
	min-width: 160px !important;
	width: auto !important;
}

.ep_report thead tr th,
.es_report thead tr th {
	height: 25px;
	padding: 0 .5em !important;
	text-transform: uppercase !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
}
.ep_report thead tr th:first-child,
.es_report thead tr th:first-child {
	min-width: 100px;
	max-width: 100px;
}
.ep_report thead tr th img,
.es_report thead tr th img {
	float: left;
	width: 100px;
}
.ep_report tbody tr td,
.es_report tbody tr td {
	padding: 0 .5em !important;
	vertical-align: baseline !important;
	white-space: nowrap !important;
}
.ep_report tbody tr td:nth-child(n+2),
.es_report tbody tr td:nth-child(n+2) {
	text-align: right !important;
}
.ep_report tbody tr.rowParent td {
	font-weight: bold;
	background-color: #C8C8C8;
}
.ep_report tbody tr.rowChild td { background-color: #9AC1E6; }
.ep_report tbody tr.rowChild td:first-child {
	padding-left: 1em;
	padding-right: 1em;
	text-indent: 2em;
}
.ep_report thead tr:nth-child(3) th,
.ep_report thead tr:nth-child(4) th {
	border: none !important;
	background-color: #FFD865 !important;
	color: var(--bs-dark);
}
.ep_report thead tr:nth-child(4) th:nth-child(n+2),
.ep_report thead tr:nth-child(5) th {
	background-color: var(--bs-dark) !important;
	color: var(--white-soft) !important;
}
.es_report thead tr:nth-child(3) th {
	background-color: #BF8F00 !important;
	color: var(--bs-dark) !important;
}
.es_report thead tr:nth-child(4) th {
	background-color: #1F4E78 !important;
	color: var(--white-soft) !important;
}
.es_report thead tr:nth-child(4) th:nth-child(3),
.es_report thead tr:nth-child(4) th:nth-child(4),
.es_report thead tr:nth-child(5) th {
	background-color: var(--bs-dark) !important;
	color: var(--white-soft) !important;
}
.ep_report tfoot tr td {
	background-color: #A5A5A5 !important;
	color: var(--white-soft) !important;
}
.ep_report tfoot tr td,
.es_report tfoot tr td {
	font-weight: bold !important;
	text-align: right !important;
	padding: 0 .5em !important;
}
.es_report tfoot tr:first-child td,
.es_report tfoot tr:nth-child(4) td {
	background-color: #A5A5A5 !important;
	color: var(--white-soft) !important;
}
.es_report tfoot tr:first-child td { border-radius: 0 !important; }
.es_report tfoot tr:last-child td:first-child { border-bottom-left-radius: .28571429rem; }
.es_report tfoot tr:last-child td:last-child { border-bottom-right-radius: .28571429rem; }
.es_report tbody tr td:nth-child(20) { color: #FFC107 !important; }
.es_report tbody tr td:nth-child(1),
.es_report tbody tr td:nth-child(2) {
	background-color: #C6E0B4 !important;
}
.es_report tbody tr td:nth-child(3),
.es_report tbody tr td:nth-child(5),
.es_report tbody tr td:nth-child(7) {
	background-color: #1F4E78 !important;
	color: var(--white-soft) !important;
}
.es_report tbody tr td:nth-child(4),
.es_report tbody tr td:nth-child(6),
.es_report tbody tr td:nth-child(8) {
	background-color: #9BC2E6 !important;
	color: var(--bs-dark) !important;
}
.es_report tbody tr td:nth-child(n+9) {
	background-color: #548235 !important;
	color: var(--white-soft) !important;
}
.es_report tbody tr td:first-child { text-align: right !important; }

.pl tbody tr td:not(:has(button)),
.dr tbody tr td:not(:has(button)) {
	padding: 0 .5em !important;
	min-width: 150px !important;
	width: auto !important;
}

tr td.tr-status-1 { background-color: #fff3cd; }
tr td.tr-status-2 { background-color: #cce5ff; }
tr td.tr-status-3 { background-color: #d4edda; }
tr td.tr-status-4 { background-color: #f8d7da; }

#MyTable_dr thead tr th,
#MyTable_inv thead tr th,
#MyTable_or thead tr th {
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: bottom !important;
	background-color: #FFF !important;
}

#MyTable_dr tbody tr td,
#MyTable_inv tbody tr td,
#MyTable_or tbody tr td {
	margin: 0 !important;
	padding: 0 !important;
	background-color: #FFF !important;
	white-space: nowrap !important;
	border-bottom: 1px solid var(--gray-border) !important;
}

#MyTable_dr thead tr:nth-child(1) th input,
#MyTable_inv thead tr:nth-child(1) th input,
#MyTable_or thead tr:nth-child(1) th input {
	min-width: 140px;
	max-width: 140px;
	min-height: 22px;
	max-height: 22px;
	line-height: 1em;
	border: 1px solid var(--gray-border);
}

#MyTable_dr thead tr th h3,
#MyTable_inv thead tr th h3,
#MyTable_or thead tr th h3 { margin: 0 !important; }

#MyTable_dr thead tr:nth-child(2) th {
	max-width: 155px !important;
	min-width: 155px !important;
	background-color: var(--custom-pg7) !important;
	color: var(--white-soft) !important;
}

#MyTable_inv thead tr:nth-child(2) th,
#MyTable_or thead tr:nth-child(2) th {
	max-width: 130px !important;
	min-width: 130px !important;
	background-color: var(--custom-pg7) !important;
	color: var(--white-soft) !important;
}

#MyTable_dr tbody tr td input {
	min-width: 155px;
	max-width: 155px;
	min-height: 22px;
	max-height: 22px;
	line-height: 1em;
	border: none !important;
	text-align: right;
}

#MyTable_inv tbody tr td input,
#MyTable_or tbody tr td input {
	min-width: 130px;
	max-width: 130px;
	min-height: 20px;
	max-height: 20px;
	line-height: 1em;
	border: none !important;
	text-align: right;
}

#MyTable_dr tbody tr:nth-child(15) td,
#MyTable_dr tbody tr:nth-child(15) td input,
#MyTable_inv tbody tr:nth-child(15) td,
#MyTable_inv tbody tr:nth-child(15) td input,
#MyTable_or tbody tr:nth-child(15) td,
#MyTable_or tbody tr:nth-child(15) td input { font-weight: bold !important; }

#MyTable_dr tbody tr.footer2 td:nth-child(3) { padding-left: .25em !important; }
.dr-input-field-1 input{ background-color: var(--highlight-input); }
.dr-input-field-2 input { background-color: #ccc; }

#MyTable_dr .price-container input {
	min-width: 131px !important;
	max-width: 131px !important;
}

#MyTable_inv .price-container input,
#MyTable_or .price-container input {
	min-width: 107px !important;
	max-width: 107px !important;
}

#MyTable_dr input[name="dr_eggtray_pcs"],
#MyTable_inv input[name="dr_eggtray_pcs"],
#MyTable_or input[name="dr_eggtray_pcs"] {
	min-width: 104px !important;
	max-width: 104px !important;
}

#MyTable_dr thead tr:nth-child(1) th:nth-child(1),
#MyTable_inv thead tr:nth-child(1) th:nth-child(1),
#MyTable_or thead tr:nth-child(1) th:nth-child(1) { text-align: left !important; }
#MyTable_dr thead tr:nth-child(1) th:nth-child(2),
#MyTable_dr thead tr:nth-child(1) th:nth-child(4),
#MyTable_inv thead tr:nth-child(1) th:nth-child(2),
#MyTable_inv thead tr:nth-child(1) th:nth-child(4),
#MyTable_or thead tr:nth-child(1) th:nth-child(2),
#MyTable_or thead tr:nth-child(1) th:nth-child(4) { border-left: none !important; }

#MyTable_dr thead tr:nth-child(1) th:nth-child(2),
#MyTable_inv thead tr:nth-child(1) th:nth-child(2),
#MyTable_or thead tr:nth-child(1) th:nth-child(2) { text-align: right !important; }

#MyTable_dr tbody tr:nth-child(16) td { height: 35px; }
#MyTable_dr tbody tr:nth-child(16) td,
#MyTable_inv tbody tr:nth-child(n+16):nth-child(-n+20) td,
#MyTable_inv tbody tr:nth-child(n+16):nth-child(-n+20) td input,
#MyTable_or tbody tr:nth-child(n+16):nth-child(-n+20) td,
#MyTable_or tbody tr:nth-child(n+16):nth-child(-n+20) td input {
	background-color: var(--custom-pg7) !important;
	border: var(--custom-pg7) !important;
	color: var(--white-soft) !important;
	text-align: right !important;
}

#MyTable_dr tbody tr:nth-child(17) td,
#MyTable_dr tbody tr:nth-child(24) td {
	color: #DC3545 !important;
	font-style: italic !important;
	font-weight: bold !important;
	text-align: left !important;
}

#MyTable_inv tbody tr:nth-child(21) td,
#MyTable_inv tbody tr:nth-child(28) td,
#MyTable_or tbody tr:nth-child(21) td,
#MyTable_or tbody tr:nth-child(28) td {
	color: #DC3545 !important;
	font-style: italic !important;
	font-weight: bold !important;
	text-align: left !important;
}

#MyTable_inv tbody tr:nth-child(17) td:nth-child(3) input,
#MyTable_inv tbody tr:nth-child(19) td:nth-child(5) input,
#MyTable_inv tbody tr:nth-child(19) td:nth-child(5) textarea,
#MyTable_or tbody tr:nth-child(17) td:nth-child(3) input,
#MyTable_or tbody tr:nth-child(19) td:nth-child(5) input,
#MyTable_or tbody tr:nth-child(19) td:nth-child(5) textarea {
	margin-right: .25em;
	background-color: var(--highlight-input) !important;
	color: var(--bs-dark) !important;
}

.modal-deliveryReceipt .modal-body,
.modal-invoice .modal-body,
.modal-officialReceipt .modal-body {
	margin: .65em;
	padding: 0;
}

table.receipt tfoot tr:first-child td { height: 25px !important; }

table.receipt tfoot tr td {
	border: 0 !important;
	background-color: #FFF !important;
	text-align: right !important;
}

table.receipt tfoot tr td input {
	min-height: 22px !important;
	max-height: 22px !important;
	line-height: 1em !important;
	border: 0 !important;
	font-weight: bold !important;
}

.other-container textarea { 
	margin-top: .071em;
	min-width: 130px;
	max-width: 130px;
	line-height: 1em;
	border: none;
	resize: none;
}

.price-container, .other-container { width: 100%; display: flex; align-items: center; }
.price-container input { font-weight: bold; }
.peso-sign { padding: 0 .5em; font-size: 1.1em; }

.modal-shipmentDetails { margin-top: 25vh !important;  }
.modal-shipmentDetails .modal-header { 
	background-color: var(--custom-pg7);
	color: var(--white-soft);
}

.tooltip-container {
	position: relative;
	display: inline-block;
}

.tooltip-container .floating-tooltip {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	padding: 6px 10px;
	background-color: var(--bs-dark);
	color: var(--white-soft);
	border-radius: var(--speech-radius);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
	z-index: 1000;
}

.tooltip-container .floating-tooltip::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -11px;
	transform: translateY(-50%);
	border: 6px solid transparent;
	border-right-color: var(--bs-dark);
}

.tooltip-container .floating-tooltip.show { opacity: 1; }

.dt-paging { text-align: center; }
.page-link { border: none; }
.page-link:hover { color: var(--bs-dark); }
.page-link.active {
	font-weight: bold !important;
	border-color: var(--gray-light);
}

.highlighted-row input,
.highlighted-row select {
	background-color: #FFF3CD;
	font-weight: bold;
	transition: background-color 0.3s ease;
}

.chart { 
	width: 100%;
	height: 100%;
	display: block;
	background-color: var(--white-soft); 
}

.chart-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 450px;
	height: 300px;
	padding: 0 .75em;
	border: 1px solid var(--gray-border);
	border-radius: 0.375rem;
	display: inline-block;
	background-color: var(--white-soft);
}

.card .card-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100px;
	width: 200px;
}

.card-subtitle {
	position: absolute;
	top: 0.75rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	width: 100%;
}

.card-title {
	font-weight: 600;
	margin: auto 0;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.card-body p {
	position: absolute;
	bottom: 0.75rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-size: 0.9rem;
}

.card-text { font-size: 1rem; }

canvas.sparkline {
    width: 100% !important;
    height: 60px !important;
}

.card-body-batch {
	position: relative; 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	padding: .25em;
	height: auto; 
	width: 200px;
}
.card-subtitle-batch { position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%); } 
.card-title-batch { padding: .5em 0; font-weight: 600; } 
.card-text-batch { font-size: 1rem; }

.section-header {
	background-color: #6c757d;
	color: #fff;
	border-radius: 0.375rem;
	padding: 0.35rem 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
	min-height: 38px;
	transition: background-color 0.2s ease;
}
.section-header:hover { background-color: #5c636a; }
.section-header h1 { font-size: 1rem; margin: 0; }
.section-header .toggle-icon { transition: transform 0.25s ease; }
.section-header.collapsed .toggle-icon,
.section-header .toggle-icon.rotated { transform: rotate(-90deg); }

#settings-accordion, .table-container { width: 600px; }
.badge { vertical-align: middle; }

.btn-success .checkmark { display: inline-block; opacity: 0; transform: scale(0); transition: opacity 0.3s ease, transform 0.3s ease; }
.btn-success.show-check .checkmark { opacity: 1; transform: scale(1); }

.modal-spinner,
.chart-spinner,
.table-spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid var(--bs-secondary);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	animation: spin 1s linear infinite;
	margin: auto;
    position: absolute;
    transform: translate(-50%, -50%);
	z-index: 10;
}

.modal-spinner {
    top: 42%;
	left: 50%;
}

.chart-spinner {
    top: 42%;
	left: 47%;
}

.table-spinner {
	top: 50%;
    left: calc(50% + 105px);
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
	.content {
		min-width: 100vw;
	}
}

#paid-image {
	position: absolute;
	top: 3%;
	left: 25%;
	transform: rotate(-25deg);
}

.speech-bubble { position: relative; }
.speech-bubble::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 5px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
}
.speech-bubble::after {
    content: "";
    position: absolute;
    left: -15px;
    top: 5px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent var(--gray-border) transparent transparent;
}