/* Inter font family from google fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box !important;
}

body {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

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

.gap-12 {
	gap: 12px;
}

.w-60 {
	width: 60%;
}

:root {
	--white: #fff;
	--dark-txt: #1E293B;
	--blue: #0A1C3D;
	--gray-txt: #475569;
	--gray-txt-2: #64748B;
	--bg-txt: #FFFFFFB8;
	--purple: #5263FF;
	--purple-2: #363AF5;
	--l-purple: #5263FF33;
	--green: #338732;
	--green-2: #409B3F;
	--l-green: #409B3F33;
	--orange: #DF2917;
	--l-orange: #ED403033;
	--yellow: #B47500;
	--yellow-2: #FFC30A;
	--l-yellow: #FFC30A33;
	--skin: #FF9A90;
	--l-skin: #ED403033;
	--badge-orange: #ED4030;
	--sky: #008ECE;
	--l-sky: #06B1F133;
	--danger: #DF2917;

	/* ---- Layout tokens -------------------------------------------------------
	   Added so list/table screens stop re-inventing their own values. The invoice
	   pages had drifted to four different card paddings, header heights and type
	   scales because there was nothing shared to reference. Values are taken from
	   the customer invoice page, which is the agreed reference. */

	/* Cards */
	--wm-card-bg: #ffffff;
	--wm-card-border-color: rgba(30, 41, 59, .06);
	--wm-card-radius: 20px;
	--wm-card-padding: 16px;
	--wm-card-shadow: 0 1px 1px -.5px rgba(30, 41, 59, .03), 0 3px 3px -1.5px rgba(30, 41, 59, .03), 0 20px 20px -12px rgba(30, 41, 59, .03);
	--wm-card-gap: 24px;
	/* Horizontal inset of a page's content from the edge of .main-content.
	   The title bar and the body below it both use this, so they always line
	   up; it drops to 20px at the 768px breakpoint (see the media query). */
	--wm-page-inset: 40px;
	--wm-header-row-height: 64px;
	--wm-titlebar-min-height: 64px;
	--wm-page-title-size: 22px;

	/* Controls (buttons, pills, pickers) */
	--wm-control-height: 32px;
	--wm-control-radius: 8px;
	--wm-control-padding: 4px 8px;
	--wm-control-bg: rgba(241, 245, 249, .8);

	/* Type */
	--wm-font-sm: 12px;
	--wm-font-md: 13px;
	--wm-line-sm: 16px;
	--wm-line-md: 20px;
	--wm-weight-strong: 600;
	--wm-weight-body: 500;

	/* Tables */
	--wm-th-height: 48px;
	--wm-td-height: 56px;
	--wm-cell-padding: 8px 16px;
	--wm-divider: rgba(30, 41, 59, .09);
	--wm-divider-soft: rgba(30, 41, 59, .06);

	/* Text */
	--wm-text-strong: #1e293b;
	--wm-text-body: #475569;
	--wm-text-muted: #64748b;
}

/* ===============================================================================================================================================================
																			Start home page
=============================================================================================================================================================== */

/* start home dashboard */

.mobile-toggle {
	position: fixed;
	top: 15px;
	left: 15px;
	z-index: 1100;
	background: var(--blue);
	border: none;
	width: 45px;
	height: 45px;
	border-radius: 8px;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1041;
}

.mobile-toggle img {
	height: 20px;
}

.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 240px;
	background-color: var(--blue);
	color: var(--bg-txt);
	overflow-y: scroll;
	scrollbar-width: none;
}

.sidebar .logo {
	padding: 16px;
	border-bottom: 1px solid #FFFFFF17;
}

.sidebar .logo img {
	height: 32px;
}

.sidebar ul.nav {
	margin-top: 24px;
	padding: 0 12px;
	gap: 8px;
}

.sidebar .nav-link {
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bg-txt);
	border-radius: 14px;
	padding: 8px;
	border: 1px transparent solid;
}

.sidebar .nav-link img {
	height: 18px;
}

.sidebar .nav-link:hover {
	background-color: #FFFFFF1F;
	color: var(--white);
	border: 1px #FFFFFF0F solid;
}

.sidebar .nav-link.active {
	background-color: #FFFFFF1F;
	color: var(--white);
	border: 1px #FFFFFF0F solid;
}

.sidebar .nav-item a.sub-menu-head.active,
.sidebar .nav-item a.location-menu,
.sidebar .nav-item a.users-menu,
.sidebar .nav-item a.customer-invoice-menu {
	border-radius: 14px 14px 0 0;
}

.sidebar .submenu {
	padding-left: 12px;
	background: #FFFFFF17;
	/* border-radius: 0 0 14px 14px; */
	border-radius: 14px;
}

.sidebar .nav-item a.sub-menu-head.active ~ .submenu.show {
	border-radius: 0 0 14px 14px;
}

.sidebar .submenu a {
	font-size: 13px;
	padding: 8px 0;
	display: block;
	color: var(--bg-txt);
}

.sidebar .submenu a:hover {
	color: var(--white);
}

.sidebar .bottom-sidebar {
	padding: 16px 12px;
}

.sidebar .bottom-sidebar ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sidebar .bottom-sidebar ul li {
	padding: 8px;
	border-radius: 14px;
}

.sidebar .bottom-sidebar ul li:hover {
	background-color: #FFFFFF1F;
	color: var(--white);
}

.sidebar .bottom-sidebar ul li .badge {
	height: 18px;
	width: 18px;
	border-radius: 50px;
	background-color: var(--badge-orange);
	color: var(--white);
	font-size: 10px;
	font-weight: 600;
}

.sidebar .bottom-sidebar ul li a {
	color: var(--bg-txt);
	font-size: 13px;
	font-weight: 600;
}

.sidebar .bottom-sidebar ul li img {
	height: 18px;
}

/* Main content */
.main-content {
	margin-left: 240px;
	min-height: 100vh;
	background-color: #F8FAFC;
}

.main-content .main-titlee {
	background-color: var(--white);
	border-bottom: 1px solid #F1F2F3;
}

.main-content .main-title-bar {
	background-color: var(--white);
	border-bottom: 1px solid #F1F2F3;
}

.main-content .main-title {
	max-width: 1680px;
	margin: 0 auto;
	padding: 18px var(--wm-page-inset);
	/* border-bottom: 1px solid #F1F2F3; */
	background-color: #FFFFFF;
}

.main-content .main-title h1 {
	font-size: 22px;
	font-weight: 700;
	color: var(--dark-txt);
}

/* Shared size for the main action buttons in every page's title bar.
   Matches the invoice toolbar scale (32px / 12px / 8px radius). */
.main-content .main-title button {
	height: 32px;
	width: max-content;
	padding: 4px 8px;
	gap: 2px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	padding: 4px 8px;
	color: var(--white);
	border: none;
	outline: none;
	/* border: 1px transparent solid; */
	border-radius: 8px;
	background: linear-gradient(var(--purple), var(--purple)) padding-box, linear-gradient(90deg, #1E293B17, #1E293B2E) border-box;
	backdrop-filter: blur(24px);
	box-shadow: 
		0px 1px 1px -0.5px #1E293B08,
		0px 3px 3px 0px #FFFFFF1F inset;
}

.main-content .main-title button img {
	height: 16px;
}

.main-content .main-title button .badgee {
	height: 18px;
	width: 18px;
	background-color: var(--white);
	border: 1px #1E293B17 solid;
	box-shadow: 0 2px 1.5px -0.5px #1E293B08;
	color: var(--gray-txt);
	border-radius: 6px;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
}

.main-content .main-title button:hover {
	opacity: 0.9;
}

.main-content .data-left-right {
	gap: 24px;
	width: 100%;
	padding: 24px var(--wm-page-inset) 40px;
	max-width: 1680px;
	margin: 0 auto;
}

.main-content .data-left-right .data-left .date {
	background-color: var(--wm-card-bg);
	border: 1px solid var(--wm-card-border-color);
	border-radius: var(--wm-card-radius);
	box-shadow: var(--wm-card-shadow);
	padding: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-txt);
}

.main-content .data-left-right .data-left .date .left-date {
	border: 1px #1E293B17 solid;
	box-shadow: 0 20px 20px #1E293B08;
	border-radius: 10px;
	background-color: #F1F5F9;
}

.main-content .data-left-right .data-left .date .left-date .all-date {
	border-right: 1px #1E293B17 solid;
}

.main-content .data-left-right .data-left .date .left-date .full-date {
	padding: 8px 14px 8px 11px;
	position: relative;
}

.main-content .data-left-right .data-left .date .left-date .full-date input {
	background-color: transparent;
	border: none;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-txt);
	width: 175px;
}

.main-content .data-left-right .data-left .date .left-date .all-date .all-date-select {
	padding: 8px 35px 8px 10px;
	background-color: transparent;
	height: 40px;
	width: 100%;
	border: none;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-txt);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("../img/icons/gray-arrow.png");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 18px;
	cursor: pointer;
}

.main-content .data-left-right .data-left .date .right-date {
	font-size: 13px;
	font-weight: 700;
	color: var(--dark-txt);
}

.main-content .data-left-right .data-left .date .right-date span {
	font-weight: 600;
	color: var(--gray-txt-2);
}

/* Historic class name — the row carries five KPI cards now. A grid rather than a
   wrapping flex row so the cards keep equal widths on every break instead of the
   last row stretching to fill. */
.main-content .data-left-right .three-boxes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 24px;
	margin-top: 24px;
}

.main-content .data-left-right .three-boxes .box {
	background-color: var(--wm-card-bg);
	border: 1px solid var(--wm-card-border-color);
	border-radius: var(--wm-card-radius);
	box-shadow: var(--wm-card-shadow);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Value and its change share a baseline, so the percentage reads as a note on
   the number rather than a badge of its own. */
.main-content .data-left-right .three-boxes .box .box-value {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-top: 12px;
}

.main-content .data-left-right .three-boxes .box .box-value h2 {
	margin-top: 0;
}

.main-content .data-left-right .three-boxes .box .box-value h2 small {
	font-size: 13px;
	font-weight: 600;
	color: var(--gray-txt);
}

.main-content .data-left-right .three-boxes .box .box-sub {
	font-size: 12px;
	font-weight: 600;
	color: var(--gray-txt);
	margin-top: 2px;
}

/* A count on a sub-line still needs to read as a number, not as prose. */
.main-content .data-left-right .three-boxes .box .box-sub strong {
	color: var(--dark-txt);
	font-weight: 700;
}

.main-content .data-left-right .three-boxes .box .box-sub.muted {
	color: var(--gray-txt-2);
	font-weight: 500;
}

/* The KPI tiles carry no icon: at this size the coloured squares were doing
   decoration rather than work, and the label alone reads faster. The section
   cards below still have theirs, where the icon marks a heading. */
.main-content .data-left-right .three-boxes .box .box-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--gray-txt);
	margin: 0;
}

.main-content .data-left-right .three-boxes .box h2 {
	font-size: 25px;
	font-weight: 700;
	color: var(--dark-txt);
	margin-top: 16px;
}

.main-content .data-left-right .three-boxes .box span {
	font-size: 13px;
	font-weight: 600;
	color: var(--gray-txt);
	margin-top: 4px;

}

/* Change against the same window one year earlier. Colour follows meaning rather
   than direction: falling cost is good, falling revenue is not, so the caller
   decides which way is up. Kept as plain small text — no pill — so it sits
   quietly beside the value instead of competing with it. */
.metric-delta {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	cursor: help;
}

/* The tile's generic `span` rule is more specific than a bare class, so the
   small size has to be restated at that weight or the delta renders at 13px. */
.main-content .data-left-right .three-boxes .box .metric-delta,
.main-content .data-left-right .data-left .season-summary .metric-delta {
	font-size: 11px;
	margin-top: 0;
}

.metric-delta i {
	font-style: normal;
	font-size: 8px;
}

.metric-delta.good {
	color: #2F7A2E;
}

.metric-delta.bad {
	color: #C0301F;
}

.metric-delta.flat {
	color: var(--gray-txt-2);
}

/* Revenue split by invoice status. The bar carries the proportions at a glance;
   the exact figures come from hovering the tile. */
.revenue-split {
	display: flex;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	overflow: hidden;
}

/* The segments are spans inside .box, which carries a `span { margin-top: 4px }`
   rule at higher specificity than a bare class. Left alone that pushes them down
   inside the 6px track, overflow clips the bottom, and the bar renders as a grey
   band with a sliver of colour under it. Reset at the same weight; the bar keeps
   a deliberate gap from the value above it. */
.main-content .data-left-right .three-boxes .box .revenue-split {
	margin-top: 10px;
}

.main-content .data-left-right .three-boxes .box .revenue-split-segment {
	margin-top: 0;
}

/* Tiles whose detail is a hover away. WMTooltip renders the tile itself, so its
   own `.tooltip-container` rules are replaced by `.box` — which is what gives the
   card its column layout back. */
.main-content .data-left-right .three-boxes .box.hoverable {
	cursor: help;
}

.revenue-split-segment {
	height: 100%;
	min-height: 6px;
}

.revenue-split-segment.sent,
.wm-stat-tip-dot.sent {
	background: #409B3F;
}

.revenue-split-segment.draft,
.wm-stat-tip-dot.draft {
	background: #94A3B8;
}

.revenue-split-segment.ready,
.wm-stat-tip-dot.ready {
	background: #06B1F1;
}

.revenue-split-segment.error,
.wm-stat-tip-dot.error {
	background: #ED4030;
}

.revenue-split-segment.other,
.wm-stat-tip-dot.other {
	background: var(--gray-txt-2);
}

.wm-stat-tip-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
}

/* Rows inside the revenue hover: swatch, label, amount, invoice count. */
.wm-stat-tip {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 210px;
}

/* Two ways of cutting the same total — by invoice status, then by work type. */
.wm-stat-tip-section {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wm-stat-tip-section + .wm-stat-tip-section {
	padding-top: 10px;
	border-top: 1px solid #E2E8F0;
}

/* The all-work-types figure, set off from the rows it sums up. */
.wm-stat-tip-row.total {
	padding-top: 6px;
	border-top: 1px solid #E2E8F0;
}

.wm-stat-tip-row.total span {
	color: var(--dark-txt);
	font-weight: 700;
}

.wm-stat-tip-heading {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gray-txt-2);
}

.wm-stat-tip-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
}

.wm-stat-tip-row span {
	color: var(--gray-txt);
	font-weight: 600;
}

.wm-stat-tip-row strong {
	color: var(--dark-txt);
	font-weight: 700;
	margin-left: auto;
}

.wm-stat-tip-row small {
	color: var(--gray-txt-2);
	font-weight: 600;
	min-width: 18px;
	text-align: right;
}

/* Loading and failure both used to look like an empty period, because every
   tile fell back to the same "N/A" placeholder. */
.main-content .data-left-right .data-left .statistics-state {
	margin-top: 24px;
	padding: 48px 16px;
	gap: 12px;
	flex-wrap: wrap;
	background-color: var(--wm-card-bg);
	border: 1px solid var(--wm-card-border-color);
	border-radius: var(--wm-card-radius);
	box-shadow: var(--wm-card-shadow);
	color: var(--gray-txt);
	font-weight: 600;
}

.main-content .data-left-right .data-left .statistics-state p {
	margin: 0;
}

.main-content .data-left-right .data-left .statistics-state.error p {
	color: var(--dark-txt);
}

/* Season totals sit outside the date filter — they always describe the last five
   winter seasons — so they get their own full-width row under the chart. */
.main-content .data-left-right .data-left .season-summary .season-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.main-content .data-left-right .data-left .season-summary .season-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 16px;
	border: 1px solid var(--wm-card-border-color);
	border-radius: 16px;
	background: var(--white);
}

.main-content .data-left-right .data-left .season-summary .season-card .season-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--gray-txt-2);
}

.main-content .data-left-right .data-left .season-summary .season-card h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--dark-txt);
	margin: 0;
}

.main-content .data-left-right .data-left .season-summary .season-card h3 small {
	font-size: 12px;
	font-weight: 600;
	color: var(--gray-txt);
}

.main-content .data-left-right .data-left .season-summary .season-card .season-drives {
	font-size: 13px;
	font-weight: 600;
	color: var(--gray-txt);
}

.main-content .data-left-right .data-left .season-summary .season-empty {
	margin-top: 16px;
	color: var(--gray-txt-2);
	font-weight: 600;
}

.main-content .data-left-right .data-left .graph-box {
	margin-top: 24px;
	background-color: var(--wm-card-bg);
	border: 1px solid var(--wm-card-border-color);
	border-radius: var(--wm-card-radius);
	box-shadow: var(--wm-card-shadow);
	padding: 16px;
}

.main-content .data-left-right .data-left .graph-box .icon-txt {
	gap: 8px;
}

.main-content .data-left-right .data-left .graph-box .icon-txt p {
	font-size: 15px;
	font-weight: 600;
	color: var(--gray-txt);
}

.main-content .data-left-right .data-left .graph-box .icon {
	height: 40px;
	width: 40px;
	background-color: var(--l-sky);
	border-radius: 8px;
}

/* Statistics chart and its data table are two separate cards side by side:
   chart two thirds, table one third. Both are .graph-box cards, so they share
   the same chrome; the row lays them out and splits the width.

   `align-items: stretch` makes the table card exactly as tall as the chart
   card. The chart card sets the row height (fixed 328px chart plus its
   header); the table card is stretched to match. Its rows live in an
   absolutely-positioned .table-card that fills the card and scrolls when it
   overflows — filling this way avoids the nested-flex height not propagating
   to a flex-basis:0 child, which left the table collapsed to zero height. */
.main-content .data-left-right .data-left .graph-row {
	display: flex;
	align-items: stretch;
	gap: 24px;
}

/* The table carries four columns since cost joined it, so it takes a larger
   share than the one third it had when it only listed drives and revenue. */
.main-content .data-left-right .data-left .graph-row .statistics-graph {
	flex: 3 1 0;
	min-width: 0;
}

.main-content .data-left-right .data-left .graph-row .statistics-table {
	flex: 2 1 0;
	min-width: 0;
	position: relative;
}

.main-content .data-left-right .data-left .graph-box .chart-card {
	height: 328px;
	position: relative;
	background: var(--white);
	border-radius: 16px;
}

.main-content .data-left-right .data-left .graph-box .chart-card canvas {
	width: 100% !important;
	height: 100% !important;
}

.main-content .data-left-right .data-left .graph-box .table-card {
	position: absolute;
	inset: 16px;
	overflow-y: auto;
	background: var(--white);
	border-radius: 16px;
}

/* Keep the header visible while the rows scroll. */
.main-content .data-left-right .data-left .graph-box .table-card .custom-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
}

/* Stack the two cards once there isn't room for them side by side. The table
   card then sizes to its rows rather than matching the chart. */
@media (max-width: 992px) {
	.main-content .data-left-right .data-left .graph-row {
		flex-direction: column;
	}

	.main-content .data-left-right .data-left .graph-row .statistics-graph,
	.main-content .data-left-right .data-left .graph-row .statistics-table {
		flex: none;
		width: 100%;
	}

	.main-content .data-left-right .data-left .graph-box .table-card {
		position: static;
		inset: auto;
		overflow-y: visible;
	}
}

.main-content .data-left-right .data-left .graph-box .custom-table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	font-size: 14px;
}

.main-content .data-left-right .data-left .graph-box .custom-table thead th {
	background: #F1F5F9;
	color: var(--gray-txt);
	font-size: 13px;
	font-weight: 600;
	padding: 4px 16px;
}

.main-content .data-left-right .data-left .graph-box .custom-table thead th:first-child {
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}

.main-content .data-left-right .data-left .graph-box .custom-table thead th:last-child {
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}

.main-content .data-left-right .data-left .graph-box .custom-table tbody tr {
	background: var(--white);
}

.main-content .data-left-right .data-left .graph-box .custom-table tbody tr:nth-child(even) {
	background: #F8FAFC;
}


.main-content .data-left-right .data-left .graph-box .custom-table tbody td {
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gray-txt);
}

.main-content .data-left-right .data-left .graph-box .custom-table tbody td:first-child {
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}

.main-content .data-left-right .data-left .graph-box .custom-table tbody td:last-child {
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}

.main-content .data-left-right .data-left .graph-box .custom-table tbody tr:hover {
	background: #F1F5F9;
	transition: 0.2s ease;
}

.main-content .data-left-right .data-right .icon-txt p {
	font-size: 15px;
	font-weight: 600;
	color: var(--gray-txt);
}

.main-content .data-left-right .data-right .icon-txt .icon {
	height: 40px;
	width: 40px;
	background-color: var(--l-yellow);
	border-radius: 8px;
}

.main-content .data-left-right .data-right .icon-txt .badge {
	height: 24px;
	width: 24px;
	background-color: #5263FF1F;
	color: var(--purple);
	font-size: 12px;
	font-weight: 600;
	border-radius: 50px;
}

.main-content .data-left-right .data-right .tab {
	background-color: #5263FF1F;
	padding: 8px 8px 8px 16px;
	border-radius: 16px;
	margin-top: 16px;
}

