/* @import 'sassy-inputs/sass/main'; */

/* 
  These are the custom styles for Yusen's theme. Please refer to https://www.figma.com/file/iGJcMcsknG90mOa4CUr7bm/gs-yusen-library?node-id=2238-151914&t=L5IplyppLtoIgPab-0
  for more information about the styles.

  Note that all styles contained in the linked document above shall be defined as css variables on the :root tag.
  Always use one of the CSS variables for ANY of the parameters defined in the above design document. Only use
  custom styles for items not defined in the document.
*/

/* TODO: remove bold for input */

:root {
	--yusen-dark-blue: #06183d;
	--yusen-white: #fff;
	--yusen-grey: #ccc;
	--yusen-grey-10-tint: #e6e6e6;
	--yusen-blue-grey: #98a3b1;
	--yusen-dark-grey: #5c6579;
	--yusen-grey-dark-blue: #9ba3b1;
	--yusen-orange: #ff6d10;
	--yusen-green: #458d8c;
	--yusen-yellow: #ffc933;
	--yusen-red: #d32f2f;
	--yusen-warning-darken-1: #b28d24;
	--yusen-warning-lighten-2: #fff4d6;
	--yusen-table-header-color: #f1f2f4;
	--yusen-button-grey: #808080;

	font-family: Arial, Helvetica, sans-serif;
	/* Borders */
	--border-radius-xs: 4px;
	--border-radius-sm: 6px;
	--border-radius: 8px;
	--border-radius-lg: 12px;
	--border-radius-xl: 16px;
	--border-radius-xxl: 24px;

	--border-radius-circle: 50%;

	/* spacing */
	--spacer-2: 0.5rem;
	--spacer-1: 0.25rem;
	--spacer-4: 1.5rem;
	--spacer-3: 1rem;
	--spacer-6: 4.5rem;
	--spacer-5: 3rem;

	/* Colors -- Brand Primary */
	--color-brand-primary-darken-5: #030c1e;
	--color-brand-primary-darken-4: #040f25;
	--color-brand-primary-darken-3: #04112a;
	--color-brand-primary-darken-2: #051331;
	--color-brand-primary-darken-1: #051737;
	--color-brand-primary: var(--yusen-dark-blue);
	--color-brand-primary-lighten-1: #202f50;
	--color-brand-primary-lighten-2: #384664;
	--color-brand-primary-lighten-3: #515d76;
	--color-brand-primary-lighten-4: #6a748b;
	--color-brand-primary-lighten-5: #828b9d;
	--color-brand-primary-lighten-6: #b4bac5;
	--color-brand-primary-lighten-7: #1e35541f;

	/* Colors -- Brand Secondary */
	--color-brand-secondary-darken-5: #4d2105;
	--color-brand-secondary-darken-4: #803609;
	--color-brand-secondary-darken-3: #b34c0a;
	--color-brand-secondary-darken-2: #cc560e;
	--color-brand-secondary-darken-1: #e6620f;
	--color-brand-secondary: var(--yusen-orange);
	--color-brand-secondary-lighten-1: #ff7c29;
	--color-brand-secondary-lighten-2: #ff8a40;
	--color-brand-secondary-lighten-3: #ff9958;
	--color-brand-secondary-lighten-4: #ffa770;
	--color-brand-secondary-lighten-5: #ffb687;
	--color-brand-secondary-lighten-6: #ffc59f;

	/* Colors -- Brand Tertiary */
	--color-brand-tertiary-darken-5: #0e3b49;
	--color-brand-tertiary-darken-4: #18627a;
	--color-brand-tertiary-darken-3: #3189ab;
	--color-brand-tertiary-darken-2: #269dc3;
	--color-brand-tertiary-darken-1: #2ab0dc;
	--color-brand-tertiary: #2fc4f4;
	--color-brand-tertiary-lighten-1: #44caf5;
	--color-brand-tertiary-lighten-2: #59d0f6;
	--color-brand-tertiary-lighten-3: #6dd6f7;
	--color-brand-tertiary-lighten-4: #82dcf8;
	--color-brand-tertiary-lighten-5: #96e1f9;
	--color-brand-tertiary-lighten-6: #ace7fb;

	/* Colors -- Neutral */
	--color-neutral-1: #f8f9fa;
	--color-neutral-2: #e9ecef;
	--color-neutral-3: #dee2e6;
	--color-neutral-4: #ced4da;
	--color-neutral-5: #adb5bd;
	--color-neutral-6: #6c757d;
	--color-neutral-7: #495057;
	--color-neutral-8: #343a40;
	--color-neutral-9: #212429;
	--color-neutral-10: #000000;

	/* Colors -- Accent */
	--color-accent-1: #4cafe6;
	--color-accent-1-lighten: #d9ecfa;
	--color-accent-2: #68ba8f;
	--color-accent-2-lighten: #e1f1e9;
	--color-accent-3: #5f60aa;
	--color-accent-3-lighten: #dfdfee;
	--color-accent-4: #f8c959;
	--color-accent-4-lighten: #fef4de;
	--color-accent-5: #bc23eb;
	--color-accent-5-lighten: #f6daff;
	--color-accent-6: #1be4b5;
	--color-accent-6-lighten: #defff7;

	/* Colors -- Action Primary */
	--color-action-primary-default: #1e3554;
	--color-action-primary-active: var(--color-brand-primary-darken-2);
	--color-action-primary-hover: var(--color-brand-primary-lighten-2);
	--color-action-primary-disabled: var(--color-brand-primary-lighten-5);
	--color-action-primary-inverted-disabled: #fff;
	--color-action-primary-inverted-hover: #fff;

	/* Colors -- Action Secondary */
	--color-action-secondary-default: var(--color-brand-secondary);
	--color-action-secondary-active: var(--color-brand-secondary-darken-2);
	--color-action-secondary-hover: var(--color-brand-secondary-lighten-2);
	--color-action-secondary-disabled: var(--color-brand-secondary-lighten-5);
	--color-action-secondary-inverted-disabled: #fff;
	--color-action-secondary-inverted-hover: #fff;
	--color-secondary-secondary: #6b6c7e;

	/* Colors -- Action Neutral */
	--color-action-neutral-default: var(--color-neutral-8);
	--color-action-neutral-active: var(--color-neutral-9);
	--color-action-neutral-hover: var(--color-neutral-6);
	--color-action-neutral-disabled: var(--color-neutral-5);
	--color-action-neutral-inverted: #fff;
	--color-action-neutral-hover-lighten: #fff;

	/* Colors -- States */
	--color-state-info-darken-2: #162d55;
	--color-state-info-darken-1: #244481;
	--color-state-info: var(--color-brand-primary);
	--color-state-info-lighten-1: #8ca4d1;
	--color-state-info-lighten-2: #eef2fa;
	--color-state-success-darken-2: #25561f;
	--color-state-success-darken-1: #38802b;
	--color-state-success: var(--yusen-green);
	--color-state-success-lighten-1: #9bd193;
	--color-state-success-lighten-2: #edf7eb;
	--color-state-warning-darken-2: #703600;
	--color-state-warning-darken-1: var(--yusen-warning-darken-1);
	--color-state-warning: var(--yusen-yellow);
	--color-state-warning-lighten-1: #eeae73;
	--color-state-warning-lighten-2: var(--yusen-warning-lighten-2);
	--color-state-error: var(--yusen-red);
	--color-state-error-lighten-2: #feefef;

	/* Colors -- Chart */
	--color-chart-0: var(--color-accent-1);
	--color-chart-1: var(--color-accent-2);
	--color-chart-2: var(--color-accent-3);
	--color-chart-3: var(--color-accent-4);
	--color-chart-4: var(--color-accent-5);
	--color-chart-5: var(--color-accent-6);
	--color-chart-7: var(--color-brand-primary);
	--color-chart-8: var(--color-brand-secondary);
	--color-chart-9: var(--color-brand-tertiary);
	--color-chart-10: #344965;
	--color-chart-11: #da1414;
	--color-chart-12: var(--color-brand-tertiary-darken-4);

	/* Colors -- Pagination */
	--pagination-items-per-page: #2b3a4b;
	--pagination-results: #716c7f;

	/* Colors -- Customize for Table */
	--table-row-background-color-on-hover: #f5f5f5;

	/* Colors -- Global */
	--color-focus: var(--color-accent-1);
	--link-visited-color: #2f698a;
	--color-selected: #5924eb;
	--color-selected-bg: #fff;

	/* Elevation */
	--elevation-tight-1: 0 1px 3px;
	--elevation-tight-2: 0 1.25px 4px;
	--elevation-tight-3: 0 2px 6px;
	--elevation-tight-4: 0 2px 7px;
	--elevation-tight-5: 0 3px 12px;
	--elevation-tight-6: 0 3.5px 14px;
	--elevation-tight-7: 0 7px 18px;
	--elevation-tight-8: 0 12px 28px;
	--elevation-tight-9: 0 13px 36px;

	--elevation-fluffy-1: 0 5px 15px;
	--elevation-fluffy-2: 0 6.25px 20px;
	--elevation-fluffy-3: 0 10px 30px;
	--elevation-fluffy-4: 0 10px 35px;
	--elevation-fluffy-5: 0 15px 60px;
	--elevation-fluffy-6: 0 17.5px 70px;
	--elevation-fluffy-7: 0 35px 90px;

	--hr-border-color: var(--color-neutral-4);

	--form-input-height: 48px;
	--text-muted: var(--color-neutral-7);
	--form-input-disabled-border-color: var(--color-neutral-2);

	--form-feedback-item-font-weight: 400;
	--container-max-xl: 1440px;
	--border: 1px solid var(--color-neutral-4);

	--btn-default-color: var(--color-brand-secondary);
	--btn-border-radius: var(--border-radius-xs);
	--card-elevated-box-shadow: 0px 1px 12px 0px
		var(--color-brand-primary-lighten-7);
	--card-border-radius: 4px;

	--secondary: var(--color-brand-secondary);

	/* Text - 1440px and 1280px */
	--shipment-content-label-1440: 13px;
	--shipment-content-label-1280: 11px;

	--z-index-sticky: 5;
}

