:root {
	--font-family--: "Inter", sans-serif;
	/* Base */
	--color-primary--: rgba(25, 50, 86, 1);
	--color-primary-bold--: rgba(34, 61, 100, 1);
	--color-text--: rgba(106, 116, 130, 1);
	--color-subtitle--: rgba(178, 182, 191, 1);
	--color-bg-gray--: rgba(247, 247, 248, 1);
	--color-border--: rgba(221, 224, 230, 1);
	--color-border-2--: rgba(202, 206, 214, 1);
	--color-badge--: rgba(198, 225, 237, 1);
	--color-grays-white--: rgba(255, 255, 255, 1);
	/* Error Colors */
	--error-25--: rgba(255, 251, 250, 1);
	--error-50--: #fef3f2;
	--error-200--: #fecdca;
	--error-300--: rgba(253, 162, 155, 1);
	--error-700--: rgba(180, 35, 24, 1);
	--error-600--: rgba(217, 45, 32, 1);
	/* Success Colors */
	--success-300--: rgba(117, 224, 167, 1);
	--success-25--: rgba(246, 254, 249, 1);
	--success-50--: #ecfdf3;
	--success-200--: #abefc6;
	--success-600--: rgba(7, 148, 85, 1);
	--success-700--: #067647;
	/* Warning Colors */
	--warning--: rgba(253, 204, 155, 1);
	--warning-25--: rgba(255, 253, 250, 1);
	/* Blue Colors */
	--blue-25--: rgba(246, 251, 247, 1);
	--blue-50--: #eff8ff;
	--blue-200--: #b2ddff;
	--blue-300--: rgba(84, 90, 201, 0.3);
	--blue-700--: #175cd3;
	/* Others */
	--child-green--: rgba(246, 251, 247, 1);
	--badge-green--: rgba(198, 237, 203, 1);
	--default-red--: rgba(255, 56, 60, 1);
	--filter-primary--: brightness(0) saturate(100%) invert(16%) sepia(33%) saturate(1190%) hue-rotate(173deg) brightness(97%) contrast(92%);
}

body {
	font-family: var(--font-family--);
	/* background: var(--color-primary--); */
	margin: 0;
	color: var(--color-text--);
	position: relative;
	overflow: hidden;
	font-size: 12px;
}

body * {
	font-family: var(--font-family--);
}

/**
    Common css
    */

/* Spinner Animation */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.spin {
	animation: spin 1s linear infinite;
}

.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

.no-margin {
	margin: 0;
}

.no-margin-horizontal {
	margin-left: 0;
	margin-right: 0;
}

.no-padding {
	padding: 0;
}

.mx-700 {
	max-width: 700px;
}

.w-100 {
	width: 100%;
}

.w-100-force {
	width: 100% !important;
}

.w-50 {
	width: 50%;
}

.min-w-30 {
	min-width: 30%;
}

.w-fit-content {
	width: fit-content;
}

.cursor-pointer {
	cursor: pointer;
}

.italic {
	font-style: italic;
}