.main-content .data-left-right .data-right .tab p {
	font-size: 15px;
	font-weight: 700;
	color: var(--purple);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.main-content .data-left-right .data-right .tab .arrow-icon {
	height: 40px;
	min-width: 40px;
	border-radius: 10px;
	background-color: #5263FF1F;
	cursor: pointer;
}


/* Start Date Picker =============================================================== */

.daterangepicker {
	border-radius: 24px;
	font-family: "Plus Jakarta Sans", sans-serif;
	padding: 12px;
	border: 1px #1E293B17 solid;
	box-shadow: 0 32px 32px -16px #1e293b1d;
	margin: 12px 0 0 0;
	width: 832px;
}

.daterangepicker:after,
.daterangepicker::before {
	display: none;
}

.daterangepicker .calendar-table table {
	border-collapse: separate;
}

.daterangepicker .calendar-table table tr th {
	color: var(--gray-txt-2);
	font-size: 10px;
	font-weight: 600;
}

.daterangepicker .ranges {
	width: 208px;
}

.daterangepicker .ranges ul {
	margin: 0;
}

.daterangepicker .ranges ul li {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
	padding: 8px 12px;
	border-radius: 8px;
}

.daterangepicker .ranges ul li.active {
	color: var(--dark-txt);
	background-color: #F1F5F9CC;
}

.daterangepicker .ranges ul li:hover {
	background-color: #F1F5F9CC;
}

.daterangepicker .drp-calendar {
	padding-bottom: 32px !important;
}

.daterangepicker .drp-calendar.left {
	border: none !important;
}

.daterangepicker .drp-calendar.right {
	margin-left: 40px;
}

.daterangepicker .drp-calendar th.prev,
.daterangepicker .drp-calendar th.next {
	height: 32px;
	max-width: 32px !important;
	width: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--white);
	border: 1px #1E293B17 solid;
	border-radius: 8px !important;
	box-shadow: 0 2px 1.5px -0.5px #1E293B08;
}

.daterangepicker .calendar-table .prev span {
	margin: 0 0 0 4.5px;
}

.daterangepicker .calendar-table .next span {
	margin: 0 4.5px 0 0;
}

.daterangepicker .drp-calendar thead .month {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.daterangepicker .calendar-table tbody {
	padding: 20px 0 0 0;
}

.daterangepicker .calendar-table tbody td {
	height: 40px;
	min-width: 40px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.daterangepicker .calendar-table td.active {
	color: var(--white) !important;
	background-color: var(--purple) !important;
	border-radius: 10px !important;
}

.daterangepicker .calendar-table td.in-range {
	background-color: #5263FF1F;
	color: var(--purple-2);
}

.daterangepicker .calendar-table td.off.ends.available {
	color: #C8D5E1;
}

.daterangepicker .calendar-table td.available:hover {
	background-color: #F1F5F9CC;
	border: 1px #1E293B17 solid;
	color: var(--dark-txt);
	border-radius: 10px;
}

.daterangepicker .drp-buttons {
	border-top: 1px #1E293B17 solid;
	padding: 16px 0 0 0;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.daterangepicker .drp-buttons .custom-date-inputs {
	margin: 0 !important;
}

.daterangepicker .drp-buttons .custom-date-inputs input {
	padding: 0;
	height: 40px;
	width: 120px;
	background-color: #F1F5F9;
	border: 1px #1E293B17 solid;
	border-radius: 10px;
	color: var(--dark-txt);
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	padding-left: 14px;
}

.daterangepicker .drp-buttons button {
	padding: 8px 18px !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	letter-spacing: -0.2px !important;
	margin: 0 !important;
}

.daterangepicker .drp-buttons .cancelBtn {
	background-color: #F1F5F9CC;
	border: 1px #1E293B17 solid;
	color: var(--dark-txt);
}

.daterangepicker .drp-buttons .cancelBtn:hover {
	background-color: var(--orange);
	color: var(--white);
}

.daterangepicker .drp-buttons .applyBtn {
	background-color: var(--purple);
	color: var(--white);
	border: 1px #1E293B2E solid;
	box-shadow: 0 1px 1px -0.5px #1E293B08;
}

.daterangepicker .drp-buttons .applyBtn:hover {
	background-color: var(--blue);
}

/* End Date Picker =============================================================== */



/* Responsive */

@media (max-width:375px) {
	.main-content .data-left-right .data-left .date .left-date {
		flex-direction: column;
	}

	.main-content .data-left-right .data-left .date .left-date,
	.main-content .data-left-right .data-left .date .left-date .all-date,
	.main-content .data-left-right .data-left .date .left-date .full-date,
	.main-content .data-left-right .data-left .date .left-date .all-date .all-date-select {
		width: 100%;
	}
}

@media (max-width:915px) {
	.daterangepicker {
		width: 320px;
	}

	.daterangepicker .ranges ul,
	.daterangepicker .ranges {
		width: 100%;
	}

	.daterangepicker .drp-calendar.right {
		margin-left: 0;
	}

	.daterangepicker .calendar-table td {
		height: 30px;
		width: 30px;
	}

	.daterangepicker .drp-buttons {
		flex-wrap: wrap;
	}
}

@media (max-width: 768px) {

	/* Narrower page inset on small screens. Both the title bar and the body
	   read this, so they stay aligned at every width. */
	:root {
		--wm-page-inset: 20px;
	}

	.mobile-toggle {
		display: flex;
		transition: 0.3s ease;
	}

	.sidebar {
		transform: translateX(-100%);
		transition: 0.3s ease;
		width: 260px;
		z-index: 1050;
	}

	.sidebar.active {
		transform: translateX(0);
	}

	.main-content {
		margin-left: 0;
		padding-top: 70px;
	}

	.overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1040;
		display: none;
	}

	.overlay.active {
		display: block;
	}

	.main-content {
		margin: 0;
	}

	.mobile-toggle.move-right {
		left: 220px;
		rotate: 180deg;
	}

	.main-content .data-left-right {
		padding: 20px;
	}
}

@media (min-width:769px) and (max-width: 992px) {
	.main-content {
		margin-left: 210px;
	}
}

@media (max-width: 992px) {
	.sidebar {
		width: 210px;
	}
}

@media (max-width: 1320px) {
	.main-content .data-left-right {
		flex-direction: column;
	}

	.main-content .data-left-right .data-left,
	.main-content .data-left-right .data-right {
		width: 100%;
	}
}


/* end home dashboard */



/* STRAT right full popup for view location invites */
.locationModal.right .modal-dialog,
#locationModal.right .modal-dialog,
#rightModal.right .modal-dialog,
#rightModals.right .modal-dialog {
	position: fixed;
	margin: 0;
	right: 0;
	top: 0;
	height: 100%;
	max-width: 480px;
	width: 100%;
}

.locationModal.right .modal-content,
#locationModal.right .modal-content,
#rightModal.right .modal-content,
#rightModals.right .modal-content {
	height: 100vh;
	border-radius: 0;
}

.locationModal.right .modal-content .modal-header,
#locationModal.right .modal-content .modal-header,
#rightModal.right .modal-content .modal-header,
#rightModals.right .modal-content .modal-header {
	padding: 16px 24px;
}

.locationModal.right.fade .modal-dialog,
#locationModal.right.fade .modal-dialog,
#rightModal.right.fade .modal-dialog,
#rightModals.right.fade .modal-dialog {
	transform: translateX(100%);
	transition: transform 0.3s ease-out;
}

.locationModal.right.show .modal-dialog,
#locationModal.right.show .modal-dialog,
#rightModal.right.show .modal-dialog,
#rightModals.right.show .modal-dialog {
	transform: translateX(0);
}


.locationModal .modal-header .icon-image,
#locationModal .modal-header .icon-image,
#rightModal .modal-header .icon-image,
#rightModals .modal-header .icon-image {
	height: 48px;
	width: 48px;
	background-color: #FFC30A33;
	border-radius: 10px;
}

.locationModal .modal-header .icon-image img,
#locationModal .modal-header .icon-image img,
#rightModal .modal-header .icon-image img,
#rightModals .modal-header .icon-image img {
	height: 28px;
}

.locationModal .modal-header h5.modal-title,
#locationModal .modal-header h5.modal-title,
#rightModal .modal-header h5.modal-title,
#rightModals .modal-header h5.modal-title {
	font-size: 22px;
	font-weight: 800;
	line-height: 28px;
	letter-spacing: -1px;
	color: var(--dark-txt);
}

.btn-close {
	height: 38px;
	width: 38px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	border-radius: 10px;
	/* padding: 0 !important; */
	/* margin: 0 !important; */
	background-position: center;
	background-image: url(../img/icons/popup-close.svg) !important;
	background-repeat: no-repeat;
	background-size: 15px;
	opacity: 1;
}

.btn-close:hover {
	opacity: 1;
}

.locationModal.right .modal-content .modal-body button.tab-btn,
#locationModal.right .modal-content .modal-body button.tab-btn,
#rightModal.right .modal-content .modal-body button.tab-btn {
	padding: 12px 12px 12px 20px;
	background-color: #5263FF1F;
	border: none;
	border-radius: 16px;
	color: var(--purple-2);
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.locationModal.right .modal-content .modal-body button.tab-btn p,
#locationModal.right .modal-content .modal-body button.tab-btn p,
#rightModal.right .modal-content .modal-body button.tab-btn p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 360px;
}

.locationModal.right .modal-content .modal-body button.tab-btn span,
#locationModal.right .modal-content .modal-body button.tab-btn span,
#rightModal.right .modal-content .modal-body button.tab-btn span {
	min-height: 32px;
	min-width: 32px;
	border-radius: 8px;
	background-color: #5263FF1F;
}

.locationModal.right .modal-content .modal-body button.tab-btn span img,
#locationModal.right .modal-content .modal-body button.tab-btn span img,
#rightModal.right .modal-content .modal-body button.tab-btn span img {
	height: 18px;
	width: 18px;
}

/* END right full popup for view location invites */



/* START Address invitation modal popup */

#addressModal .modal-content {
	padding: 0 !important;
}

#addressModal .modal-header {
	padding: 16px 0 16px 20px;
	border-bottom: 1px #1E293B17 solid !important;
}

#addressModal .modal-header button.btn-close {
	position: absolute;
	right: 12px;
}

#addressModal .modal-header h5.modal-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

#addressModal .modal-content .modal-body {
	padding: 20px;
}

#addressModal .modal-content .modal-body h6 {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

#addressModal .modal-content .modal-body div span {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

#addressModal .modal-content .modal-body div p {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	white-space: nowrap;
}

#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-inner {
	border-radius: 16px;
	position: relative;
}

#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-control-prev,
#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-control-next {
	height: fit-content;
	width: fit-content;
	top: 50%;
	transform: translate(0%, -50%);
	opacity: 1;
}

#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-control-prev {
	left: 8px;
}

#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-control-next {
	right: 8px;
}

#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-control-prev-icon {
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	border-radius: 8px;
	background-image: url(../img/icons/left-slider-blue-arrow.png) !important;
	background-size: 20px;
}

#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-control-next-icon {
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	border-radius: 8px;
	background-image: url(../img/icons/right-slider-blue-arrow.png) !important;
	background-size: 20px;
}

#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-indicators button {
	margin: 0;
	border: none;
	height: 8px;
	width: 8px;
	background-color: #FFFFFF;
	opacity: 0.5;
	border-radius: 50px;
}

#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-indicators button.active {
	opacity: 1;
}

#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-inner .badgee {
	position: absolute;
	z-index: 9999;
	top: 10px;
	left: 8.5px;
}

#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-inner .badgee span {
	padding: 4px 8px;
	background-color: var(--white);
	color: var(--gray-txt);
	border-radius: 8px;
	border: 1px #1E293B17 solid;
	box-shadow: 0 2px 1.5px -0.5px #1E293B08;
}

#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-inner .full-icon {
	position: absolute;
	bottom: 8px;
	right: 8px;
	z-index: 9999;
	background-color: #F1F5F9CC;
	padding: 7px;
	height: 32px;
	width: 32px;
	border: 1px #1E293B08 solid;
	border-radius: 8px;
	cursor: pointer;
}

#addressModal .modal-content .modal-body #carouselExampleIndicators .carousel-inner .full-icon img {
	height: 18px;
}

#addressModal .modal-content .modal-body .color-indicate {
	overflow-x: scroll;
	scrollbar-width: thin;
}

#addressModal .modal-content .modal-body .color-indicate .color-box {
	padding: 5px 8px 5px 6.5px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	border-radius: 8px;
}

#addressModal .modal-content .modal-body .color-indicate .color-box .circule {
	height: 12.83px;
	width: 12.83px;
	border-radius: 50px;
}

#addressModal .modal-content .modal-body .color-indicate .color-box .circule.red-color {
	background-color: var(--orange);
}

#addressModal .modal-content .modal-body .color-indicate .color-box .circule.yellow-color {
	background-color: var(--yellow-2);
}

#addressModal .modal-content .modal-body .color-indicate .color-box .circule.green-color {
	background-color: var(--green-2);
}

#addressModal .modal-content .modal-body .color-indicate .color-box p {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	white-space: nowrap;
}

#addressModal .modal-content .modal-body .color-indicate .color-box span {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
	margin-left: -2px;
	white-space: nowrap;
}

#addressModal .modal-content .modal-footer {
	padding: 16px 20px;
	gap: 12px;
}

#addressModal .modal-content .modal-footer button.decline-btn,
#addressModal .modal-content .modal-footer button.accept-btn {
	height: 40px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B17 solid;
	border-radius: 10px;
	color: var(--dark-txt);
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	transition: 0.3s;
}

#addressModal .modal-content .modal-footer button.decline-btn:hover {
	background-color: var(--orange);
	color: var(--white);
}

#addressModal .modal-content .modal-footer button.accept-btn {
	background-color: var(--purple);
	color: var(--white);
}

#addressModal .modal-content .modal-footer button.accept-btn:hover {
	background-color: var(--blue);
}


/* END Address invitation modal popup */


/* START Success Toast (bottom right popup) */
/* 
.custom-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 420px;
	border-radius: 24px;
	max-width: 95%;
	padding: 12px;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.3s ease;
	background: rgba(30, 41, 59, 0.08);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}

.custom-toast.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.toast-content {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 12px;
	border-radius: 20px;
	background: var(--white);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px);
	box-shadow: 0 32px 32px -16px #1E293B08;
}

.toast-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #5263FF1F;
	display: flex;
	align-items: center;
	justify-content: center;
}

.toast-center h6 {
	font-weight: 600;
	color: var(--dark-txt);
}

.toast-center p {
	font-size: 14px;
	color: var(--gray-txt-2);
}

.toast-timer {
	font-size: 12px;
	color: var(--gray-txt-2);
	margin-top: 12px;
}

.toast-timer span {
	color: var(--purple);
	font-weight: 500;
}

.toast-timer p {
	color: var(--purple);
}

.toast-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--white);
	border: 1px #1E293B17 solid !important;
	border-radius: 50%;
	box-shadow: 0 2px 1.5px -0.5px #1E293B08 !important;
	width: 32px;
	height: 32px;
	cursor: pointer;
} */

/* END Success Toast (bottom right popup) */

/* ===============================================================================================================================================================
																			End home page
=============================================================================================================================================================== */

/* ===============================================================================================================================================================
																			Start dispatch page
=============================================================================================================================================================== */
.dispatch .main-content .main-title button.info-btn {
	height: 32px;
	width: 40px;
	background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(90deg, #ffffff17, #ffffff2e) border-box !important;
}

.dispatch .main-content .main-title button.create-dispatch-btn {
	gap: 2px !important;
	width: auto;
	padding: 10px;
}

.dispatch .main-content .main-title button.create-dispatch-btn p {
	padding: 0 4px;
}

.dispatch .main-content .main-title .tab-btn {
	gap: 6px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	padding: 4px;
	border-radius: 12px;
}

.dispatch .main-content .main-title .tab-btn button {
	background: transparent;
	padding: 8px;
	border-radius: 8px;
	border: 1px transparent solid;
	color: var(--gray-txt);
	gap: 2px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	width: auto;
}

.dispatch .main-content .main-title .tab-btn button p {
	padding: 0 4px;
}

.dispatch .main-content .main-title .tab-btn button.active {
	border: 1px #1E293B1F solid;
	background: white;
	color: var(--dark-txt);
	box-shadow: 0 3px 3px -1.5px #1E293B08;
}

.dispatch .main-content .main-title .dispatch-dropdown {
	position: relative;
	display: inline-block;
	margin: 0 24px 0 0;
}

.dispatch .main-content .main-title .dispatch-menu {
	position: absolute;
	top: 110%;
	left: 50%;
	width: auto;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #1E293B0F;
	box-shadow: 0 32px 32px -16px #1E293B08;
	padding: 16px;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 0) !important;
	transition: all 0.25s ease;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 9999;
}

.dispatch .main-content .main-title .dispatch-menu.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dispatch .main-content .main-title .dispatch-menu button.dispatch-item {
	height: 32px;
	width: 180px;
}

.dispatch .main-content .main-title .dispatch-menu button.dispatch-item.normal-btn {
	background: #F1F5F9CC;
	color: var(--dark-txt);
	border: 1px #1E293B17 solid;
}

.dispatch .main-content .data-left-right .dispatch-tab-btn {
	gap: 6px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	padding: 4px;
	border-radius: 16px;
	width: max-content;
}

.dispatch .main-content .data-left-right .dispatch-tab-btn button {
	background-color: transparent;
	padding: 6px 10px;
	border: 1px transparent solid;
	border-radius: 10px;
	gap: 2px;
	font-size: 13px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.dispatch .main-content .data-left-right .dispatch-tab-btn button.active {
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	box-shadow: 0 1.5px 2px 0.5px rgba(0, 0, 0, 0.06);
}

.dispatch .main-content .data-left-right .dispatch-tab-btn button svg path {
	fill: var(--gray-txt);
}

.dispatch .main-content .data-left-right .dispatch-tab-btn button.active svg path {
	fill: var(--dark-txt);
}

.dispatch .main-content .data-left-right .dispatch-tab-btn button p {
	padding: 0 4px;
	color: var(--gray-txt);
}

.dispatch .main-content .data-left-right .dispatch-tab-btn button.active p {
	color: var(--dark-txt);
}

.dispatch .main-content .data-left-right .dispatch-tab-btn button span {
	padding-right: 4px;
	color: var(--gray-txt-2);
}

.dispatch .main-content .data-left-right .custom-select {
	position: relative;
	width: 110px;
}

.dispatch .main-content .data-left-right .custom-select button {
	width: 100%;
	padding: 7px 10px 7px 10px;
	border-radius: 8px;
	border: 1px solid #1E293B17;
	border-radius: 10px;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: #F1F5F9CC;
	cursor: pointer;
}

.dispatch .main-content .data-left-right .custom-select::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background: url("../img/icons/menu-dark.svg") no-repeat center;
	background-size: contain;
	pointer-events: none;
}

.dispatch .main-content .data-left-right .custom-select::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background: url("../img/icons/dark-down-arrow.svg") no-repeat center;
	background-size: contain;
	pointer-events: none;
}

.dispatch .main-content .data-left-right .custom-select.open::after {
	background: url("../img/icons/dark-up-arrow.svg") no-repeat center;
}

.dispatch .main-content .data-left-right .main-table {
	background-color: var(--white);
	border: 1px solid #1E293B0F;
	border-radius: 20px;
	box-shadow: 
		0px 20px 20px -12px #1E293B08,
		0px 3px 3px -1.5px #1E293B08,
		0px 1px 1px -0.5px #1E293B08;
	margin: 24px 0;
	overflow-x: scroll;
	scrollbar-width: none;
}

.dispatch .main-content .data-left-right .main-table .table-title {
	padding: 16px;
}

.dispatch .main-content .data-left-right .main-table .table-title h5 {
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.dispatch .main-content .data-left-right .main-table .table-title .close-txt {
	background-color: #5263FF1F;
	border-radius: 8px;
	padding: 8px;
	gap: 2px;
}

.dispatch .main-content .data-left-right .main-table .table-title .close-txt p {
	padding: 0 4px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--purple-2);
}

.dispatch .main-content .data-left-right .main-table table {
	width: 100%;
	min-width: 1000px;
}

.dispatch .main-content .data-left-right .main-table table tr {
	border-bottom: 1px #1E293B0F solid;
}

.dispatch .main-content .data-left-right .main-table table tr:hover {
	background-color: #5263FF1F;
}

.dispatch .main-content .data-left-right .main-table table tr th {
	padding: 12px 16px;
	background-color: #F8FAFC;
	border-top: 1px #1E293B0F solid;
	border-bottom: 1px #1E293B0F solid;
	color: var(--gray-txt-2);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
}

.dispatch .main-content .data-left-right .main-table table tr td {
	padding: 16px;
}

.dispatch .main-content .data-left-right .main-table table tr td button.details-btn {
	background-color: #5263FF1F;
	border-radius: 8px;
	gap: 2px;
	padding: 8px;
	border: none;
	outline: none;
}

.dispatch .main-content .data-left-right .main-table table tr td button.details-btn p {
	padding: 0 4px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--purple-2);
}

.dispatch .main-content .data-left-right .main-table table tr td button.details-btn.green {
	background-color: var(--green);
}