label .reference-mark {
	color: #b95000;
	font-size: 6px;
	top: 5px !important;
}

.alert,
.portlet-msg-alert,
.portlet-msg-error,
.portlet-msg-help,
.portlet-msg-info,
.portlet-msg-progress,
.portlet-msg-success {
	border-color: transparent;
	border-style: solid;
	border-width: 0.0625rem;
	border-radius: var(--form-feedback-item-border-radius);
	display: block;
	margin-bottom: var(--form-feedback-item-margin);
	padding: var(--form-feedback-item-padding);
	font-size: var(--form-feedback-item-font-size);
	font-weight: var(--form-feedback-item-font-weight);
	line-height: var(--form-feedback-item-line-height);
	position: relative;
	white-space: normal;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.center-content.fade.modal.show {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.modal-lg {
	max-width: 1000px;
	width: 90vw;
}

.modal.doc-request-modal .modal-lg {
	max-width: 700px !important;
	width: 70vh !important;
}

.modal .modal-info .close {
	color: var(--color-neutral-1);
}

.modal-body {
	max-height: 80vh;
	overflow-y: unset;
}

.modal-dialog-centered .modal-dialog,
.modal-dialog-centered.modal-dialog {
	min-height: unset;
}

.btn {
	font-weight: var(--font-weight-bold);
}

.input-icon {
	position: absolute;
	color: var(--form-input-placeholder-color);
	right: var(--form-input-padding-x);
	bottom: var(--form-input-padding-y);
	z-index: 20;
}

.btn-edit {
	border: 1px solid var(--color-action-primary-default, #1e3554);
}

.btn-warning {
	background-color: var(--color-state-warning);
	border-color: var(--color-state-warning);
	color: var(--color-neutral-0);
	font-weight: var(--font-weight-bold);
}

.btn-warning:hover {
	color: var(--color-neutral-2);
	font-weight: var(--font-weight-bold);
}

.custom-control-label {
	color: var(--custom-control-label-color);
	cursor: pointer;
	font-size: var(--form-input-label-font-size);
	font-weight: var(--custom-control-label-font-weight);
	line-height: var(--custom-control-label-line-height);
	margin-bottom: 0;
	position: static;
	vertical-align: top;
}

body .user-avatar-link .panel-notifications-count {
	right: calc(100% - 1rem);
	top: 0.6rem;
}

.pagination .page-link {
	line-height: 1.5;
}

.pagination .page-item.active .page-link {
	background-color: var(--color-neutral-0);
	border-color: inherit;
	color: inherit;
	box-shadow: none;
}

.pagination .page-item.active .page-link::before {
	background-color: var(--color-neutral-0);
}

.pagination .pagination-results {
	color: var(--pagination-results);
}

.pagination .pagination-items-per-page {
	color: var(--pagination-items-per-page);
}

.pagination-items-per-page > button[aria-expanded='true'],
.pagination-items-per-page > button.show {
	box-shadow: none;
}

.pagination-items-per-page > button:hover,
.pagination-items-per-page > button.hover {
	box-shadow: none;
}

.pagination .page-link:hover,
.pagination > .page-link:hover {
	box-shadow: none;
}

.pagination-items-per-page button {
	box-shadow: none;
}

.validation-input-error {
	border-style: solid;
	border-width: 2px;
	border-color: var(--color-chart-11);
}

.validation-message-error {
	color: var(--color-chart-11);
}

.validation-message-success {
	color: var(--neutral-06, #6c757d);
}

.approval-message,
.fetch-message {
	font-size: 1.25rem;
	font-weight: var(--font-weight-bold, 700);
	line-height: 1.5;
}

.ys-custom-wg {
	.portlet-boundary_com_liferay_account_admin_web_internal_portlet_AccountEntriesManagementPortlet_
		.portlet-content-container {
		.navbar-collapse .container-fluid {
			.navbar-nav .nav-item {
				visibility: hidden;
				max-width: 0px;
			}
		}
	}
}

.lfr-layout-structure-item-com-liferay-site-navigation-language-web-portlet-sitenavigationlanguageportlet
	.portlet
	.autofit-float.autofit-row.portlet-header,
.portlet-navigation .portlet .autofit-float.autofit-row.portlet-header {
	display: none;
}

.lfr-layout-structure-item-com-liferay-site-navigation-language-web-portlet-sitenavigationlanguageportlet
	.portlet
	.portlet-content {
	padding: 0px;
}

.dropdown-menu {
	max-height: 40vh;
}

.dropdown-menu.date-picker {
	max-height: unset;
}

.pagination-bar {
	padding-top: 30px;
}

html {
	scrollbar-gutter: stable;
}

::-webkit-scrollbar {
	height: 10px;
	width: 10px;
}

::-webkit-scrollbar-thumb {
	background: var(--color-neutral-3);
	border-radius: 5px;
}

::-webkit-scrollbar-track {
	background-color: var(--color-neutral-1);
	box-shadow: inset 0 0 1px var(--color-neutral-5);
	border-radius: 5px;
}

.collapsing-side-panel {
	transition:
		transform ease 500ms,
		box-shadow ease 500ms,
		width ease 500ms;
	transform: translateX(100%);
}

.collapsing-side-panel.is-visible {
	box-shadow: -10px 20px 30px rgba(39, 40, 51, 0.15);
	transform: translateX(0);
}

.btn-xs {
	font-size: var(--btn-sm-font-size);
	padding-bottom: calc(var(--btn-sm-padding-y) + 1.7px);
	padding-left: var(--btn-sm-padding-x);
	padding-right: var(--btn-sm-padding-x);
	padding-top: calc(var(--btn-sm-padding-y) + 1.7px);
}

.header-heading-margin > h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

.has-control-menu .header-heading-margin {
	top: 56px;
}

.bg-lighter {
	background-color: var(--lighter);
}

.nav-link {
	border-radius: var(--btn-border-radius);
}

.menubar-vertical-expand-md.menubar-transparent .nav-link {
	border-radius: var(--btn-border-radius);
}

.table-hover tbody tr:hover th,
.table-hover tbody tr:hover td {
	background-color: var(--table-row-background-color-on-hover);
}

.date-picker-dropdown-toggle {
	color: var(--form-input-placeholder-color) !important;
}

.personal-menu-dropdown.lfr-tooltip-scope .btn:focus {
	box-shadow: none;
}

.form-control-sm {
	border-radius: var(--form-input-border-radius);
}

.form-control-lg {
	border-radius: var(--form-input-border-radius);
}

.cursor-pointer {
	cursor: pointer;
}

.alert-warning,
.alert-warning .lead,
.alert-warning .close {
	color: var(--color-state-warning-darken-1);
}

.header-alert-revise > .alert > .container > .autofit-row.alert-autofit-row {
	@media (max-width: 850px) {
		width: 50%;
	}

	align-items: baseline;
	margin-left: auto;
	margin-right: auto;
	width: max-content;
}

.alert-fluid .container {
	padding-bottom: 10px;
	padding-top: 10px;
	padding-left: 8px;
	padding-right: 8px;
}

.border {
	border: var(--border) !important;
}

.border-top {
	border-top: var(--border) !important;
}

.border-bottom {
	border-bottom: var(--border) !important;
}

.border-left {
	border-left: var(--border) !important;
}

.border-right {
	border-right: var(--border) !important;
}

.input-group-text {
	background-color: var(--form-input-background-color);
	border-color: var(--form-input-border-color);
}

.label-small {
	font-size: 14px;
}

.modal-title {
	font-size: 18px;
	color: var(--yusen-white);
	font-weight: var(--font-weight-bold);
}

.modal-info .modal-header {
	background-color: var(--color-state-info);
}

.modal-warning .modal-header {
	background-color: var(--yusen-red);
}

.modal-warning .modal-header .close {
	color: var(--yusen-white);
}

.modal-content {
	max-height: 90vh;
}

.no-background .modal-content {
	background-color: unset !important;
	border-radius: unset !important;
	border: unset !important;
	box-shadow: unset !important;
}

.pagination-items-per-page {
	margin-bottom: 0;
}

.pagination-results {
	margin-bottom: 0;
}

.pagination {
	margin-bottom: 0;
}

.modal-header {
	height: 56px;
}

.table-responsive {
	margin-bottom: unset;
}

.modal-backdrop {
	z-index: 998;
}

.modal {
	z-index: 999;
}

input:placeholder-shown {
	text-overflow: ellipsis;
}

#user-menu {
	padding-left: 6px;
}

.modal-danger .modal-header {
	background-color: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
	color: var(--color-brand-primary);
}

.modal-danger .modal-header .close {
	color: var(--yusen-white);
}

.btn-danger {
	background-color: transparent;
	border-color: var(--color-state-error);
	color: var(--color-state-error);
}

.btn-danger:hover {
	border-color: var(--color-state-error-lighten-2);
	color: var(--color-state-error-lighten-2);
}

.btn-danger:disabled,
.btn-primary:disabled,
.btn-primary:disabled:hover {
	background-color: var(--color-action-primary-disabled);
	border-color: var(--color-action-primary-disabled);
	color: var(--yusen-white);
	cursor: not-allowed;
	opacity: 0.7;
}

.btn-confirmation {
	background-color: transparent;
	border-color: var(--color-state-info);
	color: var(--color-state-info);
}

.btn-confirmation:hover {
	border-color: var(--color-state-info-lighten-2);
	color: var(--color-state-info-lighten-2);
}

.nav-link.active::before {
	background-color: var(--color-brand-secondary) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--color-brand-secondary);
	border-color: var(--color-brand-secondary);
}

.custom-control-input[disabled] ~ .custom-control-label::before,
.custom-control-input:disabled ~ .custom-control-label::before {
	border-color: var(--color-neutral-5);
}

.form-control {
	border-radius: var(--border-radius-xs);
}

.input-group-text,
.input-group-item > .input-group-inset-item.input-group-inset-item-after {
	border-top-right-radius: var(--border-radius-xs);
	border-bottom-right-radius: var(--border-radius-xs);
}

.input-group-prepend {
	.form-control {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}

.input-group-append {
	.form-control {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}

.alert-notifications .alert {
	padding-right: 36px;
}

.input-group-sm .form-control {
	border-radius: var(--border-radius-sm);
}

.input-group-sm > .input-group-item > .input-group-text {
	border-radius: var(--border-radius-sm);
}

.yusen-list-table {
	width: 100%;

	.list-group-header,
	.list-group-item {
		border-radius: 0;
	}

	.list-group-header-title {
		color: black;
		text-transform: none;
		font-size: 16px;
		line-height: 1.5;
		font-weight: bold;
	}

	.list-group-text {
		color: black;
	}

	.list-group-item {
		display: flex;
		flex-direction: column;
		row-gap: 16px;
	}

	ul {
		list-style-type: disc;
		padding-inline-start: 16px;
		margin: 0;
	}

	label > .reference-mark {
		top: -2px !important;
	}
}

.custom-dropdown-button {
	padding: 12px 15px;
	font-weight: bold;
	font-size: 1rem;
	text-align: left;

	&.custom-border-bottom {
		border-bottom: 1px solid var(--color-brand-primary);
	}
}

.shipment-content-page .custom-dropdown-button {
	min-width: 190px;
}

pre > code {
	color: whitesmoke;
}

/* PRINTING */

.print-view-only,
.override-print-view-only {
	display: none;
	visibility: hidden;
}

@media print {
	body {
		visibility: hidden;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		size: A4;
	}

	.succes-page-div {
		visibility: visible;
		display: initial;
		position: absolute;
		top: 0;
		left: 10rem;

		button {
			visibility: visible !important;
		}
	}

	.print-div {
		visibility: visible;
		display: initial;
		position: absolute;
		top: 0;
		left: 0;
	}

	button {
		visibility: hidden;
	}

	booking-booking-record .override-hide-in-print,
	.hide-in-print {
		visibility: hidden;
		display: none;
	}

	booking-booking-record .override-print-view-only,
	.print-view-only {
		display: unset;
		visibility: visible;
	}

	.pagebreak {
		clear: both;
		min-height: 1px;
		page-break-after: auto;
		page-break-inside: avoid;
		page-break-before: auto;
	}

	.print-box {
		padding: 1em;
		border: 0.01em solid var(--color-neutral-3);
	}

	.print-involved-parties {
		flex: 0 0 calc(1 / 3 * 100%);
		max-width: calc(1 / 3 * 100%);
	}

	.print-basic-information {
		flex: 0 0 calc(1 / 2 * 100%);
		max-width: calc(1 / 2 * 100%);
	}

	.lfr-layout-structure-item-container:first-child {
		display: none !important;
	}

	booking-booking-record {
		--border-divider-print: 1pt solid var(--color-neutral-3);

		& img {
			height: 45px;
			width: auto !important;
		}
		& .text-9 {
			font-size: 14px;
			margin-bottom: 0px;
		}
		& .text-7,
		& .text-4 {
			font-size: 13px;
		}

		& .mb-5 {
			column-gap: 20px !important;
			margin-bottom: 20px !important;
			grid-template-columns: 2.75fr 9.25fr !important;
		}

		& .print-div .mb-5 > .autofit-col:last-of-type {
			display: none !important;
		}

		& .font-heading-4 {
			font-size: 14px;
			line-height: 14px;
		}

		& .print-div {
			padding: 36px !important;
			min-width: unset !important;
			max-width: unset !important;
			width: 100vw !important;

			& section {
				margin-top: 36px !important;
				margin-bottom: 0px !important;

				& .mb-3 {
					margin-bottom: 8px !important;
				}

				& .print-box {
					border: none;
					row-gap: 8px !important;
					padding: 0px;

					& .col-lg-6 {
						flex: 0 0 calc(4 / 12 * 100%) !important;
						max-width: calc(4 / 12 * 100%) !important;
					}

					& .card-body {
						padding: 0px !important;

						& label {
							font-size: 12px;
							margin-bottom: 0px !important;
						}

						& div {
							margin-top: 0px !important;
							margin-bottom: 0px !important;
							padding: 0px !important;
							border: none !important;

							& .text-7 {
								font-size: 14px !important;
							}
						}

						& .autofit-row {
							padding-top: 0px !important;
							gap: 10px !important;

							& .autofit-col {
								padding: 0px !important;
								border: none !important;
							}

							& .display-total .font-p-large {
								font-size: 12px;
							}

							& .display-total sup {
								font-size: 12px !important;
							}
						}

						& .component-separator {
							padding-bottom: 2px !important;
							margin-bottom: 2px !important;
						}

						& .autofit-col {
							row-gap: 4px !important;
							margin-top: 4px !important;
						}

						& .autofit-col .text-4 {
							font-size: 12px;
						}

						& .page-break .autofit-col .autofit-col .text-4 {
							font-size: 12px !important;
						}

						& .autofit-col-gutters {
							margin-right: 0px !important;
						}

						& .lexicon-icon-geolocation {
							fill: var(--color-secondary-secondary);
						}

						& .yusen-list-table {
							padding: 0px;
							margin-bottom: 10px !important;

							& .list-group-header {
								background-color: transparent;
								padding: 0px;
								border: none;
								padding-bottom: 4px;

								& .list-group-header-title {
									font-size: 12px;
								}
							}

							& .list-group-text {
								font-size: 12px;
							}

							& .list-group-item {
								padding: 0px;
								border: none;
								row-gap: 10px;

								& .table {
									row-gap: 10px;
								}

								& .table thead td {
									padding: 5px 0px 5px 0px;
									font-size: 12px;
									height: 29px;
								}

								& .table tbody td {
									padding: 5px 0px 5px 0px;
									font-size: 12px;
									height: 29px;
									border-top: var(--border-divider-print);
									border-bottom: none;
								}

								& .table td:nth-of-type(2) {
									padding-left: 0px;
								}
							}
						}

						& .autofit-col {
							& .autofit-row {
								gap: 0px !important;
								column-gap: 4px !important;
								margin-bottom: 0px !important;

								& .border {
									border: none !important;
								}
								& .display-total {
									padding: 0px !important;

									& .label-small {
										line-height: 10px;
										margin: 0px !important;
										border-bottom: var(--border-divider-print);
										padding-bottom: 4px;
									}
								}

								& .font-p-large {
									font-size: 12px;
									line-height: 12px;

									& sup {
										font-size: 12px !important;
										line-height: 12px;
									}
								}

								& > span {
									padding: 2px 4px !important;
									font-size: 12px !important;
								}
							}
						}

						& .document-upload-list {
							margin-bottom: 0px !important;
							margin-top: 0px !important;

							& main p {
								font-size: 12px !important;
								padding: 5px 0px !important;
							}

							& label {
								padding: 0px;
							}
						}

						& .document-upload-list .list-header {
							padding: 4px 0px;
							background-color: unset;
							column-gap: 10px;
						}

						& .document-upload-list .list-item {
							padding: 2px 0px !important;
							border-top: var(--border-divider-print) !important;
							border-bottom: none;
							font-size: 12px;
						}

						& .document-upload-list .list-item a {
							color: var(--color-brand-primary) !important;
							text-decoration: none;
							padding: 0px !important;
						}

						& .print-booking-option-col {
							padding-left: 12px !important;
							padding-right: 12px !important;
							width: 50%;

							&.last .autofit-col:nth-child(2) {
								margin-top: 12px !important;
							}
						}
					}

					& .section-header {
						margin-bottom: 0px !important;
					}

					& .row .col-1 {
						display: none !important;
					}
				}

				& .print-box .override-print-view-only .excel-table {
					width: 100%;
					table-layout: fixed;

					& tbody tr {
						column-gap: 4px;

						&:first-child {
							border-top: none !important;
						}

						&:has(td.category-header),
						td.child-top-divider {
							border-top: var(--border-divider-print);
						}

						& td {
							font-size: 12px;
							font-weight: 700;
							padding: 4px 0px;
						}

						& .category-header {
							width: 20%;
							font-weight: bold;
							vertical-align: top;
						}

						& .detail-label {
							padding-left: 12px !important;
							width: 40%;
							font-weight: bold;
							min-width: 150px;
							vertical-align: top;
						}

						& .value-cell {
							font-weight: 400;
							padding-left: 12px !important;
							width: 40%;
							white-space: pre-line;
							flex-wrap: wrap;
							padding: 2px 0;
							line-height: 19px;
						}

						& .order-ref {
							padding: 1px 8px;
							border: 1pt solid var(--color-neutral-6);
							border-radius: 4px;
							color: var(--color-neutral-6);
							font-size: 12px;
							margin: 2px 4px 2px 0;
							white-space: nowrap;
							word-break: keep-all;
						}
					}
				}
			}

			& section:last-of-type {
				margin-bottom: 1.5rem !important;
			}

			& .print-view-only .autofit-col {
				font-size: 12px;
			}

			& #section-basic-information {
				& .yusen-list-table {
					& .list-group-header {
						& .list-group-header-title {
							margin-top: 2px;
						}
					}
				}
			}

			& #section-cargo-details {
				& .print-box {
					& .card-body {
						& .autofit-col .font-weight-bold {
							padding: 5px 0px 1px 0px !important;
							border-bottom: var(--border-divider-print) !important;
						}
						& .border .label-small {
							padding-bottom: 4px !important;
							border-bottom: var(--border-divider-print) !important;
						}

						/* & .autofit-row .autofit-col {
							width: calc(50% - 6px) !important;
						} */

						& .autofit-row .autofit-col .yusen-list-table {
							& .table {
								border-collapse: separate !important;
								border-spacing: 0px 1px !important;
							}

							& .list-group-item {
								& .table thead tr,
								& .table thead td {
									border-bottom: var(--border-divider-print) !important;
									border-top: none;
									height: 29px;
								}

								& .table tbody td {
									border: none !important;
									padding-right: 5px;
									vertical-align: top;
								}
							}
						}

						& .autofit-col .yusen-list-table {
							& .table {
								border-collapse: separate !important;
								border-spacing: 0px 1px !important;
							}

							& .table.package-details-table-review {
								td {
									width: 25%;
								}
							}

							& .table.package-details-table-review.with-dgunit {
								td {
									width: 20%;
								}
							}
						}

						& .total-container-package-detail.autofit-row {
							gap: 0 !important;
						}

						& .cargo-details-review-card-right.autofit-col {
							margin-left: calc(var(--spacer-3, 1rem) * 0.9);
							margin-top: 5px !important;
						}
					}
				}
			}
		}

		.print-div
			section
			.print-box
			.print-basic-information
			.card-body
			.yusen-list-table
			.list-group-item {
			row-gap: 2px;
		}

		.override-print-view-only.alert-additional-service-disclaimer {
			.alert {
				padding-left: 0;
				font-size: 12px;
			}

			.alert-warning {
				background-color: unset;
			}

			.alert-fluid .container {
				padding-left: 0;
			}
		}
	}
}

@page {
	margin: 0.8cm;
}

/* END PRINTING */
/* CANCELLATION MODAL */
.cancelation-modal-body .custom-control-label {
	font-size: 13px !important;
}

.booking-no-column {
	&::after {
		content: '';
		height: 3rem;
		border-right: 1px solid;
		border-color: var(--color-neutral-5, #adb5bd);
		position: absolute;
		right: 0;
	}
}

.section-empty-wrapper {
	.c-empty-state {
		max-width: unset;
		margin: 1.5rem auto;

		.c-empty-state-image {
			width: 100px;
			margin: 0 auto;
		}

		.c-empty-state-title {
			font-size: 1rem;
		}
	}
}

.booking-footer-secondary:hover {
	border-color: var(--yusen-orange);
	background-color: initial;
	color: var(--yusen-orange);
}

.booking-footer-primary:hover {
	border-color: var(--yusen-orange);
	background-color: var(--yusen-orange);
	color: white;
}

.booking-footer-secondary-loading:hover,
.booking-footer-primary-loading:hover {
	cursor: progress;
}

.booking-footer-secondary-loading:disabled {
	color: var(--yusen-white);
	border-color: var(--yusen-white);
}

.booking-footer-primary-loading:disabled {
	border-color: var(--yusen-white);
	background-color: var(--yusen-white);
	color: var(--color-brand-primary);
}

.booking-footer-secondary-loading:disabled button,
.booking-footer-primary-loading:disabled button {
	pointer-events: none;
}

.booking-header-text {
	display: flex;
	flex-direction: row;
	column-gap: 0.5em;
	align-items: center;
	justify-content: center;
	color: var(--color-neutral-6);
}

.dropdown-item > strong.mark {
	all: revert;
}

.tooltip-wrapper-align-left .tooltip-inner {
	text-align: left;
	padding-left: 1.5rem;
}

span.max-3-line {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* FLCYC2304-1002: Fix Clay CSS issue on transparent background on different OS(Windows - Ubuntu) */

select.form-control option {
	background: rgb(5, 19, 49) !important;
	cursor: pointer;
	text-transform: uppercase !important;
	border: none;
	color: white;
	font-weight: 700;
	text-align: end;
}

@font-face {
	font-family: 'Akkurat';
	src: url('Akkurat.ttf') format('truetype');
	font-weight: normal;
}

@font-face {
	font-family: 'Akkurat';
	src: url('Akkurat-Bold.ttf') format('truetype');
	font-weight: bold;
}

/* FLCYC2304-1272: To keep tabs and action btns of documents widget same*/

.custom-tabs > li {
	button {
		font-size: var(--btn-sm-font-size);
		padding-bottom: calc(var(--btn-sm-padding-y) + 3px) !important;
		padding-left: var(--btn-sm-padding-x);
		padding-right: var(--btn-sm-padding-x);
		padding-top: var(--btn-sm-padding-y);
	}

	button.active {
		padding-bottom: calc(var(--btn-sm-padding-y) + 2px) !important;
	}
}

div[role='toolbar'] .form-group {
	margin-bottom: 0 !important;
}

.show-more-less-filter {
	display: inherit;
	float: left;
	color: var(--color-action-primary-default, #1e3554);
	padding: 3px 6px !important;
	width: 100% !important;
}

/* For pending task widget */
.pending-task-view-main {
	box-shadow: var(--box-shadow);
	padding: 24px;
	flex: 1;
}

.pending-task-view-main .pending-tasks.management-toolbar-container {
	padding: 0;
	margin: 0;
}

.pending-task-view-main .btn-icon-filter {
	color: #adb5bd;
	padding: 0;
	box-shadow: none;
}

.pending-task-view-main .btn-apply-filter {
	padding: 3px 12px;
	margin-top: 0px;
}

.pending-task-view-main
	.pending-tasks.management-toolbar-container
	.inline-item-before {
	margin-right: 16px;
}

.pending-task-view-main
	.pending-tasks.management-toolbar-container
	.btn-icon-filter-active {
	color: var(--color-action-primary-default, #1e3554);
}

.pending-task-view-main .total-pending-tasks {
	font-size: 37px;
	color: #06183d;
	font-weight: 700;
}

.pending-task-view-main .total-pending-tasks-label {
	font-size: 13px;
	color: #6c757d;
	font-weight: 700;
}

.statusview-container .panel-unstyled {
	margin-bottom: 0;
}

.recharts-pie-labels {
	width: 76px;
	height: 56px;
}

.recharts-legend-item {
	padding: 4px 0;
}

.recharts-tooltip-wrapper {
	z-index: 1000;
}

.rounded-full {
	border-radius: 9999px;
}

.w-3 {
	width: 0.75rem;
}

.h-3 {
	height: 0.75rem;
}

.mr-2 {
	margin-right: 0.5rem;
}

.p-0 {
	padding: 0;
}

.list-none {
	list-style-type: none;
}

.items-center {
	align-items: center;
}

.cursor-pointer {
	cursor: pointer;
}

.flex-1 {
	flex: 1;
}

.container-padding {
	padding: 0.75rem 1.5rem;
}