.fw-400 {
	font-weight: 400;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.fw-700 {
	font-weight: 700;
}

.fw-500-hover:hover {
	font-weight: 500;
	transition: all 0.15s ease;
}

.fw-600-hover:hover {
	font-weight: 600;
	transition: all 0.15s ease;
}

.fw-700-hover:hover {
	font-weight: 700;
	transition: all 0.15s ease;
}

.fs-10 {
	font-size: 10px;
}

.fs-11 {
	font-size: 11px;
}

.fs-12 {
	font-size: 12px;
}

.fs-13 {
	font-size: 13px;
}

.fs-14 {
	font-size: 14px;
}

.fs-15 {
	font-size: 15px;
}

.fs-16 {
	font-size: 16px;
}

.fs-18 {
	font-size: 18px;
}

.fs-22 {
	font-size: 22px;
}

.fs-24 {
	font-size: 24px;
}

.fs-28 {
	font-size: 28px;
}

.fs-32 {
	font-size: 32px;
}

.rotate-180 {
	transform: rotate(180deg);
}

.txt-align-center-important {
	text-align: center !important;
}

.txt-align-end {
	text-align: end;
}

.txt-align-start {
	text-align: start;
}

.relative {
	position: relative;
}

/* Flex & Grid*/

.flex {
	display: flex;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-wrap {
	flex-wrap: wrap;
}

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

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

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

.space-between,
.justify-between,
.justify-content-between {
	justify-content: space-between;
}

.justify-end {
	justify-content: end;
}

.justify-center {
	justify-content: center;
}

/* Grid */
.grid {
	display: grid;
}

.grid-auto-fit-30 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
}

.grid-cols-1 {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-12 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-right-270 {
	display: grid;
	grid-template-columns: 1fr minmax(270px, 300px);
}

/* End Grid */

.gap-5 {
	gap: 5px;
}

.gap-8 {
	gap: 8px;
}

.gap-10 {
	gap: 10px;
}

.gap-12 {
	gap: 12px;
}

.gap-20 {
	gap: 20px;
}

.gap-15 {
	gap: 15px;
}

.gap-20 {
	gap: 20px;
}

.gap-30 {
	gap: 30px;
}

.gap-40 {
	gap: 40px;
}

/* Margin */

.mb-10 {
	margin-bottom: 10px;
}

.mb-15 {
	margin-bottom: 15px;
}

.mb-20 {
	margin-bottom: 20px;
}

.mb-30 {
	margin-bottom: 30px;
}

.mb-40 {
	margin-bottom: 40px;
}

.mt-10 {
	margin-top: 10px;
}

.mt-15 {
	margin-top: 15px;
}

.mt-20 {
	margin-top: 20px;
}

.mt-30 {
	margin-top: 30px;
}

.mt-40 {
	margin-top: 40px;
}

/* End Margin */

/* img */

.icon img.small {
	height: 17px;
}

.icon img.medium {
	height: 20px;
}

.icon img.big {
	height: 40px;
}

.icon img.large {
	height: 50px;
}

/* End img */

/* Background */

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

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

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

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

.text-accent {
	color: var(--color-accent--);
}

.text-primary {
	color: var(--color-primary--);
}

.text-white {
	color: var(--color-grays-white--);
}

.text-default {
	color: var(--color-text--);
}

.text-subtitle {
	color: var(--color-subtitle--);
}

.text-primary-hover:hover {
	color: var(--color-primary--);
}

.text-border {
	color: var(--color-border--);
}

.text-danger {
	color: rgba(236, 62, 62, 1);
}

.rotate-180 {
	transform: rotate(180deg);
}

.rotate-90 {
	transform: rotate(90deg);
}

.rotate-270 {
	transform: rotate(270deg);
}

.underline {
	text-decoration: underline;
}

a:link,
a:visited,
a:hover,
a:active,
a {
	text-decoration: none;
	color: var(--color-text--);
}

a.text-primary {
	color: var(--color-primary--);
}

a.underline {
	text-decoration: underline;
}

a.text-accent {
	color: var(--color-accent--) !important;
}

a.hover-primary:hover {
	color: var(--color-primary--) !important;
}

li {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
}

hr {
	margin: initial;
	border-top: 0px solid var(--color-border--);
}

hr.hr-2 {
	border-top: 1px solid rgba(202, 206, 214, 1);
}


hr.hr-3 {
	margin: initial;
	border-top: 0px solid var(--color-border--);
}

.star-rating {
	width: 20px;
	height: 20px;
}

.star-rating.empty {
	opacity: 0.2;
}

.badge {
	display: inline-block;
	width: fit-content;
	padding: 3px 6px;
	background-color: var(--color-grays-white--);
	border: 1px solid var(--color-border--);
	border-radius: 6px;
	font-style: normal;
}

.badge-chain {
	box-sizing: border-box;
	border-radius: 4px;
	border: 1px solid var(--color-border-2--);
	min-height: 18px;
	height: 22px;
	width: fit-content;
	display: flex;
	overflow: hidden;
}

.badge-chain .badge {
	height: 100%;
	border-radius: unset;
	border: unset;
	padding: 0;
	padding-left: 11px;
	padding-right: 11px;
	font-size: 10px;
	font-weight: 600;
	display: flex;
	align-items: center;
}

.badge-chain .badge:not(:first-child) {
	border-left: 1px solid var(--color-border-2--);
}

.badge.badge-litle {
	padding: 1px 6px;
}

.badge.full-green {
	border-color: rgba(42, 162, 112, 1) !important;
	color: rgba(255, 255, 255, 1) !important;
	background-color: rgba(42, 162, 112, 1) !important;
}

.badge.badge-green {
	border-color: rgba(42, 162, 112, 0.3) !important;
	color: rgb(42, 162, 112) !important;
	background-color: rgb(236, 253, 243) !important;
}

.badge.badge-orange {
	border-color: rgba(224, 96, 61, 0.3) !important;
	color: rgb(224, 96, 61) !important;
	background-color: rgb(254, 246, 238) !important;
}

.badge.badge-red {
	border-color: rgba(162, 42, 42, 0.3) !important;
	color: rgba(162, 42, 42, 1) !important;
	background-color: rgba(253, 236, 236, 1) !important;
}

.badge.badge-blue {
	border-color: rgba(84, 166, 201, 0.3) !important;
	background-color: rgb(240, 249, 255) !important;
	color: rgb(84, 166, 201) !important;
}

.badge.badge-purple {
	border-color: rgba(126, 83, 235, 0.3) !important;
	background-color: rgb(244, 243, 255) !important;
	color: rgb(126, 83, 235) !important;
}

/* Badge Status */

.badge.available_color_green,
.badge.status-accept {
	border-color: rgba(42, 162, 112, 0.3) !important;
	color: rgb(42, 162, 112) !important;
	background-color: rgb(236, 253, 243) !important;
}

.badge.available_color_tobeconfirmed_known {
	border-color: rgba(245, 136, 47, 0.3) !important;
	color: rgba(245, 136, 47, 1) !important;
	background-color: rgba(255, 243, 233, 1) !important;
}

.badge.available_color_requested {
	border-color: rgba(126, 83, 235, 0.3) !important;
	background-color: rgba(244, 243, 255, 1) !important;
	color: rgb(126, 83, 235) !important;
}

.badge.available_color_unavailable {
	border-color: rgba(201, 84, 84, 0.3) !important;
	color: rgba(162, 42, 42, 1) !important;
	background-color: rgba(253, 236, 236, 1) !important;
}

.badge.available_color_partiatllyavailable {
	border-color: rgba(255, 227, 150, 1) !important;
	color: #bf9912 !important;
	background-color: rgba(255, 250, 235, 1) !important;
}

.badge.available_color_tobeconfirmed_incognito {
	border-color: rgba(204, 85, 0, 0.3) !important;
	color: rgba(204, 85, 0, 1) !important;
	background-color: rgba(254, 246, 238, 1) !important;
}

.badge.buy_now {
	border-color: rgba(84, 166, 201, 1) !important;
	color: rgba(255, 255, 255, 1) !important;
	background-color: rgba(84, 166, 201, 1) !important;
}

.badge.request_availible {
	border-color: rgba(230, 221, 254, 1) !important;
	color: var(--color-primary--) !important;
	background-color: rgba(230, 221, 254, 1) !important;
}

.badge.requested_2 {
	border-color: rgba(198, 225, 237, 1) !important;
	color: var(--color-primary--) !important;
	background-color: rgba(198, 225, 237, 1) !important;
}

.badge.badge-yellow-2,
.badge.status-mark {
	border-color: rgba(181, 150, 26, 0.3) !important;
	background-color: rgba(253, 252, 236, 1) !important;
	color: rgba(181, 150, 26, 1) !important;
}

/* Badge Status Inverse */
.badge.available_color_green_inverse {
	border-color: rgba(42, 162, 112, 0.3) !important;
	color: rgba(255, 255, 255, 1) !important;
	background-color: rgba(42, 162, 112, 1) !important;
}

.badge.available_color_tobeconfirmed_known_inverse {
	border-color: rgba(245, 136, 47, 1) !important;
	color: rgba(255, 255, 255, 1) !important;
	background-color: rgba(245, 136, 47, 1) !important;
}

.badge.available_color_requested_inverse {
	border-color: rgba(126, 83, 235, 0.3) !important;
	color: rgba(255, 255, 255, 1) !important;
	background-color: rgba(126, 83, 235, 1) !important;
}

.badge.available_color_unavailable_inverse {
	border-color: rgba(236, 62, 62, 0.3) !important;
	color: rgba(255, 255, 255, 1) !important;
	background-color: rgba(236, 62, 62, 1) !important;
}

.badge.available_color_partiatllyavailable_inverse {
	border-color: rgba(233, 192, 47, 1) !important;
	color: rgba(255, 255, 255, 1) !important;
	background-color: rgba(233, 192, 47, 1) !important;
}

.badge.available_color_tobeconfirmed_incognito_inverse {
	border-color: rgba(224, 96, 61, 0.3) !important;
	color: rgba(255, 255, 255, 1) !important;
	background-color: rgba(204, 85, 0, 1) !important;
}

.badge.qtydeliveredoverflow {
	border-color: var(--blue-200--) !important;
	color: var(--blue-700--) !important;
	background-color: var(--blue-50--) !important;
}

.badge.qtydeliveredall {
	border-color: var(--success-200--) !important;
	color: var(--success-700--) !important;
	background-color: var(--success-50--) !important;
}

.badge.qtydeliveredoverless {
	border-color: var(--error-200--) !important;
	color: var(--error-700--) !important;
	background-color: var(--error-50--) !important;
}

/* End badge */

/* Note */

.note {
	display: flex;
	gap: 6px;
	border-radius: 6px;
	padding: 9px 10px;
	background-color: rgba(246, 251, 247, 1);
	border: 1px solid var(--badge-green--);
	width: fit-content;
}

/* End Note */

.btn-clear {
	font-family: "Inter", sans-serif;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* Iconcolor */
.iconcolor-blue {
	filter: invert(84%) sepia(58%) saturate(4593%) hue-rotate(168deg) brightness(85%) contrast(84%);
}

.iconcolor-purple {
	filter: invert(59%) sepia(13%) saturate(7468%) hue-rotate(218deg) brightness(102%) contrast(101%);
}

.iconcolor-orange {
	filter: invert(86%) sepia(6%) saturate(7482%) hue-rotate(309deg) brightness(102%) contrast(102%);
}

.iconcolor-red {
	filter: invert(37%) sepia(31%) saturate(5047%) hue-rotate(340deg) brightness(98%) contrast(88%);
}

.iconcolor-trash-grey {
	filter: invert(89%) sepia(11%) saturate(183%) hue-rotate(184deg) brightness(82%) contrast(87%);
}

.iconcolor-trash-grey:hover {
	filter: invert(27%) sepia(30%) saturate(7002%) hue-rotate(341deg) brightness(101%) contrast(98%);
}

.iconcolor-primary {
	filter: brightness(0) saturate(100%) invert(16%) sepia(33%) saturate(1190%) hue-rotate(173deg) brightness(97%) contrast(92%);
}

/* Button With Icon */

.btn-with-icon {
	font-family: "Inter", sans-serif;
	padding: 8px 10px;
	border-radius: 5px;
	color: var(--color-grays-white--);
	background-color: var(--color-accent--);
	border-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	position: relative;
	transition: all 0.15s ease;
}

.btn-with-icon:hover {
	background-color: var(--color-button-hover--);
}

.btn-long {
	font-family: "Inter", sans-serif;
	padding: 10px 14px 10px 12px;
	min-width: unset;
	max-height: 36px;
	width: max-content;
}

.btn-big {
	padding: 11px 30px !important;
	max-height: 36px !important;
	box-sizing: border-box;
}

.btn-small {
	padding: 6px 16px;
	border-radius: 6px;
	background-color: var(--color-accent--);
	border: none;
	color: var(--color-grays-white--);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: unset;
	width: max-content;
	transition: all 0.15s ease;
}

.btn-small:hover {
	background-color: var(--color-button-hover--);
}

.btn-tiny {
	padding: 6px 12px;
	border-radius: 6px;
	background-color: var(--color-accent--);
	border: none;
	color: var(--color-grays-white--);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: unset;
	width: max-content;
	height: fit-content;
	transition: all 0.15s ease;
}

.btn-tiny:hover {
	background-color: var(--color-button-hover--);
}

.btn-long span {
	width: max-content;
}

.btn-blue {
	background-color: rgba(84, 166, 201, 1) !important;
	transition: all 0.15s ease;
}

.btn-blue:hover {
	background-color: rgb(72, 143, 173) !important;
}

.btn-blue-2 {
	background-color: #017ab7 !important;
	color: #ffffff !important;
	border: 1px solid #dde0e6;
	box-shadow: 0px 1px 2px 0px #0000000d;
}

.btn-blue-2:hover {
	background-color: #025b87 !important;
}

.btn-primary {
	background-color: var(--color-primary--) !important;
	transition: all 0.15s ease;
}

.btn-primary:hover {
	background-color: rgb(11, 24, 41) !important;
}

.btn-accent {
	background-color: var(--color-accent--) !important;
	transition: all 0.15s ease;
}

.btn-accent:hover {
	background-color: var(--color-button-hover--) !important;
}

.btn-fit {
	font-family: "Inter", sans-serif;
	padding: 10px 14px 10px 14px;
	max-height: 36px;
	width: max-content;
}

.btn-with-icon:hover {
	cursor: pointer;
}

.btn-with-icon .icon img {
	display: block;
	width: 20px;
	height: 20px;
}

.btn-with-icon .icon img.small {
	height: 17px;
}

.btn-with-icon .icon img.tiny {
	height: 14px;
}

/* Btn-normal */
.btn-normal {
	font-family: "Inter", sans-serif;
	padding: 8px 12px;
	border-radius: 5px;
	color: var(--color-grays-white--);
	background-color: var(--color-accent--);
	border-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	position: relative;
	cursor: pointer;
	transition: all 0.15s ease;
}

.btn-small span,
.btn-tiny span,
.btn-long span,
.btn-big span,
.btn-with-icon span,
.btn-normal span,
.btn-fit span {
	font-family: var(--font-family--);
	font-weight: 500;
}

.btn-small,
.btn-tiny,
.btn-long,
.btn-big,
.btn-with-icon,
.btn-normal,
.btn-fit {
	font-family: var(--font-family--);
	font-weight: 500;
}

/* btn collor */

.btn-normal:hover {
	background-color: var(--color-button-hover--);
}

.btn-normal.bg-green,
.btn-green {
	background-color: rgba(42, 162, 112, 1);
}

.btn-normal.bg-green:hover,
.btn-green:hover {
	background-color: rgb(38, 145, 100);
}

.btn-green-soft {
	background-color: rgba(233, 250, 246, 1);
	border: 1px solid rgba(169, 200, 192, 1);
	color: rgba(25, 121, 91, 1);
}

.btn-green-soft:hover {
	background-color: rgba(42, 162, 112, 1);
	color: var(--color-grays-white--);
}

.btn-danger {
	background-color: rgba(236, 34, 31, 1);
}

.btn-danger:hover {
	background-color: rgb(199, 28, 25);
}

.btn-danger-soft {
	background-color: rgba(255, 225, 225, 1);
}

.btn-danger-soft:hover {
	background-color: rgba(236, 62, 62, 1);
}

.btn-danger-soft span {
	color: rgba(236, 62, 62, 1);
}

.btn-danger-soft:hover span {
	color: rgba(255, 255, 255, 1);
}

.btn-danger-dark {
	background-color: rgb(166 38 36);
}

.btn-danger-dark:hover {
	background-color: rgb(139, 31, 29);
}

.btn-white {
	background-color: #ffffff !important;
	border: 1px solid #dde0e6 !important;
}

.btn-white:hover {
	background-color: #f6f6f6 !important;
}

.btn-grey {
	background-color: rgba(247, 247, 248, 1) !important;
	border: 1px solid rgba(221, 224, 230, 1) !important;
}

.btn-grey:hover {
	background-color: rgb(228, 228, 233) !important;
}

.btn-grey-2 {
	background-color: #efeff4 !important;
}

.btn-grey-2:hover {
	background-color: #e3e3e5 !important;
}

/* Overlay */

.overlay {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: transparent;
}

/* Notification Message */
.notification-message {
	display: flex;
	position: fixed;
	flex-direction: row;
	justify-content: space-between;
	gap: 26px;
	padding: 15px;
	padding-right: 50px;
	border-radius: 12px;
	max-width: 430px;
	box-sizing: border-box;
	bottom: 40px;
	right: 35px;
	transform: translateX(120%);
	opacity: 0;
	transition:
		transform 700ms ease,
		opacity 700ms ease;
	z-index: 9999;
}

.notification-message.show {
	transform: translateX(0);
	opacity: 1;
}

.notification-message .text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.notification-message .close {
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 10px;
}

.notification-message .icon-close {
	width: 20px;
	transform: rotate(45deg);
}

.notification-message.error-message {
	border: 1px solid var(--error-300--);
	background-color: var(--error-25--);
	color: var(--error-700--);
}

.notification-message .dismiss {
	color: var(--error-600--);
}

.notification-message.error-message .icon-close {
	filter: invert(44%) sepia(83%) saturate(5207%) hue-rotate(343deg) brightness(100%) contrast(89%);
}

.notification-message.success-message {
	border: 1px solid var(--success-300--);
	background-color: var(--success-25--);
	color: var(--success-600--);
}

.notification-message.success-message .dismiss {
	color: var(--success-600--);
}

.notification-message.success-message .icon-close {
	filter: invert(54%) sepia(65%) saturate(526%) hue-rotate(100deg) brightness(90%) contrast(93%);
}

/* Modal confirm Message */
.card-status {
	display: flex;
	flex-direction: row;
	padding: 16px;
	gap: 16px;
	border-radius: 12px;
	font-size: 14px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.card-status img.icon {
	width: 40px;
	height: 40px;
}

.card-status .message {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.card-status.yellow {
	background-color: rgba(255, 253, 250, 1);
	color: rgba(216, 154, 61, 1);
	border: 1px solid rgba(253, 204, 155, 1)
}

.card-status.danger {
	border: 1px solid var(--error-300--);
	background-color: var(--error-25--);
	color: var(--error-700--);
}

.card-status.blue {
	border: 1px solid rgba(84, 90, 201, 0.3);
	background-color: rgba(240, 245, 255, 1);
	color: rgba(84, 90, 201, 1);
}


/* Label value */
.label-value-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.label-value-container .item {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* Bulk Action */

/* End Bulk Action */

.bulk-action .action-nav {
	position: absolute;
	display: none;
	flex-direction: column;
	padding: 5px;
	border: 1px solid var(--color-border--);
	background-color: var(--color-grays-white--);
	gap: 3px;
	border-radius: 6px;
	min-width: 129px;
	right: 10px;
	z-index: 1;
}

.bulk-action.active .action-nav {
	display: flex;
}

.bulk-action.active .action-nav {
	right: 0;
	top: 40px;
	min-width: 119px;
}

.bulk-action.active .action-nav>span {
	text-align: start;
}

.bulk-action.active .bulk-action-overlay {
	cursor: not-allowed;
	background-color: var(--color-subtitle--);
	color: var(--color-grays-white--);
}

.bulk-action.disabled button {
	cursor: not-allowed;
	background-color: var(--color-subtitle--);
	color: var(--color-grays-white--);
}

.bulk-action .action-nav span {
	padding: 6px 7px;
	border-radius: 3px;
	font-size: 13px;
	color: var(--color-primary--);
}

.bulk-action .action-nav span:hover {
	background-color: var(--color-hover--);
}

.bulk-action .action-nav.action-nav-2 {
	min-width: 151px;
	right: -12px;
}

.bulk-action .action-nav.action-nav-2 span:hover img {
	filter: var(--filter-accent--);
}

.bulk-action .action-nav.action-nav-2 span {
	font-size: 11px;
}

/* Pre for Debug */
pre.debug {
	background: #1e1e1e;
	color: #d4d4d4;
	padding: 16px;
	border-radius: 8px;

	font-family: Consolas, Monaco, 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.6;

	white-space: pre-wrap;
	word-wrap: break-word;
	/* overflow-x: auto; */

	border: 1px solid #333;
	width: 100%;
}

pre.debug.debug-rendered {
	white-space: normal;
	tab-size: 4;
}

pre.debug .debug-children {
	list-style: none;
	margin: 0;
	padding: 0;
}

pre.debug .debug-children .debug-children {
	margin-left: 5px;
	padding-left: 16px;
	border-left: 1px dashed #3a3a3a;
}

pre.debug .debug-entry {
	margin: 0;
	padding: 0;
}

pre.debug .debug-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	padding: 1px 0;
}

pre.debug .debug-row:hover {
	background-color: rgba(255, 255, 255, 0.04);
}

pre.debug .debug-toggle {
	flex: none;
	width: 14px;
	margin-left: -20px;
	padding: 0;
	border: 0;
	background: none;
	color: #6a9955;
	font-size: 10px;
	line-height: 1.6;
	cursor: pointer;
	user-select: none;
}

pre.debug .debug-toggle:hover {
	color: #9cdcfe;
}

pre.debug .debug-key {
	color: #9cdcfe;
}

pre.debug .debug-arrow {
	color: #808080;
}

pre.debug .debug-type {
	color: #569cd6;
}

pre.debug .debug-bracket {
	color: #808080;
}

pre.debug .debug-value {
	white-space: pre-wrap;
	word-break: break-word;
}

pre.debug .debug-string {
	color: #ce9178;
}

pre.debug .debug-number {
	color: #b5cea8;
}

pre.debug .debug-empty {
	color: #6d6d6d;
	font-style: italic;
	cursor: help;
}

pre.debug .debug-summary {
	display: none;
	color: #808080;
}

pre.debug .debug-entry.collapsed>.debug-row>.debug-summary {
	display: inline;
}

pre.debug .debug-entry.collapsed>.debug-children,
pre.debug .debug-entry.collapsed>.debug-row-close {
	display: none;
}

pre.debug .debug-root>.debug-entry>.debug-row>.debug-toggle {
	margin-left: 0;
}

pre.debug .debug-root>.debug-entry>.debug-children {
	margin-left: 0;
	padding-left: 20px;
	border-left: 0;
}

/* End Common Css */

/* Reusable confirmation-page layout utilities */
.min-h-screen {
	min-height: 100vh;
}

.txt-align-center {
	text-align: center;
}

.text-accent {
	color: var(--color-accent--);
}

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

.border-default {
	border: 1px solid var(--color-border--);
}

.rounded-12 {
	border-radius: 12px;
}

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

.gap-2 {
	gap: 2px;
}

.object-cover {
	height: 100vh;
	width: 100%;
	object-fit: cover;
}

.split-layout {
	display: flex;
	min-height: 800px;
}

.split-layout-panel {
	flex: 1 1 50%;
	min-width: 0;
}

.signup-confirmation-photo {
	overflow: hidden;
	background: #017ab7;
}

.signup-confirmation-photo-image {
	object-position: 56% bottom;
}

.signup-confirmation-content {
	box-sizing: border-box;
	min-height: 800px;
	padding: 80px 50px 142px;
	background: linear-gradient(180deg, #ffffff 0%, var(--color-sidebar-bg--) 100%);
}

.signup-confirmation-main {
	gap: 30px;
	width: 100%;
}

.signup-confirmation-seal {
	height: 84px;
	width: 84px;
}

.signup-confirmation-title {
	color: var(--color-primary--);
	font-family: "Roboto", sans-serif;
	font-size: 52px;
	font-weight: 700;
	line-height: normal;
}

.signup-confirmation-copy,
.signup-confirmation-signoff {
	color: var(--color-text--);
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
}

.signup-confirmation-resend {
	box-sizing: border-box;
	min-height: 98px;
	padding: 15px;
}

.signup-confirmation-resend-icon {
	width: 68px;
	height: 68px;
	background: var(--color-soft--);
}

.signup-confirmation-resend-icon img {
	width: 25px;
	height: 25px;
}

.signup-confirmation-resend-title {
	color: var(--color-primary--);
	font-size: 16px;
	font-weight: 600;
	line-height: 26px;
}

.signup-confirmation-resend-copy {
	color: var(--color-text--);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.signup-confirmation-resend-button {
	border: 0;
	border-radius: 8px;
	padding: 11px 20px;
	background: var(--color-accent--);
	color: #ffffff;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	white-space: nowrap;
}

.signup-confirmation-resend-button:hover {
	background: var(--color-button-hover--);
}

@media (max-width: 900px) {
	body {
		overflow: auto;
	}

	.split-layout {
		flex-direction: column;
	}

	.signup-confirmation-photo {
		flex-basis: 260px;
		min-height: 260px;
	}

	.signup-confirmation-content {
		min-height: 620px;
		padding: 50px 30px 60px;
		gap: 50px;
	}
}