.dispatch .main-content .data-left-right .main-table table tr td button.details-btn.green p {
	color: var(--white);
	white-space: nowrap;
}

.dispatch .main-content .data-left-right .main-table table tr td .badgee {
	padding: 4px 6px;
	border-radius: 8px;
	width: max-content;
	gap: 2px;
}

.dispatch .main-content .data-left-right .main-table table tr td .badgee.red-badge {
	background-color: #ED40301F;
	color: var(--orange);
}

.dispatch .main-content .data-left-right .main-table table tr td .badgee.green-badge {
	background-color: #409B3F1F;
	color: var(--green);
}

.dispatch .main-content .data-left-right .main-table table tr td .badgee.gray-badge {
	background-color: #F1F5F9CC;
	color: var(--gray-txt);
	border: 1pa #1E293B08 solid;
}

.dispatch .main-content .data-left-right .main-table table tr td .badgee p {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	padding: 0 4px;
}

.dispatch .main-content .data-left-right .main-table table tr td .progress-card {
	max-width: 300px;
}

.dispatch .main-content .data-left-right .main-table table tr td .progress-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
}

.dispatch .main-content .data-left-right .main-table table tr td .status {
	color: var(--dark-txt);
}

.dispatch .main-content .data-left-right .main-table table tr td .percent {
	color: var(--green-2);
}

.dispatch .main-content .data-left-right .main-table table tr td .percent.gray {
	color: var(--gray-txt);
}

.dispatch .main-content .data-left-right .main-table table tr td .percent.yellow {
	color: var(--yellow);
}

.dispatch .main-content .data-left-right .main-table table tr td .progress-bar {
	width: 100%;
	height: 15px;
	background: #d7dde4;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 8px;
}

.dispatch .main-content .data-left-right .main-table table tr td .progress-fill {
	height: 100%;
	background: var(--green-2);
	border-radius: 10px;
}

.dispatch .main-content .data-left-right .main-table table tr td .progress-fill.yellow {
	background-color: var(--yellow-2);
}

.dispatch .main-content .data-left-right .main-table table tr td .type h5 {
	font-size: 15px;
	font-weight: 800;
	line-height: 24px;
	letter-spacing: 0.2px;
	color: var(--dark-txt);
}

.dispatch .main-content .data-left-right .main-table table tr td .type span {
	color: var(--gray-txt-2);
	font-size: 13px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.dispatch .main-content .data-left-right .main-table table tr td .type-badgee {
	padding: 4px 6px;
	background-color: #06B1F11F;
	border-radius: 8px;
	width: max-content;
	margin-bottom: 12px;
}

.dispatch .main-content .data-left-right .main-table table tr td .type-badgee p {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--sky);
}

.dispatch .main-content .data-left-right .main-table table tr td .type-badgee img {
	height: 14px;
	cursor: pointer;
}

.dispatch .main-content .data-left-right .main-table table tr td .error u {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--orange);
}

.dispatch .main-content .data-left-right .main-table table tr td .job-details img {
	height: 14px;
}

.dispatch .main-content .data-left-right .main-table table tr td .job-details h5 {
	font-size: 15px;
	font-weight: 800;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.dispatch .main-content .data-left-right .main-table table tr td .job-details-badgee {
	padding: 4px 6px;
	gap: 2px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	border-radius: 8px;
	width: max-content;
	margin: 8px 0 12px 0;
}

.dispatch .main-content .data-left-right .main-table table tr td .job-details-badgee p {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
}

.dispatch .main-content .data-left-right .main-table table tr td .job-details-badgee.red {
	background-color: #ED40301F;
	border: 1px #ED40301F solid;
}

.dispatch .main-content .data-left-right .main-table table tr td .job-details-badgee.red p {
	color: var(--orange);
}

.dispatch .main-content .data-left-right .main-table table tr td .job-details-badgee.yellow {
	background-color: #FFC30A1F;
	border: 1px #FFC30A33 solid;
}

.dispatch .main-content .data-left-right .main-table table tr td .job-details-badgee.yellow p {
	color: var(--yellow);
}

.dispatch .main-content .data-left-right .main-table table tr td .job-details-badgee-time img {
	height: 16px;
}

.dispatch .main-content .data-left-right .main-table table tr td .job-details-badgee-time span {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.dispatch .main-content .data-left-right .main-table .footer-bar {
	padding: 8px 16px;
	border-top: 1px #1E293B17 solid;
	min-width: 1000px;
}

.dispatch .main-content .data-left-right .main-table .footer-bar .cstm-pagination button {
	height: 32px;
	width: 32px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
	background-color: transparent;
	border: 1px transparent solid;
	border-radius: 8px;
}

.dispatch .main-content .data-left-right .main-table .footer-bar .cstm-pagination button.arrow {
	background-color: var(--white);
	border: 1px #1E293B17 solid;
	backdrop-filter: blur(24px);
	box-shadow: 
		0px 2px 1.5px -0.5px #1E293B08,
		0px 2px 3px 0px #FFFFFF08 inset;
}

.dispatch .main-content .data-left-right .main-table .footer-bar .cstm-pagination button.arrow img {
	height: 16px;
}

.dispatch .main-content .data-left-right .main-table .footer-bar .cstm-pagination button.active {
	width: 29px;
	border: 1px #1E293B17 solid;
	background-color: #f1f5f9d2;
}

.dispatch .main-content .data-left-right .main-table .footer-bar .cstm-pagination button:not(:disabled):hover {
	background-color: #f3f6f8;
}

.dispatch .main-content .data-left-right .main-table .footer-bar .go-page label {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.dispatch .main-content .data-left-right .main-table .footer-bar .go-page div {
	height: 32px;
	background-color: #F1F5F9;
	border: 1px #1E293B1F solid;
	border-radius: 8px;
	padding: 2px;
	box-shadow: 
		0px 3px 3px -1.5px #1E293B08,
		0px 1px 1px -0.5px #1E293B08;
}

.dispatch .main-content .data-left-right .main-table .footer-bar .go-page div input {
	height: 100%;
	width: 100%;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
	border: none;
	outline: none;
	padding-left: 8px;
	border-radius: 8px;
	background-color: transparent;
}

.dispatch .main-content .data-left-right .main-table .footer-bar .go-page div input::placeholder {
	color: #64748B;
}

.dispatch .main-content .data-left-right .main-table .footer-bar .go-page div input::-webkit-outer-spin-button,
.dispatch .main-content .data-left-right .main-table .footer-bar .go-page div input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dispatch .main-content .data-left-right .main-table .footer-bar .go-page div button {
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1px 10px;
	color: var(--gray-txt);
	font-size: 10px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.2px;
	border: 1px #1E293B17 solid;
	border-radius: 6px;
	background-color: var(--white);
	backdrop-filter: blur(24px);
	box-shadow: 
		0px 2px 1.5px -0.5px #1E293B08,
		0px 2px 3px 0px #FFFFFF08 inset;
}

.dispatch .main-content .data-left-right .main-table .footer-bar .go-page div button:not(:disabled):hover {
	background-color: #f3f6f8;
}

.dispatch .main-content .data-left-right .main-table .footer-bar .result label {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.dispatch .main-content .data-left-right .main-table .footer-bar .result select {
	padding: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
	border: 1px rgba(30, 41, 59, 0.06) solid;
	outline: none;
	border-radius: 8px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("../img/icons/gray-arrow.png");
	background-repeat: no-repeat;
	background-position: right 0px center;
	background-size: 18px;
	cursor: pointer;
	width: 60px;
}

.dispatch .main-content .data-left-right .main-table .footer-bar hr {
	height: 15px;
	border: 1px #1e293b67 solid;
}

@media (max-width:425px) {
	.dispatch .main-content .main-title .dispatch-dropdown {
		position: relative;
		display: inline-block;
		margin: 0;
	}
}


/* STRAT dispatch-types popup */
#dispatch-types .modal-dialog {
	min-width: 720px;
}

#dispatch-types .modal-content {
	padding: 0 !important;
}

#dispatch-types .modal-header {
	padding: 16px 20px;
	border-radius: 16px 16px 0 0;
	border-bottom: 1px #1E293B17 solid !important;
}

#dispatch-types .modal-header h5 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

#dispatch-types .modal-header p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
	margin-top: 4px;
}

#dispatch-types .modal-header button.btn-close {
	position: absolute;
	right: 12px;
	top: 12px;
	height: 32px;
	width: 32px;
	background-size: 13px;
}

#dispatch-types .modal-body {
	background-color: #F1F5F9;
	border-radius: 0 0 16px 16px;
	padding: 16px 20px;
}

#dispatch-types .modal-body .box {
	background-color: var(--white);
	border-radius: 16px;
	padding: 20px;
	gap: 16px;
}

#dispatch-types .modal-body .box .icon {
	min-height: 40px;
	min-width: 40px;
	background-color: #5263FF1F;
	border-radius: 8px;
}

#dispatch-types .modal-body .box .icon img {
	height: 22px;
}

#dispatch-types .modal-body .box .content h6 {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

#dispatch-types .modal-body .box .content p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
}

/* END dispatch-types popup */


@media (max-width: 768px) {
	#dispatch-types .modal-dialog {
		min-width: 95%;
	}

	#dispatch-types .modal-body .box {
		flex-direction: column;
	}
}

/* END dispatch-types popup */

/* START filter-dispatches */

#filter-dispatches .modal-right {
	position: fixed;
	right: 20px;
	margin: 0;
	top: 50%;
	transform: translateY(-50%);
	max-width: 360px;
	width: 360px;
}

#filter-dispatches .modal-content {
	padding: 0 !important;
}

#filter-dispatches .modal-header {
	padding: 8px 16px;
	border-bottom: 1px #dee2e6 solid !important;
}

#filter-dispatches .modal-header h6 {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

#filter-dispatches .modal-body .status label,
#filter-dispatches .modal-body .date label,
#filter-dispatches .modal-body .dispatch-by label,
#filter-dispatches .modal-body .errors label {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

#filter-dispatches .modal-body .status .selected,
#filter-dispatches .modal-body .errors .selected {
	background-color: #5263FF1F;
	padding: 8px;
	gap: 2px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--purple-2);
	border-radius: 8px;
}

#filter-dispatches .modal-body .status .selected.not,
#filter-dispatches .modal-body .errors .selected.not {
	background-color: #F1F5F9CC;
	color: var(--dark-txt);
}

#filter-dispatches .modal-body .date .full-date {
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	background-color: var(--white);
	width: max-content;
}

#filter-dispatches .modal-body .date .full-date img {
	height: 16px;
}

#filter-dispatches .modal-body .date .full-date input {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	border: none;
	outline: none;
	width: 155px;
}

#filter-dispatches .modal-body .dispatch-by .cstm-select {
	border: 1px #1E293B1F solid;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	padding: 8px;
}

#filter-dispatches .modal-body .dispatch-by .cstm-select select {
	border: none;
	outline: none;
	color: var(--dark-txt);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("../img/icons/gray-arrow.png");
	background-repeat: no-repeat;
	background-position: right 0px center;
	background-size: 18px;
	cursor: pointer;
}

/* #filter-dispatches .modal-body .manual-only {} */

#filter-dispatches .modal-body .manual-only h6 {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

/* START custom toggle btn */
#filter-dispatches .modal-body .manual-only .toggle-switch {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 28px;
	background: #E2E8F0;
	background: linear-gradient(180deg, rgba(226, 232, 240, 1) 0%, rgba(248, 250, 252, 1) 100%);
	border-radius: 50px;
	padding: 3px;
}

#filter-dispatches .modal-body .manual-only .toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

#filter-dispatches .modal-body .manual-only .slider {
	position: absolute;
	cursor: pointer;
	border-radius: 30px;
	background-color: #D3DDE8;
	transition: 0.3s;
	height: 22px;
	width: 40px;
}

#filter-dispatches .modal-body .manual-only .slider:before {
	content: "";
	position: absolute;
	height: 18px;
	width: 18px;
	left: 2px;
	top: 2px;
	border-radius: 1000px;
	background: linear-gradient(180deg, #E2E8F0 0%, #FFFFFF 100%);
	border: 3.5px solid #F9FBFC;
	box-shadow: 0px 2px 3px -1.5px #1E293B52;
	transition: 0.3s;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

#filter-dispatches .modal-body .manual-only .toggle-switch input:checked+.slider {
	background: linear-gradient(135deg, #5B67F6, #4C57E0);
}

#filter-dispatches .modal-body .manual-only .toggle-switch input:checked+.slider:before {
	transform: translateX(18px);
	background: #fff;
}

#filter-dispatches .modal-body .manual-only .toggle-switch input:checked+.slider:after {
	content: "";
	position: absolute;
	right: 5px;
	top: 7.5px;
	width: 11px;
	height: 11px;
	background-image: url("../img/icons/toggle-check-icon.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

/* END custom toggle btn */





#filter-dispatches .modal-footer {
	padding: 12px 16px;
}

#filter-dispatches .modal-footer button {
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	border-radius: 8px;
	border: 1px transparent solid;
	padding: 8px 12px;
	backdrop-filter: blur(24px);
	box-shadow: 
		0px 1px 1px -0.5px #1E293B08,
		0px 3px 3px 0px #FFFFFF1F inset;
}

#filter-dispatches .modal-footer button.reset-btn {
	color: var(--gray-txt);
}

#filter-dispatches .modal-footer button.cancel-btn {
	background-color: #F1F5F9CC;
	border-color: #1E293B17;
	color: var(--dark-txt);
}

#filter-dispatches .modal-footer button.apply-btn {
	background-color: var(--purple);
	color: var(--white);
}

@media (max-width:425px) {
	#filter-dispatches .modal-right {
		position: fixed;
		right: 10px;
		margin: none;
		top: 0;
		transform: translateY(0%);
		max-width: 100%;
		width: 95%;
	}
}

@media (max-width:915px) {
	.dispatch .daterangepicker {
		height: 300px;
		overflow-y: scroll;
		scrollbar-width: none;
	}
}


/* END filter-dispatches */


.dispatch .main-content .top-errors {
	background-color: #ED40301F;
}

.dispatch .main-content .top-errors .txt {
	margin: 14px 0 14px 40px;
}

.dispatch .main-content .top-errors .txt img {
	height: 20px;
	width: 20px;
}

.dispatch .main-content .top-errors .txt span {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--orange);
}

.dispatch .main-content .top-errors button.dropdown-toggle {
	margin: 14px 40px 14px 0;
	padding: 8px;
	border: none;
	outline: none;
}

.dispatch .main-content .top-errors button.dropdown-toggle::after {
	display: none;
}

.dispatch .main-content .top-errors ul.dropdown-menu {
	transform: translate(0, 60px) !important;
	border: none;
	border-radius: 0;
	background-color: rgba(237, 64, 48, 0.12);
	border-top: 1px solid rgba(237, 64, 48, 0.2);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
}

.dispatch .main-content .top-errors ul.dropdown-menu li {
	padding: 8px 64px;
}

.dispatch .main-content .top-errors ul.dropdown-menu li div span {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--orange);
}

.dispatch .main-content .top-errors ul.dropdown-menu li button {
	padding: 8px 12px;
	background-color: var(--orange);
	color: var(--white);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	border: none;
	outline: none;
	border-radius: 8px;
}

@media (max-width:768px) {
	.dispatch .main-content .top-errors .txt {
		margin: 14px 0px 14px 14px;
	}

	.dispatch .main-content .top-errors button.dropdown-toggle {
		margin: 14px 14px 14px 0;
	}

	.dispatch .main-content .top-errors ul.dropdown-menu li {
		padding: 8px 20px;
	}
}



/* START Change work type popup */

.change-work-type .modal-dialog {
	min-width: 560px;
}

.change-work-type .modal-content {
	padding: 0 !important;
}

.change-work-type .modal-header {
	padding: 16px 20px;
	border-bottom: 1px #dee2e6 solid !important;
}

.change-work-type .modal-header h6 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.change-work-type .modal-header button.btn-close {
	position: absolute;
	top: 12px;
	right: 12px;
	height: 32px;
	width: 32px;
	background-size: 13px;
}

.change-work-type .modal-body {
	padding: 20px;
}

.change-work-type .modal-body p.txt {
	font-size: 15px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.change-work-type .modal-body .two-radio {
	gap: 64px;
}

.change-work-type .modal-body .two-radio p.radio-txt {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}


.change-work-type .modal-body table tr.heading-tr {
	border: 1px #1E293B0F solid;
	background-color: #F1F5F9;
	display: flex;
	align-items: center;
	border-radius: 12px 12px 0 0;
}

.change-work-type .modal-body table th {
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 20px !important;
	letter-spacing: -0.2px !important;
	color: var(--dark-txt) !important;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
}

.change-work-type .modal-body table th.second {
	border-left: 1px #1E293B0F solid;
}

.change-work-type .modal-body table th.second img {
	height: 16px;
}

.change-work-type .modal-body table.data {
	border-right: 1px #1E293B0F solid;
	border-bottom: 1px #1E293B0F solid;
	border-left: 1px #1E293B0F solid;
	border-radius: 0 0 16px 16px;
	border-collapse: separate;
}

.change-work-type .modal-body table.data tr:nth-child(even) {
	background-color: #F8FAFC;
}

.change-work-type .modal-body table.data td {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	gap: 10px;
	padding: 8px 16px;
}

.change-work-type .modal-body table.data td.first {
	width: 40%;
	border-left: 1px #1E293B0F solid;
}

.change-work-type .modal-body table.data td div span {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}



.change-work-type .modal-footer {
	padding: 16px 20px;
}

.change-work-type .modal-footer button {
	padding: 8px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B17 solid;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.change-work-type .modal-footer button.confirm-btn {
	background-color: var(--purple);
	color: var(--white);
	border-color: transparent;
}

/* start cstm radio */

.custom-radio {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.custom-radio input {
	display: none;
}

.radio-ui {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #F1F5F9;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.radio-ui::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.3s ease;
}

.custom-radio input:checked+.radio-ui {
	background: var(--purple);
}

.custom-radio input:checked+.radio-ui::after {
	opacity: 1;
	transform: scale(1);
}

.custom-radio input:not(:checked)+.radio-ui {
	border: 2px solid #1E293B17;
}

/* end cstm radio */


@media (max-width:768px) {
	.change-work-type .modal-dialog {
		min-width: 95%;
	}
}



/* END Change work type popup */


/* START are-you-sure popup complete-popup */

.complete-popup .modal-footer button.close-btn {
	padding: 8px !important;
	background-color: #F1F5F9CC !important;
	border: 1px #1E293B17 solid !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	letter-spacing: -0.2px !important;
	color: var(--dark-txt) !important;
	outline: none !important;
}

.complete-popup .modal-footer button.complate-btn {
	background-color: var(--green) !important;
	border: 1px transparent solid !important;
	outline: none !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	letter-spacing: -0.2px !important;
	color: var(--white) !important;
}

/* END are-you-sure popup complete-popup */




/* cstm -minus checkbox START */
.custom-minus {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.custom-minus input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.custom-minus .minusmark {
	height: 20px;
	width: 20px;
	border-radius: 6px;
	border: 2px solid #1E293B1F;
	background: #F1F5F9;
	display: block;
	position: relative;
}

.custom-minus input:checked+.minusmark {
	background-color: #5263FF33;
	border: none;
}

.custom-minus .minusmark::after {
	content: "";
	position: absolute;
	display: none;
}

.custom-minus input:checked+.minusmark::after {
	display: block;
}

.custom-minus .minusmark::after {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 2px;
	background-color: var(--purple);
	border-radius: 2px;
}

/* cstm -minus checkbox END */

/* STRAT cancel-dispatch-popup */

.cancel-dispatch-popup .modal-content {
	padding: 0 !important;
}

.cancel-dispatch-popup .modal-header {
	padding: 16px 20px;
}

.cancel-dispatch-popup .modal-header div h6 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.cancel-dispatch-popup .modal-header div span {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.cancel-dispatch-popup .modal-header button.btn-close {
	position: absolute;
	top: 12px;
	right: 12px;
	height: 32px;
	width: 32px;
	background-size: 13px;
}

.cancel-dispatch-popup .modal-footer {
	padding: 16px 20px;
}

.cancel-dispatch-popup .modal-footer button {
	padding: 8px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	border: 1px transparent solid;
	outline: none;
}

.cancel-dispatch-popup .modal-footer button.cancel-btn {
	background-color: #ED40301F;
	color: var(--orange);
}

.cancel-dispatch-popup .modal-footer button.close-btn {
	background-color: var(--purple);
	color: var(--white);
}

/* END cancel-dispatch-popup */







/* ===============================================================================================================================================================
																			End dispatch page
=============================================================================================================================================================== */
/* ===============================================================================================================================================================
																			Start address-dispatch page
=============================================================================================================================================================== */


.address-dispatch {
	background-color: #F1F5F9;
}

.address-dispatch .address-dispatch-content .header-title {
	padding: 16px 20px;
	background-color: var(--white);
	border-bottom: 1px #1E293B17 solid;
}

.address-dispatch .address-dispatch-content .header-title .icon {
	height: 48px;
	width: 48px;
	background-color: #5263FF1F;
	border-radius: 10px;
}

.address-dispatch .address-dispatch-content .header-title .icon img {
	height: 28px;
}

.address-dispatch .address-dispatch-content .header-title .title-txt h5 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.address-dispatch .address-dispatch-content .header-title .title-txt p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.address-dispatch .address-dispatch-content .header-title a.X-btn,
.address-dispatch .address-dispatch-content .header-title button.X-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	height: 32px;
	width: 32px;
}

.address-dispatch .address-dispatch-content .header-title a.X-btn button,
.address-dispatch .address-dispatch-content .header-title button.X-btn {
	height: 32px;
	width: 32px;
	background-size: 13px;
}

.address-dispatch .address-dispatch-content .address-dispatch-two .address-dispatch-left {
	width: 45%;
	height: calc(100vh - 180px);
	overflow: scroll;
	scrollbar-width: none;
}

.address-dispatch .address-dispatch-content .address-dispatch-two .address-dispatch-left .search {
	padding: 12px 16px;
	background-color: var(--white);
}

.address-dispatch .address-dispatch-content .address-dispatch-two .address-dispatch-left .search div {
	padding: 8px;
	border: 1px #1E293B1F solid;
	border-radius: 50px;
	box-shadow: 0 3px 3px -1.5px #1E293B08;
}

.address-dispatch .address-dispatch-content .address-dispatch-two .address-dispatch-left .search div button {
	height: 16px;
	width: 16px;
	background-color: transparent;
	border: none;
	outline: none;
}

.address-dispatch .address-dispatch-content .address-dispatch-two .address-dispatch-left .search div button img {
	height: 16px;
}

.address-dispatch .address-dispatch-content .address-dispatch-two .address-dispatch-left .search div input {
	height: 16px;
	border: none;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.address-dispatch .address-dispatch-left .boxes {
	padding: 16px;
	gap: 12px;
}

.address-dispatch .address-dispatch-left .box {
	padding: 16px;
	background-color: var(--white);
	border: 2px #5263FF66 solid;
	border-radius: 16px;
}


/* START custom Checkbox box */
.custom-check {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.custom-check input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.custom-check .checkmark {
	height: 20px;
	width: 20px;
	border-radius: 6px;
	border: 2px solid #1E293B1F;
	background: #F1F5F9;
	display: block;
	position: relative;
}

.custom-check input:checked+.checkmark {
	background-color: var(--purple);
	border: none;
}

.custom-check .checkmark::after {
	content: "";
	position: absolute;
	display: none;
}

.custom-check input:checked+.checkmark::after {
	display: block;
}

.custom-check .checkmark::after {
	left: 7px;
	top: 3.5px;
	width: 6px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* END custom Checkbox box */
.address-dispatch .address-dispatch-left .box .wrapper {
	margin-top: -2px;
}

.address-dispatch .address-dispatch-left .box .wrapper .box-title h6 {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.address-dispatch .address-dispatch-left .box .wrapper .box-title span {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--purple-2);
	padding: 4px 8px;
	background-color: #5263FF1F;
	border-radius: 8px;
}

.address-dispatch .address-dispatch-left .box .wrapper .box-title span.yellow {
	background-color: #FFC30A1F;
	color: var(--yellow);
}

.address-dispatch .address-dispatch-left .box .wrapper .box-title p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.address-dispatch .address-dispatch-left .box .wrapper .bagee {
	padding: 4px 6px;
	background-color: #FFC30A1F;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.address-dispatch .address-dispatch-left .box .wrapper .bagee img {
	height: 14px;
}

/* STRAT tooltip */
.tooltip {
	box-shadow: 0 32px 32px -16px #1e293b1c !important;
	opacity: 1 !important;
}

.tooltip .tooltip-inner {
	height: auto;
	min-width: 280px !important;
	background-color: var(--white);
	color: var(--yellow);
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	padding: 12px;
	border-radius: 16px;
	border: 1px #1E293B1F solid;
	border-bottom: none;
	text-align: left;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
	border-top-color: var(--white);
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
	border-right-color: var(--white);
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
	border-bottom-color: var(--white);
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
	border-left-color: var(--white);
}


.tooltip-custom h6 {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.tooltip-custom p {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

/* END tooltip */

.address-dispatch .address-dispatch-left .box .wrapper .bagee span {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--yellow);
}

.address-dispatch .address-dispatch-left .box .wrapper hr {
	border: 1px #1e293b37 solid;
	margin: 12px 0;
}

.address-dispatch .address-dispatch-left .box .wrapper label {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.address-dispatch .address-dispatch-left .box .wrapper label.select-txt {
	color: var(--gray-txt-2);
}

.address-dispatch .address-dispatch-left .box .wrapper .cstm-select {
	padding: 8px;
	border: 1px #1E293B1F solid;
	border-radius: 8px;
}

.address-dispatch .address-dispatch-left .box .wrapper .cstm-select img {
	height: 16px;
}

.address-dispatch .address-dispatch-left .box .wrapper .cstm-select select {
	border: none;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-txt);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("../img/icons/gray-arrow.png");
	background-repeat: no-repeat;
	background-position: right 0px center;
	background-size: 18px;
	cursor: pointer;
	box-shadow: 0 3px 3px -1.5px #1E293B08;
}

.address-dispatch .address-dispatch-left .box .wrapper button.add-driver {
	height: 24px;
	width: 59px;
	background-color: var(--purple);
	color: var(--white);
	border: 1px #1E293B2E solid;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
}

.address-dispatch .address-dispatch-left .box .wrapper button.add-driver:hover {
	background-color: var(--blue);
}

.address-dispatch .address-dispatch-left .box .wrapper .selected {
	padding: 4px 6px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	border-radius: 8px;
	width: max-content;
}

.address-dispatch .address-dispatch-left .box .wrapper .selected.plus {
	height: 24px;
	width: 24px;
}

.address-dispatch .address-dispatch-left .box .wrapper .selected img {
	height: 14px;
}

.address-dispatch .address-dispatch-left .box .wrapper .selected span {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.address-dispatch .address-dispatch-content .address-dispatch-two .address-dispatch-right {
	width: 55%;
	height: calc(100vh - 180px);
	overflow: hidden;
}

.address-dispatch .address-dispatch-content .address-dispatch-two .address-dispatch-right img.map {
	width: 100%;
	height: 100%;
	object-fit: cover;
}




.address-dispatch .address-dispatch-content .address-dispatch-footer {
	padding: 0px 24px;
	background-color: var(--white);
	border-top: 1px #1E293B17 solid;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-1 {
	width: 15%;
	padding: 16px 0;
	border-right: 1px #1E293B17 solid;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-2 {
	width: 30%;
	padding: 16px 0;
	border-right: 1px #1E293B17 solid;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-3 {
	width: 30%;
	padding: 16px 0;
	border-right: 1px #1E293B17 solid;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-4 {
	width: 25%;
	padding: 16px 0;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-1 span {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-1 p {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-2 label,
.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-3 label {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-2 label span,
.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-3 label span {
	color: var(--orange);
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-2 .date-time {
	border: 1px #1E293B1F solid;
	box-shadow: 0 3px 3px -1.5px #1E293B08;
	border-radius: 10px;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-2 .date-time img {
	height: 18px;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-2 .date-time p {
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-2 .date-time .date {
	padding: 8px 56px 8px 10px;
	border-right: 1px #1E293B1F solid;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-2 .date-time .time {
	padding: 8px 14px 8px 10px;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-3 select {
	padding: 0 40px 0 10px;
	height: 40px;
	width: 100%;
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-txt);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("../img/icons/gray-arrow.png");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 18px;
	cursor: pointer;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-3 p.error {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--badge-orange);
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-4 div {
	gap: 10px;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-4 div button {
	padding: 8px 10px;
	border-radius: 10px;
	gap: 2px;
	border: 1px transparent solid;
	outline: none;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-4 div button:hover {
	opacity: 0.9;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-4 div button span {
	padding: 0 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-4 div button.setting-btn {
	background-color: #5263FF1F;
	color: var(--purple-2);
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-4 div button.share-btn {
	background-color: var(--purple);
	color: var(--white);
}

@media (max-width:1024px) {
	.address-dispatch .address-dispatch-content .address-dispatch-footer {
		flex-wrap: wrap;
	}

	.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-1,
	.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-2,
	.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-3,
	.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-4 {
		width: 50%;
		border: none;
		justify-content: start !important;
	}

	.address-dispatch .address-dispatch-content .address-dispatch-two {
		flex-direction: column;
	}

	.address-dispatch .address-dispatch-content .address-dispatch-two .address-dispatch-left,
	.address-dispatch .address-dispatch-content .address-dispatch-two .address-dispatch-right {
		width: 100%;
	}
}

@media (max-width:680px) {
	.address-dispatch .address-dispatch-content .address-dispatch-footer {
		flex-wrap: wrap;
	}

	.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-1,
	.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-2,
	.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-3,
	.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-4 {
		width: 100%;
	}
}

@media (max-width:425px) {
	.address-dispatch .address-dispatch-left .box {
		flex-direction: column;
	}
}

/* START add-driver popup */

#add-driver .modal-dialog {
	min-width: 800px;
}

#add-driver .modal-content {
	padding: 0 !important;
	max-height: 456px;
	overflow-y: scroll;
	scrollbar-width: none;
}

#add-driver .modal-header .title .icon {
	min-height: 48px;
	min-width: 48px;
	background-color: #5263FF1F;
	border-radius: 10px;
}

#add-driver .modal-header .title .icon img {
	height: 28px;
}

#add-driver .modal-header {
	padding: 16px 20px;
	border-bottom: 1px #1E293B17 solid !important;
	position: relative;
	min-width: 600px;
}

#add-driver .modal-header .title h6 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	width: var(--dark-txt);
}

#add-driver .modal-header .title p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

#add-driver .modal-header button.btn-close {
	position: absolute;
	right: 12px;
	top: 12px;
	height: 32px;
	width: 32px;
	background-size: 12px;
}

#add-driver .modal-body {
	padding: 0;
	min-width: 600px;
}

#add-driver .modal-body .search-txt {
	padding: 12px 16px;
	border-bottom: 1px #1E293B17 solid !important;
}

#add-driver .modal-body .search-txt .search {
	padding: 8px;
	border: 1px #1E293B1F solid;
	border-radius: 50px;
	width: 320px;
}

#add-driver .modal-body .search-txt .search img {
	height: 16px;
}

#add-driver .modal-body .search-txt .search input {
	height: 16px;
	width: 100%;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	border: none;
	outline: none;
}

#add-driver .modal-body .search-txt span {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

#add-driver .modal-body .column {
	padding: 12px 24px;
	border-bottom: 1px #1E293B17 solid !important;
}

#add-driver .modal-body .column div {
	width: 25%;
}

#add-driver .modal-body .column img.avatar {
	height: 40px;
}

#add-driver .modal-body .column span {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

#add-driver .modal-body .column p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

#add-driver .modal-body .column button.add-btn {
	padding: 8px 12px;
	background-color: var(--purple);
	color: var(--white);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	border: 1px #1E293B2E solid;
	border-radius: 8px;
	box-shadow: 0 1px 1px -0.5px #1E293B08;
}

#add-driver .modal-body .column button.add-btn:hover {
	background-color: var(--blue);
}

#add-driver .modal-body .column button.invited-btn {
	background-color: transparent;
	border: none;
	outline: none;
	padding: 8px 8px 8px 2px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--yellow);
}

#add-driver .modal-body .column button.remove-btn {
	background-color: #ED40301F;
	color: var(--orange);
	border: none;
}

#add-driver .modal-body .column button.remove-btn:hover {
	background-color: var(--orange);
	color: var(--white);
}

@media (max-width:900px) {
	#add-driver .modal-dialog {
		min-width: 95%;
	}
}

/* END add-driver popup */

/* START additional-settings popup */
:is(#additional-settings, #route-additional-settings) .modal-dialog {
	max-width: 400px;
}

:is(#additional-settings, #route-additional-settings) .modal-content {
	padding: 0 !important;
}


:is(#additional-settings, #route-additional-settings) .modal-header {
	padding: 16px 20px;
	border-bottom: 1px #1E293B17 solid !important;
}

:is(#additional-settings, #route-additional-settings) .modal-header h6 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

:is(#additional-settings, #route-additional-settings) .modal-header button.btn-close {
	background-size: 13px;
	position: absolute;
	right: 12px;
	height: 32px;
	width: 32px;
}

:is(#additional-settings, #route-additional-settings) .modal-body {
	background-color: #F1F5F9;
	border-radius: 0 0 20px 20px;
	padding: 16px 20px;
}

:is(#additional-settings, #route-additional-settings) .modal-body .box {
	background-color: var(--white);
	border-radius: 16px;
	padding: 20px;
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-1 .txt h6 {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-1 .txt p {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}



/* START custom toggle btn */
:is(#additional-settings, #route-additional-settings) .modal-body .box .box-1 .toggle-switch {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 28px;
	background: #E2E8F0;
	background: linear-gradient(180deg, rgba(226, 232, 240, 1) 0%, rgba(248, 250, 252, 1) 100%);
	border-radius: 50px;
	padding: 3px;
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-1 .toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-1 .slider {
	position: absolute;
	cursor: pointer;
	border-radius: 30px;
	background-color: #D3DDE8;
	transition: 0.3s;
	height: 22px;
	width: 40px;
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-1 .slider:before {
	content: "";
	position: absolute;
	height: 18px;
	width: 18px;
	left: 2px;
	top: 2px;
	border-radius: 50%;
	background: #E2E8F0;
	transition: 0.3s;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-1 .toggle-switch input:checked+.slider {
	background: linear-gradient(135deg, #5B67F6, #4C57E0);
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-1 .toggle-switch input:checked+.slider:before {
	transform: translateX(18px);
	background: #fff;
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-1 .toggle-switch input:checked+.slider:after {
	content: "";
	position: absolute;
	right: 5px;
	top: 7.5px;
	width: 11px;
	height: 11px;
	background-image: url("../img/icons/toggle-check-icon.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

/* END custom toggle btn */

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-2 label {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-2 textarea {
	height: 64px;
	padding: 8px 10px;
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	outline: none;
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-2 span.count-txt {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-3 .upload-btn {
	height: 40px;
	background-color: #5263FF1F;
	gap: 2px;
	border-radius: 10px;
	cursor: pointer;
	position: relative;
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-3 .upload-btn img {
	height: 18px;
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-3 .upload-btn p {
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--purple-2);
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-3 .upload-btn input {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	cursor: pointer;
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-3 .warning {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-3 .selected-files div img {
	height: 16px;
}

:is(#additional-settings, #route-additional-settings) .modal-body .box .box-3 .selected-files div span {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--purple);
	text-decoration: underline;
	text-decoration-color: #5263ff5b;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

@media (max-width: 575px) {
	:is(#additional-settings, #route-additional-settings) .modal-dialog {
		max-width: 100%;
	}
}

/* END additional-settings popup */

/* STRAT confirm-address-dispatch popup*/
:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-dialog {
	min-width: 600px;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-content {
	padding: 0 !important;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-header {
	padding: 16px 20px;
	border-bottom: 1px #1E293B17 solid !important;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-header h6 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-header button.btn-close {
	background-size: 13px;
	position: absolute;
	right: 12px;
	height: 32px;
	width: 32px;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body {
	background-color: #F1F5F9;
	border-radius: 0 0 20px 20px;
	padding: 16px 20px;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body h5.main-titles {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box {
	background-color: var(--white);
	padding: 16px;
	border-radius: 16px;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box .box-1 {
	padding: 4px;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box .box-1 .w-50 p {
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box .box-1 .w-50 span {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box .box-1 .w-100 p {
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box .box-1 .w-100 div span {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--purple);
	text-decoration: underline;
	text-decoration-color: #5263ff5b;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box .box-2 div p {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box .box-2 div span {
	padding: 4px 8px;
	background-color: #5263FF1F;
	color: var(--purple-2);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box .box-2 span {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	color: var(--gray-txt);
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box .box-2 hr {
	margin: 12px 0;
	border: 1px #1e293b37 solid;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box .box-2 .selected-name .name {
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	border-radius: 8px;
	padding: 4px 6px;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box .box-2 .selected-name .name img {
	height: 14px;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-body .box .box-2 .selected-name .name p {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-footer {
	gap: 12px;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-footer button {
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	border-radius: 10px;
	border: 1px #1E293B17 solid;
	background-color: #F1F5F9CC;
	color: var(--dark-txt);
	gap: 6px;
}

:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-footer button.accept-btn {
	background-color: var(--purple);
	color: var(--white);
}

/* START toast */
/* .toast-timer p.green-txt,
.toast-timer span.green-txt {
	color: var(--green);
} */

.custom-toast.green {
	background-color: #409B3F1F;
}

/* END toast */


@media (max-width: 768px) {
	:is(#confirm-address-dispatch, #confirm-route-dispatch) .modal-dialog {
		min-width: 95%;
	}
}

/* END confirm-address-dispatch popup*/

/* ===============================================================================================================================================================
																			End address-dispatch page
=============================================================================================================================================================== */
/* ===============================================================================================================================================================
																			Start route-dispatch page
=============================================================================================================================================================== */
.route-dispatch .address-dispatch-two .address-dispatch-left .main-tabs {
	background-color: var(--white);
	padding: 12px 16px;
}

.route-dispatch .address-dispatch-two .address-dispatch-left .main-tabs .btn-tab {
	background-color: rgba(241, 245, 249, 0.8);
	border: 1px rgba(30, 41, 59, 0.03) solid;
	padding: 4px;
	gap: 6px;
	border-radius: 12px;
}

.route-dispatch .address-dispatch-two .address-dispatch-left .main-tabs .btn-tab button {
	width: 100%;
	padding: 8px;
	background-color: transparent;
	border: 2px transparent solid;
	outline: none;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: #475569;
}

.route-dispatch .address-dispatch-two .address-dispatch-left .main-tabs .btn-tab button.active {
	border-color: #5263FF66;
	color: var(--dark-txt);
	background-color: var(--white);
}

.route-dispatch .address-dispatch-two .address-dispatch-left .boxes .box {
	border-color: #1E293B17;
}

.route-dispatch .address-dispatch-two .address-dispatch-left .boxes .box:hover {
	border-color: #5263FF66;
}

.route-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper {
	margin: 0;
}

.route-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper .accordian-icon {
	cursor: pointer;
	padding: 5px;
}

.route-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper .accordian-icon img {
	transform: rotate(90deg);
	transition: 0.3s;
}

.route-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper img.alert-icon {
	height: 16px;
}

.route-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper .accordian-icon.active img {
	transform: rotate(-90deg);
}

.route-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper .accordian-data {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.route-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper .accordian-data .data-txt img {
	height: 20px;
}

.route-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper .accordian-data .data-txt h6 {
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.route-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper .accordian-data .data-txt p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.route-dispatch .address-dispatch-footer .address-dispatch-footer-3 p {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

#confirm-route-dispatch table.route-dispatch-table {
	border: 1px #1E293B0F solid;
	border-radius: 16px !important;
	border-collapse: separate;
	table-layout: fixed;
}

#confirm-route-dispatch table.route-dispatch-table td {
	border-bottom: 1px #1E293B0F solid;
}

#confirm-route-dispatch table.route-dispatch-table tr:nth-child(even) td {
	background-color: var(--white);
}

#confirm-route-dispatch table.route-dispatch-table tr th:nth-child(even),
#confirm-route-dispatch table.route-dispatch-table tr td:nth-child(even) {
	border-left: 1px #1E293B0F solid !important;
}

#confirm-route-dispatch table.route-dispatch-table tr th {
	padding: 8px 16px;
}

#confirm-route-dispatch table.route-dispatch-table tr th img {
	height: 16px;
}

#confirm-route-dispatch table.route-dispatch-table tr th {
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

#confirm-route-dispatch table.route-dispatch-table tr td {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	padding: 8px 16px;
	overflow-wrap: anywhere;
}

@media (max-width:425px) {
	.route-dispatch .address-dispatch-two .address-dispatch-left .main-tabs .btn-tab {
		flex-direction: column;
	}
}


/* ===============================================================================================================================================================
																			End route-dispatch page
=============================================================================================================================================================== */
/* ===============================================================================================================================================================
																			Start zone-dispatch page
=============================================================================================================================================================== */

.zone-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper .box-title p {
	font-size: 13px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .wrapper .accordian-title img.alert-icon {
	height: 16px;
	margin-top: 6px;
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper .accordian-icon {
	cursor: pointer;
	padding: 5px;
	background: transparent;
	border: none;
	outline: none;
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper .accordian-icon img {
	transform: rotate(90deg);
	transition: 0.3s;
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper .accordian-icon.active img {
	transform: rotate(-90deg);
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .boxes .box .wrapper .accordian-data {
	overflow: visible;
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .wrapper .accordian-data .txt h6 {
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .wrapper .accordian-data .txt span {
	padding: 4px 8px;
	background-color: #5263FF1F;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--purple-2);
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .wrapper .accordian-data .cstm-dropdown button {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: var(--dark-txt);
	padding: 8px 8px 8px 12px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B17 solid;
	border-radius: 8px;
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .wrapper .accordian-data .cstm-dropdown button::after {
	border-top: 8px solid;
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	vertical-align: 0;
	border-radius: 2px;
	margin-left: 6px;
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .wrapper .accordian-data .cstm-dropdown ul.dropdown-menu {
	min-width: 300px;
	border: 1px #1E293B17 solid;
	border-radius: 20px;
	box-shadow: 0 20px 20px -12px #1E293B08;
	padding: 0;
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .wrapper .accordian-data .cstm-dropdown ul.dropdown-menu .cstm-dropdown-title {
	padding: 8px 16px;
	border-bottom: 1px #1E293B17 solid;
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .wrapper .accordian-data .cstm-dropdown ul.dropdown-menu .cstm-dropdown-title h6 {
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .wrapper .accordian-data .cstm-dropdown ul.dropdown-menu .cstm-dropdown-title span {
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: -0.2px;
	color: var(--purple);
	text-decoration: underline;
	text-decoration-color: #5263ff5b;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	cursor: pointer;
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .wrapper .accordian-data .cstm-dropdown ul.dropdown-menu .data {
	padding: 8px 16px;
}

.zone-dispatch .address-dispatch-two .address-dispatch-left .wrapper .accordian-data .cstm-dropdown ul.dropdown-menu .data p.bagees {
	background-color: #5263FF1F;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	padding: 4px 8px;
	color: var(--purple-2);
}

@media (max-width:425px) {
	.zone-dispatch .address-dispatch-two .address-dispatch-left .wrapper .accordian-data .cstm-dropdown ul.dropdown-menu {
		min-width: 100%;
	}
}





/* START confirm-address-dispatch-zone-dispatch popup */

.confirm-address-dispatch-zone-dispatch .modal-dialog {
	max-width: min(560px, calc(100vw - 32px));
	width: min(560px, calc(100vw - 32px));
}

.confirm-address-dispatch-zone-dispatch .modal-content {
	padding: 0 !important;
	border: none;
	border-radius: 18px !important;
	overflow: hidden;
	box-shadow: 0 32px 72px rgba(15, 23, 42, 0.28);
}

.confirm-address-dispatch-zone-dispatch .modal-header {
	padding: 18px 22px;
	border-bottom: 1px solid #1E293B17 !important;
}

.confirm-address-dispatch-zone-dispatch .modal-header .confirm-title {
	min-width: 0;
}

.confirm-address-dispatch-zone-dispatch .modal-header .confirm-icon {
	min-width: 40px;
	width: 40px;
	height: 40px;
	background-color: #5263FF1F;
	border-radius: 10px;
}

.confirm-address-dispatch-zone-dispatch .modal-header .confirm-icon img {
	height: 22px;
}

.confirm-address-dispatch-zone-dispatch .modal-header h6 {
	font-size: 18px;
	font-weight: 800;
	line-height: 24px;
	color: var(--dark-txt);
}

.confirm-address-dispatch-zone-dispatch .modal-header p {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	color: var(--gray-txt);
}

.confirm-address-dispatch-zone-dispatch .modal-header button.btn-close {
	min-width: 38px;
	width: 38px;
	height: 38px;
	background-size: 12px;
	border-radius: 10px;
	background-color: #F1F5F9CC;
	opacity: 1;
}

.confirm-address-dispatch-zone-dispatch .modal-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: min(620px, calc(100vh - 180px));
	overflow-y: auto;
	padding: 18px 22px;
	background-color: #F8FAFC;
}

.confirm-address-dispatch-zone-dispatch .confirm-section {
	padding: 16px;
	background-color: var(--white);
	border: 1px solid #1E293B0F;
	border-radius: 14px;
}

.confirm-address-dispatch-zone-dispatch .modal-body h5.main-titles {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 800;
	line-height: 20px;
	color: var(--dark-txt);
}

.confirm-address-dispatch-zone-dispatch .confirm-details-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
}

.confirm-address-dispatch-zone-dispatch .confirm-detail-item {
	min-width: 0;
}

.confirm-address-dispatch-zone-dispatch .confirm-detail-item p,
.confirm-address-dispatch-zone-dispatch .confirm-file-list > p {
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	color: var(--gray-txt);
}

.confirm-address-dispatch-zone-dispatch .confirm-detail-item span {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	color: var(--dark-txt);
	overflow-wrap: anywhere;
}

.confirm-address-dispatch-zone-dispatch .confirm-file-list {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #1E293B0F;
}

.confirm-address-dispatch-zone-dispatch .modal-body .names div,
.confirm-address-dispatch-zone-dispatch .modal-body .names .confirm-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: 6px 8px;
	background-color: #5263FF1F;
	border-radius: 8px;
	gap: 4px;
}

.confirm-address-dispatch-zone-dispatch .modal-body .names div img,
.confirm-address-dispatch-zone-dispatch .modal-body .names .confirm-chip img {
	flex: 0 0 auto;
	height: 16px;
}

.confirm-address-dispatch-zone-dispatch .modal-body .names div p,
.confirm-address-dispatch-zone-dispatch .modal-body .names .confirm-chip p {
	min-width: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: var(--purple-2);
	padding: 0 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.confirm-address-dispatch-zone-dispatch .modal-footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 12px;
	padding: 16px 22px 20px;
	border-top: 1px solid #1E293B17;
}

.confirm-address-dispatch-zone-dispatch .modal-footer button {
	min-width: 0;
	height: 42px;
	padding: 8px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
}

.confirm-address-dispatch-zone-dispatch .modal-footer button.decline-btn {
	border: 1px solid #1E293B0F;
	background-color: #F1F5F9CC;
	color: var(--dark-txt);
}

.confirm-address-dispatch-zone-dispatch .modal-footer button.accept-btn {
	gap: 6px;
	border: 1px solid #1E293B17;
	background-color: var(--purple);
	color: var(--white);
}

.confirm-address-dispatch-zone-dispatch .modal-footer button.accept-btn img {
	height: 18px;
}

.confirm-address-dispatch-zone-dispatch .modal-footer button.accept-btn p {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--white);
}

.confirm-address-dispatch-zone-dispatch .modal-footer button:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

@media (max-width: 575px) {
	.confirm-address-dispatch-zone-dispatch .modal-dialog {
		max-width: calc(100vw - 20px);
		width: calc(100vw - 20px);
	}

	.confirm-address-dispatch-zone-dispatch .modal-header,
	.confirm-address-dispatch-zone-dispatch .modal-body,
	.confirm-address-dispatch-zone-dispatch .modal-footer {
		padding-left: 16px;
		padding-right: 16px;
	}

	.confirm-address-dispatch-zone-dispatch .confirm-details-grid,
	.confirm-address-dispatch-zone-dispatch .modal-footer {
		grid-template-columns: 1fr;
	}
}

/* END confirm-address-dispatch-zone-dispatch popup */

/* START zone dispatch additional settings popup */
.zone-additional-settings-modal .modal-dialog {
	max-width: 400px;
	width: calc(100vw - 32px);
}

.zone-additional-settings-modal .modal-content {
	overflow: hidden;
	padding: 0 !important;
	border: 1px solid rgba(30, 41, 59, 0.03);
	border-radius: 20px;
	background: #FFFFFF;
	box-shadow: 0 1px 1px -0.5px rgba(30, 41, 59, 0.03), 0 3px 3px -1.5px rgba(30, 41, 59, 0.03), 0 20px 20px -12px rgba(30, 41, 59, 0.03), 0 32px 32px -16px rgba(30, 41, 59, 0.03);
}

.zone-additional-settings-modal .modal-header {
	position: relative;
	min-height: 56px;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(30, 41, 59, 0.09);
}

.zone-additional-settings-modal .modal-header h6 {
	margin: 0;
	color: #1E293B;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.zone-additional-settings-modal .modal-header button.btn-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	margin: 0;
	border: 1px solid rgba(30, 41, 59, 0.06);
	border-radius: 8px;
	background-color: rgba(241, 245, 249, 0.8);
	background-size: 12px;
	opacity: 1;
}

.zone-additional-settings-modal .modal-body {
	padding: 16px 20px;
	background: #F1F5F9;
}

.zone-additional-settings-modal .modal-body .box {
	padding: 20px;
	border-radius: 16px;
	background: #FFFFFF;
}

.zone-additional-settings-modal .modal-body .box .box-1 .txt h6 {
	margin: 0;
	color: #1E293B;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
}

.zone-additional-settings-modal .modal-body .box .box-1 .txt p,
.zone-additional-settings-modal .modal-body .box .box-3 .warning,
.zone-additional-settings-modal .modal-body .box .box-2 span.count-txt {
	margin: 0;
	color: #64748B;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.2px;
}

.zone-additional-settings-modal .modal-body .box .box-1 .toggle-switch {
	position: relative;
	display: inline-block;
	flex: 0 0 46px;
	width: 46px;
	height: 28px;
	padding: 3px;
	border-radius: 1000px;
	background: linear-gradient(180deg, #E2E8F0 0%, #F8FAFC 100%);
}

.zone-additional-settings-modal .modal-body .box .box-1 .toggle-switch input {
	width: 0;
	height: 0;
	opacity: 0;
}

.zone-additional-settings-modal .modal-body .box .box-1 .slider {
	position: absolute;
	width: 40px;
	height: 22px;
	border-radius: 1000px;
	background: #D3DDE8;
	cursor: pointer;
	transition: 0.2s;
}

.zone-additional-settings-modal .modal-body .box .box-1 .slider:before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 1000px;
	background: linear-gradient(180deg, #E2E8F0 0%, #FFFFFF 100%);
	box-shadow: 0 2px 3px -1.5px rgba(30, 41, 59, 0.32);
	transition: 0.2s;
}

.zone-additional-settings-modal .modal-body .box .box-1 .toggle-switch input:checked + .slider {
	background: #5263FF;
}

.zone-additional-settings-modal .modal-body .box .box-1 .toggle-switch input:checked + .slider:before {
	transform: translateX(18px);
}

.zone-additional-settings-modal .modal-body .box .box-1 .toggle-switch input:checked + .slider:after {
	content: "";
	position: absolute;
	right: 7px;
	top: 8px;
	width: 8px;
	height: 6px;
	background-image: url("../img/icons/toggle-check-icon.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

.zone-additional-settings-modal .modal-body .box .box-2 label {
	margin: 0;
	color: #475569;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
}

.zone-additional-settings-modal .modal-body .box .box-2 textarea {
	width: 100%;
	min-height: 64px;
	padding: 8px 10px;
	resize: none;
	border: 1px solid rgba(30, 41, 59, 0.12);
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 1px 1px -0.5px rgba(30, 41, 59, 0.03), 0 3px 3px -1.5px rgba(30, 41, 59, 0.03);
	color: #1E293B;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	outline: none;
}

.zone-additional-settings-modal .modal-body .box .box-3 .upload-btn {
	height: 40px;
	border-radius: 10px;
	background: rgba(82, 99, 255, 0.12);
}

.zone-additional-settings-modal .modal-body .box .box-3 .upload-btn img {
	width: 18px;
	height: 18px;
}

.zone-additional-settings-modal .modal-body .box .box-3 .upload-btn p {
	margin: 0;
	color: #363AF5;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.zone-additional-settings-modal .modal-body .box .box-3 .selected-files {
	max-height: 56px;
	overflow-y: auto;
}

.zone-additional-settings-modal .modal-body .box .box-3 .selected-files div img {
	width: 16px;
	height: 16px;
}

.zone-additional-settings-modal .modal-body .box .box-3 .selected-files div span {
	color: #5263FF;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	text-decoration: underline;
	text-decoration-color: #9CB6FF;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
/* END zone dispatch additional settings popup */

/* START screenshot-aligned confirm zone dispatch popup */
.confirm-address-dispatch-zone-dispatch .modal-dialog {
	max-width: 600px;
	width: calc(100vw - 32px);
}

.confirm-address-dispatch-zone-dispatch .modal-content {
	overflow: hidden;
	padding: 0 !important;
	border: 1px solid rgba(30, 41, 59, 0.03);
	border-radius: 20px;
	background: #FFFFFF;
	box-shadow: 0 1px 1px -0.5px rgba(30, 41, 59, 0.03), 0 3px 3px -1.5px rgba(30, 41, 59, 0.03), 0 20px 20px -12px rgba(30, 41, 59, 0.03), 0 32px 32px -16px rgba(30, 41, 59, 0.03);
}

.confirm-address-dispatch-zone-dispatch .modal-header {
	position: relative;
	min-height: 56px;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(30, 41, 59, 0.09);
}

.confirm-address-dispatch-zone-dispatch .modal-header h6 {
	margin: 0;
	color: #1E293B;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.confirm-address-dispatch-zone-dispatch .modal-header button.btn-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	margin: 0;
	border: 1px solid rgba(30, 41, 59, 0.06);
	border-radius: 8px;
	background-color: rgba(241, 245, 249, 0.8);
	background-size: 12px;
	opacity: 1;
}

.confirm-address-dispatch-zone-dispatch .modal-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: min(584px, calc(100vh - 128px));
	overflow-y: auto;
	padding: 16px 20px;
	background: #F1F5F9;
}

.confirm-address-dispatch-zone-dispatch .modal-body h5.main-titles {
	margin: 0;
	color: #475569;
	font-size: 15px;
	font-weight: 800;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.confirm-address-dispatch-zone-dispatch .confirm-details-wrap,
.confirm-address-dispatch-zone-dispatch .confirm-chip-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
}

.confirm-address-dispatch-zone-dispatch .confirm-details-card {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 24px;
	padding: 20px;
	border-radius: 16px;
	background: #FFFFFF;
}

.confirm-address-dispatch-zone-dispatch .confirm-detail-item p,
.confirm-address-dispatch-zone-dispatch .confirm-file-list > p {
	margin: 0;
	color: #1E293B;
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.2px;
}

.confirm-address-dispatch-zone-dispatch .confirm-detail-item span,
.confirm-address-dispatch-zone-dispatch .confirm-file-list span {
	display: block;
	color: #475569;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	overflow-wrap: anywhere;
}

.confirm-address-dispatch-zone-dispatch .confirm-file-list {
	grid-column: 1 / -1;
}

.confirm-address-dispatch-zone-dispatch .confirm-file-list .names {
	margin-top: 2px;
	gap: 16px !important;
}

.confirm-address-dispatch-zone-dispatch .confirm-file-list a {
	color: #5263FF;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	text-decoration: underline;
	text-decoration-color: #9CB6FF;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.confirm-address-dispatch-zone-dispatch .modal-body .names .confirm-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-height: 28px;
	padding: 4px 8px;
	border-radius: 8px;
	background: rgba(82, 99, 255, 0.12);
	gap: 4px;
}

.confirm-address-dispatch-zone-dispatch .modal-body .names .confirm-chip img {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.confirm-address-dispatch-zone-dispatch .modal-body .names .confirm-chip p {
	min-width: 0;
	margin: 0;
	padding: 0 4px;
	overflow: hidden;
	color: #363AF5;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.confirm-address-dispatch-zone-dispatch .modal-footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
	min-height: 72px;
	padding: 16px 20px;
	border-top: 1px solid rgba(30, 41, 59, 0.09);
	background: #FFFFFF;
}

.confirm-address-dispatch-zone-dispatch .modal-footer button {
	width: 100%;
	height: 40px;
	min-width: 0;
	padding: 4px 10px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.confirm-address-dispatch-zone-dispatch .modal-footer button.decline-btn {
	border: 1px solid rgba(30, 41, 59, 0.06);
	background: rgba(241, 245, 249, 0.8);
	color: #1E293B;
}

.confirm-address-dispatch-zone-dispatch .modal-footer button.accept-btn {
	border: 1px solid rgba(30, 41, 59, 0.09);
	background: #5263FF;
	color: #FFFFFF;
	box-shadow: 0 1px 1px -0.5px rgba(30, 41, 59, 0.03), inset 0 3px 3px rgba(255, 255, 255, 0.12);
	gap: 6px;
}

.confirm-address-dispatch-zone-dispatch .modal-footer button.accept-btn img {
	width: 18px;
	height: 18px;
}

.confirm-address-dispatch-zone-dispatch .modal-footer button.accept-btn p {
	margin: 0;
	color: #FFFFFF;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 575px) {
	.confirm-address-dispatch-zone-dispatch .confirm-details-card,
	.confirm-address-dispatch-zone-dispatch .modal-footer {
		grid-template-columns: 1fr;
	}
}
/* END screenshot-aligned confirm zone dispatch popup */

/* ===============================================================================================================================================================
																			End zone-dispatch page
=============================================================================================================================================================== */
/* ===============================================================================================================================================================
																			Start manual-dispatch page
=============================================================================================================================================================== */

.manual-dispatch .manual-dispatch-content {
	height: calc(100vh - 156px);
	overflow: scroll;
	scrollbar-width: none;
}

.manual-dispatch .manual-dispatch-content .top-bar {
	padding: 12px 16px 32px 16px;
	background-color: var(--white);
	border-bottom: 1px #1E293B1F solid;
}

.manual-dispatch .manual-dispatch-content h6 {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	margin-bottom: 12px;
}

.manual-dispatch .manual-dispatch-content .left-side {
	width: 70%;
}

.manual-dispatch .manual-dispatch-content .left-side .select-wrapper {
	position: relative;
}

.manual-dispatch .manual-dispatch-content .left-side .route-popup {
	position: absolute;
	top: calc(100% + 8px);
	left: 0%;
	width: 430px;
	max-width: 100%;
	max-height: 296px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #CBD5E1 transparent;
	background-color: var(--white);
	border: 1px #1E293B17 solid;
	border-radius: 24px;
	box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
	padding: 8px;
	display: none;
	z-index: 100;
}

.manual-dispatch .manual-dispatch-content .left-side .route-option {
	gap: 12px;
	min-height: 52px;
	padding: 12px 14px;
	border-radius: 12px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--gray-txt);
	margin-bottom: 4px;
	display: flex;
}

.manual-dispatch .manual-dispatch-content .left-side .route-option.selected {
	background-color: #5263FF1F;
	color: var(--purple-2);
}

.manual-dispatch .manual-dispatch-content .left-side .route-option .route-checkbox {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	border: 2px solid #E2E8F0;
	border-radius: 7px;
	background-color: var(--white);
	color: var(--white);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}

.manual-dispatch .manual-dispatch-content .left-side .route-option.selected .route-checkbox {
	border-color: var(--purple);
	background-color: var(--purple);
}

.manual-dispatch .manual-dispatch-content .left-side .route-hidden {
	display: none !important;
}

.manual-dispatch .manual-dispatch-content .left-side .route-option:hover {
	background: #5263FF1F;
	color: var(--purple-2);
}

.manual-dispatch .manual-dispatch-content .left-side .route-option img {
	height: 18px;
}

.manual-dispatch .manual-dispatch-content .left-side .route-option.added-active {
	background-color: #5263FF1F;
	color: var(--purple-2);
}

.manual-dispatch .manual-dispatch-content .left-side .selected-name {
	background: #e8ecff;
	padding: 6px 10px;
	border-radius: 8px;
}

.manual-dispatch .manual-dispatch-content .left-side .box {
	background-color: var(--white);
	padding: 10px;
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	box-shadow: 0px 3px 3px -1.5px #1E293B08;
}

.manual-dispatch .manual-dispatch-content .left-side .box .selected-name {
	padding: 4px 6px 4px 8px;
	background-color: #5263FF1F;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--purple-2);
	white-space: nowrap;
}

.manual-dispatch .manual-dispatch-content .left-side .box input {
	height: 100%;
	border: none;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
	padding-left: 4px;
}

.manual-dispatch .manual-dispatch-content .right-side {
	width: 30%;
}

.manual-dispatch .manual-dispatch-content .right-side .date-time label,
.manual-dispatch .manual-dispatch-content .left-side label,
.manual-dispatch .manual-dispatch-content .right-side .select-type label {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.manual-dispatch .manual-dispatch-content .right-side .date-time label span,
.manual-dispatch .manual-dispatch-content .left-side label span,
.manual-dispatch .manual-dispatch-content .right-side .select-type label span {
	color: var(--orange);
}

.manual-dispatch .manual-dispatch-content .right-side .date-time .date-time-box {
	border: 1px #1E293B1F solid;
	border-radius: 10px;
}

.manual-dispatch .manual-dispatch-content .right-side .date-time .date-time-box img {
	height: 18px;
}


.manual-dispatch .manual-dispatch-content .right-side .date-time .date-time-box .date-picker {
	padding: 8px 15px 8px 10px;
	border-right: 1px #1E293B1F solid;
	position: relative;
}

.manual-dispatch .manual-dispatch-content .right-side .date-time .date-time-box .date-picker p,
.manual-dispatch .manual-dispatch-content .right-side .date-time .date-time-box .time-picker p {
	padding: 0 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.manual-dispatch .manual-dispatch-content .right-side .date-time .date-time-box .time-picker {
	padding: 8px 7px 8px 10px;
	position: relative;
}

.manual-dispatch .manual-dispatch-content .right-side .select-type {
	position: relative;
	min-width: 180px;
}

.manual-dispatch .manual-dispatch-content .right-side .select-type .dispatch-work-type-dropdown {
	height: 42px !important;
	padding: 8px 10px !important;
	background-color: transparent !important;
	font-size: 13px !important;
	color: var(--dark-txt) !important;
	cursor: pointer;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-3 .dispatch-work-type-dropdown {
	min-width: 198px;
}

.manual-dispatch .manual-dispatch-content .right-side .select-type select {
	padding: 8px 35px 8px 10px;
	background-color: transparent;
	height: 42px;
	width: 100%;
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-txt);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("../img/icons/gray-arrow.png");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 18px;
	cursor: pointer;
}

.manual-dispatch .manual-dispatch-content .right-side .select-type p.error {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--badge-orange);
	position: absolute;
	top: 100%;
}

.manual-dispatch .manual-dispatch-content .right-side button.add-btn {
	height: 40px;
	width: 54px;
	background-color: var(--purple);
	color: var(--white);
	font-size: 13px;
	font-weight: 24px;
	line-height: 24px;
	letter-spacing: -0.2px;
	border-radius: 10px;
	border: none;
	outline: none;
}

.manual-dispatch .manual-dispatch-content .right-side button.delete-btn {
	height: 40px;
	width: 40px;
	background-color: #ED40301F;
	border-radius: 10px;
	border: none;
	outline: none;
}

.manual-dispatch .manual-dispatch-content .data {
	padding: 16px;
	gap: 12px;
}

.manual-dispatch .manual-dispatch-content .data h6 {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	margin: 0;
}

.manual-dispatch .manual-dispatch-content .data .main-line {
	background-color: var(--white);
	padding: 16px;
	border-radius: 16px;
}

.manual-dispatch .manual-dispatch-content .data .main-line .left-right-side {
	flex-wrap: nowrap !important;
	align-items: center !important;
}

.manual-dispatch .manual-dispatch-content .data .main-line .left-side {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.manual-dispatch .manual-dispatch-content .data .main-line .right-side {
	flex: 0 0 auto;
	width: auto;
}

.manual-dispatch .manual-dispatch-content .data .main-line .left-side .box {
	min-height: 40px;
	padding: 8px 10px;
}

.manual-dispatch .address-dispatch-footer button.cancel-btn {
	background-color: #F1F5F9CC;
	border: 1px #1E293B17 solid !important;
	color: var(--dark-txt);
}


@media (max-width:1750px) {
	.manual-dispatch .manual-dispatch-content .left-side {
		width: 60%;
	}

	.manual-dispatch .manual-dispatch-content .right-side {
		width: 40%;
	}
}

@media (max-width:1325px) {
	.manual-dispatch .manual-dispatch-content .left-right-side {
		flex-wrap: wrap;
	}

	.manual-dispatch .manual-dispatch-content .left-side,
	.manual-dispatch .manual-dispatch-content .right-side {
		width: 100%;
		justify-content: start !important;
	}
}

@media (max-width:768px) {
	.manual-dispatch .manual-dispatch-content .left-side .box {
		flex-wrap: wrap;
	}

	.manual-dispatch .manual-dispatch-content .left-side .box input {
		margin-top: 10px;
	}
}

@media (max-width:425px) {
	.manual-dispatch .manual-dispatch-content .left-side .route-popup {
		width: 100%;
	}
}

/* Start manual-dispatch-popup */

.manual-dispatch-popup .modal-dialog {
	min-width: 700px !important;
}

.manual-dispatch-popup .modal-content .modal-body {
	max-height: 672px;
	overflow-y: scroll;
	scrollbar-width: none;
}

.manual-dispatch-popup .modal-body {
	border-radius: 0 !important;
}

#confirm-manual-dispatch .modal-dialog {
	max-width: 700px;
}

#confirm-manual-dispatch .modal-content {
	padding: 0 !important;
	overflow: hidden;
	border: none;
	background-color: #F1F5F9;
}

#confirm-manual-dispatch .modal-header {
	padding: 16px 20px;
	background-color: var(--white);
	border-bottom: 1px #1E293B1F solid !important;
}

#confirm-manual-dispatch .modal-header h6 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	margin: 0;
}

#confirm-manual-dispatch .modal-header .btn-close {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 10px;
	background-color: #F8FAFC;
	border: 1px #1E293B17 solid;
	background-size: 12px;
	opacity: 1;
}

#confirm-manual-dispatch .modal-body {
	padding: 16px 20px;
	gap: 16px !important;
	background-color: #F1F5F9;
	max-height: min(672px, calc(100vh - 210px));
}

#confirm-manual-dispatch .modal-footer {
	padding: 16px 20px;
	gap: 12px;
	background-color: var(--white);
	border-top: 1px #1E293B1F solid;
}

#confirm-manual-dispatch .modal-footer button {
	height: 40px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
}

#confirm-manual-dispatch .modal-footer .decline-btn {
	background-color: #F1F5F9CC;
	border: 1px #1E293B17 solid;
	color: var(--dark-txt);
}

#confirm-manual-dispatch .modal-footer .accept-btn {
	gap: 6px;
	background-color: var(--purple);
	border: 1px var(--purple) solid;
	color: var(--white);
}

#confirm-manual-dispatch .modal-footer .accept-btn p {
	margin: 0;
}

.manual-dispatch-popup .manual-left-right {
	background-color: var(--white);
	border-radius: 16px;
	padding: 16px;
}

#confirm-manual-dispatch .manual-left-right {
	min-height: 80px;
	gap: 24px !important;
	flex-wrap: nowrap !important;
}

.manual-dispatch-popup .manual-left-right .manual-left span {
	background-color: #5263FF1F;
	border-radius: 8px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: var(--purple-2);
}

#confirm-manual-dispatch .manual-left-right .manual-left {
	width: 48% !important;
}

#confirm-manual-dispatch .manual-left-right .manual-right {
	width: 52% !important;
	gap: 32px;
}

#confirm-manual-dispatch .manual-left-right .manual-right > div {
	width: 50%;
}

.manual-dispatch-popup .manual-left-right .manual-right p {
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.manual-dispatch-popup .manual-left-right .manual-right span {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}



@media (max-width:768px) {
	.manual-dispatch-popup .modal-dialog {
		min-width: 95% !important;
	}

	.manual-dispatch-popup .modal-footer {
		flex-wrap: wrap !important;
	}

	.manual-dispatch-popup .manual-left-right {
		flex-direction: column;
	}

	.manual-dispatch-popup .manual-left-right .manual-left,
	.manual-dispatch-popup .manual-left-right .manual-right {
		width: 100% !important;
	}
}

#manual-are-you-sure .modal-dialog {
	width: 580px !important;
	min-width: 580px !important;
}

#manual-are-you-sure .modal-content {
	padding: 0 !important;
	overflow: hidden;
	border: none;
	border-radius: 24px !important;
	box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
}

#manual-are-you-sure .modal-header {
	padding: 24px 24px 20px;
	border-bottom: 1px #1E293B1F solid !important;
}

#manual-are-you-sure .wm-popup-header-section {
	max-width: calc(100% - 56px) !important;
}

#manual-are-you-sure .wm-popup-header-text {
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: -0.4px;
	color: var(--dark-txt);
	margin: 0 0 4px;
}

#manual-are-you-sure .wm-popup-header-subtext {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
	margin: 0;
}

#manual-are-you-sure .modal-header .btn-close {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 10px;
	background-color: #F8FAFC;
	border: 1px #1E293B17 solid;
	background-size: 14px;
	opacity: 1;
	margin: 0 !important;
}

#manual-are-you-sure .modal-body {
	display: none;
}

#manual-are-you-sure .modal-footer {
	padding: 20px 24px;
	gap: 16px !important;
	border-top: none;
}

#manual-are-you-sure .modal-footer button {
	height: 48px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
}

@media (max-width: 640px) {
	#manual-are-you-sure .modal-dialog {
		width: 95vw !important;
		min-width: 95vw !important;
	}
}

/* END manual-dispatch-popup */


/* Start are-you-sure popup */

#are-you-sure .modal-dialog {
	max-width: 480px;
}

#are-you-sure .modal-content {
	padding: 0 !important;
}

#are-you-sure .modal-header {
	padding: 16px 20px;
}

#are-you-sure .modal-header h6 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

#are-you-sure .modal-header span {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

#are-you-sure .modal-header button.btn-close {
	position: absolute;
	top: 12px;
	right: 12px;
	height: 32px;
	width: 32px;
	background-size: 13px;
}

#are-you-sure .modal-footer {
	padding: 16px 20px;
}

#are-you-sure .modal-footer button {
	background-color: #F1F5F9CC;
	border: 1px #1E293B17 solid;
	border-radius: 10px;
	padding: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

#are-you-sure .modal-footer button.keep-btn {
	background-color: var(--purple);
	color: var(--white);
	border-color: var(--purple);
}

/* END are-you-sure popup */



/* single date */
.date-time-box {
	position: relative;
}

.calendar-popup {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 12px;
	background: var(--white);
	border-radius: 24px;
	padding: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	display: none;
	width: 304px;
	z-index: 99991;
	border: 1px #1E293B17 solid;
}

.calendar-header {
	border: 1px #1E293B17 solid;
	border-radius: 12px;
}

.calendar-header button {
	height: 32px;
	width: 32px;
	background-color: var(--white);
	border: 1px #1E293B17 solid;
	border-radius: 8px;
}

.calendar-header .month-year span {
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.calendar-header .month-year span.year {
	font-weight: 600;
	color: var(--gray-txt-2);
}

.calendar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

#calendarDates,
.calendarDates {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-top: 12px;
}

#calendarDates div,
.calendarDates div {
	text-align: center;
	border-radius: 8px;
	cursor: pointer;
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	color: var(--gray-txt);
}

#calendarDates div:hover,
.calendarDates div:hover {
	background: #F1F5F9CC;
	border: 1px #1E293B17 solid;
	color: var(--gray-txt) !important;
}

.selected-date {
	background: var(--purple);
	color: var(--white) !important;
}

.other-month {
	color: #C8D5E1 !important;
	pointer-events: none;
}


/* TIME PICKER */

.time-popup {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 12px;
	background: white;
	border-radius: 24px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	width: 112px;
	height: 224px;
	padding: 8px;
	display: none;
	justify-content: space-between;
	z-index: 99;
	border: 1px #1E293B17 solid;
}

.time-popup-inner {
	display: none;
	background: white;
	border-radius: 25px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	width: 200px;
	padding: 20px;
	display: flex;
	justify-content: space-between;
}

.time-column {
	height: 200px;
	overflow-y: scroll;
	scrollbar-width: none;
	text-align: center;
}

.time-column div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 32px;
	background-color: var(--white);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	cursor: pointer;
}

.time-column div:hover {
	background: #F1F5F9CC;
}

.active-time {
	background: #5263FF1F !important;
	color: var(--purple-2);
}

.divider {
	width: 1px;
	background: #1E293B17;
}



/* ===============================================================================================================================================================
																			End manual-dispatch page
=============================================================================================================================================================== */
/* ===============================================================================================================================================================
																			Start live-map-tab (dispatch page)
=============================================================================================================================================================== */
.live-map-tab {
	height: 773px;
	width: 100%;
	background-image: url(../img/live-map.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 16px;
}

.live-map-tab .live-map .search-select {
	padding: 8px 10px;
	background-color: var(--white);
	border-radius: 24px;
	box-shadow: 0 4px 4px 0 #00000029;
	width: 400px;
}

.live-map-tab .live-map .search-select img {
	height: 18px;
}

.live-map-tab .live-map .search-select input {
	padding: 0 4px;
	border: none;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	width: 100%;
}

.live-map-tab .live-map .search-select input::placeholder {
	color: #C8D5E1;
}

.live-map-tab .live-map .search-select-data {
	background-color: var(--white);
	width: 400px;
	border-top: 1px #1E293B0F solid;
	padding: 8px 0;
	border-radius: 0 0 24px 24px;
	max-height: 404px;
	overflow-y: scroll;
	scrollbar-width: thin;
}

.live-map-tab .live-map .search-select-data .search-item {
	padding: 8px 16px;
	display: flex;
	background-color: var(--white);
	border: none;
	outline: none;
	text-align: left;
	width: 100%;
}

.live-map-tab .live-map .search-select-data .search-item:hover {
	background-color: #5263FF1F;
}

.live-map-tab .live-map .search-select-data .search-item.hide {
	display: none !important;
}

.live-map-tab .live-map .search-select-data img {
	height: 20px;
}

.live-map-tab .live-map .search-select-data .txt h6 {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.live-map-tab .live-map .search-select-data .txt p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.live-map-tab .live-map .search-select-data .txt span.bagee {
	padding: 2px 6px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
}

.live-map-tab .live-map .search-select-data .txt span.bagee.red {
	background-color: #ED40301F;
	color: var(--orange);
}

.live-map-tab .live-map .search-select-data .txt span.bagee.green {
	background-color: #409B3F1F;
	color: var(--green);
}

.live-map-tab .live-map .search-select-data .txt span.bagee.gray {
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	color: var(--dark-txt);
}

.live-map-tab .live-map .right-side-line {
	position: relative;
}

.live-map-tab .live-map .right-side-line button.reset-filter-btn {
	padding: 10px 12px;
	background-color: var(--white);
	border: 1px transparent solid;
	outline: none;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--purple);
	box-shadow: 0 2px 4px 0 #00000052;
	text-decoration: underline;
	text-decoration-color: #5263ff5b;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.live-map-tab .live-map .right-side-line button.select-btn {
	padding: 10px 12px;
	background-color: var(--white);
	border-radius: 12px;
	border: 1px transparent solid;
	box-shadow: 0 2px 4px 0 #00000052;
	outline: none;
}

.live-map-tab .live-map .right-side-line button.select-btn img {
	height: 16px;
}

.live-map-tab .live-map .right-side-line button.select-btn p {
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.live-map-tab .live-map .right-side-line button.select-btn span {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--purple);
}

.live-map-tab .live-map .right-side-line .road-type-btn-data,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data,
.live-map-tab .live-map .right-side-line .drivers-btn-data,
.live-map-tab .live-map .right-side-line .status-btn-data {
	position: absolute;
	top: 50px;
	left: 0;
	z-index: 999;
	display: none;
	background-color: var(--white);
	border-radius: 24px;
	width: 320px;
	max-height: 272px;
	overflow-y: scroll;
	scrollbar-width: none;
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .heading,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .heading,
.live-map-tab .live-map .right-side-line .drivers-btn-data .heading,
.live-map-tab .live-map .right-side-line .status-btn-data .heading {
	padding: 16px;
	border-bottom: 1px #1E293B0F solid;
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .heading div img,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .heading div img,
.live-map-tab .live-map .right-side-line .drivers-btn-data .heading div img,
.live-map-tab .live-map .right-side-line .status-btn-data .heading div img {
	height: 20px;
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .heading div p,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .heading div p,
.live-map-tab .live-map .right-side-line .drivers-btn-data .heading div p,
.live-map-tab .live-map .right-side-line .status-btn-data .heading div p {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .heading div span,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .heading div span,
.live-map-tab .live-map .right-side-line .drivers-btn-data .heading div span,
.live-map-tab .live-map .right-side-line .status-btn-data .heading div span {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .heading button.all-btn,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .heading button.all-btn,
.live-map-tab .live-map .right-side-line .drivers-btn-data .heading button.all-btn,
.live-map-tab .live-map .right-side-line .status-btn-data .heading button.all-btn {
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--purple);
	background-color: var(--white);
	border: none;
	outline: none;
	text-decoration: underline;
	text-decoration-color: #5263ff5b;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .main-data,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .main-data,
.live-map-tab .live-map .right-side-line .drivers-btn-data .main-data,
.live-map-tab .live-map .right-side-line .status-btn-data .main-data {
	padding: 16px;
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .main-data .pannel,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .main-data .pannel,
.live-map-tab .live-map .right-side-line .drivers-btn-data .main-data .pannel,
.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel {
	background-color: var(--white);
	border-radius: 12px;
	padding: 8px 12px;
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .main-data .pannel:hover,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .main-data .pannel:hover {
	background-color: #5263FF1F;
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .main-data .pannel div svg path,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .main-data .pannel div svg path {
	fill: var(--gray-txt);
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .main-data .pannel div p,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .main-data .pannel div p,
.live-map-tab .live-map .right-side-line .drivers-btn-data .main-data .pannel div p,
.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel div p {
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .main-data .pannel div span,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .main-data .pannel div span,
.live-map-tab .live-map .right-side-line .drivers-btn-data .main-data .pannel div span,
.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel div span {
	font-size: 13px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .main-data .pannel.active,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .main-data .pannel.active {
	background-color: #5263FF1F;
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .main-data .pannel.active div svg path,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .main-data .pannel.active div svg path {
	fill: var(--purple-2);
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .main-data .pannel.active div p,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .main-data .pannel.active div p {
	color: var(--purple-2);
}

.live-map-tab .live-map .right-side-line .road-type-btn-data .main-data .pannel.active div span,
.live-map-tab .live-map .right-side-line .subcontractors-btn-data .main-data .pannel.active div span {
	color: var(--purple);
}

.live-map-tab .live-map .right-side-line .subcontractors-btn-data {
	left: 35%;
}

.live-map-tab .live-map .right-side-line .drivers-btn-data {
	left: 8%;
}

.live-map-tab .live-map .right-side-line .drivers-btn-data .main-data .pannel {
	padding: 0;
}

.live-map-tab .live-map .right-side-line .drivers-btn-data .main-data div img {
	height: 40px;
}

.live-map-tab .live-map .right-side-line .status-btn-data {
	right: 0;
	left: auto;
}

.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel div img {
	height: 16px;
}

.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel.green.active {
	background-color: #409B3F1F;
}

.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel.red.active {
	background-color: #ED40301F;
}

.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel.blue.active {
	background-color: #5263FF1F;
}

.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel.green .custom-check input:checked+.checkmark {
	background-color: var(--green-2);
}

.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel.red .custom-check input:checked+.checkmark {
	background-color: var(--badge-orange);
}

.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel.blue .custom-check input:checked+.checkmark {
	background-color: var(--purple);
}

.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel.green.active p,
.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel.green.active span {
	color: var(--green);
}

.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel.red.active p,
.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel.red.active span {
	color: var(--orange);
}

.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel.blue.active p,
.live-map-tab .live-map .right-side-line .status-btn-data .main-data .pannel.blue.active span {
	color: var(--purple-2);
}



@media (max-width:768px) {
	.live-map-tab .live-map .search-select {
		width: 100%;
	}

	.live-map-tab .live-map .right-side-line {
		justify-content: start !important;
	}
}



/* ===============================================================================================================================================================
																			End live-map-tab (dispatch page)
=============================================================================================================================================================== */

/* Start active-addressess popup */

.active-addressess .modal-dialog {
	min-width: 520px;
}

.active-addressess .modal-content {
	padding: 0 !important;
}

.active-addressess .modal-header {
	padding: 16px 20px;
}

.active-addressess .modal-header h6 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.active-addressess .modal-header p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.active-addressess .modal-header button.btn-close {
	position: absolute;
	top: 12px;
	right: 12px;
	height: 32px;
	width: 32px;
	background-size: 13px;
}

.active-addressess .modal-body {
	border-top: 1px #dee2e6 solid;
	max-height: 408px;
	overflow-y: scroll;
	scrollbar-width: none;
	padding: 0;
}

.active-addressess .modal-body .title {
	padding: 12px 20px;
	background-color: #F1F5F9;
}

.active-addressess .modal-body .title img.location-icon {
	height: 16px;
}

.active-addressess .modal-body .title p {
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.active-addressess .modal-body .title span.last-txt {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.active-addressess .modal-body .title-pannel {
	padding: 8px 20px;
}

.active-addressess .modal-body .title-pannel:nth-child(odd) {
	background-color: #F8FAFC;
}

.active-addressess .modal-body .title-pannel .txt p {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.active-addressess .modal-body .title-pannel .txt span {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.active-addressess .modal-footer button {
	padding: 8px;
	border: 1px transparent solid;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.active-addressess .modal-footer button.cancel-btn {
	background-color: #F1F5F9CC;
	border-color: #1E293B17;
	color: var(--dark-txt);
}

.active-addressess .modal-footer button.add-now-btn {
	background-color: var(--purple);
	color: var(--white);
}

@media (max-width:768px) {
	.active-addressess .modal-dialog {
		min-width: 95%;
	}
}

/* End active-addressess popup */

/* Start invite-drivers popup */

.invite-drivers .search-txt {
	background-color: #F8FAFC;
}

.invite-drivers .search-txt .search {
	background-color: var(--white);
}

.invite-drivers .modal-content {
	max-height: 600px !important;
}

.invite-drivers .modal-body .column button.invited-btn {
	padding: 8px !important;
	gap: 2px !important;
}

.invite-drivers .modal-body .column button.invited-btn p {
	padding: 0 4px !important;
}

.invite-drivers .modal-body .column button.invited-btn.yellow p {
	color: var(--yellow) !important;
}

.invite-drivers .modal-body .column button.invited-btn.green p {
	color: var(--green) !important;
}

.invite-drivers .modal-body .column button.invited-btn.red p {
	color: var(--orange) !important;
}

/* End invite-drivers popup */





/* ===============================================================================================================================================================
																			End Own (dispatch page)
=============================================================================================================================================================== */
/* ===============================================================================================================================================================
																			Start Owner registration
=============================================================================================================================================================== */

.owner {
	background-image: url(../img/Artboard.png);
	height: 100vh;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
}

.owner .layer {
	height: 100vh;
	width: 100%;
	background-color: #1E293B66;
	position: absolute;
	z-index: 1;
}

.owner .cstm-modal-main {
	height: 100vh;
	width: 100%;
}

.owner .cstm-modal-main .cstm-modal {
	background-color: var(--white);
	border-radius: 28px;
	max-width: 1100px;
	width: 1100px;
	max-height: 800px;
	z-index: 2;
}

.owner .cstm-modal-main .cstm-modal .right {
	overflow: hidden;
	position: relative;
}

.owner .cstm-modal-main .cstm-modal .right img.owner-image {
	height: 100%;
	width: 100%;
	max-height: 768px;
	border-radius: 16px;
	object-fit: cover;
}

.owner .cstm-modal-main .cstm-modal .right .x-close {
	height: 40px;
	width: 40px;
	background-color: var(--white);
	border: 1px #1E293B17 solid;
	border-radius: 50px;
	box-shadow: 0 2px 1.5px -0.5px #1E293B08;
	position: absolute;
	top: 8px;
	right: 8px;
	cursor: pointer;
}

.owner .cstm-modal-main .cstm-modal .right .x-close img {
	height: 20px;
}

.owner .cstm-modal-main .cstm-modal .left {
	padding: 44px 40px;
}

.owner .cstm-modal-main .cstm-modal .left .cstm-modal-title h3 {
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -1px;
	color: var(--dark-txt);
}

.owner .cstm-modal-main .cstm-modal .left .cstm-modal-title p {
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register {
	margin: 40px 0;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register label {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register input {
	padding: 8px 10px;
	height: 40px;
	width: 100%;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	border: 1px#1E293B1F solid;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	outline: none;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register input:focus {
	box-shadow: 0 0 0 0.2rem #dce0ff;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .password-requirment img {
	height: 18px;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .password-requirment span {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .password-requirment span.black-txt {
	color: var(--dark-txt);
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .password-requirment span.gray-txt {
	color: var(--gray-txt);
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .password-requirment .w-40 {
	width: 40%;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register span.error {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--badge-orange);
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .phone-number div.w-30 {
	width: 30%;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .phone-number .form-group {
	padding: 8px 10px;
	height: 40px;
	width: 100%;
	color: var(--dark-txt);
	border: 1px#1E293B1F solid;
	border-radius: 10px;
	box-shadow: 0 3px 3px -1.5px #1E293B08;
	outline: none;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .phone-number .form-group input#phone {
	display: none;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .phone-number .form-group #iti-0__dropdown-content {
	width: 200px !important;
	top: 30px !important;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .phone-number .form-group #iti-0__dropdown-content input#iti-0__search-input {
	padding: 0 0 0 30px;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .phone-number .form-group .iti__selected-country {
	background-image: url(../img/icons/gray-arrow.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: 18px;
	background-color: transparent;
	width: 100%;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .phone-number .form-group .iti__selected-country-primary {
	padding: 0;
	justify-content: space-between;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .phone-number .form-group .iti__selected-country .iti__selected-dial-code {
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .phone-number .form-group .iti__selected-country-primary .iti__arrow {
	display: none;
}

.owner .cstm-modal-main .cstm-modal .left form.owner-register .phone-number .form-group .iti--allow-dropdown,
.owner .cstm-modal-main .cstm-modal .left form.owner-register .phone-number .form-group .iti__country-container {
	width: 100%;
	background: transparent;
}

.owner .cstm-modal-main .cstm-modal .left .submission p {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.owner .cstm-modal-main .cstm-modal .left .submission p a {
	font-weight: 700;
	color: var(--gray-txt-2);
	text-decoration: underline;
}

.owner .cstm-modal-main .cstm-modal .left .submission button {
	margin-top: 12px;
	padding: 12px;
	background-color: var(--purple);
	border: 1px #1E293B17 solid;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--white);
	backdrop-filter: blur(24px);
	box-shadow: 
		0px 1px 1px -0.5px #1E293B08,
		0px 3px 3px 0px #FFFFFF1F inset;
	outline: none;
}

.owner .cstm-modal-main .cstm-modal .left .submission button:disabled {
	opacity: 0.8;
}

@media (max-width:1024px) {
	.owner .cstm-modal-main .cstm-modal .right {
		display: none;
	}

	.owner .cstm-modal-main .cstm-modal .left {
		width: 100% !important;
		padding: 40px 0;
	}

	.owner .cstm-modal-main .cstm-modal .left form.owner-register .password-requirment .gap-1 {
		width: 50%;
	}
}


/* ===============================================================================================================================================================
																			End Owner registration
=============================================================================================================================================================== */
/* ===============================================================================================================================================================
																			End account-created-phone page
=============================================================================================================================================================== */

.account-created-phone-main {
	background-color: #F1F5F9;
}

.account-created-phone {
	height: 100vh;
	width: 100%;
	padding: 40px;
}

.account-created-phone .logo img {
	height: 28px;
}

.account-created-phone .right-logout .profile {
	height: 36px;
	width: 36px;
	background: #5263FF;
	background: linear-gradient(180deg, rgba(82, 99, 255, 1) 0%, rgba(82, 99, 255, 0.2) 100%);
	border-radius: 50px;
	color: var(--white);
}

.account-created-phone .right-logout div p {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.account-created-phone .right-logout div span {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.account-created-phone .right-logout img.logout {
	height: 16px;
}

.account-created-phone .left-right .left .left-child {
	width: 400px;
}

.account-created-phone .left-right .left .tik {
	height: 64px;
	width: 64px;
	background-color: #409B3F1F;
	border-radius: 50px;
}

.account-created-phone .left-right .left .tik img {
	height: 36px;
}

.account-created-phone .left-right .left h3 {
	font-size: 42px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -1px;
	color: var(--dark-txt);
}

.account-created-phone .left-right .left h5 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.account-created-phone .left-right .left p {
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
	margin-top: 32px;
}

.account-created-phone .left-right .left .store-imgs img {
	height: 64px;
}


.account-created-phone .left-right .right img {
	max-height: 602px;
}

@media (max-width:767px) {
	.account-created-phone .left-right {
		flex-direction: column;
	}

	.account-created-phone .left-right .left {
		margin-top: 24px;
	}

	.account-created-phone .left-right .left,
	.account-created-phone .left-right .left .left-child {
		width: 100% !important;
	}

	.account-created-phone .right-logout {
		display: none !important;
	}

	.account-created-phone .logo {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.account-created-phone .left-right .left h3 {
		font-size: 25px;
		font-weight: 800;
		line-height: 36px;
	}

	.account-created-phone .left-right .left h5 {
		margin-top: 8px !important;
	}

	.account-created-phone .left-right .left p {
		margin-top: 24px;
	}

	.account-created-phone .left-right .left .store-imgs img {
		height: 59px;
	}
}




/* ===============================================================================================================================================================
																			End account-created-phone page
=============================================================================================================================================================== */

/* ===============================================================================================================================================================
																			Start business-onboarding page
=============================================================================================================================================================== */

.business-onboarding .dropdown-title-main {
	max-width: 640px;
	width: 100%;
}

.business-onboarding .dropdown-title-main h3 {
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -1px;
	color: var(--dark-txt);
}

.business-onboarding .dropdown-title-main p {
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.business-onboarding .three-dropdown {
	max-width: 640px;
	width: 100%;
}

.business-onboarding .three-dropdown .cstm-dropdown {
	background-color: var(--white);
	padding: 24px;
	border: 1px #1E293B17 solid;
	border-radius: 28px;
	box-shadow: 0 20px 20px -12px #1E293B08;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-title .num {
	min-height: 48px;
	min-width: 48px;
	background-color: #5263FF1F;
	font-size: 22px;
	font-weight: 800;
	line-height: 28px;
	letter-spacing: -1px;
	color: var(--purple-2);
	border-radius: 50px;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-title .txt h5 {
	font-size: 22px;
	font-weight: 800;
	line-height: 28px;
	letter-spacing: -1px;
	color: var(--dark-txt);
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-title .txt p {
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-title button.arrow {
	min-height: 40px;
	min-width: 40px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	outline: none;
	border-radius: 10px;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-title button.arrow img {
	transition: transform 0.3s ease;
	height: 20px;
}

.business-onboarding .three-dropdown .cstm-dropdown.active .cstm-dropdown-title button.arrow img {
	transform: rotate(180deg);
}





.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner {
	opacity: 0;
	transform: translateY(-10px);
	padding-top: 24px;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.business-onboarding .three-dropdown .cstm-dropdown.active .cstm-dropdown-data {
	max-height: 500px;
}

.business-onboarding .three-dropdown .cstm-dropdown.active .inner {
	opacity: 1;
	transform: translateY(0);
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner label {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
	margin-left: 2px;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner label span {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner label img {
	height: 16px;
	margin-left: 4px;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner select {
	height: 40px;
	padding: 8px 10px;
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	box-shadow: 0 3px 3px -1.5px #1E293B08;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("../img/icons/gray-arrow.png");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 18px;
	cursor: pointer;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .custm-input-main .custm-input {
	padding: 8px 4px;
	height: 40px;
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	box-shadow: 0 3px 3px -1.5px #1E293B08;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .custm-input-main .custm-input input {
	outline: none;
	border: none;
	height: 100%;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	padding: 0 4px;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .custm-input-main .custm-input button {
	padding: 8px 12px;
	background-color: var(--purple);
	border: 1px #1E293B17 solid;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--white);
	height: 32px;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .custm-input-main .custm-input button:disabled {
	opacity: 0.8;
	cursor: not-allowed;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .proper input {
	height: 40px;
	padding: 8px 10px;
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	box-shadow: 0 3px 3px -1.5px #1E293B08;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .upload-img .upload-img-box {
	background-color: #F1F5F9;
	border: 1px #1E293B1F dashed;
	padding: 16px;
	border-radius: 16px;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .upload-img .upload-img-box .left img {
	height: 24px;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .upload-img .upload-img-box .left span {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .upload-img .upload-img-box button {
	background-color: var(--white);
	border: 1px #1E293B17 solid;
	border-radius: 8px;
	outline: none;
	box-shadow: 0 2px 1.5px -0.5px #1E293B08;
	gap: 2px;
	padding: 8px;
	position: relative;
	cursor: pointer;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .upload-img .upload-img-box button img {
	height: 16px;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .upload-img .upload-img-box button span {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
	padding: 0 4px;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .upload-img .upload-img-box button input {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	cursor: pointer;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .date-select div {
	height: 40px;
	padding: 8px 10px;
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	box-shadow: 0 3px 3px -1.5px #1E293B08;
	padding: 8px 0;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .date-select select {
	border: none;
	outline: none;
	height: auto;
	padding: 0 8px;
	box-shadow: none;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .date-select select.first {
	width: 30%;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .date-select select.second {
	width: 70%;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .toggle-txt label {
	font-size: 15px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	margin: 0;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .toggle-txt p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt-2);
}

/* cstm toggle start */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 28px;
	background: #E2E8F0;
	background: linear-gradient(180deg, rgba(226, 232, 240, 1) 0%, rgba(248, 250, 252, 1) 100%);
	border-radius: 50px;
	padding: 3px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	border-radius: 30px;
	background-color: #D3DDE8;
	transition: 0.3s;
	height: 22px;
	width: 40px;
}

.slider:before {
	content: "";
	position: absolute;
	height: 18px;
	width: 18px;
	left: 2px;
	top: 2px;
	border-radius: 50%;
	background: #E2E8F0;
	transition: 0.3s;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked+.slider {
	background: linear-gradient(135deg, #5B67F6, #4C57E0);
}

.toggle-switch input:checked+.slider:before {
	transform: translateX(18px);
	background: #fff;
}

.toggle-switch input:checked+.slider:after {
	content: "";
	position: absolute;
	right: 5px;
	top: 7.5px;
	width: 11px;
	height: 11px;
	background-image: url("../img/icons/toggle-check-icon.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

/* end toggle start */

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .btns {
	gap: 10px;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .btns button {
	padding: 8px 14px;
	border: 1px transparent solid;
	border-radius: 10px;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .btns button:disabled {
	opacity: 0.8;
	cursor: not-allowed;
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .btns button.back {
	background-color: #F1F5F9CC;
	border-color: #1E293B17;
	color: var(--dark-txt);
}

.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .btns button.continue {
	background-color: var(--purple);
	border-color: #1E293B17;
	color: var(--white);
}

.choices__inner {
	padding: 0;
	height: 40px;
	padding: 8px 10px;
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	box-shadow: 0 3px 3px -1.5px #1E293B08;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("../img/icons/gray-arrow.png");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 18px;
	cursor: pointer;
}

.choices__list--single {
	padding: 0 !important;
}

.choices[data-type*=select-one]::after {
	display: none;
}

.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.is-open .choices__inner {
	border-radius: 10px;
	border: 1px #1E293B1F solid;
	outline: none;
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data .title h5 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data .title p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data .selected {
	background-color: #F1F5F9;
	border: 1px #1E293B08 solid;
	border-radius: 16px;
	padding: 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data .selected.delet-edit button {
	padding: 4px;
	background-color: transparent;
	border: none;
	outline: none;
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data .selected.delet-edit button img {
	height: 16px;
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data .selected.delet-edit .bagge {
	padding: 4px 8px;
	background-color: var(--white);
	border: 1px #1E293B17 solid;
	border-radius: 8px;
	box-shadow: 0 2px 1.5px -0.5ox #1E293B08;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data .selected.editable input {
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	outline: none;
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data .selected.editable input:focus {
	box-shadow: 0 0 0 3px #5263FF33;
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data .selected.editable button {
	background: transparent;
	padding: 8px;
	border: 1px transparent solid;
	outline: none;
	border-radius: 8px;
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data .selected.editable button img {
	height: 16px;
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data .selected.editable button.save-btn {
	background-color: var(--purple);
	border-color: #1E293B17;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--white);
	padding: 8px 12px;
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data button.new-btn {
	padding: 8px;
	gap: 2px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B17 solid;
	border-radius: 8px;
	outline: none;
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data button.new-btn img {
	height: 16px;
}

.business-onboarding .three-dropdown .cstm-dropdown.second .cstm-dropdown-data button.new-btn p {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	padding: 0 4px;
}

@media (max-width:1100px) {
	.business-onboarding .account-created-phone {
		padding: 40px 15px;
	}

	.business-onboarding .account-created-phone .top-titles .logo {
		justify-content: start;
	}

	.business-onboarding .top-titles {
		flex-direction: column;
		gap: 20px !important;
	}

	.business-onboarding .account-created-phone .top-titles .right-logout {
		display: none !important;
	}

	.business-onboarding .account-created-phone .top-titles .dropdown-title-main {
		max-width: 100%;
	}

	.business-onboarding .account-created-phone .three-dropdown {
		max-width: 100%;
	}
}

@media (max-width:767px) {
	.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-title .txt h5 {
		font-size: 18px;
		line-height: 24px;
	}

	.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-title .txt p {
		font-size: 14px;
		line-height: 22px;
	}

	.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .fdc {
		flex-direction: column;
	}

	.business-onboarding .three-dropdown .cstm-dropdown .cstm-dropdown-data .inner .dn {
		display: none;
	}
}



/* Start welcom-snow-manager-popup */

.welcom-snow-manager-popup .modal-dialog {
	min-width: 1000px;
}

.welcom-snow-manager-popup .modal-content {
	padding: 32px !important;
}

.welcom-snow-manager-popup .modal-header {
	padding: 0;
}

.welcom-snow-manager-popup .modal-header h6 {
	font-size: 25px;
	font-weight: 800;
	line-height: 36px;
	letter-spacing: -1px;
	color: var(--dark-txt);
}

.welcom-snow-manager-popup .modal-header p {
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.welcom-snow-manager-popup .modal-body {
	padding: 0;
	gap: 20px;
	margin-top: 32px;
	max-height: 415px;
	overflow-y: scroll;
	scrollbar-width: none;
}

.welcom-snow-manager-popup .modal-body .left {
	width: 30%;
	max-height: 415px;
	height: 100%;
	overflow-y: scroll;
	scrollbar-width: none;
}


.welcom-snow-manager-popup .modal-body .left .box {
	background-color: var(--white);
	border: 1px #1E293B17 solid;
	border-radius: 20px;
	box-shadow: 0 20px 20px -12px #1E293B08;
	padding: 16px;
	cursor: pointer;
}

.welcom-snow-manager-popup .modal-body .left .box:hover,
.welcom-snow-manager-popup .modal-body .left .box.active {
	background-color: #5263FF1F;
	border-color: #5263FF66;
}

.welcom-snow-manager-popup .modal-body .left .box h6 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.welcom-snow-manager-popup .modal-body .left .box p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.welcom-snow-manager-popup .modal-body .right {
	width: 70%;
}

.welcom-snow-manager-popup .modal-body .right video {
	max-height: 351px;
	max-width: 640px;
	border-radius: 16px;
}

.welcom-snow-manager-popup .modal-body .right button {
	padding: 8px 14px;
	background-color: var(--purple);
	border: 1px #1E293B17 solid;
	border-radius: 10px;
	outline: none;
	box-shadow: 0 1px 1px -0.5px #1E293B08;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--white);
}

@media (max-width:1150px) {
	.welcom-snow-manager-popup .modal-dialog {
		min-width: 95%;
	}
}

@media (max-width:1024px) {
	.welcom-snow-manager-popup .modal-body {
		flex-wrap: wrap;
	}

	.welcom-snow-manager-popup .modal-body .left,
	.welcom-snow-manager-popup .modal-body .right {
		width: 100%;
		max-height: max-content;
	}

	.welcom-snow-manager-popup .modal-body .right video {
		max-width: 100%;
		width: 100%;
	}
}

/* End welcom-snow-manager-popup */


/* ===============================================================================================================================================================
																			End business-onboarding page
=============================================================================================================================================================== */

/* ===============================================================================================================================================================
																			Start locations page
=============================================================================================================================================================== */

.locations .main-content .main-titlee .main-title button {
	width: auto;
	padding: 8px 10px;
}

.locations .main-content .main-titlee .main-title button.normal-btn {
	padding: 8px 10px;
	background: #F1F5F9CC;
	border: 1px solid #1E293B0F;
	width: auto;
	color: var(--dark-txt);
}

.locations .main-content .main-titlee .main-title button.normal-btn:hover {
	opacity: 0.8;
}

.locations .main-content .main-titlee .main-title button.normal-btn:disabled {
	opacity: 0.6;
}

.locations .main-content .main-title .dispatch-dropdown {
	margin: 0;
}

.locations .main-content .main-title .dispatch-dropdown .dispatch-menu a button.dispatch-item {
	background: #F1F5F9CC;
	border: 1px #1E293B17 solid;
	color: var(--dark-txt);
}

.locations .main-content .main-table .table-title .search-input {
	padding: 8px;
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	border-radius: 50px;
	box-shadow: 0 1.5px 2px 0.5px rgba(0, 0, 0, 0.06);
	width: 100%;
	max-width: 300px;
}

.locations .main-content .main-table .table-title .search-input img {
	height: 16px;
}

.locations .main-content .main-table .table-title .search-input input {
	border: none;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.locations .main-content .dispatch-group-btn-tab table td div img.map {
	height: 40px;
	width: 40px;
	border-radius: 8px;
}

.locations .main-content .dispatch-group-btn-tab table td p {
	font-size: 13px;
	font-weight: 800;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.locations .main-content .dispatch-group-btn-tab table td .txt span {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.locations .main-content .dispatch-group-btn-tab table td .areas p {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}

.locations .main-content .dispatch-group-btn-tab table td .areas .baggee {
	padding: 4px 8px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
}

.locations .main-content .dispatch-group-btn-tab table td .areas .baggee.sky {
	background-color: #06B1F11F;
	color: var(--sky);
}

.locations .main-content .dispatch-group-btn-tab table td .areas .baggee.green {
	background-color: #409B3F1F;
	color: var(--green);
}

.locations .main-content .dispatch-group-btn-tab table td .areas .baggee.gray {
	background-color: #F1F5F9CC;
	color: var(--dark-txt);
	border: 1px #1E293B08 solid;
}

.locations .main-content .dispatch-group-btn-tab table tr:hover {
	background-color: #5263FF1F;
}

.locations .main-content .dispatch-group-btn-tab table td .alert-info img {
	height: 16px;
}

.locations .main-content .dispatch-group-btn-tab table td .alert-info span {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--orange);
}

.locations .main-content .dispatch-group-btn-tab table td .alert-info.yellow span {
	color: var(--yellow);
}

/* Start filter-locations popup */

.filter-locations .modal-body .assigned button {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	padding: 8px 12px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B17 solid;
	border-radius: 8px;
	outline: none;
}

/* End filter-locations popup */

.locations .main-table table td img.info-tooltip {
	cursor: pointer;
}

.tooltip-custom h5 {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--orange) !important;
}

.tooltip-custom.yellow h5 {
	color: var(--yellow) !important;
}

.locations .dispatch-list-tab .data-left .view-all-errors {
	background-color: var(--white);
	border-radius: 20px;
	border: 1px #1E293B0F solid;
	box-shadow: 0 20px 20px -12px #1E293B08;
	padding: 12px 12px 12px 16px;
}

.locations .dispatch-list-tab .data-left .view-all-errors div img {
	height: 20px;
}

.locations .dispatch-list-tab .data-left .view-all-errors div p {
	font-size: 15px;
	font-weight: 800;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.locations .dispatch-list-tab .data-left .view-all-errors button {
	padding: 8px 14px;
	background-color: var(--orange);
	border: 1px #1E293B17 solid;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--white);
}

/* Start new-location popup */

/* WMPopups opened on top of the full-screen invoice preview (z-index 1055):
   bootstrap appends the backdrop at 1050, which the preview swallows, so the
   background never darkens. Only while the preview is open, lift the popup and
   the backdrop above it. */
body:has(.invoice-detail-modal) .modal.new-location.show {
	z-index: 1060;
}

body:has(.invoice-detail-modal) > .modal-backdrop.show {
	z-index: 1056;
}

.new-location .modal-dialog {
	min-width: 600px;
}

.new-location .modal-content {
	padding: 0 !important;
	border-radius: 20px !important;
}

.new-location .modal-header {
	padding: 16px 20px;
}

.new-location .modal-header h5.modal-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.new-location .modal-header button.btn-close {
	position: relative;
	/* top: 12px; */
	right: 3.56px;
	height: 32px;
	width: 32px;
	background-size: 10px;
	padding: 5px;
}

.new-location .modal-body {
	padding: 16px 20px;
	background-color: #F1F5F9;
	/* max-height: 900px; */
	overflow-y: scroll;
	scrollbar-width: none;
}

.new-location .modal-body h4 {
	font-size: 22px;
	font-weight: 800;
	line-height: 28px;
	letter-spacing: -1px;
	color: var(--dark-txt);
}

.new-location .modal-body .select-btn .cstm-select {
	padding: 8px 0px 8px 10px;
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	height: 40px;
}

.new-location .modal-body .select-btn .cstm-select img {
	height: 18px;
}

.new-location .modal-body .select-btn .cstm-select select {
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--dark-txt);
	height: 100%;
	border: none;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("../img/icons/gray-arrow.png");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 18px;
	cursor: pointer;
}

.new-location .modal-body .select-btn button {
	padding: 8px 12px;
	gap: 2px;
	background-color: #5263FF1F;
	border: none;
	outline: none;
	border-radius: 10px;
	white-space: nowrap;
}

.new-location .modal-body .select-btn button img {
	height: 18px;
}

.new-location .modal-body .select-btn button p {
	padding: 0 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--purple-2);
}

.new-location .modal-body form {
	padding: 16px;
	background-color: var(--white);
	border: 1px #1E293B17 solid;
	border-radius: 24px;
	box-shadow: 0 20px 20px -12px #1E293B08;
}

.new-location .modal-body form label {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.new-location .modal-body form .search {
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	border-radius: 50px;
	box-shadow: 0 3px 3px -1.5px #1E293B08;
	padding: 8px 10px;
}

.new-location .modal-body form .search img {
	height: 18px;
}

.new-location .modal-body form .search input {
	padding: 0 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	width: 100%;
	border: none;
	outline: none;
}

.new-location .modal-body form .hr-lable hr {
	border: 1px #1E293B17 solid;
	margin: 0;
}

.new-location .modal-body form .hr-lable label {
	white-space: nowrap;
}

.new-location .modal-body form input,
.new-location .modal-body form textarea {
	padding: 8px 10px;
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	outline: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.new-location .modal-body form input::placeholder,
.new-location .modal-body form textarea::placeholder {
	color: #cccccc;
}

.new-location .modal-body form input:focus,
.new-location .modal-body form textarea:focus {
	box-shadow: 0 0 0 0.2rem #dce0ff;
}

.new-location .modal-body form input:disabled,
.new-location .modal-body form textarea:disabled {
	background: transparent;
	box-shadow: initial;
	cursor: not-allowed;
}

.new-location .modal-body form label span {
	color: var(--orange);
}

.new-location .modal-body form label img {
	height: 16px;
}

.new-location .modal-body form select {
	padding: 8px 10px;
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	box-shadow: 0 3px 3px -1.5px #1E293B08;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("../img/icons/gray-arrow.png");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 18px;
	cursor: pointer;
}

.new-location .modal-footer {
	padding: 16px 20px;
}

.new-location .modal-footer button {
	padding: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	/* border: 1px transparent solid; */
	border-radius: 10px;
	outline: none;
}

.new-location .modal-footer button.cancel-btn {
	background-color: #F1F5F9CC;
	border: 1px solid #1E293B0F;
	color: var(--dark-txt);
}

.new-location .modal-footer button.cancel-btn:hover {
	opacity: 0.8;
}

.new-location .modal-footer button.create-btn {
	background-color: var(--purple);
	border-color: #1E293B17;
	color: var(--white);
	backdrop-filter: blur(24px);
	box-shadow: 
	0px 1px 1px -0.5px #1E293B08,
	0px 3px 3px 0px #FFFFFF1F inset;
}

.new-location .modal-footer button.create-btn:hover {
	opacity: 0.9;
}

@media (max-width:767px) {
	.new-location .modal-dialog {
		min-width: 95%;
	}

	.new-location .fdc {
		flex-direction: column;
	}
}

/* End new-location popup */

/* Start address-nickname popup */

.address-nickname-popup .modal-dialog {
	min-width: 740px;
}

.address-nickname-popup .modal-header .icon {
	min-height: 48px;
	min-width: 48px;
	background-color: #5263FF1F;
	border-radius: 10px;
}

.address-nickname-popup .modal-header .icon img {
	height: 28px;
}

.address-nickname-popup .modal-header .header-txt h5 {
	font-size: 18px;
	font-weight: 800;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.address-nickname-popup .modal-header .header-txt p {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.btn-wm-primary,
.btn-wm-primary-translucent,
.btn-wm-secondary,
.btn-wm-success,
.btn-wm-danger,
.btn-wm-danger-translucent,
.address-nickname-popup .modal-header button.edit-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 2px;
	padding: 8px 14px;
	/* border: 1px #1E293B17 solid; */
	border: none;
	border-radius: 10px;
	outline: none;
	height: 40px;
	width: max-content;
	background: linear-gradient(var(--purple), var(--purple)) padding-box, linear-gradient(90deg, #1E293B17, #1E293B2E) border-box;
	backdrop-filter: blur(24px);
	box-shadow:
		0px 1px 1px -0.5px #1E293B08,
		0px 3px 3px 0px #FFFFFF1F inset;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
}

.btn-wm-primary,
.btn-wm-success,
.btn-wm-danger {
	color: var(--white);
}

.btn-wm-success {
	background: #338732;
}

.btn-wm-danger {
	background: var(--danger);
}

.btn-wm-primary-translucent {
	color: var(--purple-2);
	background: #DEE3FA;
}

.btn-wm-danger-translucent {
	color: var(--danger);
	background: #FDE8E6;
}

.btn-wm-secondary {
	border: 1px solid #1E293B0F;
	background: #F1F5F9CC;
	color: var(--dark-txt);
}

.btn-wm-primary img,
.btn-wm-primary-translucent img,
.btn-wm-secondary img,
.btn-wm-success img,
.btn-wm-danger img,
.btn-wm-danger-translucent img,
.address-nickname-popup .modal-header button.edit-btn img,
#locationGroupsSlider .lgs-header-right button.edit-btn img{
	height: 18px;
}

.btn-wm-primary p,
.btn-wm-primary-translucent p,
.btn-wm-secondary p,
.btn-wm-success p,
.btn-wm-danger p,
.btn-wm-danger-translucent p,
.address-nickname-popup .modal-header button.edit-btn p,
#locationGroupsSlider .lgs-header-right button.edit-btn p {
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--white);
	padding: 0 4px;
}

.btn-wm-secondary p {
	color: var(--dark-txt);
}

.btn-wm-primary-translucent p {
	color: var(--purple-2);
}

.btn-wm-danger-translucent p {
	color: var(--danger);
}

.btn-wm-primary text,
.btn-wm-primary-translucent text,
.btn-wm-secondary text,
.btn-wm-success text,
.btn-wm-danger text,
.btn-wm-danger-translucent text,
.address-nickname-popup .modal-header button.edit-btn text,
#locationGroupsSlider .lgs-header-right button.edit-btn text {
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--white);
	padding: 0 4px;
}

.btn-wm-secondary text {
	color: var(--dark-txt);
}

.btn-wm-primary-translucent text {
	color: var(--purple-2);
}

.btn-wm-danger-translucent text {
	color: var(--danger);
}

.btn-wm-primary:hover:not(:disabled),
.btn-wm-primary-translucent:hover:not(:disabled),
.btn-wm-secondary:hover:not(:disabled),
.btn-wm-success:hover:not(:disabled),
.btn-wm-danger:hover:not(:disabled),
.btn-wm-danger-translucent:hover:not(:disabled),
.address-nickname-popup .modal-header button.edit-btn:hover:not(:disabled) {
	filter: brightness(1.15);
}

.btn-wm-secondary:hover:not(:disabled) {
	filter: initial;
	background: #E2E8F0CC;
}

.btn-wm-primary-translucent:hover:not(:disabled) {
	filter: initial;
	background: #D8DBFF;
}

.btn-wm-danger-translucent:hover:not(:disabled) {
	filter: initial;
	background: #FCD4D1;
}

.btn-wm-primary:disabled,
.btn-wm-primary-translucent:disabled,
.btn-wm-secondary:disabled,
.btn-wm-success:disabled,
.btn-wm-danger:disabled,
.btn-wm-danger-translucent:disabled,
.address-nickname-popup .modal-header button.edit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.btn-wm-primary:disabled,
.btn-wm-success:disabled,
.btn-wm-danger:disabled {
	opacity: initial;
	background: #94A3BB;
}

.address-nickname-popup .modal-header button.btn-close {
	height: 40px;
	width: 40px;
	background-size: 13px;
}

.address-nickname-popup .modal-body {
	padding: 24px;
	overflow-y: scroll;
	scrollbar-width: none;
}

.address-nickname-popup .modal-body .multi-tabs {
	gap: 6px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	border-radius: 16px;
	padding: 6px 8px;
}

.address-nickname-popup .modal-body .multi-tabs button.tab {
	padding: 6px;
	background-color: transparent;
	border: 1px transparent solid;
	border-radius: 10px;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
	width: 100%;
	transition:
		background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		color 0.25s ease,
		transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);

	will-change: transform, box-shadow, background-color, border-color, color;
}

.address-nickname-popup .modal-body .multi-tabs button.tab:hover {
	color: var(--dark-txt);
	transform: translateY(-1px) scale(1.01);
}

.address-nickname-popup .modal-body .multi-tabs button.tab.active {
	background: linear-gradient(
		to bottom,
		rgba(255,255,255,1),
		rgba(248,250,252,1)
	);
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow:
		0 1px 1px rgba(15, 23, 42, 0.03),
		0 4px 10px rgba(15, 23, 42, 0.06),
		inset 0 1px 0 rgba(255,255,255,0.8);
	color: var(--dark-txt);
	transform: scale(1.015);
}

.address-nickname-popup .modal-body .multi-tabs button.tab:active {
	transform: scale(0.98);
}

.address-nickname-popup .modal-body hr {
	border: 1px #1E293B17 solid;
}


.address-nickname-popup .modal-body .prices-tab,
.address-nickname-popup .modal-body .changelog-tab,
.address-nickname-popup .modal-body .routes-tab,
.address-nickname-popup .modal-body .contacts-tab,
.address-nickname-popup .modal-body .operations-tab {
	display: none;
}

.address-nickname-popup .modal-body .details-tab .carousel .carousel-inner {
	position: relative;
	border-radius: 16px;
}

.address-nickname-popup .modal-body .details-tab .carousel .carousel-inner .full-icon {
	position: absolute;
	bottom: 8px;
	right: 8px;
	height: 32px;
	width: 32px;
	background-color: #F1F5F9CC;
	border: 1px #1E293B08 solid;
	border-radius: 8px;
	z-index: 2;
	cursor: pointer;
}

.address-nickname-popup .modal-body .details-tab .carousel .carousel-inner .full-icon img {
	height: 18px;
}

.address-nickname-popup button.carousel-control-prev,
.address-nickname-popup button.carousel-control-next {
	width: 7%;
}

.address-nickname-popup .carousel-indicators [data-bs-target] {
	box-sizing: content-box !important;
}

.address-nickname-popup .carousel-indicators button {
	margin: 0 !important;
	border: none !important;
	height: 8px !important;
	width: 8px !important;
	background-color: #FFFFFF !important;
	opacity: 0.5 !important;
	border-radius: 50px !important;
}

.address-nickname-popup .carousel-indicators button.active {
	opacity: 1 !important;
}

.address-nickname-popup .modal-body .details-tab .table>:not(caption)>*>* {
	padding: 0;
}

.address-nickname-popup .modal-body .details-tab .table {
	margin-top: 32px;
}

.address-nickname-popup .modal-body .details-tab .table h6 {
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.address-nickname-popup .modal-body .details-tab .table p {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	color: var(--gray-txt);
}

.address-nickname-popup .modal-body .details-tab .table img {
	height: 16px;
	width: 16px;
}

.address-nickname-popup .modal-body .details-tab .table .red {
	width: max-content;
}

.address-nickname-popup .modal-body .details-tab .table span {
	padding: 0;
	color: var(--gray-txt);
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
}

.address-nickname-popup .modal-body .details-tab .table .red span {
	color: var(--orange);
}

.address-nickname-popup .modal-body .details-tab .table span.blue {
	color: var(--purple-2);
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
}

.address-nickname-popup .modal-body .details-tab .table h5 {
	font-size: 18px;
	font-weight: 800;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
}

.address-nickname-popup .modal-body .details-tab .table .baggee {
	padding: 4px 8px;
	background-color: #409B3F1F;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--green);
}

/* End address-nickname popup */

/* Start price regulation popup */
.price-regulation-modal {
	overflow: hidden !important;
}

.price-regulation-modal .modal-dialog {
	display: flex !important;
	max-width: min(1280px, calc(100vw - 48px)) !important;
	width: min(1280px, calc(100vw - 48px)) !important;
	/* height: calc(100vh - 40px) !important; */
	margin: 20px auto !important;
	/* min-height: 0 !important; */
	/* align-items: stretch !important; */
}

.price-regulation-modal .modal-content {
	height: 900px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 18px !important;
	background: #ffffff !important;
	overflow: hidden !important;
	box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24) !important;
}

.price-regulation-modal .modal-body {
	flex: 1 1 auto !important;
	height: 100% !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: hidden !important;
	/* border-radius: 18px !important; */
}

@media (max-width: 768px) {
	.price-regulation-modal .modal-dialog {
		max-width: calc(100vw - 24px) !important;
		width: calc(100vw - 24px) !important;
		min-width: 0 !important;
		margin: 24px auto !important;
	}
}
/* End price regulation popup */

/* Embedded WMCalendar/WMTimePicker inside create-dispatch date-time fields */
.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-2 .date-time .date,
.manual-dispatch .manual-dispatch-content .right-side .date-time .date-time-box .date-picker {
	padding: 0 !important;
	min-width: 148px;
}

.address-dispatch .address-dispatch-content .address-dispatch-footer .address-dispatch-footer-2 .date-time .time,
.manual-dispatch .manual-dispatch-content .right-side .date-time .date-time-box .time-picker {
	padding: 0 !important;
	min-width: 108px;
}

.address-dispatch .dispatch-inline-calendar,
.manual-dispatch .dispatch-inline-calendar,
.address-dispatch .dispatch-inline-time,
.manual-dispatch .dispatch-inline-time {
	width: 100% !important;
}

.address-dispatch .dispatch-inline-calendar .wm-calendar-input,
.manual-dispatch .dispatch-inline-calendar .wm-calendar-input,
.address-dispatch .dispatch-inline-time .wm-time-input,
.manual-dispatch .dispatch-inline-time .wm-time-input {
	height: 40px !important;
	min-height: 40px !important;
	border: 0 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 10px !important;
}

.address-dispatch .dispatch-inline-calendar .wm-calendar-input:hover:not(:disabled),
.manual-dispatch .dispatch-inline-calendar .wm-calendar-input:hover:not(:disabled),
.address-dispatch .dispatch-inline-time .wm-time-input:hover:not(:disabled),
.manual-dispatch .dispatch-inline-time .wm-time-input:hover:not(:disabled) {
	background: #F8FAFC !important;
}

.address-dispatch .dispatch-inline-calendar .wm-calendar-input:focus,
.manual-dispatch .dispatch-inline-calendar .wm-calendar-input:focus,
.address-dispatch .dispatch-inline-time .wm-time-input:focus,
.manual-dispatch .dispatch-inline-time .wm-time-input:focus {
	box-shadow: 0 0 0 3px rgba(82, 99, 255, 0.12) inset !important;
}

.address-dispatch .dispatch-inline-calendar .wm-calendar-input-text,
.manual-dispatch .dispatch-inline-calendar .wm-calendar-input-text,
.address-dispatch .dispatch-inline-time .wm-time-display,
.manual-dispatch .dispatch-inline-time .wm-time-display {
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	letter-spacing: -0.2px !important;
	color: var(--dark-txt) !important;
}

/* ===============================================================================================================================================================
																			End locations page
=============================================================================================================================================================== */

.login-2fa-item {
	background: #F8FAFC;
	border-radius: 16px;
	transition: border-color 0.2s ease;
	padding: 12px;
}

.login-2fa-item:hover {
    border-color: #CBD5E1;
}

.login-2fa-icon-box {
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    color: var(--gray-txt);
    flex-shrink: 0;
}

.login-2fa-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-txt);
}

.login-2fa-desc {
	font-size: 12.5px;
	color: var(--gray-txt-2);
	line-height: 20px;
	letter-spacing: -0.2px;
}

.login-2fa-btn-translucent {
    background: #EEF2FF;
    color: #363AF5;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.login-2fa-btn-translucent:hover {
    background: #E0E7FF;
    color: #2528D8;
}

.otp-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.otp-boxes {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.otp-input {
    width: 53.33px;
    height: 60px;
    background: #FFFFFF;
    border: 1px solid #1E293B1F;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #475467;
    transition: all .2s ease;
}

.otp-input:focus {
    outline: none;
    border-color: #C7D2FE;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.otp-input.is-invalid {
    border: 2px solid #FDA4AF !important;
    background-color: #FFFFFF !important;
}

.invalid-code-message {
    width: 360px;
    font-size: 13px;
    font-weight: 500;
    color: #D92D20;
    text-align: left;
    margin-top: 12px;
}

.attempt-limit-message {
    width: 100%;
    max-width: 360px;
    font-size: 13px;
    font-weight: 600;
    color: #D92D20;
    text-align: center;
    margin: 24px auto;
}

.resend-container {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.btn-resend {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid #1E293B1F;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    color: #475467;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    outline: none;
}

.btn-resend:hover:not(:disabled) {
    background-color: #F8FAFC;
    border-color: #CBD5E1;
}

.btn-resend:disabled {
    background-color: #F8FAFC;
    color: #98A2B3;
    cursor: not-allowed;
    box-shadow: none;
    border-color: #1E293B0F;
}

/* form controls START
   These were only ever declared inside individual .razor.css files, which Blazor scopes to
   the component that owns them. Any new component using .form-input therefore rendered an
   unstyled browser input until its author copied the block across again — nine copies of
   .form-input and seven of .form-label had accumulated that way, already drifting apart.
   Declaring them here once gives every component the same control by default. Existing
   scoped copies still win on specificity (.form-input[b-xxxxx] over .form-input), so pages
   that carry their own copy are untouched and can be converged onto these later. */

.form-label {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
	margin-bottom: 4px;
}

.form-input {
	width: 100%;
	padding: 8px 10px;
	background-color: var(--white);
	border: 1px #1E293B1F solid;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	outline: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--dark-txt);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus {
	box-shadow: 0 0 0 0.2rem #dce0ff;
	outline: none;
	border-color: #1E293B1F;
}

.form-input::placeholder {
	color: #cccccc;
	font-weight: 600;
}

.form-input:disabled {
	background-color: #F8FAFC;
	color: var(--gray-txt);
	cursor: not-allowed;
}

/* Tick box matching the .custom-minus mark above, for the plain checkboxes that had no
   shared style at all and fell back to the browser's. */
.wm-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.2px;
	color: var(--gray-txt);
}

.wm-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	height: 20px;
	width: 20px;
	flex: 0 0 20px;
	border-radius: 6px;
	border: 2px solid #1E293B1F;
	background: #F1F5F9;
	position: relative;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wm-checkbox input[type="checkbox"]:checked {
	background-color: var(--purple);
	border-color: var(--purple);
}

.wm-checkbox input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 5px;
	width: 4px;
	height: 9px;
	border: solid var(--white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.wm-checkbox input[type="checkbox"]:focus-visible {
	box-shadow: 0 0 0 0.2rem #dce0ff;
}

.wm-checkbox input[type="checkbox"]:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* form controls END */