@font-face {
    font-family: 'primeicons';
    font-display: block;
    src: url('media/primeicons.ffecb2549ad1765a.eot');
    src: url('media/primeicons.ffecb2549ad1765a.eot?#iefix') format('embedded-opentype'), url('media/primeicons.ba3f916dfb64be8c.woff2') format('woff2'), url('media/primeicons.f8b9e8a4e401b603.woff') format('woff'), url('media/primeicons.0112589c5695a9ed.ttf') format('truetype'), url('media/primeicons.943ab24c43224d29.svg?#primeicons') format('svg');
    font-weight: normal;
    font-style: normal;
}

.pi {
    font-family: 'primeicons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pi:before {
    --webkit-backface-visibility:hidden;
    backface-visibility: hidden;
}

.pi-fw {
    width: 1.28571429em;
    text-align: center;
}

.pi-spin {
    animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

.pi-eraser:before {
    content: "\ea04";
}

.pi-stopwatch:before {
    content: "\ea01";
}

.pi-verified:before {
    content: "\ea02";
}

.pi-delete-left:before {
    content: "\ea03";
}

.pi-hourglass:before {
    content: "\e9fe";
}

.pi-truck:before {
    content: "\ea00";
}

.pi-wrench:before {
    content: "\e9ff";
}

.pi-microphone:before {
    content: "\e9fa";
}

.pi-megaphone:before {
    content: "\e9fb";
}

.pi-arrow-right-arrow-left:before {
    content: "\e9fc";
}

.pi-bitcoin:before {
    content: "\e9fd";
}

.pi-file-edit:before {
    content: "\e9f6";
}

.pi-language:before {
    content: "\e9f7";
}

.pi-file-export:before {
    content: "\e9f8";
}

.pi-file-import:before {
    content: "\e9f9";
}

.pi-file-word:before {
    content: "\e9f1";
}

.pi-gift:before {
    content: "\e9f2";
}

.pi-cart-plus:before {
    content: "\e9f3";
}

.pi-thumbs-down-fill:before {
    content: "\e9f4";
}

.pi-thumbs-up-fill:before {
    content: "\e9f5";
}

.pi-arrows-alt:before {
    content: "\e9f0";
}

.pi-calculator:before {
    content: "\e9ef";
}

.pi-sort-alt-slash:before {
    content: "\e9ee";
}

.pi-arrows-h:before {
    content: "\e9ec";
}

.pi-arrows-v:before {
    content: "\e9ed";
}

.pi-pound:before {
    content: "\e9eb";
}

.pi-prime:before {
    content: "\e9ea";
}

.pi-chart-pie:before {
    content: "\e9e9";
}

.pi-reddit:before {
    content: "\e9e8";
}

.pi-code:before {
    content: "\e9e7";
}

.pi-sync:before {
    content: "\e9e6";
}

.pi-shopping-bag:before {
    content: "\e9e5";
}

.pi-server:before {
    content: "\e9e4";
}

.pi-database:before {
    content: "\e9e3";
}

.pi-hashtag:before {
    content: "\e9e2";
}

.pi-bookmark-fill:before {
    content: "\e9df";
}

.pi-filter-fill:before {
    content: "\e9e0";
}

.pi-heart-fill:before {
    content: "\e9e1";
}

.pi-flag-fill:before {
    content: "\e9de";
}

.pi-circle:before {
    content: "\e9dc";
}

.pi-circle-fill:before {
    content: "\e9dd";
}

.pi-bolt:before {
    content: "\e9db";
}

.pi-history:before {
    content: "\e9da";
}

.pi-box:before {
    content: "\e9d9";
}

.pi-at:before {
    content: "\e9d8";
}

.pi-arrow-up-right:before {
    content: "\e9d4";
}

.pi-arrow-up-left:before {
    content: "\e9d5";
}

.pi-arrow-down-left:before {
    content: "\e9d6";
}

.pi-arrow-down-right:before {
    content: "\e9d7";
}

.pi-telegram:before {
    content: "\e9d3";
}

.pi-stop-circle:before {
    content: "\e9d2";
}

.pi-stop:before {
    content: "\e9d1";
}

.pi-whatsapp:before {
    content: "\e9d0";
}

.pi-building:before {
    content: "\e9cf";
}

.pi-qrcode:before {
    content: "\e9ce";
}

.pi-car:before {
    content: "\e9cd";
}

.pi-instagram:before {
    content: "\e9cc";
}

.pi-linkedin:before {
    content: "\e9cb";
}

.pi-send:before {
    content: "\e9ca";
}

.pi-slack:before {
    content: "\e9c9";
}

.pi-sun:before {
    content: "\e9c8";
}

.pi-moon:before {
    content: "\e9c7";
}

.pi-vimeo:before {
    content: "\e9c6";
}

.pi-youtube:before {
    content: "\e9c5";
}

.pi-flag:before {
    content: "\e9c4";
}

.pi-wallet:before {
    content: "\e9c3";
}

.pi-map:before {
    content: "\e9c2";
}

.pi-link:before {
    content: "\e9c1";
}

.pi-credit-card:before {
    content: "\e9bf";
}

.pi-discord:before {
    content: "\e9c0";
}

.pi-percentage:before {
    content: "\e9be";
}

.pi-euro:before {
    content: "\e9bd";
}

.pi-book:before {
    content: "\e9ba";
}

.pi-shield:before {
    content: "\e9b9";
}

.pi-paypal:before {
    content: "\e9bb";
}

.pi-amazon:before {
    content: "\e9bc";
}

.pi-phone:before {
    content: "\e9b8";
}

.pi-filter-slash:before {
    content: "\e9b7";
}

.pi-facebook:before {
    content: "\e9b4";
}

.pi-github:before {
    content: "\e9b5";
}

.pi-twitter:before {
    content: "\e9b6";
}

.pi-step-backward-alt:before {
    content: "\e9ac";
}

.pi-step-forward-alt:before {
    content: "\e9ad";
}

.pi-forward:before {
    content: "\e9ae";
}

.pi-backward:before {
    content: "\e9af";
}

.pi-fast-backward:before {
    content: "\e9b0";
}

.pi-fast-forward:before {
    content: "\e9b1";
}

.pi-pause:before {
    content: "\e9b2";
}

.pi-play:before {
    content: "\e9b3";
}

.pi-compass:before {
    content: "\e9ab";
}

.pi-id-card:before {
    content: "\e9aa";
}

.pi-ticket:before {
    content: "\e9a9";
}

.pi-file-o:before {
    content: "\e9a8";
}

.pi-reply:before {
    content: "\e9a7";
}

.pi-directions-alt:before {
    content: "\e9a5";
}

.pi-directions:before {
    content: "\e9a6";
}

.pi-thumbs-up:before {
    content: "\e9a3";
}

.pi-thumbs-down:before {
    content: "\e9a4";
}

.pi-sort-numeric-down-alt:before {
    content: "\e996";
}

.pi-sort-numeric-up-alt:before {
    content: "\e997";
}

.pi-sort-alpha-down-alt:before {
    content: "\e998";
}

.pi-sort-alpha-up-alt:before {
    content: "\e999";
}

.pi-sort-numeric-down:before {
    content: "\e99a";
}

.pi-sort-numeric-up:before {
    content: "\e99b";
}

.pi-sort-alpha-down:before {
    content: "\e99c";
}

.pi-sort-alpha-up:before {
    content: "\e99d";
}

.pi-sort-alt:before {
    content: "\e99e";
}

.pi-sort-amount-up:before {
    content: "\e99f";
}

.pi-sort-amount-down:before {
    content: "\e9a0";
}

.pi-sort-amount-down-alt:before {
    content: "\e9a1";
}

.pi-sort-amount-up-alt:before {
    content: "\e9a2";
}

.pi-palette:before {
    content: "\e995";
}

.pi-undo:before {
    content: "\e994";
}

.pi-desktop:before {
    content: "\e993";
}

.pi-sliders-v:before {
    content: "\e991";
}

.pi-sliders-h:before {
    content: "\e992";
}

.pi-search-plus:before {
    content: "\e98f";
}

.pi-search-minus:before {
    content: "\e990";
}

.pi-file-excel:before {
    content: "\e98e";
}

.pi-file-pdf:before {
    content: "\e98d";
}

.pi-check-square:before {
    content: "\e98c";
}

.pi-chart-line:before {
    content: "\e98b";
}

.pi-user-edit:before {
    content: "\e98a";
}

.pi-exclamation-circle:before {
    content: "\e989";
}

.pi-android:before {
    content: "\e985";
}

.pi-google:before {
    content: "\e986";
}

.pi-apple:before {
    content: "\e987";
}

.pi-microsoft:before {
    content: "\e988";
}

.pi-heart:before {
    content: "\e984";
}

.pi-mobile:before {
    content: "\e982";
}

.pi-tablet:before {
    content: "\e983";
}

.pi-key:before {
    content: "\e981";
}

.pi-shopping-cart:before {
    content: "\e980";
}

.pi-comments:before {
    content: "\e97e";
}

.pi-comment:before {
    content: "\e97f";
}

.pi-briefcase:before {
    content: "\e97d";
}

.pi-bell:before {
    content: "\e97c";
}

.pi-paperclip:before {
    content: "\e97b";
}

.pi-share-alt:before {
    content: "\e97a";
}

.pi-envelope:before {
    content: "\e979";
}

.pi-volume-down:before {
    content: "\e976";
}

.pi-volume-up:before {
    content: "\e977";
}

.pi-volume-off:before {
    content: "\e978";
}

.pi-eject:before {
    content: "\e975";
}

.pi-money-bill:before {
    content: "\e974";
}

.pi-images:before {
    content: "\e973";
}

.pi-image:before {
    content: "\e972";
}

.pi-sign-in:before {
    content: "\e970";
}

.pi-sign-out:before {
    content: "\e971";
}

.pi-wifi:before {
    content: "\e96f";
}

.pi-sitemap:before {
    content: "\e96e";
}

.pi-chart-bar:before {
    content: "\e96d";
}

.pi-camera:before {
    content: "\e96c";
}

.pi-dollar:before {
    content: "\e96b";
}

.pi-lock-open:before {
    content: "\e96a";
}

.pi-table:before {
    content: "\e969";
}

.pi-map-marker:before {
    content: "\e968";
}

.pi-list:before {
    content: "\e967";
}

.pi-eye-slash:before {
    content: "\e965";
}

.pi-eye:before {
    content: "\e966";
}

.pi-folder-open:before {
    content: "\e964";
}

.pi-folder:before {
    content: "\e963";
}

.pi-video:before {
    content: "\e962";
}

.pi-inbox:before {
    content: "\e961";
}

.pi-lock:before {
    content: "\e95f";
}

.pi-unlock:before {
    content: "\e960";
}

.pi-tags:before {
    content: "\e95d";
}

.pi-tag:before {
    content: "\e95e";
}

.pi-power-off:before {
    content: "\e95c";
}

.pi-save:before {
    content: "\e95b";
}

.pi-question-circle:before {
    content: "\e959";
}

.pi-question:before {
    content: "\e95a";
}

.pi-copy:before {
    content: "\e957";
}

.pi-file:before {
    content: "\e958";
}

.pi-clone:before {
    content: "\e955";
}

.pi-calendar-times:before {
    content: "\e952";
}

.pi-calendar-minus:before {
    content: "\e953";
}

.pi-calendar-plus:before {
    content: "\e954";
}

.pi-ellipsis-v:before {
    content: "\e950";
}

.pi-ellipsis-h:before {
    content: "\e951";
}

.pi-bookmark:before {
    content: "\e94e";
}

.pi-globe:before {
    content: "\e94f";
}

.pi-replay:before {
    content: "\e94d";
}

.pi-filter:before {
    content: "\e94c";
}

.pi-print:before {
    content: "\e94b";
}

.pi-align-right:before {
    content: "\e946";
}

.pi-align-left:before {
    content: "\e947";
}

.pi-align-center:before {
    content: "\e948";
}

.pi-align-justify:before {
    content: "\e949";
}

.pi-cog:before {
    content: "\e94a";
}

.pi-cloud-download:before {
    content: "\e943";
}

.pi-cloud-upload:before {
    content: "\e944";
}

.pi-cloud:before {
    content: "\e945";
}

.pi-pencil:before {
    content: "\e942";
}

.pi-users:before {
    content: "\e941";
}

.pi-clock:before {
    content: "\e940";
}

.pi-user-minus:before {
    content: "\e93e";
}

.pi-user-plus:before {
    content: "\e93f";
}

.pi-trash:before {
    content: "\e93d";
}

.pi-external-link:before {
    content: "\e93c";
}

.pi-window-maximize:before {
    content: "\e93b";
}

.pi-window-minimize:before {
    content: "\e93a";
}

.pi-refresh:before {
    content: "\e938";
}
  
.pi-user:before {
    content: "\e939";
}

.pi-exclamation-triangle:before {
    content: "\e922";
}

.pi-calendar:before {
    content: "\e927";
}

.pi-chevron-circle-left:before {
    content: "\e928";
}

.pi-chevron-circle-down:before {
    content: "\e929";
}

.pi-chevron-circle-right:before {
    content: "\e92a";
}

.pi-chevron-circle-up:before {
    content: "\e92b";
}

.pi-angle-double-down:before {
    content: "\e92c";
}

.pi-angle-double-left:before {
    content: "\e92d";
}

.pi-angle-double-right:before {
    content: "\e92e";
}

.pi-angle-double-up:before {
    content: "\e92f";
}

.pi-angle-down:before {
    content: "\e930";
}

.pi-angle-left:before {
    content: "\e931";
}

.pi-angle-right:before {
    content: "\e932";
}

.pi-angle-up:before {
    content: "\e933";
}

.pi-upload:before {
    content: "\e934";
}

.pi-download:before {
    content: "\e956";
}

.pi-ban:before {
    content: "\e935";
}

.pi-star-fill:before {
    content: "\e936";
}

.pi-star:before {
    content: "\e937";
}

.pi-chevron-left:before {
    content: "\e900";
}

.pi-chevron-right:before {
    content: "\e901";
}

.pi-chevron-down:before {
    content: "\e902";
}

.pi-chevron-up:before {
    content: "\e903";
}

.pi-caret-left:before {
    content: "\e904";
}

.pi-caret-right:before {
    content: "\e905";
}

.pi-caret-down:before {
    content: "\e906";
}

.pi-caret-up:before {
    content: "\e907";
}

.pi-search:before {
    content: "\e908";
}

.pi-check:before {
    content: "\e909";
}

.pi-check-circle:before {
    content: "\e90a";
}

.pi-times:before {
    content: "\e90b";
}

.pi-times-circle:before {
    content: "\e90c";
}

.pi-plus:before {
    content: "\e90d";
}

.pi-plus-circle:before {
    content: "\e90e";
}

.pi-minus:before {
    content: "\e90f";
}

.pi-minus-circle:before {
    content: "\e910";
}

.pi-circle-on:before {
    content: "\e911";
}

.pi-circle-off:before {
    content: "\e912";
}

.pi-sort-down:before {
    content: "\e913";
}

.pi-sort-up:before {
    content: "\e914";
}

.pi-sort:before {
    content: "\e915";
}

.pi-step-backward:before {
    content: "\e916";
}

.pi-step-forward:before {
    content: "\e917";
}

.pi-th-large:before {
    content: "\e918";
}

.pi-arrow-down:before {
    content: "\e919";
}

.pi-arrow-left:before {
    content: "\e91a";
}

.pi-arrow-right:before {
    content: "\e91b";
}

.pi-arrow-up:before {
    content: "\e91c";
}

.pi-bars:before {
    content: "\e91d";
}

.pi-arrow-circle-down:before {
    content: "\e91e";
}

.pi-arrow-circle-left:before {
    content: "\e91f";
}

.pi-arrow-circle-right:before {
    content: "\e920";
}

.pi-arrow-circle-up:before {
    content: "\e921";
}

.pi-info:before {
    content: "\e923";
}

.pi-info-circle:before {
    content: "\e924";
}

.pi-home:before {
    content: "\e925";
}

.pi-spinner:before {
    content: "\e926";
}

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url('media/layers.ef6db8722c2c3f9a.png');
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url('media/layers-2x.9859cd1231006a4a.png');
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url('media/marker-icon.d577052aa271e13f.png');
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;
	transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/* ---------- Theme Variables ---------- */
:root {
  --theme-color: #1f1646 !important;
  --theme-hover: #1f1646 !important; /* slightly lighter for hover states */
  --theme-bg-focus: #ffffff !important; 
}

/* ---------- PrimeNG Inputs ---------- */
input.p-inputtext,
textarea.p-inputtext {
  width: 100%;
  border: 1px solid var(--theme-color) !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  font-size: 1rem !important; 
  transition: all 0.3s ease;
  outline: none;
}
input.p-inputtext::placeholder,
textarea.p-inputtext::placeholder {
    color: #999999 !important;      /* placeholder text color */
    font-style: italic !important;  /* optional: make it italic */
    opacity: 1 !important;          /* ensure full visibility in all browsers */
    font-size: 1.2rem !important;  /* optional: adjust size */
    padding-right: 5px !important;
}

input.p-inputtext:focus,
textarea.p-inputtext:focus {
  border-color: var(--theme-color) !important;
  box-shadow: 0 0 8px rgba(28, 55, 93, 0.5) !important; /* Drive Medical theme shadow */
  background-color: var(--theme-bg-focus) !important;
}

input.p-inputtext:hover,
textarea.p-inputtext:hover {
  border-color: var(--theme-hover) !important;
}

/* Placeholder styling */
input.p-inputtext::placeholder,
textarea.p-inputtext::placeholder {
  color: #a87b82;
  opacity: 0.8;
}

/* ---------- PrimeNG Dropdown ---------- */
 .p-dropdown {
  border: 1px solid var(--theme-color) !important;
  border-radius: 0 !important;
  transition: all 0.3s ease;
  background-color: #fff !important; 
  color: #999999 !important;      /* placeholder text color */

}

.p-dropdown:hover {
  border-color: var(--theme-hover) !important;
}

.p-dropdown.p-focus {
  border-color: var(--theme-color) !important;
  box-shadow: 0 0 8px rgba(135, 33, 46, 0.5) !important;
  background-color: var(--theme-bg-focus) !important;
}

/* Dropdown panel (options list) */
.p-dropdown-panel {
  border: 1px solid var(--theme-color);
  border-radius: 0;
}

.p-dropdown-items .p-dropdown-item.p-highlight {

  color: #ffffff !important;
}

.p-dropdown-items .p-dropdown-item:not(.p-highlight):hover {
  background-color: #e9f2ff !important;
}

/* Orders filter overlay (global, because overlay is rendered outside component tree) */
.filter-overlay-panel.p-overlaypanel {
  background: linear-gradient(180deg, #fbfdff 0%, #f2f7ff 100%) !important;
  border: 1px solid #d3e2f5 !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 42px rgba(14, 40, 75, 0.2) !important;
  overflow: visible !important;
}

.filter-overlay-panel.p-overlaypanel .p-overlaypanel-content {
  background: transparent !important;
  padding: 14px 48px 12px 16px !important;
  overflow: visible !important;
}

.filter-overlay-panel.p-overlaypanel .p-overlaypanel-close {
  top: 8px !important;
  right: 8px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: 1px solid #c8daef !important;
  color: #2f67b0 !important;
  z-index: 5 !important;
  transition: all 0.22s ease !important;
}

.filter-overlay-panel.p-overlaypanel .p-overlaypanel-close:hover {
  background: #da4345 !important;
  border-color: #da4345 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(160, 32, 32, 0.28) !important;
}

.filter-overlay-panel .orders-filter-field {
  padding: 8px 10px 10px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #e1ebf8 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%) !important;
  box-shadow: 0 2px 8px rgba(26, 58, 97, 0.06) !important;
}

.filter-overlay-panel .orders-filter-label-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 22px !important;
}

.filter-overlay-panel .orders-filter-field label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #31557f !important;
}

.filter-overlay-panel .orders-required-star {
  color: #d63b3b !important;
  font-weight: 800 !important;
}

.filter-overlay-panel .dropDownCss > .p-dropdown,
.filter-overlay-panel #ShipMethod.p-dropdown,
.filter-overlay-panel #sapUserId.p-dropdown,
.filter-overlay-panel #Status.p-dropdown,
.filter-overlay-panel .calendarCss .p-inputtext {
  height: 38px !important;
  border-radius: 5px !important;
  border: 1px solid #bfd3ec !important;
  background: #ffffff !important;
}

.filter-overlay-panel .dropDownCss > .p-dropdown:not(.p-disabled):hover,
.filter-overlay-panel .calendarCss .p-inputtext:hover {
  border-color: #2f67b0 !important;
}

/* Filter popup Reset/Apply — keep label visible on hover, focus, and border click. */
.filter-overlay-panel .footer-reset .p-button,
.filter-overlay-panel .footer-apply .p-button {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  min-width: 96px !important;
  height: 36px !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.filter-overlay-panel .footer-reset .p-button::before,
.filter-overlay-panel .footer-apply .p-button::before {
  content: none !important;
  display: none !important;
}

.filter-overlay-panel .footer-reset .p-button,
.filter-overlay-panel .footer-apply .p-button {
  min-width: 96px !important;
  height: 36px !important;
  border-radius: 5px !important;
}

.filter-overlay-panel .footer-reset .p-button {
  background: #ffffff !important;
  border: 1px solid #d53b3b !important;
  color: #d53b3b !important;
}

.filter-overlay-panel .footer-apply .p-button {
  background: #ffffff !important;
  border: 1px solid #2f67b0 !important;
  color: #2f67b0 !important;
}

.filter-overlay-panel .footer-apply .p-button .p-button-label,
.filter-overlay-panel .footer-reset .p-button .p-button-label {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.filter-overlay-panel .footer-reset .p-button .p-button-label {
  color: #d53b3b !important;
}

.filter-overlay-panel .footer-apply .p-button .p-button-label {
  color: #2f67b0 !important;
}

.filter-overlay-panel .footer-reset .p-button:hover,
.filter-overlay-panel .footer-reset .p-button:focus,
.filter-overlay-panel .footer-reset .p-button:focus-visible,
.filter-overlay-panel .footer-reset .p-button:active {
  background: #d53b3b !important;
  border: 1px solid #bf2f2f !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(213, 59, 59, 0.18) !important;
}

.filter-overlay-panel .footer-reset .p-button:hover .p-button-label,
.filter-overlay-panel .footer-reset .p-button:focus .p-button-label,
.filter-overlay-panel .footer-reset .p-button:focus-visible .p-button-label,
.filter-overlay-panel .footer-reset .p-button:active .p-button-label,
.filter-overlay-panel .footer-reset .p-button .p-button-label:hover {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
}

.filter-overlay-panel .footer-apply .p-button:hover,
.filter-overlay-panel .footer-apply .p-button:focus,
.filter-overlay-panel .footer-apply .p-button:focus-visible,
.filter-overlay-panel .footer-apply .p-button:active {
  background: #2f67b0 !important;
  border: 1px solid #244b7b !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(47, 103, 176, 0.18) !important;
}

.filter-overlay-panel .footer-apply .p-button:hover .p-button-label,
.filter-overlay-panel .footer-apply .p-button:focus .p-button-label,
.filter-overlay-panel .footer-apply .p-button:focus-visible .p-button-label,
.filter-overlay-panel .footer-apply .p-button:active .p-button-label,
.filter-overlay-panel .footer-apply .p-button .p-button-label:hover {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
}

body .filter-overlay-panel.p-overlaypanel,
body .p-overlaypanel.filter-overlay-panel {
  min-width: 540px !important;
  max-width: min(960px, calc(100vw - 32px)) !important;
  background: #f4f8ff !important;
  border: 1px solid #c8ddf6 !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 36px rgba(21, 46, 80, 0.2) !important;
  overflow: visible !important;
  margin-top: 24px !important;
}

body .filter-icon-btn,
body .master-filter-trigger {
  width: 96px !important;
  height: 40px !important;
  border: 1px solid #2f67b0 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  color: #2f67b0 !important;
  box-shadow: 0 5px 12px rgba(47, 103, 176, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
}

body .filter-icon-btn:hover,
body .master-filter-trigger:hover {
  background: #2f67b0 !important;
  border-color: #2f67b0 !important;
  color: #ffffff !important;
}

body .filter-icon-btn .filters-btn,
body .master-filter-trigger .filters-btn {
  color: #2f67b0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

body .filter-icon-btn:hover .filters-btn,
body .master-filter-trigger:hover .filters-btn {
  color: #ffffff !important;
}

body .filter-overlay-panel.p-overlaypanel::before,
body .filter-overlay-panel.p-overlaypanel::after,
body .p-overlaypanel.filter-overlay-panel::before,
body .p-overlaypanel.filter-overlay-panel::after {
  display: none !important;
}

body .filter-overlay-panel .p-overlaypanel-content {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  overflow: visible !important;
}

body .filter-overlay-panel .filter-content,
body .filter-overlay-panel .p-overlaypanel-content > .grid,
body .filter-overlay-panel .p-overlaypanel-content > .grid + div + .btns-container {
  position: relative !important;
}

body .filter-overlay-panel .filter-content,
body .filter-overlay-panel .p-overlaypanel-content {
  min-height: 100% !important;
}

body .filter-overlay-panel .filter-content,
body .filter-overlay-panel .p-overlaypanel-content > .grid {
  padding: 20px 48px 0 16px !important;
}

body .filter-overlay-panel .filter-content {
  border-radius: 8px !important;
  background: #f4f8ff !important;
}

body .filter-overlay-panel .filter-content > .grid,
body .filter-overlay-panel .p-overlaypanel-content > .grid {
  margin: 0 !important;
  padding-bottom: 12px !important;
  border-radius: 7px !important;
}

body .filter-overlay-panel .p-overlaypanel-close {
  display: none !important;
}

body .filter-overlay-panel .p-overlaypanel-close:hover {
  display: none !important;
}

body .filter-overlay-panel .p-overlaypanel-close .p-overlaypanel-close-icon,
body .filter-overlay-panel .p-overlaypanel-close .p-icon,
body .filter-overlay-panel .p-overlaypanel-close .pi,
body .filter-overlay-panel .p-overlaypanel-close svg {
  display: none !important;
}

body .filter-overlay-panel .p-overlaypanel-close::before,
body .filter-overlay-panel .p-overlaypanel-close::after {
  content: "" !important;
  position: absolute !important;
  width: 17px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #2f67b0 !important;
}

body .filter-overlay-panel .p-overlaypanel-close::before {
  transform: rotate(45deg) !important;
}

body .filter-overlay-panel .p-overlaypanel-close::after {
  transform: rotate(-45deg) !important;
}

body .filter-overlay-panel .master-filter-close {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  width: 29px !important;
  height: 29px !important;
  border: 1px solid #2f67b0 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

body .filter-overlay-panel .master-filter-close::before,
body .filter-overlay-panel .master-filter-close::after {
  content: "" !important;
  position: absolute !important;
  width: 17px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #2f67b0 !important;
}

body .filter-overlay-panel .master-filter-close::before {
  transform: rotate(45deg) !important;
}

body .filter-overlay-panel .master-filter-close::after {
  transform: rotate(-45deg) !important;
}

body .filter-overlay-panel .master-filter-divider,
body .filter-overlay-panel div[style*="border-top"] {
  display: none !important;
}

body .filter-overlay-panel .grid {
  gap: 18px !important;
}

body .filter-overlay-panel .col-12 {
  padding: 0 !important;
}

body .filter-overlay-panel .col-12.row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .filter-overlay-panel .col-12.row > .col-6,
body .filter-overlay-panel .md\:col-6 {
  width: calc(50% - 9px) !important;
  max-width: calc(50% - 9px) !important;
  flex: 0 0 calc(50% - 9px) !important;
  padding: 0 !important;
}

body .filter-overlay-panel .md\:col-4 {
  width: calc(33.333% - 12px) !important;
  max-width: calc(33.333% - 12px) !important;
  flex: 0 0 calc(33.333% - 12px) !important;
}

body .filter-overlay-panel .md\:col-3 {
  width: calc(25% - 14px) !important;
  max-width: calc(25% - 14px) !important;
  flex: 0 0 calc(25% - 14px) !important;
}

body .filter-overlay-panel .p-field,
body .filter-overlay-panel .orders-filter-field,
body .filter-overlay-panel .master-filter-field {
  min-height: 88px !important;
  padding: 11px 10px 10px !important;
  border: 1px solid #d9e6f6 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  box-shadow: 0 3px 10px rgba(26, 58, 97, 0.08) !important;
}

body .filter-overlay-panel label {
  color: #244b7b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body .filter-overlay-panel .dropDownCss > .p-dropdown,
body .filter-overlay-panel .p-dropdown,
body .filter-overlay-panel .p-inputtext {
  height: 38px !important;
  border: 1px solid #bdd2ee !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  color: #0c1b4d !important;
  box-shadow: none !important;
}

body .filter-overlay-panel .btns-container,
body .filter-overlay-panel .master-filter-actions,
body .filter-overlay-panel .button-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 0 16px !important;
  border-top: 1px solid #d9e6f6 !important;
}

body .filter-overlay-panel .footer-reset,
body .filter-overlay-panel .footer-apply {
  padding: 0 !important;
  margin: 0 !important;
}

body .filter-overlay-panel .footer-reset .p-button,
body .filter-overlay-panel .footer-apply .p-button,
body .master-filter-overlay-panel .footer-reset .p-button,
body .master-filter-overlay-panel .footer-apply .p-button {
  min-width: 96px !important;
  height: 36px !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body .filter-overlay-panel .footer-reset .p-button,
body .master-filter-overlay-panel .footer-reset .p-button {
  border: 1px solid #d53b3b !important;
  color: #d53b3b !important;
}

body .filter-overlay-panel .footer-apply .p-button,
body .master-filter-overlay-panel .footer-apply .p-button {
  border: 1px solid #2f67b0 !important;
  color: #2f67b0 !important;
}

body .filter-overlay-panel .footer-reset .p-button .p-button-label,
body .master-filter-overlay-panel .footer-reset .p-button .p-button-label {
  background: transparent !important;
  border: 0 !important;
  color: #d53b3b !important;
  opacity: 1 !important;
}

body .filter-overlay-panel .footer-apply .p-button .p-button-label,
body .master-filter-overlay-panel .footer-apply .p-button .p-button-label {
  background: transparent !important;
  border: 0 !important;
  color: #2f67b0 !important;
  opacity: 1 !important;
}

body .filter-overlay-panel .footer-reset .p-button:hover,
body .filter-overlay-panel .footer-reset .p-button:focus,
body .filter-overlay-panel .footer-reset .p-button:focus-visible,
body .filter-overlay-panel .footer-reset .p-button:active,
body .master-filter-overlay-panel .footer-reset .p-button:hover,
body .master-filter-overlay-panel .footer-reset .p-button:focus,
body .master-filter-overlay-panel .footer-reset .p-button:focus-visible,
body .master-filter-overlay-panel .footer-reset .p-button:active {
  background: #d53b3b !important;
  border: 1px solid #bf2f2f !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(213, 59, 59, 0.18) !important;
}

body .filter-overlay-panel .footer-apply .p-button:hover,
body .filter-overlay-panel .footer-apply .p-button:focus,
body .filter-overlay-panel .footer-apply .p-button:focus-visible,
body .filter-overlay-panel .footer-apply .p-button:active,
body .master-filter-overlay-panel .footer-apply .p-button:hover,
body .master-filter-overlay-panel .footer-apply .p-button:focus,
body .master-filter-overlay-panel .footer-apply .p-button:focus-visible,
body .master-filter-overlay-panel .footer-apply .p-button:active {
  background: #2f67b0 !important;
  border: 1px solid #244b7b !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(47, 103, 176, 0.18) !important;
}

body .filter-overlay-panel .footer-reset .p-button:hover .p-button-label,
body .filter-overlay-panel .footer-reset .p-button:focus .p-button-label,
body .filter-overlay-panel .footer-reset .p-button:focus-visible .p-button-label,
body .filter-overlay-panel .footer-reset .p-button:active .p-button-label,
body .filter-overlay-panel .footer-reset .p-button .p-button-label:hover,
body .master-filter-overlay-panel .footer-reset .p-button:hover .p-button-label,
body .master-filter-overlay-panel .footer-reset .p-button:focus .p-button-label,
body .master-filter-overlay-panel .footer-reset .p-button:focus-visible .p-button-label,
body .master-filter-overlay-panel .footer-reset .p-button:active .p-button-label,
body .master-filter-overlay-panel .footer-reset .p-button .p-button-label:hover {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

body .filter-overlay-panel .footer-apply .p-button:hover .p-button-label,
body .filter-overlay-panel .footer-apply .p-button:focus .p-button-label,
body .filter-overlay-panel .footer-apply .p-button:focus-visible .p-button-label,
body .filter-overlay-panel .footer-apply .p-button:active .p-button-label,
body .filter-overlay-panel .footer-apply .p-button .p-button-label:hover,
body .master-filter-overlay-panel .footer-apply .p-button:hover .p-button-label,
body .master-filter-overlay-panel .footer-apply .p-button:focus .p-button-label,
body .master-filter-overlay-panel .footer-apply .p-button:focus-visible .p-button-label,
body .master-filter-overlay-panel .footer-apply .p-button:active .p-button-label,
body .master-filter-overlay-panel .footer-apply .p-button .p-button-label:hover {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}


img {
  cursor:  pointer !important;
}



.pi-cog {
  color: #030927 !important;
}

.p-inputtext:focus {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* Override styles for checkbox */

/* Pre-PrimeNG-19 checkbox box styling — superseded by the global checkbox
   restyle in styles.scss (`body .p-checkbox .p-checkbox-box`). Left disabled
   so there is a single source of truth for the checkbox look.
.p-checkbox-box {
  border: 2px solid #ced4da !important;
  background: #ffffff !important;
  color: #495057 !important;
  border-radius: 4px !important;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

.p-checkbox .p-checkbox-box {
  width: 21px !important;
  height: 21px !important;
  margin-top: 0px !important;
}
*/
.p-checkbox .p-checkbox-box .p-icon{
  font-family: AvenirNextCyrMedium !important;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
  border-color: none !important;
}
.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover{
  border-color:#4ea732 !important;
}
.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):focus{
  box-shadow: none important;
}
.p-checkbox-icon {
  transition-duration: 0.2s !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

.p-highlight {
  border-color: #1f1646 !important;
  background: #1f1646 !important;
}
.p-focus {
  outline: 0 none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.p-highlight:hover {
  color: #ffffff !important;
}

.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
  box-shadow: none !important;
}

.p-checkbox-label{
  color: #6B6C71 !important;
  font-size: 14px !important;
  font-family: AvenirNextCyrMedium !important;
}
.columtextboxCss{
  color: #6B6C71 !important;
  font-size: 16px !important;
  font-family: AvenirNextCyr !important;
}
.columnHeaderCss{
  color: #393A3D !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  font-family: AvenirNextCyr !important;
}
.p-datatable-thead>tr>th {
  padding: 7px 7px !important;
  background-color: #f1f1f1 !important;
}

.p-datatable-tbody>tr>td {
  padding: 5px 5px !important;
  border-width: 1px 1px 1px 0px !important;
  padding-left: 12px !important;
}

.pi-search {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 13px !important;
  margin-left: 7px !important;
}


.btn-img{
  width: 16px !important;
  height: 18px !important;
  margin-left: 18px !important;
  cursor: pointer !important;
}

.pi-cog {
  font-size: 16px !important;
}

.p-datatable .p-datatable-thead>tr>th {
  position: sticky;
  top: 0px;
  font-weight: 600 !important;
  padding: 7px 7px !important;
  border-width: 0px 0px 3px 0 !important;
  color: #767676 !important;
  background: #fff !important;
  transition: box-shadow 0.2s !important;
  padding-left: 12px !important;
  text-transform: capitalize;
  padding-right: 0px;
  font-size: 14px !important;
}

.p-datatable .p-datatable-thead>tr>th:hover {
  background-color: none !important;
  cursor: pointer !important;
  border-width: 0px 0px 3px 0 !important;
}

.p-datatable .p-datatable-tbody>tr {
  background: #ffffff !important;
  color: #767676 !important;
  transition: box-shadow 0.2s !important;
  height: 40px !important;
  font-family: AvenirNextCyrMedium !important;
}

.p-datatable.p-datatable-sm .p-datatable-tbody>tr>td {
    padding: 0px !important;
    padding-left: 12px !important;
    border-bottom: 0 !important;
    padding-right: 10px !important;
}

.p-datatable-table {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.p-dialog-header {
  padding-top: 15px;
  padding-bottom: 15px;
}

.p-dialog-content {
  padding-bottom: 15px;
  overflow: hidden;
}

.card {
  background: var(--surface-card) !important;
  border: 1px solid var(--surface-border) !important;
  margin-bottom: 2rem !important;
  box-shadow: var(--card-shadow) !important;
  border-radius: 12px !important;
}

.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
  background: #EEF2FF !important;
  border-color: #EEF2FF !important;
  color: #030E4C !important;
}

.p-paginator .p-paginator-pages .p-paginator-page {
  border: 0 none;
  min-width: 3rem;
  height: 3rem;
  margin: 0.143rem;
  transition: box-shadow 0.2s;
  border-radius: 50%;
}

.p-datatable .p-paginator-bottom {
  border-width: 0 0 0 0 !important;
}

.btn-common-css {
  padding: 5px 10px !important;
  background: #18cd1f !important;
  border: 1px solid #18cd1f !important;
  color: #fff !important;
  font-weight: bold;
  font-family: AvenirNextCyr !important;
  border-radius: 5px;
  height: 34px !important;
}

.p-avatar {
  border-radius: 50% !important;
}

.p-splitbutton-menubutton,
.p-splitbutton.p-button-rounded>.p-splitbutton-menubutton.p-button,
.p-splitbutton.p-button-outlined>.p-splitbutton-menubutton.p-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-right: none !important;
  color: #3276cb !important;
}

.p-splitbutton-menubutton,
.p-splitbutton.p-button-rounded>.p-splitbutton-menubutton.p-button,
.p-splitbutton.p-button-outlined>.p-splitbutton-menubutton.p-button:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-right: none !important;
  color: #3276cb !important;
}

.addMasterBtn.p-splitbutton,
.addMasterBtn .p-splitbutton,
.addMasterBtn.p-splitbutton .p-button,
.addMasterBtn .p-splitbutton .p-button {
  height: 44px !important;
  background-color: #ffffff !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #258f1d !important;
}

.addMasterBtn.p-splitbutton,
.addMasterBtn .p-splitbutton {
  display: inline-grid !important;
  grid-template-columns: minmax(142px, max-content) 52px !important;
  width: max-content !important;
  min-width: 184px !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid #258f1d !important;
  border-radius: 6px !important;
  overflow: hidden;
  background-color: #ffffff !important;
  background-image: linear-gradient(90deg, #3f9d2f 0%, #3f9d2f 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 0% 100% !important;
  background-position: right center !important;
  transition: background-size 0.28s ease, box-shadow 0.25s ease !important;
}

.addMasterBtn.p-splitbutton > .p-tieredmenu,
.addMasterBtn .p-splitbutton > .p-tieredmenu {
  position: absolute !important;
  grid-column: 1 / -1 !important;
  inset: auto auto auto 0 !important;
}

.addMasterBtn.p-splitbutton:hover,
.addMasterBtn .p-splitbutton:hover {
  background-size: 100% 100% !important;
  box-shadow: 0 4px 12px rgba(47, 127, 31, 0.22) !important;
}

body .addMasterBtn.p-splitbutton .p-button:focus,
body .addMasterBtn.p-splitbutton .p-button.p-focus,
body .addMasterBtn.p-splitbutton .p-button[aria-expanded="true"],
body .addMasterBtn .p-splitbutton .p-button:focus,
body .addMasterBtn .p-splitbutton .p-button.p-focus,
body .addMasterBtn .p-splitbutton .p-button[aria-expanded="true"] {
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded="true"]),
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded="true"]) {
  background-size: 100% 100% !important;
}

.addMasterBtn.p-splitbutton .p-splitbutton-defaultbutton,
.addMasterBtn .p-splitbutton .p-splitbutton-defaultbutton,
.addMasterBtn.p-splitbutton .p-button:first-child,
.addMasterBtn .p-splitbutton .p-button:first-child {
  grid-column: 1 !important;
  width: auto !important;
  min-width: 142px !important;
  padding: 0 18px !important;
  border-right: 1px solid #258f1d !important;
  border-radius: 0 !important;
}

.addMasterBtn.p-splitbutton .p-splitbutton-menubutton,
.addMasterBtn .p-splitbutton .p-splitbutton-menubutton,
.addMasterBtn.p-splitbutton .p-button:last-child,
.addMasterBtn .p-splitbutton .p-button:last-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-column: 2 !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  padding: 0 !important;
  border-left: 1px solid #258f1d !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.addMasterBtn.p-splitbutton .p-button-label,
.addMasterBtn .p-splitbutton .p-button-label,
.addMasterBtn.p-splitbutton .p-button-icon,
.addMasterBtn .p-splitbutton .p-button-icon,
.addMasterBtn.p-splitbutton .p-icon,
.addMasterBtn .p-splitbutton .p-icon {
  color: #258f1d !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.addMasterBtn.p-splitbutton .p-splitbutton-menubutton .p-button-icon,
.addMasterBtn .p-splitbutton .p-splitbutton-menubutton .p-button-icon,
.addMasterBtn.p-splitbutton .p-splitbutton-menubutton .p-icon,
.addMasterBtn .p-splitbutton .p-splitbutton-menubutton .p-icon {
  color: #111111 !important;
}

.addMasterBtn.p-splitbutton:hover .p-button,
.addMasterBtn .p-splitbutton:hover .p-button,
.addMasterBtn.p-splitbutton:hover .p-button-label,
.addMasterBtn .p-splitbutton:hover .p-button-label,
.addMasterBtn.p-splitbutton:hover .p-button-icon,
.addMasterBtn .p-splitbutton:hover .p-button-icon,
.addMasterBtn.p-splitbutton:hover .p-icon,
.addMasterBtn .p-splitbutton:hover .p-icon {
  background-color: transparent !important;
  color: #ffffff !important;
}

.addMasterBtn.p-splitbutton:hover .p-splitbutton-menubutton,
.addMasterBtn .p-splitbutton:hover .p-splitbutton-menubutton {
  border-left-color: rgba(255, 255, 255, 0.45) !important;
}

body .addMasterBtn.p-splitbutton .p-button[aria-expanded="true"] .p-button-icon,
body .addMasterBtn.p-splitbutton .p-button[aria-expanded="true"] .p-icon,
body .addMasterBtn .p-splitbutton .p-button[aria-expanded="true"] .p-button-icon,
body .addMasterBtn .p-splitbutton .p-button[aria-expanded="true"] .p-icon {
  color: #ffffff !important;
}

body .master-actionbtn.p-splitbutton,
body .master-actionbtn .p-splitbutton {
  display: inline-grid !important;
  grid-template-columns: minmax(64px, max-content) 40px !important;
  width: max-content !important;
  min-width: 104px !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid #b7d0ee !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .master-actionbtn.p-splitbutton .p-button,
body .master-actionbtn .p-splitbutton .p-button,
body .master-actionbtn.p-splitbutton .p-button:focus,
body .master-actionbtn.p-splitbutton .p-button.p-focus,
body .master-actionbtn.p-splitbutton .p-button[aria-expanded="true"],
body .master-actionbtn .p-splitbutton .p-button:focus,
body .master-actionbtn .p-splitbutton .p-button.p-focus,
body .master-actionbtn .p-splitbutton .p-button[aria-expanded="true"] {
  height: 28px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
  color: #4f83cc !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton,
body .master-actionbtn.p-splitbutton .p-button:first-child,
body .master-actionbtn .p-splitbutton .p-button:first-child {
  grid-column: 1 !important;
  min-width: 64px !important;
  padding: 0 14px !important;
  border-right: 1px solid #b7d0ee !important;
  border-radius: 0 !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-menubutton,
body .master-actionbtn .p-splitbutton .p-splitbutton-menubutton,
body .master-actionbtn.p-splitbutton .p-button:last-child,
body .master-actionbtn .p-splitbutton .p-button:last-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-column: 2 !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  padding: 0 !important;
  border-left: 1px solid #b7d0ee !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

body .master-actionbtn.p-splitbutton .p-button-label,
body .master-actionbtn .p-splitbutton .p-button-label {
  color: #4f83cc !important;
  font-family: AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

body .master-actionbtn.p-splitbutton .p-button-icon,
body .master-actionbtn .p-splitbutton .p-button-icon,
body .master-actionbtn.p-splitbutton .p-icon,
body .master-actionbtn .p-splitbutton .p-icon {
  color: #79a5df !important;
}

body .master-actionbtn.p-splitbutton:hover,
body .master-actionbtn .p-splitbutton:hover,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded="true"]),
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded="true"]) {
  border-color: #4f83cc !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:hover,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:hover,
body .master-actionbtn.p-splitbutton .p-button:first-child:hover,
body .master-actionbtn .p-splitbutton .p-button:first-child:hover {
  background: #3d6fc4 !important;
  color: #ffffff !important;
  border-right-color: rgba(255, 255, 255, 0.38) !important;
}

body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded="true"]) .p-splitbutton-menubutton,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded="true"]) .p-splitbutton-menubutton,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded="true"]) .p-button:last-child,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded="true"]) .p-button:last-child {
  background: #ffffff !important;
  color: #79a5df !important;
  border-left-color: #b7d0ee !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:hover .p-button-label,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:hover .p-button-label,
body .master-actionbtn.p-splitbutton .p-button:first-child:hover .p-button-label,
body .master-actionbtn .p-splitbutton .p-button:first-child:hover .p-button-label,
body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:hover .p-button-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:hover .p-button-icon,
body .master-actionbtn.p-splitbutton .p-button:first-child:hover .p-button-icon,
body .master-actionbtn .p-splitbutton .p-button:first-child:hover .p-button-icon,
body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:hover .p-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:hover .p-icon,
body .master-actionbtn.p-splitbutton .p-button:first-child:hover .p-icon,
body .master-actionbtn .p-splitbutton .p-button:first-child:hover .p-icon {
  color: #ffffff !important;
  background: #3d6fc4 !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-menubutton:hover,
body .master-actionbtn .p-splitbutton .p-splitbutton-menubutton:hover,
body .master-actionbtn.p-splitbutton .p-button:last-child:hover,
body .master-actionbtn .p-splitbutton .p-button:last-child:hover {
  background: #3d6fc4 !important;
  color: #ffffff !important;
  border-left-color: rgba(255, 255, 255, 0.38) !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-menubutton:hover .p-button-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-menubutton:hover .p-button-icon,
body .master-actionbtn.p-splitbutton .p-button:last-child:hover .p-button-icon,
body .master-actionbtn .p-splitbutton .p-button:last-child:hover .p-button-icon,
body .master-actionbtn.p-splitbutton .p-splitbutton-menubutton:hover .p-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-menubutton:hover .p-icon,
body .master-actionbtn.p-splitbutton .p-button:last-child:hover .p-icon,
body .master-actionbtn .p-splitbutton .p-button:last-child:hover .p-icon,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded="true"]) .p-splitbutton-menubutton .p-button-icon,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded="true"]) .p-splitbutton-menubutton .p-button-icon,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded="true"]) .p-button:last-child .p-button-icon,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded="true"]) .p-button:last-child .p-button-icon,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded="true"]) .p-splitbutton-menubutton .p-icon,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded="true"]) .p-splitbutton-menubutton .p-icon,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded="true"]) .p-button:last-child .p-icon,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded="true"]) .p-button:last-child .p-icon {
  color: #ffffff !important;
  background: #3d6fc4 !important;
}


body .master-actionbtn.p-splitbutton .p-splitbutton-menubutton:hover ~ .p-splitbutton-defaultbutton,
body .master-actionbtn .p-splitbutton .p-splitbutton-menubutton:hover ~ .p-splitbutton-defaultbutton,
body .master-actionbtn.p-splitbutton .p-button:last-child:hover ~ .p-button:first-child,
body .master-actionbtn .p-splitbutton .p-button:last-child:hover ~ .p-button:first-child,
body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover),
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover),
body .master-actionbtn.p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover),
body .master-actionbtn .p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) {
  background: #ffffff !important;
  color: #4f83cc !important;
  border-right-color: #b7d0ee !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover) .p-button-label,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover) .p-button-label,
body .master-actionbtn.p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) .p-button-label,
body .master-actionbtn .p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) .p-button-label,
body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover) .p-button-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover) .p-button-icon,
body .master-actionbtn.p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) .p-button-icon,
body .master-actionbtn .p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) .p-button-icon,
body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover) .p-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover) .p-icon,
body .master-actionbtn.p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) .p-icon,
body .master-actionbtn .p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) .p-icon {
  color: #4f83cc !important;
  background: #ffffff !important;
}

body .addMasterBtnMenu.p-tieredmenu {
  width: 176px !important;
  min-width: 176px !important;
  padding: 8px 0 !important;
  transform: translateX(-20px) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22) !important;
}

body .addMasterBtnMenu .p-menu-list,
body .addMasterBtnMenu .p-tieredmenu-root-list {
  padding: 0 !important;
}

body .addMasterBtnMenu .p-menuitem-link {
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 0 !important;
  color: #1f1646 !important;
  font-size: 14px !important;
  font-family: AvenirNextCyrMedium !important;
}

body .addMasterBtnMenu .p-menuitem-link:hover,
body .addMasterBtnMenu .p-menuitem-link:focus {
  background: #f4fbf7 !important;
  color: #16834f !important;
}

body .masterActionBtnMenu.p-tieredmenu,
body .masterActionBtnMenu.p-menu {
  width: 158px !important;
  min-width: 158px !important;
  padding: 10px 0 !important;
  margin-top: 6px !important;
  border: 1px solid #d6e1ef !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(15, 34, 58, 0.2) !important;
  overflow: hidden !important;
}

body .masterActionBtnMenu .p-menu-list,
body .masterActionBtnMenu .p-tieredmenu-root-list {
  padding: 0 !important;
}

body .masterActionBtnMenu .p-menuitem {
  margin: 0 !important;
}

body .masterActionBtnMenu .p-menuitem + .p-menuitem {
  border-top: 1px solid #edf2f8 !important;
}

body .masterActionBtnMenu .p-menuitem-link {
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  line-height: 22px !important;
  background: #ffffff !important;
  color: #343741 !important;
  font-size: 14px !important;
  font-family: AvenirNextCyrMedium !important;
}

body .masterActionBtnMenu .p-menuitem-link:hover,
body .masterActionBtnMenu .p-menuitem-link:focus {
  background: #ffffff !important;
  color: #343741 !important;
}

body .masterActionBtnMenu .p-menuitem-text {
  display: block !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  white-space: nowrap;
  max-width: 165px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-dialog .p-dialog-header {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  background-color: rgb(244 244 244) !important;
  padding-right: 0px;
  padding-left: 1.5rem;
  font-family: AvenirNextCyrMedium !important;
}

.p-dialog .p-dialog-content {
  background: #ffffff;
  color: #495057;
  padding: 0 1.5rem 2rem 1.5rem;
  padding-left: 0px !important;
  padding-right: 0px !important;
  padding-bottom: 15px !important;
}
.dialog-header{
  padding: 0.9rem !important;
  padding-top:0.9rem !important;
  padding-bottom: 0.9rem !important;;
  background-color: rgb(244 244 244) !important;
  font-family: AvenirNextCyrMedium !important;
}
.close-icon{
  cursor: pointer !important;
}

.p-dialog {
  overflow: auto;
  margin-bottom: 70px !important;
  border-radius: 10px;
}

.icon-container {
  display: flex !important;
  justify-content: flex-end !important; /* Spreads items between both sides */
  align-items: center !important;
}

.p-datatable.p-datatable-gridlines .p-datatable-header {
  background: #fff !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding: 0.75rem !important;
  border: 1px solid #ffffff;
}

.btn-default-css {
  font-family: AvenirNextCyrMedium !important;
  font-size: 16px !important;
  height: 40px !important;
  border-radius: 4px;
  padding: 5px 15px;
}

// Grid Column Configure Popup Styles


.p-button:focus {
  outline: 0 none !important;
  outline-offset: 0;
  box-shadow: none !important;
}

.p-dialog .p-dialog-header .p-dialog-header-icon .p-icon {
  color: #030927 !important;
  cursor: pointer;
  height: 2.1rem;
  width: 2.1rem;
  border-radius: 22px;
  display: inline-block;
  margin-right: 7px !important;
  padding: 5px !important;
}

.p-dialog .p-dialog-header .p-dialog-header-icon .p-icon:hover {
  color: #030927 !important;
  background: none !important;
  width: 2.1rem !important;
  height: 2.1rem !important;
  background-color: #e9ecef !important;
}

.p-dialog .p-dialog-header .p-dialog-header-icon:focus{
  box-shadow: none !important;
}

.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover{
  background:none !important;
}

.p-overlaypanel .p-overlaypanel-close {
  background: none !important;
  outline: none !important;
  right: 10px !important;
  top: 10px !important;
  color: #000 !important;
  padding: 4px;
  border-radius:22px;
}

.p-overlaypanel:before{
  display: none !important;
}
.p-confirm-dialog {
  height: 22% !important;
  width: 35% !important;
}

.btnColumnCancel {
  border: 1px solid #393b3d !important;
  background-color: #fff !important;
  color: #393A3D !important;
  padding: 5px 15px !important;
  border-radius: 4px !important;
  font-family: AvenirNextCyrMedium !important;
  transition: 0.4s important;
  font-size: 15px !important;
}
.btnColumnCancel:hover {
  background-color: #4ea732 !important;
  border: 1px solid #4ea732 !important;
  color: #fff !important;
}
.btnColumnApply {
  border: 1px solid #393b3d !important;
  background-color: #fff !important;
  color: #393A3D !important;
  padding: 5px 15px !important;
  border-radius: 4px !important;
  font-family: AvenirNextCyrMedium !important;
  transition: 0.4s important;
  font-size: 15px !important;
}
.btnColumnApply:hover {
  background-color: #4ea732 !important;
  border: 1px solid #4ea732 !important;
  color: #fff !important;
}
.btnShipColumnCancel{
  border: 1px solid #393b3d !important;
  background-color: #fff !important;
  color: #393A3D !important;
  padding: 5px 15px !important;
  border-radius: 4px !important;
  font-family: AvenirNextCyrMedium !important;
  transition: 0.4s important;
  font-size: 15px !important;
}
.btnShipColumnCancel:hover{
  background-color: #4ea732 !important;
  border: 1px solid #4ea732 !important;
  color: #fff !important;
}
.btnShipColumnApply{
  border: 1px solid #393b3d !important;
  background-color: #fff !important;
  color: #393A3D !important;
  padding: 5px 15px !important;
  border-radius: 4px !important;
  font-family: AvenirNextCyrMedium !important;
  transition: 0.4s important;
  font-size: 15px !important;
}
::ng-deep .btnColumnCancel:hover {
  background-color: #4ea732 !important;
  border: 1px solid #4ea732 !important;
  color: #fff !important;
}
.btnShipColumnApply:hover{
  background-color: #4ea732 !important;
  border: 1px solid #4ea732 !important;
  color: #fff !important;
}
.p-overlaypanel:after{
  display: none !important;
}
.btnSave > .p-button > .p-tieredmenu {
  width: 11rem !important;
}

.icon-container img {
  padding: 4px;
  border-radius:22px;
  display: inline-block;
}
.filter-icon{
  padding: 4px;
  border-radius: 22px;
}
.filter-icon:hover {
  background-color:#e9ecef; 
}
.download-icon{
  padding: 4px;
  border-radius: 22px;
}
.download-icon:hover {
  background-color: transparent;
  filter: none;
}
.setting-icon{
  padding: 4px !important;
  border-radius: 22px !important;
}
.setting-icon:hover {
  background-color: #e9ecef; 
  line-height: 1;
}
.p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
  margin-right: 8px !important;
}

.p-datatable .p-datatable-tbody > tr > td {
  font-family: AvenirNextCyrMedium !important;
}

.columnconfig {
  border-radius: 5px !important;
}

body .column-config-panel.p-overlaypanel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .column-config-panel.p-overlaypanel::before,
body .column-config-panel.p-overlaypanel::after {
  display: none !important;
}

body .column-config-panel .p-overlaypanel-content {
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

body .column-config-panel .column-config-card {
  position: relative !important;
  width: 300px !important;
  padding: 16px 14px 14px !important;
  border: 1px solid #edf1f5 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
}

body .column-config-panel .p-overlaypanel-close {
  display: none !important;
}

body .column-config-panel .column-config-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

body .column-config-panel .column-config-close::before,
body .column-config-panel .column-config-close::after {
  content: "" !important;
  position: absolute !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #7a7685 !important;
}

body .column-config-panel .column-config-close::before {
  transform: rotate(45deg) !important;
}

body .column-config-panel .column-config-close::after {
  transform: rotate(-45deg) !important;
}

body .column-config-panel .column-config-close:hover {
  background: transparent !important;
}

body .column-config-panel .column-config-close:hover::before,
body .column-config-panel .column-config-close:hover::after {
  background: #1f1646 !important;
}

body .column-config-panel .p-checkbox .p-checkbox-box {
  border: 2px solid #cfd7df !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .column-config-panel .p-checkbox.p-checkbox-checked .p-checkbox-box,
body .column-config-panel .p-checkbox .p-checkbox-box.p-highlight {
  border-color: #1f1646 !important;
  background: #1f1646 !important;
}

body .column-config-panel .p-checkbox:not(.p-checkbox-checked) .p-checkbox-box:not(.p-highlight) {
  border-color: #cfd7df !important;
  background: #ffffff !important;
}

.p-link:focus{
  box-shadow: none !important;
}

.p-datatable .p-sortable-column .p-sortable-column-icon {
  width: 0.8rem !important;
  height: 0.8rem !important;
}

.p-datatable .p-sortable-column:focus {
  box-shadow: none !important;
}

.fa-icon img {
  padding: 4px !important;
  border-radius: 22px !important;
  display: inline-block !important;
}

.close-icon {
  padding: 4px;
  border-radius: 22px;
  display: inline-block;
  height: 30px;
}

.dialog-close {
  padding: 4px;
  border-radius: 22px;
  display: inline-block;
  height: 28px;
  color: #fff !important;
}

.p-overlaypanel .p-overlaypanel-close:hover {
  background-color: #e9ecef !important;
}

.close-icon:hover {
  background-color: #e9ecef !important;
}
svg.p-dialog-header-close-icon.p-icon:hover {
  background-color: #e9ecef !important;
}

.fa-address-book:hover {
  background-color: #e9ecef !important;
}

.layout-wrapper .layout-topbar .topbar-menu > li:hover {
  background-color: #e9ecef !important;
}


.p-tooltip .p-tooltip-text { 
font-size: 12px !important;
padding: 8px !important;
}

.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus{
  box-shadow:  none !important;
}
.p-inputswitch.p-focus .p-inputswitch-slider{
  box-shadow: none !important;
}

body .master-form-toggle.p-inputswitch,
body .master-form-toggle .p-inputswitch {
  width: 42px !important;
  height: 22px !important;
  display: inline-block !important;
}

body .master-form-toggle.p-inputswitch .p-inputswitch-slider,
body .master-form-toggle .p-inputswitch-slider {
  width: 42px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: #cfd6dd !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .master-form-toggle.p-inputswitch .p-inputswitch-slider::before,
body .master-form-toggle .p-inputswitch-slider::before {
  width: 16px !important;
  height: 16px !important;
  left: 3px !important;
  top: 3px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
  transform: none !important;
}

body .master-form-toggle.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider,
body .master-form-toggle .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider,
body .master-form-toggle.p-inputswitch-checked .p-inputswitch-slider {
  background: #07840d !important;
}

body .master-form-toggle.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before,
body .master-form-toggle .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before,
body .master-form-toggle.p-inputswitch-checked .p-inputswitch-slider::before {
  left: 23px !important;
  transform: none !important;
}

body .master-form-toggle-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 42px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #b7b7b7 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

body .master-form-toggle-btn::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 4px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

body .master-form-toggle-btn--on {
  background: #07840d !important;
}

body .master-form-toggle-btn--on::after {
  left: 22px !important;
}

body .master-form-toggle-btn--off {
  background: #b7b7b7 !important;
}

body .master-form-toggle-btn--off::after {
  left: 4px !important;
}

body .p-sidebar.ui-sidebar-lg,
body .p-sidebar.popupCls {
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: calc(100vw - 94px) !important;
  max-width: calc(100vw - 94px) !important;
  height: 100vh !important;
  margin-top: 0 !important;
  position: fixed !important;
  z-index: 2147483000 !important;
  border-left: 1px solid #d7d7d7 !important;
  background: #f7f8fa !important;
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.22) !important;
}

body .p-sidebar.ui-sidebar-lg .p-sidebar-header,
body .p-sidebar.popupCls .p-sidebar-header {
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  border-bottom: 1px solid #e4e7eb !important;
  background: #ffffff !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 2147483002 !important;
}

body .p-sidebar.ui-sidebar-lg .p-sidebar-header > div,
body .p-sidebar.popupCls .p-sidebar-header > div,
body .master-sidebar .p-sidebar-header > div {
  width: 100% !important;
}

body .p-sidebar.ui-sidebar-lg .siderbar-header-container,
body .p-sidebar.popupCls .siderbar-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 58px !important;
  padding: 0 0 0 22px !important;
}

body .p-sidebar.ui-sidebar-lg .close-icon-container,
body .p-sidebar.popupCls .close-icon-container,
body .p-sidebar.popupCls .close-icon-container-small {
  width: 54px !important;
  height: 58px !important;
  border-left: 1px solid #8f8f8f !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  cursor: pointer !important;
}

body .p-sidebar.ui-sidebar-lg .p-sidebar-content,
body .p-sidebar.popupCls .p-sidebar-content {
  padding: 16px 20px 74px !important;
  background: #f7f8fa !important;
  overflow-y: auto !important;
}

body .p-sidebar.ui-sidebar-lg .p-sidebar-footer,
body .p-sidebar.popupCls .p-sidebar-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 10px 20px !important;
  border-top: 1px solid #d7d7d7 !important;
  background: #ffffff !important;
  z-index: 2147483002 !important;
}

body .p-sidebar.master-sidebar,
body .master-sidebar.p-sidebar {
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: calc(100vw - 94px) !important;
  max-width: calc(100vw - 94px) !important;
  height: 100vh !important;
  margin-top: 0 !important;
  position: fixed !important;
  z-index: 2147483000 !important;
  background: #ffffff !important;
  border-left: 1px solid #d7d7d7 !important;
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.22) !important;
}

body .master-sidebar .p-sidebar-header {
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #eef2f6 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2147483002 !important;
}

body .master-sidebar .siderbar-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 58px !important;
  padding: 0 0 0 22px !important;
  background: #ffffff !important;
}

body .master-sidebar .close-icon-container {
  display: inline-flex !important;
  width: 54px !important;
  height: 58px !important;
  border-left: 1px solid #8f8f8f !important;
  background: #ffffff !important;
}

body .master-sidebar .p-sidebar-content {
  padding: 16px 16px 74px !important;
  background: #ffffff !important;
}

body .master-sidebar .master-sidebar-card-shell {
  width: 100% !important;
  min-height: 0 !important;
  padding: 14px 14px 18px !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 16px rgba(20, 32, 48, 0.08) !important;
}

body .master-sidebar .custom-form-container,
body .master-sidebar .contact-info-card {
  margin: 0 0 16px !important;
  zoom: 1 !important;
  overflow: visible !important;
}

body .master-sidebar .contact-info-card .fields-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

body .master-sidebar .contact-info-card .p-card,
body .master-sidebar .contact-info-card .p-card.p-component {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .master-sidebar .contact-info-card .p-card .p-card-body {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 12px rgba(20, 32, 48, 0.08) !important;
  padding: 18px 20px 20px !important;
  height: auto !important;
}

body .master-sidebar .p-sidebar-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 68px !important;
  min-height: 68px !important;
  padding: 12px 20px !important;
  background: #ffffff !important;
  border-top: 1px solid #d7d7d7 !important;
  z-index: 2147483002 !important;
}

body .master-sidebar .footer-save-cm {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  background: #ffffff !important;
  gap: 12px !important;
}

body .master-sidebar .master-footer-left,
body .master-sidebar .master-footer-center,
body .master-sidebar .master-footer-right {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

body .master-sidebar .master-footer-left {
  justify-content: flex-start !important;
}

body .master-sidebar .master-footer-center {
  justify-content: center !important;
}

body .master-sidebar .master-footer-right {
  justify-content: flex-end !important;
  margin-left: 0 !important;
}

body .master-sidebar .master-footer-center .btn-reset {
  width: auto !important;
  min-width: 150px !important;
  height: 40px !important;
  white-space: nowrap !important;
}

body:has(.p-sidebar.master-sidebar.p-sidebar-active) .layout-topbar .topbar-menu,
body:has(.p-sidebar.master-sidebar.p-sidebar-visible) .layout-topbar .topbar-menu,
body.master-sidebar-open .layout-topbar .topbar-menu {
  visibility: hidden !important;
  pointer-events: none !important;
}

body:has(.p-sidebar.master-sidebar.p-sidebar-active) .layout-topbar .notification-menu,
body:has(.p-sidebar.master-sidebar.p-sidebar-visible) .layout-topbar .notification-menu,
body.master-sidebar-open .layout-topbar .notification-menu {
  visibility: hidden !important;
  pointer-events: none !important;
}

body:has(.p-sidebar.master-sidebar.p-sidebar-active) .footer-Section,
body:has(.p-sidebar.master-sidebar.p-sidebar-visible) .footer-Section,
body:has(.p-sidebar.ui-sidebar-lg.p-sidebar-active) .footer-Section,
body:has(.p-sidebar.ui-sidebar-lg.p-sidebar-visible) .footer-Section,
body.master-sidebar-open .footer-Section {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body .master-sidebar .p-sidebar-header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: #ffffff !important;
  z-index: -1 !important;
}

body .roles-master-sidebar.p-sidebar {
  top: 0 !important;
  right: 0 !important;
  width: calc(100vw - 94px) !important;
  max-width: calc(100vw - 94px) !important;
  height: 100vh !important;
  margin-top: 0 !important;
  background: #ffffff !important;
  border-left: 1px solid #d7d7d7 !important;
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.22) !important;
  z-index: 2147483000 !important;
}

body .roles-master-sidebar .p-sidebar-header {
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  background: #ffffff !important;
  border-bottom: 1px solid #eef2f6 !important;
  box-shadow: none !important;
  position: relative !important;
}

body .roles-master-sidebar .p-sidebar-header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: #ffffff !important;
  z-index: -1 !important;
}

body .roles-master-sidebar .siderbar-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 58px !important;
  padding: 0 0 0 22px !important;
  background: #ffffff !important;
}

body .roles-master-sidebar .close-icon-container {
  position: static !important;
  width: 54px !important;
  height: 58px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-left: 1px solid #8f8f8f !important;
  background: #ffffff !important;
}

body .roles-master-sidebar .close-icon-tag {
  padding-top: 0 !important;
}

body .roles-master-sidebar .p-sidebar-content {
  padding: 16px 20px 74px !important;
  background: #ffffff !important;
}

body .roles-master-sidebar .custom-form-container {
  height: auto !important;
  margin-bottom: 0 !important;
}

body .roles-master-sidebar .form-info-card .p-card,
body .roles-master-sidebar .form-info-card .p-card.p-component,
body .roles-master-sidebar .role-access-card {
  width: 100% !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 12px rgba(20, 32, 48, 0.08) !important;
}

body .roles-master-sidebar .form-info-card .p-card .p-card-body,
body .roles-master-sidebar .role-access-card {
  background: #ffffff !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 12px rgba(20, 32, 48, 0.08) !important;
  border: 0 !important;
}

body .roles-master-sidebar .TabsCardSec {
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

body .roles-master-sidebar .role-access-container {
  padding: 0 !important;
}

body .roles-master-sidebar .role-access-accordion {
  display: block !important;
  width: 100% !important;
  border: 1px solid #d9e2ec !important;
  border-top: 0 !important;
  border-radius: 0 0 4px 4px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

body .roles-master-sidebar .role-access-accordion > .p-accordion-tab {
  margin: 0 !important;
  border: 0 !important;
  background: #ffffff !important;
}

body .roles-master-sidebar .switch-container,
body .roles-master-sidebar .switch-container .row,
body .roles-master-sidebar .switch-container .col-2,
body .roles-master-sidebar .switch-container .col-10 {
  display: flex !important;
  align-items: center !important;
}

body .roles-master-sidebar .switch-container label {
  width: auto !important;
  margin: 0 10px 0 0 !important;
}

body .roles-master-sidebar .access-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  margin: 0 !important;
}

body .roles-master-sidebar .access-table th,
body .roles-master-sidebar .access-table td,
body .roles-master-sidebar .accordion-table th,
body .roles-master-sidebar .accordion-table td {
  border: 1px solid #d9e2ec !important;
  background: #ffffff !important;
  padding: 12px 14px !important;
  text-align: center !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body .roles-master-sidebar .access-table th {
  font-weight: 600 !important;
  color: #3f4752 !important;
}

body .roles-master-sidebar .access-table td:first-child,
body .roles-master-sidebar .access-table th:first-child {
  text-align: left !important;
}

body .roles-master-sidebar .p-accordion,
body .roles-master-sidebar .p-accordion .p-accordion-tab,
body .roles-master-sidebar .p-accordion .p-accordion-header,
body .roles-master-sidebar .p-accordion .p-accordion-header .p-accordion-header-link,
body .roles-master-sidebar .p-accordion .p-accordion-content {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .roles-master-sidebar .p-accordion .p-accordion-header .p-accordion-header-link {
  padding: 0 !important;
  min-height: 50px !important;
  color: #4b5563 !important;
}

body .roles-master-sidebar .p-accordion .p-accordion-content {
  padding: 0 !important;
}

body .roles-master-sidebar .role-access-accordion > .p-accordion-tab > .p-accordion-header {
  border-top: 1px solid #d9e2ec !important;
}

body .roles-master-sidebar .role-access-accordion > .p-accordion-tab:first-child > .p-accordion-header {
  border-top: 0 !important;
}

body .roles-master-sidebar .role-access-accordion > .p-accordion-tab > .p-accordion-header > .p-accordion-header-link {
  background: #f9fbfd !important;
}

body .roles-master-sidebar .role-access-accordion > .p-accordion-tab > .p-accordion-content {
  background: #ffffff !important;
}

body .roles-master-sidebar .role-access-accordion .accordion-table tbody tr,
body .roles-master-sidebar .role-access-accordion .access-table tbody tr {
  background: #ffffff !important;
}

body .roles-master-sidebar .role-access-accordion .accordion-table tbody td,
body .roles-master-sidebar .role-access-accordion .access-table tbody td {
  height: 50px !important;
  vertical-align: middle !important;
  border-color: #d9e2ec !important;
  background: #ffffff !important;
}

body .roles-master-sidebar .role-access-accordion .p-accordion-toggle-icon {
  color: #374151 !important;
  font-size: 16px !important;
  margin-right: 10px !important;
}

body .roles-master-sidebar .header-content {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) 160px 160px !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
}

body .roles-master-sidebar .header-content span {
  width: auto !important;
}

body .roles-master-sidebar .header-content p-checkbox {
  justify-self: start !important;
}

body .roles-master-sidebar .p-sidebar-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 58px !important;
  padding: 10px 20px !important;
  background: #ffffff !important;
  border-top: 1px solid #d7d7d7 !important;
  z-index: 2147483002 !important;
}

.refresh-icon:hover {
  background-color: #e9ecef;
  border-radius: 20px !important;
  padding: 4px !important;
}

.icon-containers {
  display: flex;
  justify-content: space-between !important;
}

.swal2-actions {
  justify-content: space-around !important;
}

/* Global compact day/date filter dropdown */
body .custom-dropdown-datefilter {
  display: inline-flex !important;
  align-items: center !important;
}

body .custom-dropdown-datefilter > .p-dropdown,
body .custom-dropdown-datefilter .p-dropdown,
body p-dropdown.custom-dropdown-datefilter .p-dropdown,
body p-dropdown.custom-dropdown-datefilter {
  min-height: 32px !important;
  height: 32px !important;
  border: 1px solid #2f67b0 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .custom-dropdown-datefilter > .p-dropdown:hover,
body .custom-dropdown-datefilter .p-dropdown:hover,
body .custom-dropdown-datefilter > .p-dropdown.p-focus,
body .custom-dropdown-datefilter .p-dropdown.p-focus {
  border-color: #2f67b0 !important;
  box-shadow: none !important;
}

body .custom-dropdown-datefilter > .p-dropdown .p-dropdown-label,
body .custom-dropdown-datefilter .p-dropdown .p-dropdown-label,
body p-dropdown.custom-dropdown-datefilter .p-dropdown .p-dropdown-label {
  display: flex !important;
  align-items: center !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  color: #000000 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
}

body .custom-dropdown-datefilter > .p-dropdown .p-dropdown-trigger,
body .custom-dropdown-datefilter .p-dropdown .p-dropdown-trigger,
body p-dropdown.custom-dropdown-datefilter .p-dropdown .p-dropdown-trigger {
  width: 2.2rem !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #143a67 !important;
  background: #ffffff !important;
}

body .custom-dropdown-datefilter > .p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon,
body .custom-dropdown-datefilter .p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon,
body p-dropdown.custom-dropdown-datefilter .p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon {
  color: #143a67 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

body .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
  color: #000000 !important;
  font-weight: 500 !important;
}

body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:hover {
  color: #000000 !important;
  background: #f3f6fb !important;
}

body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  color: #ffffff !important;
  background: #0f2f63 !important;
}

body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight:hover {
  color: #ffffff !important;
  background: #0f2f63 !important;
}

body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-focus,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item[aria-selected="true"],
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight .p-dropdown-item-label,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-focus .p-dropdown-item-label,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item[aria-selected="true"] .p-dropdown-item-label,
body .track-shipment-datefilter-panel .p-dropdown-item.p-highlight,
body .track-shipment-datefilter-panel .p-dropdown-item.p-focus,
body .track-shipment-datefilter-panel .p-dropdown-item[aria-selected="true"],
body .track-shipment-datefilter-panel .p-dropdown-item.p-highlight .p-dropdown-item-label,
body .track-shipment-datefilter-panel .p-dropdown-item.p-focus .p-dropdown-item-label,
body .track-shipment-datefilter-panel .p-dropdown-item[aria-selected="true"] .p-dropdown-item-label,
body .shipment-error-datefilter-panel .p-dropdown-item.p-highlight,
body .shipment-error-datefilter-panel .p-dropdown-item.p-focus,
body .shipment-error-datefilter-panel .p-dropdown-item[aria-selected="true"],
body .shipment-error-datefilter-panel .p-dropdown-item.p-highlight .p-dropdown-item-label,
body .shipment-error-datefilter-panel .p-dropdown-item.p-focus .p-dropdown-item-label,
body .shipment-error-datefilter-panel .p-dropdown-item[aria-selected="true"] .p-dropdown-item-label,
body .audit-date-filter-panel .p-dropdown-item.p-highlight,
body .audit-date-filter-panel .p-dropdown-item.p-focus,
body .audit-date-filter-panel .p-dropdown-item[aria-selected="true"],
body .audit-date-filter-panel .p-dropdown-item.p-highlight .p-dropdown-item-label,
body .audit-date-filter-panel .p-dropdown-item.p-focus .p-dropdown-item-label,
body .audit-date-filter-panel .p-dropdown-item[aria-selected="true"] .p-dropdown-item-label,
body .compass-datefilter-panel .p-dropdown-item.p-highlight,
body .compass-datefilter-panel .p-dropdown-item.p-focus,
body .compass-datefilter-panel .p-dropdown-item[aria-selected="true"],
body .compass-datefilter-panel .p-dropdown-item.p-highlight .p-dropdown-item-label,
body .compass-datefilter-panel .p-dropdown-item.p-focus .p-dropdown-item-label,
body .compass-datefilter-panel .p-dropdown-item[aria-selected="true"] .p-dropdown-item-label {
  color: #ffffff !important;
  background: #0f2f63 !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 9999px #0f2f63 !important;
}

body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-focus:hover,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item[aria-selected="true"]:hover,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight:hover .p-dropdown-item-label,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-focus:hover .p-dropdown-item-label,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item[aria-selected="true"]:hover .p-dropdown-item-label,
body .track-shipment-datefilter-panel .p-dropdown-item.p-highlight:hover,
body .track-shipment-datefilter-panel .p-dropdown-item.p-focus:hover,
body .track-shipment-datefilter-panel .p-dropdown-item[aria-selected="true"]:hover,
body .track-shipment-datefilter-panel .p-dropdown-item.p-highlight:hover .p-dropdown-item-label,
body .track-shipment-datefilter-panel .p-dropdown-item.p-focus:hover .p-dropdown-item-label,
body .track-shipment-datefilter-panel .p-dropdown-item[aria-selected="true"]:hover .p-dropdown-item-label,
body .shipment-error-datefilter-panel .p-dropdown-item.p-highlight:hover,
body .shipment-error-datefilter-panel .p-dropdown-item.p-focus:hover,
body .shipment-error-datefilter-panel .p-dropdown-item[aria-selected="true"]:hover,
body .shipment-error-datefilter-panel .p-dropdown-item.p-highlight:hover .p-dropdown-item-label,
body .shipment-error-datefilter-panel .p-dropdown-item.p-focus:hover .p-dropdown-item-label,
body .shipment-error-datefilter-panel .p-dropdown-item[aria-selected="true"]:hover .p-dropdown-item-label,
body .audit-date-filter-panel .p-dropdown-item.p-highlight:hover,
body .audit-date-filter-panel .p-dropdown-item.p-focus:hover,
body .audit-date-filter-panel .p-dropdown-item[aria-selected="true"]:hover,
body .audit-date-filter-panel .p-dropdown-item.p-highlight:hover .p-dropdown-item-label,
body .audit-date-filter-panel .p-dropdown-item.p-focus:hover .p-dropdown-item-label,
body .audit-date-filter-panel .p-dropdown-item[aria-selected="true"]:hover .p-dropdown-item-label,
body .compass-datefilter-panel .p-dropdown-item.p-highlight:hover,
body .compass-datefilter-panel .p-dropdown-item.p-focus:hover,
body .compass-datefilter-panel .p-dropdown-item[aria-selected="true"]:hover,
body .compass-datefilter-panel .p-dropdown-item.p-highlight:hover .p-dropdown-item-label,
body .compass-datefilter-panel .p-dropdown-item.p-focus:hover .p-dropdown-item-label,
body .compass-datefilter-panel .p-dropdown-item[aria-selected="true"]:hover .p-dropdown-item-label {
  color: #ffffff !important;
  background: #0f2f63 !important;
  box-shadow: inset 0 0 0 9999px #0f2f63 !important;
}

body .p-select-overlay .p-select-option,
body .p-select-overlay .p-select-option .p-select-option-label,
body .p-dropdown-panel .p-select-option,
body .p-dropdown-panel .p-select-option .p-select-option-label,
body .track-shipment-datefilter-panel .p-select-option,
body .track-shipment-datefilter-panel .p-select-option .p-select-option-label,
body .shipment-error-datefilter-panel .p-select-option,
body .shipment-error-datefilter-panel .p-select-option .p-select-option-label,
body .audit-date-filter-panel .p-select-option,
body .audit-date-filter-panel .p-select-option .p-select-option-label,
body .compass-datefilter-panel .p-select-option,
body .compass-datefilter-panel .p-select-option .p-select-option-label {
  color: #000000 !important;
}

body .p-select-overlay .p-select-option.p-select-option-selected,
body .p-select-overlay .p-select-option.p-highlight,
body .p-select-overlay .p-select-option[aria-selected="true"],
body .p-dropdown-panel .p-select-option.p-select-option-selected,
body .p-dropdown-panel .p-select-option.p-highlight,
body .p-dropdown-panel .p-select-option[aria-selected="true"],
body .track-shipment-datefilter-panel .p-select-option.p-select-option-selected,
body .track-shipment-datefilter-panel .p-select-option.p-highlight,
body .track-shipment-datefilter-panel .p-select-option[aria-selected="true"],
body .shipment-error-datefilter-panel .p-select-option.p-select-option-selected,
body .shipment-error-datefilter-panel .p-select-option.p.highlight,
body .shipment-error-datefilter-panel .p-select-option[aria-selected="true"],
body .audit-date-filter-panel .p-select-option.p-select-option-selected,
body .audit-date-filter-panel .p-select-option.p.highlight,
body .audit-date-filter-panel .p-select-option[aria-selected="true"],
body .compass-datefilter-panel .p-select-option.p-select-option-selected,
body .compass-datefilter-panel .p-select-option.p.highlight,
body .compass-datefilter-panel .p-select-option[aria-selected="true"] {
  color: #ffffff !important;
  background: #0f2f63 !important;
  box-shadow: inset 0 0 0 9999px #0f2f63 !important;
}

body .p-select-overlay .p-select-option.p-select-option-selected .p-select-option-label,
body .p-select-overlay .p-select-option.p.highlight .p-select-option-label,
body .p-select-overlay .p-select-option[aria-selected="true"] .p-select-option-label,
body .p-dropdown-panel .p-select-option.p-select-option-selected .p-select-option-label,
body .p-dropdown-panel .p-select-option.p.highlight .p-select-option-label,
body .p-dropdown-panel .p-select-option[aria-selected="true"] .p-select-option-label,
body .track-shipment-datefilter-panel .p-select-option.p-select-option-selected .p-select-option-label,
body .track-shipment-datefilter-panel .p-select-option.p.highlight .p-select-option-label,
body .track-shipment-datefilter-panel .p-select-option[aria-selected="true"] .p-select-option-label,
body .shipment-error-datefilter-panel .p-select-option.p-select-option-selected .p-select-option-label,
body .shipment-error-datefilter-panel .p-select-option.p.highlight .p-select-option-label,
body .shipment-error-datefilter-panel .p-select-option[aria-selected="true"] .p-select-option-label,
body .audit-date-filter-panel .p-select-option.p-select-option-selected .p-select-option-label,
body .audit-date-filter-panel .p-select-option.p.highlight .p-select-option-label,
body .audit-date-filter-panel .p-select-option[aria-selected="true"] .p-select-option-label,
body .compass-datefilter-panel .p-select-option.p-select-option-selected .p-select-option-label,
body .compass-datefilter-panel .p-select-option.p.highlight .p-select-option-label,
body .compass-datefilter-panel .p-select-option[aria-selected="true"] .p-select-option-label {
  color: #ffffff !important;
}

@charset "UTF-8";
html {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

html {
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}

html {
  --mat-option-selected-state-label-text-color: #311b92;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}

.mat-accent {
  --mat-option-selected-state-label-text-color: #ffab00;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}

.mat-warn {
  --mat-option-selected-state-label-text-color: #f44336;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}

html {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
}

html {
  --mat-pseudo-checkbox-full-selected-icon-color: #ffab00;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ffab00;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}

.mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #311b92;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #311b92;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}

.mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #ffab00;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ffab00;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}

.mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #f44336;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f44336;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}

html {
  --mat-option-label-text-font: Roboto, sans-serif;
  --mat-option-label-text-line-height: 24px;
  --mat-option-label-text-size: 16px;
  --mat-option-label-text-tracking: 0.03125em;
  --mat-option-label-text-weight: 400;
}

html {
  --mat-optgroup-label-text-font: Roboto, sans-serif;
  --mat-optgroup-label-text-line-height: 24px;
  --mat-optgroup-label-text-size: 16px;
  --mat-optgroup-label-text-tracking: 0.03125em;
  --mat-optgroup-label-text-weight: 400;
}

html {
  --mat-card-elevated-container-shape: 4px;
  --mat-card-outlined-container-shape: 4px;
  --mat-card-filled-container-shape: 4px;
  --mat-card-outlined-outline-width: 1px;
}

html {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

html {
  --mat-card-title-text-font: Roboto, sans-serif;
  --mat-card-title-text-line-height: 32px;
  --mat-card-title-text-size: 20px;
  --mat-card-title-text-tracking: 0.0125em;
  --mat-card-title-text-weight: 500;
  --mat-card-subtitle-text-font: Roboto, sans-serif;
  --mat-card-subtitle-text-line-height: 22px;
  --mat-card-subtitle-text-size: 14px;
  --mat-card-subtitle-text-tracking: 0.0071428571em;
  --mat-card-subtitle-text-weight: 500;
}

html {
  --mat-progress-bar-active-indicator-height: 4px;
  --mat-progress-bar-track-height: 4px;
  --mat-progress-bar-track-shape: 0;
}

.mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #311b92;
  --mat-progress-bar-track-color: rgba(49, 27, 146, 0.25);
}
.mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #ffab00;
  --mat-progress-bar-track-color: rgba(255, 171, 0, 0.25);
}
.mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #f44336;
  --mat-progress-bar-track-color: rgba(244, 67, 54, 0.25);
}

html {
  --mat-tooltip-container-shape: 4px;
  --mat-tooltip-supporting-text-line-height: 16px;
}

html {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
}

html {
  --mat-tooltip-supporting-text-font: Roboto, sans-serif;
  --mat-tooltip-supporting-text-size: 12px;
  --mat-tooltip-supporting-text-weight: 400;
  --mat-tooltip-supporting-text-tracking: 0.0333333333em;
}

html {
  --mat-form-field-filled-active-indicator-height: 1px;
  --mat-form-field-filled-focus-active-indicator-height: 2px;
  --mat-form-field-filled-container-shape: 4px;
  --mat-form-field-outlined-outline-width: 1px;
  --mat-form-field-outlined-focus-outline-width: 2px;
  --mat-form-field-outlined-container-shape: 4px;
}

html {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #311b92 87%, transparent);
  --mat-form-field-filled-caret-color: #311b92;
  --mat-form-field-filled-focus-active-indicator-color: #311b92;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #311b92 87%, transparent);
  --mat-form-field-outlined-caret-color: #311b92;
  --mat-form-field-outlined-focus-outline-color: #311b92;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #311b92 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #f44336;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #f44336;
  --mat-form-field-filled-error-focus-label-text-color: #f44336;
  --mat-form-field-filled-error-label-text-color: #f44336;
  --mat-form-field-filled-error-caret-color: #f44336;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #f44336;
  --mat-form-field-filled-error-focus-active-indicator-color: #f44336;
  --mat-form-field-filled-error-hover-active-indicator-color: #f44336;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #f44336;
  --mat-form-field-outlined-error-focus-label-text-color: #f44336;
  --mat-form-field-outlined-error-label-text-color: #f44336;
  --mat-form-field-outlined-error-hover-label-text-color: #f44336;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #f44336;
  --mat-form-field-outlined-error-hover-outline-color: #f44336;
  --mat-form-field-outlined-error-outline-color: #f44336;
}

.mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ffab00 87%, transparent);
  --mat-form-field-filled-caret-color: #ffab00;
  --mat-form-field-filled-focus-active-indicator-color: #ffab00;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ffab00 87%, transparent);
  --mat-form-field-outlined-caret-color: #ffab00;
  --mat-form-field-outlined-focus-outline-color: #ffab00;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ffab00 87%, transparent);
}

.mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f44336 87%, transparent);
  --mat-form-field-filled-caret-color: #f44336;
  --mat-form-field-filled-focus-active-indicator-color: #f44336;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f44336 87%, transparent);
  --mat-form-field-outlined-caret-color: #f44336;
  --mat-form-field-outlined-focus-outline-color: #f44336;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f44336 87%, transparent);
}

html {
  --mat-form-field-container-height: 56px;
  --mat-form-field-filled-label-display: block;
  --mat-form-field-container-vertical-padding: 16px;
  --mat-form-field-filled-with-label-container-padding-top: 24px;
  --mat-form-field-filled-with-label-container-padding-bottom: 8px;
}

html {
  --mat-form-field-container-text-font: Roboto, sans-serif;
  --mat-form-field-container-text-line-height: 24px;
  --mat-form-field-container-text-size: 16px;
  --mat-form-field-container-text-tracking: 0.03125em;
  --mat-form-field-container-text-weight: 400;
  --mat-form-field-outlined-label-text-populated-size: 16px;
  --mat-form-field-subscript-text-font: Roboto, sans-serif;
  --mat-form-field-subscript-text-line-height: 20px;
  --mat-form-field-subscript-text-size: 12px;
  --mat-form-field-subscript-text-tracking: 0.0333333333em;
  --mat-form-field-subscript-text-weight: 400;
  --mat-form-field-filled-label-text-font: Roboto, sans-serif;
  --mat-form-field-filled-label-text-size: 16px;
  --mat-form-field-filled-label-text-tracking: 0.03125em;
  --mat-form-field-filled-label-text-weight: 400;
  --mat-form-field-outlined-label-text-font: Roboto, sans-serif;
  --mat-form-field-outlined-label-text-size: 16px;
  --mat-form-field-outlined-label-text-tracking: 0.03125em;
  --mat-form-field-outlined-label-text-weight: 400;
}

html {
  --mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

html {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #311b92;
  --mat-select-invalid-arrow-color: #f44336;
}

.mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ffab00;
  --mat-select-invalid-arrow-color: #f44336;
}

.mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f44336;
  --mat-select-invalid-arrow-color: #f44336;
}

html {
  --mat-select-arrow-transform: translateY(-8px);
}

html {
  --mat-select-trigger-text-font: Roboto, sans-serif;
  --mat-select-trigger-text-line-height: 24px;
  --mat-select-trigger-text-size: 16px;
  --mat-select-trigger-text-tracking: 0.03125em;
  --mat-select-trigger-text-weight: 400;
}

html {
  --mat-autocomplete-container-shape: 4px;
  --mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

html {
  --mat-autocomplete-background-color: white;
}

html {
  --mat-dialog-container-shape: 4px;
  --mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-dialog-container-max-width: 80vw;
  --mat-dialog-container-small-max-width: 80vw;
  --mat-dialog-container-min-width: 0;
  --mat-dialog-actions-alignment: start;
  --mat-dialog-actions-padding: 8px;
  --mat-dialog-content-padding: 20px 24px;
  --mat-dialog-with-actions-content-padding: 20px 24px;
  --mat-dialog-headline-padding: 0 24px 9px;
}

html {
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}

html {
  --mat-dialog-subhead-font: Roboto, sans-serif;
  --mat-dialog-subhead-line-height: 32px;
  --mat-dialog-subhead-size: 20px;
  --mat-dialog-subhead-weight: 500;
  --mat-dialog-subhead-tracking: 0.0125em;
  --mat-dialog-supporting-text-font: Roboto, sans-serif;
  --mat-dialog-supporting-text-line-height: 24px;
  --mat-dialog-supporting-text-size: 16px;
  --mat-dialog-supporting-text-weight: 400;
  --mat-dialog-supporting-text-tracking: 0.03125em;
}

.mat-mdc-standard-chip {
  --mat-chip-container-shape-radius: 16px;
  --mat-chip-disabled-container-opacity: 0.4;
  --mat-chip-disabled-outline-color: transparent;
  --mat-chip-flat-selected-outline-width: 0;
  --mat-chip-focus-outline-color: transparent;
  --mat-chip-hover-state-layer-opacity: 0.04;
  --mat-chip-outline-color: transparent;
  --mat-chip-outline-width: 0;
  --mat-chip-selected-hover-state-layer-opacity: 0.04;
  --mat-chip-selected-trailing-action-state-layer-color: transparent;
  --mat-chip-trailing-action-focus-opacity: 1;
  --mat-chip-trailing-action-focus-state-layer-opacity: 0;
  --mat-chip-trailing-action-hover-state-layer-opacity: 0;
  --mat-chip-trailing-action-opacity: 0.54;
  --mat-chip-trailing-action-state-layer-color: transparent;
  --mat-chip-with-avatar-avatar-shape-radius: 14px;
  --mat-chip-with-avatar-avatar-size: 28px;
  --mat-chip-with-avatar-disabled-avatar-opacity: 1;
  --mat-chip-with-icon-disabled-icon-opacity: 1;
  --mat-chip-with-icon-icon-size: 18px;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;
}

.mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: #311b92;
  --mat-chip-elevated-disabled-container-color: #311b92;
  --mat-chip-elevated-selected-container-color: #311b92;
  --mat-chip-flat-disabled-selected-container-color: #311b92;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: #ffab00;
  --mat-chip-elevated-disabled-container-color: #ffab00;
  --mat-chip-elevated-selected-container-color: #ffab00;
  --mat-chip-flat-disabled-selected-container-color: #ffab00;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: #f44336;
  --mat-chip-elevated-disabled-container-color: #f44336;
  --mat-chip-elevated-selected-container-color: #f44336;
  --mat-chip-flat-disabled-selected-container-color: #f44336;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}

.mat-mdc-chip.mat-mdc-standard-chip {
  --mat-chip-container-height: 32px;
}

.mat-mdc-standard-chip {
  --mat-chip-label-text-font: Roboto, sans-serif;
  --mat-chip-label-text-line-height: 20px;
  --mat-chip-label-text-size: 14px;
  --mat-chip-label-text-tracking: 0.0178571429em;
  --mat-chip-label-text-weight: 400;
}

html {
  --mat-slide-toggle-disabled-handle-opacity: 0.38;
  --mat-slide-toggle-disabled-selected-handle-opacity: 0.38;
  --mat-slide-toggle-disabled-selected-icon-opacity: 0.38;
  --mat-slide-toggle-disabled-track-opacity: 0.12;
  --mat-slide-toggle-disabled-unselected-handle-opacity: 0.38;
  --mat-slide-toggle-disabled-unselected-icon-opacity: 0.38;
  --mat-slide-toggle-disabled-unselected-track-outline-color: transparent;
  --mat-slide-toggle-disabled-unselected-track-outline-width: 1px;
  --mat-slide-toggle-handle-height: 20px;
  --mat-slide-toggle-handle-shape: 10px;
  --mat-slide-toggle-handle-width: 20px;
  --mat-slide-toggle-hidden-track-opacity: 1;
  --mat-slide-toggle-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  --mat-slide-toggle-pressed-handle-size: 20px;
  --mat-slide-toggle-selected-focus-state-layer-opacity: 0.12;
  --mat-slide-toggle-selected-handle-horizontal-margin: 0;
  --mat-slide-toggle-selected-handle-size: 20px;
  --mat-slide-toggle-selected-hover-state-layer-opacity: 0.04;
  --mat-slide-toggle-selected-icon-size: 18px;
  --mat-slide-toggle-selected-pressed-handle-horizontal-margin: 0;
  --mat-slide-toggle-selected-pressed-state-layer-opacity: 0.12;
  --mat-slide-toggle-selected-track-outline-color: transparent;
  --mat-slide-toggle-selected-track-outline-width: 1px;
  --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0;
  --mat-slide-toggle-track-height: 14px;
  --mat-slide-toggle-track-outline-color: transparent;
  --mat-slide-toggle-track-outline-width: 1px;
  --mat-slide-toggle-track-shape: 7px;
  --mat-slide-toggle-track-width: 36px;
  --mat-slide-toggle-unselected-focus-state-layer-opacity: 0.12;
  --mat-slide-toggle-unselected-handle-horizontal-margin: 0;
  --mat-slide-toggle-unselected-handle-size: 20px;
  --mat-slide-toggle-unselected-hover-state-layer-opacity: 0.12;
  --mat-slide-toggle-unselected-icon-size: 18px;
  --mat-slide-toggle-unselected-pressed-handle-horizontal-margin: 0;
  --mat-slide-toggle-unselected-pressed-state-layer-opacity: 0.1;
  --mat-slide-toggle-unselected-with-icon-handle-horizontal-margin: 0;
  --mat-slide-toggle-visible-track-opacity: 1;
  --mat-slide-toggle-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  --mat-slide-toggle-with-icon-handle-size: 20px;
  --mat-slide-toggle-touch-target-size: 48px;
}

html {
  --mat-slide-toggle-selected-icon-color: white;
  --mat-slide-toggle-disabled-selected-icon-color: white;
  --mat-slide-toggle-selected-focus-state-layer-color: #311b92;
  --mat-slide-toggle-selected-handle-color: #311b92;
  --mat-slide-toggle-selected-hover-state-layer-color: #311b92;
  --mat-slide-toggle-selected-pressed-state-layer-color: #311b92;
  --mat-slide-toggle-selected-focus-handle-color: #311b92;
  --mat-slide-toggle-selected-hover-handle-color: #311b92;
  --mat-slide-toggle-selected-pressed-handle-color: #311b92;
  --mat-slide-toggle-selected-focus-track-color: #9575cd;
  --mat-slide-toggle-selected-hover-track-color: #9575cd;
  --mat-slide-toggle-selected-pressed-track-color: #9575cd;
  --mat-slide-toggle-selected-track-color: #9575cd;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}

.mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-selected-focus-state-layer-color: #ffab00;
  --mat-slide-toggle-selected-handle-color: #ffab00;
  --mat-slide-toggle-selected-hover-state-layer-color: #ffab00;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ffab00;
  --mat-slide-toggle-selected-focus-handle-color: #ffab00;
  --mat-slide-toggle-selected-hover-handle-color: #ffab00;
  --mat-slide-toggle-selected-pressed-handle-color: #ffab00;
  --mat-slide-toggle-selected-focus-track-color: #ffd54f;
  --mat-slide-toggle-selected-hover-track-color: #ffd54f;
  --mat-slide-toggle-selected-pressed-track-color: #ffd54f;
  --mat-slide-toggle-selected-track-color: #ffd54f;
}
.mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: white;
  --mat-slide-toggle-disabled-selected-icon-color: white;
  --mat-slide-toggle-selected-focus-state-layer-color: #f44336;
  --mat-slide-toggle-selected-handle-color: #f44336;
  --mat-slide-toggle-selected-hover-state-layer-color: #f44336;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f44336;
  --mat-slide-toggle-selected-focus-handle-color: #f44336;
  --mat-slide-toggle-selected-hover-handle-color: #f44336;
  --mat-slide-toggle-selected-pressed-handle-color: #f44336;
  --mat-slide-toggle-selected-focus-track-color: #e57373;
  --mat-slide-toggle-selected-hover-track-color: #e57373;
  --mat-slide-toggle-selected-pressed-track-color: #e57373;
  --mat-slide-toggle-selected-track-color: #e57373;
}

html {
  --mat-slide-toggle-state-layer-size: 40px;
  --mat-slide-toggle-touch-target-display: block;
}

html {
  --mat-slide-toggle-label-text-font: Roboto, sans-serif;
  --mat-slide-toggle-label-text-line-height: 20px;
  --mat-slide-toggle-label-text-size: 14px;
  --mat-slide-toggle-label-text-tracking: 0.0178571429em;
  --mat-slide-toggle-label-text-weight: 400;
}
html .mat-mdc-slide-toggle {
  --mat-slide-toggle-label-text-font: Roboto, sans-serif;
  --mat-slide-toggle-label-text-line-height: 20px;
  --mat-slide-toggle-label-text-size: 14px;
  --mat-slide-toggle-label-text-tracking: 0.0178571429em;
  --mat-slide-toggle-label-text-weight: 400;
}

html {
  --mat-radio-disabled-selected-icon-opacity: 0.38;
  --mat-radio-disabled-unselected-icon-opacity: 0.38;
  --mat-radio-state-layer-size: 40px;
  --mat-radio-touch-target-size: 48px;
}

.mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #311b92;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #311b92;
  --mat-radio-selected-hover-icon-color: #311b92;
  --mat-radio-selected-icon-color: #311b92;
  --mat-radio-selected-pressed-icon-color: #311b92;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #ffab00;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ffab00;
  --mat-radio-selected-hover-icon-color: #ffab00;
  --mat-radio-selected-icon-color: #ffab00;
  --mat-radio-selected-pressed-icon-color: #ffab00;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #f44336;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f44336;
  --mat-radio-selected-hover-icon-color: #f44336;
  --mat-radio-selected-icon-color: #f44336;
  --mat-radio-selected-pressed-icon-color: #f44336;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}

html {
  --mat-radio-state-layer-size: 40px;
  --mat-radio-touch-target-display: block;
}

html {
  --mat-radio-label-text-font: Roboto, sans-serif;
  --mat-radio-label-text-line-height: 20px;
  --mat-radio-label-text-size: 14px;
  --mat-radio-label-text-tracking: 0.0178571429em;
  --mat-radio-label-text-weight: 400;
}

html {
  --mat-slider-active-track-height: 6px;
  --mat-slider-active-track-shape: 9999px;
  --mat-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slider-handle-height: 20px;
  --mat-slider-handle-shape: 50%;
  --mat-slider-handle-width: 20px;
  --mat-slider-inactive-track-height: 4px;
  --mat-slider-inactive-track-shape: 9999px;
  --mat-slider-value-indicator-border-radius: 4px;
  --mat-slider-value-indicator-caret-display: block;
  --mat-slider-value-indicator-container-transform: translateX(-50%);
  --mat-slider-value-indicator-height: 32px;
  --mat-slider-value-indicator-padding: 0 12px;
  --mat-slider-value-indicator-text-transform: none;
  --mat-slider-value-indicator-width: auto;
  --mat-slider-with-overlap-handle-outline-width: 1px;
  --mat-slider-with-tick-marks-active-container-opacity: 0.6;
  --mat-slider-with-tick-marks-container-shape: 50%;
  --mat-slider-with-tick-marks-container-size: 2px;
  --mat-slider-with-tick-marks-inactive-container-opacity: 0.6;
  --mat-slider-value-indicator-transform-origin: bottom;
}

html {
  --mat-slider-active-track-color: #311b92;
  --mat-slider-focus-handle-color: #311b92;
  --mat-slider-handle-color: #311b92;
  --mat-slider-hover-handle-color: #311b92;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #311b92 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #311b92 4%, transparent);
  --mat-slider-inactive-track-color: #311b92;
  --mat-slider-ripple-color: #311b92;
  --mat-slider-with-tick-marks-active-container-color: white;
  --mat-slider-with-tick-marks-inactive-container-color: #311b92;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}

.mat-accent {
  --mat-slider-active-track-color: #ffab00;
  --mat-slider-focus-handle-color: #ffab00;
  --mat-slider-handle-color: #ffab00;
  --mat-slider-hover-handle-color: #ffab00;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ffab00 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ffab00 4%, transparent);
  --mat-slider-inactive-track-color: #ffab00;
  --mat-slider-ripple-color: #ffab00;
  --mat-slider-with-tick-marks-active-container-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-inactive-container-color: #ffab00;
}

.mat-warn {
  --mat-slider-active-track-color: #f44336;
  --mat-slider-focus-handle-color: #f44336;
  --mat-slider-handle-color: #f44336;
  --mat-slider-hover-handle-color: #f44336;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f44336 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f44336 4%, transparent);
  --mat-slider-inactive-track-color: #f44336;
  --mat-slider-ripple-color: #f44336;
  --mat-slider-with-tick-marks-active-container-color: white;
  --mat-slider-with-tick-marks-inactive-container-color: #f44336;
}

html {
  --mat-slider-label-label-text-font: Roboto, sans-serif;
  --mat-slider-label-label-text-size: 14px;
  --mat-slider-label-label-text-line-height: 22px;
  --mat-slider-label-label-text-tracking: 0.0071428571em;
  --mat-slider-label-label-text-weight: 500;
}

html {
  --mat-menu-container-shape: 4px;
  --mat-menu-divider-bottom-spacing: 0;
  --mat-menu-divider-top-spacing: 0;
  --mat-menu-item-spacing: 16px;
  --mat-menu-item-icon-size: 24px;
  --mat-menu-item-leading-spacing: 16px;
  --mat-menu-item-trailing-spacing: 16px;
  --mat-menu-item-with-icon-leading-spacing: 16px;
  --mat-menu-item-with-icon-trailing-spacing: 16px;
  --mat-menu-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

html {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
}

html {
  --mat-menu-item-label-text-font: Roboto, sans-serif;
  --mat-menu-item-label-text-size: 16px;
  --mat-menu-item-label-text-tracking: 0.03125em;
  --mat-menu-item-label-text-line-height: 24px;
  --mat-menu-item-label-text-weight: 400;
}

html {
  --mat-list-active-indicator-color: transparent;
  --mat-list-active-indicator-shape: 4px;
  --mat-list-list-item-container-shape: 0;
  --mat-list-list-item-leading-avatar-shape: 50%;
  --mat-list-list-item-container-color: transparent;
  --mat-list-list-item-selected-container-color: transparent;
  --mat-list-list-item-leading-avatar-color: transparent;
  --mat-list-list-item-leading-icon-size: 24px;
  --mat-list-list-item-leading-avatar-size: 40px;
  --mat-list-list-item-trailing-icon-size: 24px;
  --mat-list-list-item-disabled-state-layer-color: transparent;
  --mat-list-list-item-disabled-state-layer-opacity: 0;
  --mat-list-list-item-disabled-label-text-opacity: 0.38;
  --mat-list-list-item-disabled-leading-icon-opacity: 0.38;
  --mat-list-list-item-disabled-trailing-icon-opacity: 0.38;
}

html {
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}

.mdc-list-item__start,
.mdc-list-item__end {
  --mat-radio-checked-ripple-color: #311b92;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #311b92;
  --mat-radio-selected-hover-icon-color: #311b92;
  --mat-radio-selected-icon-color: #311b92;
  --mat-radio-selected-pressed-icon-color: #311b92;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}

.mat-accent .mdc-list-item__start,
.mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ffab00;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ffab00;
  --mat-radio-selected-hover-icon-color: #ffab00;
  --mat-radio-selected-icon-color: #ffab00;
  --mat-radio-selected-pressed-icon-color: #ffab00;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}

.mat-warn .mdc-list-item__start,
.mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f44336;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f44336;
  --mat-radio-selected-hover-icon-color: #f44336;
  --mat-radio-selected-icon-color: #f44336;
  --mat-radio-selected-pressed-icon-color: #f44336;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: white;
  --mat-checkbox-selected-focus-icon-color: #311b92;
  --mat-checkbox-selected-hover-icon-color: #311b92;
  --mat-checkbox-selected-icon-color: #311b92;
  --mat-checkbox-selected-pressed-icon-color: #311b92;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #311b92;
  --mat-checkbox-selected-hover-state-layer-color: #311b92;
  --mat-checkbox-selected-pressed-state-layer-color: #311b92;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-selected-focus-icon-color: #ffab00;
  --mat-checkbox-selected-hover-icon-color: #ffab00;
  --mat-checkbox-selected-icon-color: #ffab00;
  --mat-checkbox-selected-pressed-icon-color: #ffab00;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ffab00;
  --mat-checkbox-selected-hover-state-layer-color: #ffab00;
  --mat-checkbox-selected-pressed-state-layer-color: #ffab00;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: white;
  --mat-checkbox-selected-focus-icon-color: #f44336;
  --mat-checkbox-selected-hover-icon-color: #f44336;
  --mat-checkbox-selected-icon-color: #f44336;
  --mat-checkbox-selected-pressed-icon-color: #f44336;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f44336;
  --mat-checkbox-selected-hover-state-layer-color: #f44336;
  --mat-checkbox-selected-pressed-state-layer-color: #f44336;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #311b92;
}

.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}

html {
  --mat-list-list-item-leading-icon-start-space: 16px;
  --mat-list-list-item-leading-icon-end-space: 32px;
  --mat-list-list-item-one-line-container-height: 48px;
  --mat-list-list-item-two-line-container-height: 64px;
  --mat-list-list-item-three-line-container-height: 88px;
}

.mdc-list-item__start,
.mdc-list-item__end {
  --mat-radio-state-layer-size: 40px;
  --mat-radio-touch-target-display: block;
}

.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
  height: 56px;
}
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
  height: 72px;
}

html {
  --mat-list-list-item-label-text-font: Roboto, sans-serif;
  --mat-list-list-item-label-text-line-height: 24px;
  --mat-list-list-item-label-text-size: 16px;
  --mat-list-list-item-label-text-tracking: 0.03125em;
  --mat-list-list-item-label-text-weight: 400;
  --mat-list-list-item-supporting-text-font: Roboto, sans-serif;
  --mat-list-list-item-supporting-text-line-height: 20px;
  --mat-list-list-item-supporting-text-size: 14px;
  --mat-list-list-item-supporting-text-tracking: 0.0178571429em;
  --mat-list-list-item-supporting-text-weight: 400;
  --mat-list-list-item-trailing-supporting-text-font: Roboto, sans-serif;
  --mat-list-list-item-trailing-supporting-text-line-height: 20px;
  --mat-list-list-item-trailing-supporting-text-size: 12px;
  --mat-list-list-item-trailing-supporting-text-tracking: 0.0333333333em;
  --mat-list-list-item-trailing-supporting-text-weight: 400;
}

.mdc-list-group__subheader {
  font: 400 16px / 28px Roboto, sans-serif;
  letter-spacing: 0.009375em;
}

html {
  --mat-paginator-page-size-select-width: 84px;
  --mat-paginator-page-size-select-touch-target-height: 48px;
}

html {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}

html {
  --mat-paginator-container-size: 56px;
  --mat-paginator-form-field-container-height: 40px;
  --mat-paginator-form-field-container-vertical-padding: 8px;
  --mat-paginator-touch-target-display: block;
}

html {
  --mat-paginator-container-text-font: Roboto, sans-serif;
  --mat-paginator-container-text-line-height: 20px;
  --mat-paginator-container-text-size: 12px;
  --mat-paginator-container-text-tracking: 0.0333333333em;
  --mat-paginator-container-text-weight: 400;
  --mat-paginator-select-trigger-text-size: 12px;
}

html {
  --mat-tab-container-height: 48px;
  --mat-tab-divider-color: transparent;
  --mat-tab-divider-height: 0;
  --mat-tab-active-indicator-height: 2px;
  --mat-tab-active-indicator-shape: 0;
}

.mat-mdc-tab-group,
.mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #311b92;
  --mat-tab-active-ripple-color: #311b92;
  --mat-tab-inactive-ripple-color: #311b92;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #311b92;
  --mat-tab-active-hover-label-text-color: #311b92;
  --mat-tab-active-focus-indicator-color: #311b92;
  --mat-tab-active-hover-indicator-color: #311b92;
  --mat-tab-active-indicator-color: #311b92;
}
.mat-mdc-tab-group.mat-accent,
.mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ffab00;
  --mat-tab-active-ripple-color: #ffab00;
  --mat-tab-inactive-ripple-color: #ffab00;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ffab00;
  --mat-tab-active-hover-label-text-color: #ffab00;
  --mat-tab-active-focus-indicator-color: #ffab00;
  --mat-tab-active-hover-indicator-color: #ffab00;
  --mat-tab-active-indicator-color: #ffab00;
}
.mat-mdc-tab-group.mat-warn,
.mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f44336;
  --mat-tab-active-ripple-color: #f44336;
  --mat-tab-inactive-ripple-color: #f44336;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f44336;
  --mat-tab-active-hover-label-text-color: #f44336;
  --mat-tab-active-focus-indicator-color: #f44336;
  --mat-tab-active-hover-indicator-color: #f44336;
  --mat-tab-active-indicator-color: #f44336;
}
.mat-mdc-tab-group.mat-background-primary,
.mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #311b92;
  --mat-tab-foreground-color: white;
}
.mat-mdc-tab-group.mat-background-accent,
.mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #ffab00;
  --mat-tab-foreground-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-tab-group.mat-background-warn,
.mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #f44336;
  --mat-tab-foreground-color: white;
}

.mat-mdc-tab-header {
  --mat-tab-container-height: 48px;
}

.mat-mdc-tab-header {
  --mat-tab-label-text-font: Roboto, sans-serif;
  --mat-tab-label-text-size: 14px;
  --mat-tab-label-text-tracking: 0.0892857143em;
  --mat-tab-label-text-line-height: 36px;
  --mat-tab-label-text-weight: 500;
}

html {
  --mat-checkbox-disabled-selected-checkmark-color: white;
  --mat-checkbox-selected-focus-state-layer-opacity: 0.12;
  --mat-checkbox-selected-hover-state-layer-opacity: 0.04;
  --mat-checkbox-selected-pressed-state-layer-opacity: 0.12;
  --mat-checkbox-unselected-focus-state-layer-opacity: 0.12;
  --mat-checkbox-unselected-hover-state-layer-opacity: 0.04;
  --mat-checkbox-unselected-pressed-state-layer-opacity: 0.12;
  --mat-checkbox-touch-target-size: 48px;
}

html {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-selected-focus-icon-color: #ffab00;
  --mat-checkbox-selected-hover-icon-color: #ffab00;
  --mat-checkbox-selected-icon-color: #ffab00;
  --mat-checkbox-selected-pressed-icon-color: #ffab00;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ffab00;
  --mat-checkbox-selected-hover-state-layer-color: #ffab00;
  --mat-checkbox-selected-pressed-state-layer-color: #ffab00;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: white;
  --mat-checkbox-selected-focus-icon-color: #311b92;
  --mat-checkbox-selected-hover-icon-color: #311b92;
  --mat-checkbox-selected-icon-color: #311b92;
  --mat-checkbox-selected-pressed-icon-color: #311b92;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #311b92;
  --mat-checkbox-selected-hover-state-layer-color: #311b92;
  --mat-checkbox-selected-pressed-state-layer-color: #311b92;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: white;
  --mat-checkbox-selected-focus-icon-color: #f44336;
  --mat-checkbox-selected-hover-icon-color: #f44336;
  --mat-checkbox-selected-icon-color: #f44336;
  --mat-checkbox-selected-pressed-icon-color: #f44336;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f44336;
  --mat-checkbox-selected-hover-state-layer-color: #f44336;
  --mat-checkbox-selected-pressed-state-layer-color: #f44336;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}

html {
  --mat-checkbox-touch-target-display: block;
  --mat-checkbox-state-layer-size: 40px;
}

html {
  --mat-checkbox-label-text-font: Roboto, sans-serif;
  --mat-checkbox-label-text-line-height: 20px;
  --mat-checkbox-label-text-size: 14px;
  --mat-checkbox-label-text-tracking: 0.0178571429em;
  --mat-checkbox-label-text-weight: 400;
}

html {
  --mat-button-filled-container-shape: 4px;
  --mat-button-filled-horizontal-padding: 16px;
  --mat-button-filled-icon-offset: -4px;
  --mat-button-filled-icon-spacing: 8px;
  --mat-button-filled-touch-target-size: 48px;
  --mat-button-outlined-container-shape: 4px;
  --mat-button-outlined-horizontal-padding: 15px;
  --mat-button-outlined-icon-offset: -4px;
  --mat-button-outlined-icon-spacing: 8px;
  --mat-button-outlined-keep-touch-target: false;
  --mat-button-outlined-outline-width: 1px;
  --mat-button-outlined-touch-target-size: 48px;
  --mat-button-protected-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-container-shape: 4px;
  --mat-button-protected-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-horizontal-padding: 16px;
  --mat-button-protected-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-icon-offset: -4px;
  --mat-button-protected-icon-spacing: 8px;
  --mat-button-protected-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-button-protected-touch-target-size: 48px;
  --mat-button-text-container-shape: 4px;
  --mat-button-text-horizontal-padding: 8px;
  --mat-button-text-icon-offset: 0;
  --mat-button-text-icon-spacing: 8px;
  --mat-button-text-with-icon-horizontal-padding: 8px;
  --mat-button-text-touch-target-size: 48px;
  --mat-button-tonal-container-shape: 4px;
  --mat-button-tonal-horizontal-padding: 16px;
  --mat-button-tonal-icon-offset: -4px;
  --mat-button-tonal-icon-spacing: 8px;
  --mat-button-tonal-touch-target-size: 48px;
}

html {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-raised-button.mat-primary,
.mat-mdc-outlined-button.mat-primary,
.mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #311b92;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-label-text-color: #311b92;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #311b92 12%, transparent);
  --mat-button-outlined-state-layer-color: #311b92;
  --mat-button-protected-container-color: #311b92;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-label-text-color: #311b92;
  --mat-button-text-ripple-color: color-mix(in srgb, #311b92 12%, transparent);
  --mat-button-text-state-layer-color: #311b92;
  --mat-button-tonal-container-color: #311b92;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.mat-mdc-button.mat-accent,
.mat-mdc-unelevated-button.mat-accent,
.mat-mdc-raised-button.mat-accent,
.mat-mdc-outlined-button.mat-accent,
.mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #ffab00;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-label-text-color: #ffab00;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ffab00 12%, transparent);
  --mat-button-outlined-state-layer-color: #ffab00;
  --mat-button-protected-container-color: #ffab00;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-label-text-color: #ffab00;
  --mat-button-text-ripple-color: color-mix(in srgb, #ffab00 12%, transparent);
  --mat-button-text-state-layer-color: #ffab00;
  --mat-button-tonal-container-color: #ffab00;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-button.mat-warn,
.mat-mdc-unelevated-button.mat-warn,
.mat-mdc-raised-button.mat-warn,
.mat-mdc-outlined-button.mat-warn,
.mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #f44336;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-label-text-color: #f44336;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f44336 12%, transparent);
  --mat-button-outlined-state-layer-color: #f44336;
  --mat-button-protected-container-color: #f44336;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-label-text-color: #f44336;
  --mat-button-text-ripple-color: color-mix(in srgb, #f44336 12%, transparent);
  --mat-button-text-state-layer-color: #f44336;
  --mat-button-tonal-container-color: #f44336;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}

html {
  --mat-button-filled-container-height: 36px;
  --mat-button-filled-touch-target-display: block;
  --mat-button-outlined-container-height: 36px;
  --mat-button-outlined-touch-target-display: block;
  --mat-button-protected-container-height: 36px;
  --mat-button-protected-touch-target-display: block;
  --mat-button-text-container-height: 36px;
  --mat-button-text-touch-target-display: block;
  --mat-button-tonal-container-height: 36px;
  --mat-button-tonal-touch-target-display: block;
}

html {
  --mat-button-filled-label-text-font: Roboto, sans-serif;
  --mat-button-filled-label-text-size: 14px;
  --mat-button-filled-label-text-tracking: 0.0892857143em;
  --mat-button-filled-label-text-transform: none;
  --mat-button-filled-label-text-weight: 500;
  --mat-button-outlined-label-text-font: Roboto, sans-serif;
  --mat-button-outlined-label-text-size: 14px;
  --mat-button-outlined-label-text-tracking: 0.0892857143em;
  --mat-button-outlined-label-text-transform: none;
  --mat-button-outlined-label-text-weight: 500;
  --mat-button-protected-label-text-font: Roboto, sans-serif;
  --mat-button-protected-label-text-size: 14px;
  --mat-button-protected-label-text-tracking: 0.0892857143em;
  --mat-button-protected-label-text-transform: none;
  --mat-button-protected-label-text-weight: 500;
  --mat-button-text-label-text-font: Roboto, sans-serif;
  --mat-button-text-label-text-size: 14px;
  --mat-button-text-label-text-tracking: 0.0892857143em;
  --mat-button-text-label-text-transform: none;
  --mat-button-text-label-text-weight: 500;
  --mat-button-tonal-label-text-font: Roboto, sans-serif;
  --mat-button-tonal-label-text-size: 14px;
  --mat-button-tonal-label-text-tracking: 0.0892857143em;
  --mat-button-tonal-label-text-transform: none;
  --mat-button-tonal-label-text-weight: 500;
}

html {
  --mat-icon-button-icon-size: 24px;
  --mat-icon-button-container-shape: 50%;
  --mat-icon-button-touch-target-size: 48px;
}

html {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #311b92;
  --mat-icon-button-state-layer-color: #311b92;
  --mat-icon-button-ripple-color: color-mix(in srgb, #311b92 12%, transparent);
}
.mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #ffab00;
  --mat-icon-button-state-layer-color: #ffab00;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ffab00 12%, transparent);
}
.mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #f44336;
  --mat-icon-button-state-layer-color: #f44336;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f44336 12%, transparent);
}

html {
  --mat-icon-button-touch-target-display: block;
}

.mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 48px;
  --mat-icon-button-state-layer-size: 48px;
  width: var(--mat-icon-button-state-layer-size);
  height: var(--mat-icon-button-state-layer-size);
  padding: 12px;
}

html {
  --mat-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-container-shape: 50%;
  --mat-fab-touch-target-size: 48px;
  --mat-fab-extended-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-extended-container-height: 48px;
  --mat-fab-extended-container-shape: 24px;
  --mat-fab-extended-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-extended-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-extended-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-small-container-shape: 50%;
  --mat-fab-small-touch-target-size: 48px;
  --mat-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}

html {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-fab.mat-primary, .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #311b92;
  --mat-fab-foreground-color: white;
  --mat-fab-ripple-color: color-mix(in srgb, #311b92 12%, transparent);
  --mat-fab-small-container-color: #311b92;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.mat-mdc-fab.mat-accent, .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #ffab00;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-ripple-color: color-mix(in srgb, #ffab00 12%, transparent);
  --mat-fab-small-container-color: #ffab00;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-fab.mat-warn, .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #f44336;
  --mat-fab-foreground-color: white;
  --mat-fab-ripple-color: color-mix(in srgb, #f44336 12%, transparent);
  --mat-fab-small-container-color: #f44336;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}

html {
  --mat-fab-small-touch-target-display: block;
  --mat-fab-touch-target-display: block;
}

html {
  --mat-fab-extended-label-text-font: Roboto, sans-serif;
  --mat-fab-extended-label-text-size: 14px;
  --mat-fab-extended-label-text-tracking: 0.0892857143em;
  --mat-fab-extended-label-text-weight: 500;
}

html {
  --mat-snack-bar-container-shape: 4px;
}

html {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #9575cd;
}

html {
  --mat-snack-bar-supporting-text-font: Roboto, sans-serif;
  --mat-snack-bar-supporting-text-line-height: 20px;
  --mat-snack-bar-supporting-text-size: 14px;
  --mat-snack-bar-supporting-text-weight: 400;
}

html {
  --mat-table-row-item-outline-width: 1px;
}

html {
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
}

html {
  --mat-table-header-container-height: 56px;
  --mat-table-footer-container-height: 52px;
  --mat-table-row-item-container-height: 52px;
}

html {
  --mat-table-header-headline-font: Roboto, sans-serif;
  --mat-table-header-headline-line-height: 22px;
  --mat-table-header-headline-size: 14px;
  --mat-table-header-headline-weight: 500;
  --mat-table-header-headline-tracking: 0.0071428571em;
  --mat-table-row-item-label-text-font: Roboto, sans-serif;
  --mat-table-row-item-label-text-line-height: 20px;
  --mat-table-row-item-label-text-size: 14px;
  --mat-table-row-item-label-text-weight: 400;
  --mat-table-row-item-label-text-tracking: 0.0178571429em;
  --mat-table-footer-supporting-text-font: Roboto, sans-serif;
  --mat-table-footer-supporting-text-line-height: 20px;
  --mat-table-footer-supporting-text-size: 14px;
  --mat-table-footer-supporting-text-weight: 400;
  --mat-table-footer-supporting-text-tracking: 0.0178571429em;
}

html {
  --mat-progress-spinner-active-indicator-width: 4px;
  --mat-progress-spinner-size: 48px;
}

html {
  --mat-progress-spinner-active-indicator-color: #311b92;
}

.mat-accent {
  --mat-progress-spinner-active-indicator-color: #ffab00;
}

.mat-warn {
  --mat-progress-spinner-active-indicator-color: #f44336;
}

html {
  --mat-badge-container-shape: 50%;
  --mat-badge-container-size: unset;
  --mat-badge-small-size-container-size: unset;
  --mat-badge-large-size-container-size: unset;
  --mat-badge-legacy-container-size: 22px;
  --mat-badge-legacy-small-size-container-size: 16px;
  --mat-badge-legacy-large-size-container-size: 28px;
  --mat-badge-container-offset: -11px 0;
  --mat-badge-small-size-container-offset: -8px 0;
  --mat-badge-large-size-container-offset: -14px 0;
  --mat-badge-container-overlap-offset: -11px;
  --mat-badge-small-size-container-overlap-offset: -8px;
  --mat-badge-large-size-container-overlap-offset: -14px;
  --mat-badge-container-padding: 0;
  --mat-badge-small-size-container-padding: 0;
  --mat-badge-large-size-container-padding: 0;
}

html {
  --mat-badge-background-color: #311b92;
  --mat-badge-text-color: white;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}

.mat-badge-accent {
  --mat-badge-background-color: #ffab00;
  --mat-badge-text-color: rgba(0, 0, 0, 0.87);
}

.mat-badge-warn {
  --mat-badge-background-color: #f44336;
  --mat-badge-text-color: white;
}

html {
  --mat-badge-text-font: Roboto, sans-serif;
  --mat-badge-line-height: 22px;
  --mat-badge-text-size: 12px;
  --mat-badge-text-weight: 600;
  --mat-badge-small-size-text-size: 9px;
  --mat-badge-small-size-line-height: 16px;
  --mat-badge-large-size-text-size: 24px;
  --mat-badge-large-size-line-height: 28px;
}

html {
  --mat-bottom-sheet-container-shape: 4px;
}

html {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
}

html {
  --mat-bottom-sheet-container-text-font: Roboto, sans-serif;
  --mat-bottom-sheet-container-text-line-height: 20px;
  --mat-bottom-sheet-container-text-size: 14px;
  --mat-bottom-sheet-container-text-tracking: 0.0178571429em;
  --mat-bottom-sheet-container-text-weight: 400;
}

html {
  --mat-button-toggle-focus-state-layer-opacity: 0.12;
  --mat-button-toggle-hover-state-layer-opacity: 0.04;
  --mat-button-toggle-legacy-focus-state-layer-opacity: 1;
  --mat-button-toggle-legacy-height: 36px;
  --mat-button-toggle-legacy-shape: 2px;
  --mat-button-toggle-shape: 4px;
}

html {
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
}

html {
  --mat-button-toggle-height: 48px;
}

html {
  --mat-button-toggle-label-text-font: Roboto, sans-serif;
  --mat-button-toggle-label-text-line-height: 24px;
  --mat-button-toggle-label-text-size: 16px;
  --mat-button-toggle-label-text-tracking: 0.03125em;
  --mat-button-toggle-label-text-weight: 400;
  --mat-button-toggle-legacy-label-text-font: Roboto, sans-serif;
  --mat-button-toggle-legacy-label-text-line-height: 24px;
  --mat-button-toggle-legacy-label-text-size: 16px;
  --mat-button-toggle-legacy-label-text-tracking: 0.03125em;
  --mat-button-toggle-legacy-label-text-weight: 400;
}

html {
  --mat-datepicker-calendar-container-shape: 4px;
  --mat-datepicker-calendar-container-touch-shape: 4px;
  --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

html {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #311b92 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #ffab00 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #311b92;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #311b92 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #311b92 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #311b92 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #311b92;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}

.mat-datepicker-content.mat-accent, .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ffab00 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #ffab00 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-selected-state-background-color: #ffab00;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ffab00 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ffab00 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ffab00 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ffab00;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.mat-datepicker-content.mat-warn, .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f44336 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #ffab00 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #f44336;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f44336 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f44336 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f44336 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f44336;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}

.mat-calendar-controls {
  --mat-icon-button-touch-target-display: none;
}
.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  --mat-icon-button-state-layer-size: 40px;
  width: var(--mat-icon-button-state-layer-size);
  height: var(--mat-icon-button-state-layer-size);
  padding: 8px;
}

html {
  --mat-datepicker-calendar-text-font: Roboto, sans-serif;
  --mat-datepicker-calendar-text-size: 13px;
  --mat-datepicker-calendar-body-label-text-size: 14px;
  --mat-datepicker-calendar-body-label-text-weight: 500;
  --mat-datepicker-calendar-period-button-text-size: 14px;
  --mat-datepicker-calendar-period-button-text-weight: 500;
  --mat-datepicker-calendar-header-text-size: 11px;
  --mat-datepicker-calendar-header-text-weight: 400;
}

html {
  --mat-divider-width: 1px;
}

html {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
}

html {
  --mat-expansion-container-shape: 4px;
  --mat-expansion-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-expansion-legacy-header-indicator-display: inline-block;
  --mat-expansion-header-indicator-display: none;
}

html {
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
}

html {
  --mat-expansion-header-collapsed-state-height: 48px;
  --mat-expansion-header-expanded-state-height: 64px;
}

html {
  --mat-expansion-header-text-font: Roboto, sans-serif;
  --mat-expansion-header-text-size: 14px;
  --mat-expansion-header-text-weight: 500;
  --mat-expansion-header-text-line-height: inherit;
  --mat-expansion-header-text-tracking: inherit;
  --mat-expansion-container-text-font: Roboto, sans-serif;
  --mat-expansion-container-text-line-height: 20px;
  --mat-expansion-container-text-size: 14px;
  --mat-expansion-container-text-tracking: 0.0178571429em;
  --mat-expansion-container-text-weight: 400;
}

html {
  --mat-grid-list-tile-header-primary-text-size: 14px;
  --mat-grid-list-tile-header-secondary-text-size: 12px;
  --mat-grid-list-tile-footer-primary-text-size: 14px;
  --mat-grid-list-tile-footer-secondary-text-size: 12px;
}

html {
  --mat-icon-color: inherit;
}

.mat-icon.mat-primary {
  --mat-icon-color: #311b92;
}
.mat-icon.mat-accent {
  --mat-icon-color: #ffab00;
}
.mat-icon.mat-warn {
  --mat-icon-color: #f44336;
}

html {
  --mat-sidenav-container-shape: 0;
  --mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-width: auto;
}

html {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
}

html {
  --mat-stepper-header-focus-state-layer-shape: 0;
  --mat-stepper-header-hover-state-layer-shape: 0;
}

html {
  --mat-stepper-header-icon-foreground-color: white;
  --mat-stepper-header-selected-state-icon-background-color: #311b92;
  --mat-stepper-header-selected-state-icon-foreground-color: white;
  --mat-stepper-header-done-state-icon-background-color: #311b92;
  --mat-stepper-header-done-state-icon-foreground-color: white;
  --mat-stepper-header-edit-state-icon-background-color: #311b92;
  --mat-stepper-header-edit-state-icon-foreground-color: white;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #f44336;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #f44336;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}

.mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-selected-state-icon-background-color: #ffab00;
  --mat-stepper-header-selected-state-icon-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-done-state-icon-background-color: #ffab00;
  --mat-stepper-header-done-state-icon-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-edit-state-icon-background-color: #ffab00;
  --mat-stepper-header-edit-state-icon-foreground-color: rgba(0, 0, 0, 0.87);
}

.mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: white;
  --mat-stepper-header-selected-state-icon-background-color: #f44336;
  --mat-stepper-header-selected-state-icon-foreground-color: white;
  --mat-stepper-header-done-state-icon-background-color: #f44336;
  --mat-stepper-header-done-state-icon-foreground-color: white;
  --mat-stepper-header-edit-state-icon-background-color: #f44336;
  --mat-stepper-header-edit-state-icon-foreground-color: white;
}

html {
  --mat-stepper-header-height: 72px;
}

html {
  --mat-stepper-container-text-font: Roboto, sans-serif;
  --mat-stepper-header-label-text-font: Roboto, sans-serif;
  --mat-stepper-header-label-text-size: 14px;
  --mat-stepper-header-label-text-weight: 400;
  --mat-stepper-header-error-state-label-text-size: 16px;
  --mat-stepper-header-selected-state-label-text-size: 16px;
  --mat-stepper-header-selected-state-label-text-weight: 400;
}

html {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
}

html {
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}

.mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #311b92;
  --mat-toolbar-container-text-color: white;
}
.mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #ffab00;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #f44336;
  --mat-toolbar-container-text-color: white;
}

html {
  --mat-toolbar-standard-height: 64px;
  --mat-toolbar-mobile-height: 56px;
}

html {
  --mat-toolbar-title-text-font: Roboto, sans-serif;
  --mat-toolbar-title-text-line-height: 32px;
  --mat-toolbar-title-text-size: 20px;
  --mat-toolbar-title-text-tracking: 0.0125em;
  --mat-toolbar-title-text-weight: 500;
}

html {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
}

html {
  --mat-tree-node-min-height: 48px;
}

html {
  --mat-tree-node-text-font: Roboto, sans-serif;
  --mat-tree-node-text-size: 14px;
  --mat-tree-node-text-weight: 400;
}

html {
  --mat-timepicker-container-shape: 4px;
  --mat-timepicker-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

html {
  --mat-timepicker-container-background-color: white;
}

/*
 * Modal scroll-lock: PrimeNG sets padding-right: var(--scrollbar-width) (often ~0 on overlay scrollbars).
 * index.html caches real gutter in --eshipjet-scrollbar-gutter-cache; we prefer it for padding.
 */
body {
  font-family: AvenirNextCyr !important;
  overflow-x: hidden !important;
}

@font-face {
  font-family: "AvenirNextCyr";
  src: local("AvenirNextCyr"), url('media/AvenirNextCyr-Regular.d2b8db96a78d2204.woff') format("woff");
}
/* Private font family for the Recent Shipments popup ONLY.
 *
 * The app-wide family 'AvenirNextCyr' declares a SINGLE 400 face, so every
 * font-weight:600/700 in the product renders as synthetic (browser-faked)
 * bold. That is long-standing app-wide behaviour and is deliberately left
 * alone: adding real Demi/Bold faces to 'AvenirNextCyr' instantly restyles
 * every bold string in the app — tabs, grid headers, buttons — which is not
 * wanted.
 *
 * @font-face cannot be scoped to a component, so the only way to contain the
 * blast radius is to declare the real faces under a SEPARATE family name.
 * They stay inert until something explicitly opts in. The sole opt-in is
 * dashboard-header.component.scss, scoped to .recent-shipments-overlay.
 *
 * Note Demi is this family's SEMIBOLD (~600), not its bold — the family ships
 * Thin/UltraLight/Light/Regular/Medium/Demi/Bold/Heavy. Mapping Demi to 700
 * makes bold text render lighter than synthetic bold, so Demi sits at 600 and
 * the true Bold at 700.
 *
 * If this popup is ever restyled away from these faces, delete these four
 * blocks — nothing else references the family.
 */
@font-face {
  font-family: "RecentShipAvenir";
  src: url('media/AvenirNextCyr-Regular.0a6de87e078249ef.woff2') format("woff2"), url('media/AvenirNextCyr-Regular.d2b8db96a78d2204.woff') format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RecentShipAvenir";
  src: url('media/AvenirNextCyr-Medium.539413029c00ae50.woff2') format("woff2"), url('media/AvenirNextCyr-Medium.9c2b407374ad694e.woff') format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RecentShipAvenir";
  src: url('media/AvenirNextCyr-Demi.fca430a7208d0aec.woff2') format("woff2"), url('media/AvenirNextCyr-Demi.21fcabf7864b3803.woff') format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RecentShipAvenir";
  src: url('media/AvenirNextCyr-Bold.81e7cc8950e1cfe6.woff2') format("woff2"), url('media/AvenirNextCyr-Bold.05ad1dceaed07cb9.woff') format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AvenirNextCyrMedium";
  src: local("AvenirNextCyrMedium"), url('media/AvenirNextCyr-Medium.9c2b407374ad694e.woff') format("woff");
}
:root {
  --eshipjet-ui-font: AvenirNextCyr, sans-serif;
  --eshipjet-mono-font: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --eshipjet-brand-deep: #687083;
  --eshipjet-brand-navy: #687083;
  --eshipjet-brand-soft: #f7f3ed;
  --eshipjet-accent-gold: #c69455;
  --eshipjet-page-bg-top: #ffffff;
  --eshipjet-page-bg-mid: #f7f3ed;
  --eshipjet-focus-ring: rgba(198, 148, 85, 0.22);
  --eshipjet-input-radius: 3px;
}

.layout-wrapper .layout-main {
  background: radial-gradient(900px 280px at 0% 0%, rgba(31, 79, 138, 0.08), transparent 55%), radial-gradient(800px 260px at 100% 0%, rgba(64, 126, 204, 0.07), transparent 52%), linear-gradient(180deg, var(--eshipjet-page-bg-top) 0%, var(--eshipjet-page-bg-mid) 55%, #e8eef8 100%);
}

input:focus {
  border-color: var(--eshipjet-brand-navy) !important;
  box-shadow: 0 0 0 2px var(--eshipjet-focus-ring) !important;
}

::ng-deep body {
  overflow-x: hidden !important;
}

body.p-overflow-hidden {
  overflow: hidden !important;
  overscroll-behavior: none;
  /* Prefer cached gutter (see index.html); fall back to Prime’s inline --scrollbar-width */
  padding-right: max(var(--eshipjet-scrollbar-gutter-cache, 0px), var(--scrollbar-width, 0px)) !important;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/* custom scrollbar for Fuzion theme */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: #eef0f4; /* light version of Fuzion theme */
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb {
  background-color: var(--eshipjet-brand-deep); /* Fuzion theme color */
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

html,
body {
  scrollbar-color: var(--eshipjet-brand-deep) #eef0f4;
}

.scroller {
  --scrollbar-color-thumb: var(--eshipjet-brand-deep) !important; /* thumb color */
  --scrollbar-color-track: #eef0f4 !important; /* light background */
  --scrollbar-width: thin;
  --scrollbar-width-legacy: 15px;
}

/* For Firefox */
html, body {
  height: 100%;
}

html:has(body.public-tracking-page),
body.public-tracking-page {
  height: auto;
  min-height: 100%;
  overflow-y: auto !important;
}

body.public-tracking-page .app-container {
  height: auto !important;
  min-height: 100dvh;
  overflow-y: visible !important;
}

:host ::ng-deep .p-inputtext {
  height: 27px !important;
  width: 100% !important;
}

/* Shared alert dialog theme (global, because dialog is appended to body) */
.p-dialog.shared-alert-dialog .p-dialog-header {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #1f1646 !important;
  background-color: #1f1646 !important;
  background-image: none !important;
}

.p-dialog.shared-alert-dialog .p-dialog-title,
.p-dialog.shared-alert-dialog .p-dialog-title > * {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}

.p-dialog.shared-alert-dialog .p-dialog-header-icons,
.p-dialog.shared-alert-dialog .p-dialog-header-icon {
  display: none !important;
}

.p-dialog.shared-alert-dialog .p-dialog-footer {
  border-top: 1px solid #d9e2ef !important;
}

.compass-config-dialog,
.compass-mock-dialog {
  border-radius: 8px !important;
  overflow: hidden !important;
}

.compass-config-dialog .p-dialog-header,
.compass-mock-dialog .p-dialog-header {
  position: relative !important;
  min-height: 52px !important;
  padding: 0 58px 0 22px !important;
  border-bottom: 1px solid #e0e6ef !important;
  background: #f8fafc !important;
}

.compass-config-dialog .p-dialog-title,
.compass-mock-dialog .p-dialog-title {
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  color: #263a59 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.compass-config-dialog .p-dialog-header-icons,
.compass-mock-dialog .p-dialog-header-icons {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 56px !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  margin: 0 !important;
  border-left: 1px solid #d7e0ed !important;
  background: #ffffff !important;
}

.compass-config-dialog .p-dialog-header-close,
.compass-config-dialog .p-dialog-header-icon,
.compass-mock-dialog .p-dialog-header-close,
.compass-mock-dialog .p-dialog-header-icon {
  width: 56px !important;
  height: 52px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #030e4c !important;
  box-shadow: none !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

.compass-config-dialog .p-dialog-header-close .p-dialog-header-close-icon,
.compass-config-dialog .p-dialog-header-icon .p-dialog-header-close-icon,
.compass-config-dialog .p-dialog-header-close .p-icon,
.compass-config-dialog .p-dialog-header-icon .p-icon,
.compass-config-dialog .p-dialog-header-close .pi,
.compass-config-dialog .p-dialog-header-icon .pi,
.compass-config-dialog .p-dialog-header-close svg,
.compass-config-dialog .p-dialog-header-icon svg,
.compass-mock-dialog .p-dialog-header-close .p-dialog-header-close-icon,
.compass-mock-dialog .p-dialog-header-icon .p-dialog-header-close-icon,
.compass-mock-dialog .p-dialog-header-close .p-icon,
.compass-mock-dialog .p-dialog-header-icon .p-icon,
.compass-mock-dialog .p-dialog-header-close .pi,
.compass-mock-dialog .p-dialog-header-icon .pi,
.compass-mock-dialog .p-dialog-header-close svg,
.compass-mock-dialog .p-dialog-header-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: currentColor !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  stroke-width: 2.4 !important;
}

.compass-config-dialog .p-dialog-header-close .p-dialog-header-close-icon,
.compass-config-dialog .p-dialog-header-icon .p-dialog-header-close-icon,
.compass-config-dialog .p-dialog-header-close .p-icon,
.compass-config-dialog .p-dialog-header-icon .p-icon,
.compass-config-dialog .p-dialog-header-close .pi,
.compass-config-dialog .p-dialog-header-icon .pi,
.compass-mock-dialog .p-dialog-header-close .p-dialog-header-close-icon,
.compass-mock-dialog .p-dialog-header-icon .p-dialog-header-close-icon,
.compass-mock-dialog .p-dialog-header-close .p-icon,
.compass-mock-dialog .p-dialog-header-icon .p-icon,
.compass-mock-dialog .p-dialog-header-close .pi,
.compass-mock-dialog .p-dialog-header-icon .pi {
  display: none !important;
}

.compass-config-dialog .p-dialog-header-close::before,
.compass-config-dialog .p-dialog-header-icon::before,
.compass-mock-dialog .p-dialog-header-close::before,
.compass-mock-dialog .p-dialog-header-icon::before {
  content: "×";
  color: currentColor;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.compass-config-dialog .p-dialog-header-close:hover,
.compass-config-dialog .p-dialog-header-icon:hover,
.compass-config-dialog .p-dialog-header-close:enabled:hover,
.compass-mock-dialog .p-dialog-header-close:hover,
.compass-mock-dialog .p-dialog-header-icon:hover,
.compass-mock-dialog .p-dialog-header-close:enabled:hover {
  background-color: #da4345 !important;
  color: #ffffff !important;
}

.compass-config-dialog .p-dialog-header-icons:hover,
.compass-mock-dialog .p-dialog-header-icons:hover {
  border-left-color: #c9362c !important;
  background-color: #da4345 !important;
}

.compass-config-dialog .p-dialog-header-icons:hover .p-dialog-header-close,
.compass-config-dialog .p-dialog-header-icons:hover .p-dialog-header-icon,
.compass-mock-dialog .p-dialog-header-icons:hover .p-dialog-header-close,
.compass-mock-dialog .p-dialog-header-icons:hover .p-dialog-header-icon {
  background-color: #da4345 !important;
  color: #ffffff !important;
}

.compass-config-dialog .p-dialog-footer {
  padding: 0 !important;
  border-top: 1px solid #e0e6ef !important;
  background: #f8fafc !important;
}

.compass-config-dialog .config-dialog-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 62px !important;
  padding: 12px 22px !important;
  background: #f8fafc !important;
}

.compass-config-dialog .config-dialog-footer .btnCancel {
  border-color: #da4345 !important;
  background: #da4345 !important;
  color: #ffffff !important;
}

.compass-config-dialog .config-dialog-footer .btnCancel:hover {
  border-color: #c9362c !important;
  background: #c9362c !important;
  color: #ffffff !important;
}

.compass-config-dialog .config-dialog-footer .btnSave {
  margin-left: auto !important;
}

.p-dropdown:not(.p-disabled).p-focus {
  border-color: #2ca01c !important;
  box-shadow: none !important;
}

/*
 * PrimeNG 19 keeps p-dropdown as a compatibility host, but renders the inner
 * label, trigger, and panel with p-select class names. Mirror only the renamed
 * inner classes so existing component-level p-dropdown root layout still wins.
 */
.p-dropdown .p-select-label {
  display: block;
  flex: 1 1 auto;
  width: 1%;
  padding: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: 0 none;
  outline: 0 none;
}

.p-dropdown .p-select-label.p-placeholder {
  color: #767676;
}

.p-dropdown .p-select-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.357rem;
  background: transparent;
}

.attachment-dropdown.p-dropdown .p-select-label,
.attachment-dropdown .p-dropdown .p-select-label {
  color: #767676 !important;
  font-weight: 800 !important;
  padding: 7px 7px 7px 30px !important;
}

.deliveryOrderCss.p-dropdown .p-select-label,
.deliveryOrderCss .p-dropdown .p-select-label {
  color: #17427a !important;
  display: flex !important;
  font-weight: 700 !important;
  padding: 7px !important;
}

.custom-spot-dropdown.p-dropdown .p-select-label,
.custom-spot-dropdown .p-dropdown .p-select-label {
  color: #767676 !important;
  display: flex !important;
  font-weight: 600 !important;
  padding: 7px 31.5px 7px 4.9px !important;
}

.custom-spot-dropdown.p-dropdown .p-select-dropdown,
.custom-spot-dropdown .p-dropdown .p-select-dropdown {
  color: #355f93 !important;
  width: 30px !important;
}

.pkg-material-dropdown.p-dropdown .p-select-label,
.pkg-material-dropdown .p-dropdown .p-select-label {
  color: #5f676e !important;
  font-weight: 400 !important;
  padding: 7px !important;
}

.pkg-material-dropdown.p-dropdown .p-select-dropdown,
.pkg-material-dropdown .p-dropdown .p-select-dropdown {
  color: #030e4c !important;
  width: 33px !important;
}

.p-dropdown.p-focus,
.p-dropdown:not(.p-disabled):hover {
  border-color: #2ca01c !important;
  box-shadow: none !important;
}

.p-select-overlay {
  min-width: 100% !important;
  width: 100% !important;
  border: 1px solid #1f1646 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #495057 !important;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !important;
}

.p-select-header {
  padding: 0.5rem 1rem !important;
  border-bottom: 1px solid #dee2e6 !important;
  background: #ffffff !important;
}

.p-select-filter {
  width: 100% !important;
  font-weight: bold !important;
  font-size: 16px !important;
  color: #000000 !important;
}

.p-select-list {
  padding: 0.5rem 0 !important;
  margin: 0 !important;
  list-style-type: none !important;
}

.p-select-option {
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  color: #495057 !important;
  background: transparent !important;
  border: 0 none !important;
  cursor: pointer !important;
  font-weight: normal !important;
  white-space: nowrap !important;
}

.p-select-option.p-select-option-selected,
.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus,
.p-select-option:not(.p-select-option-selected):not(.p-disabled):hover {
  color: #030e4c !important;
  background: #edf4fc !important;
}

/* ──────────────────────────────────────────────────────────────
   Global dropdown / multiselect panel sizing + polish
   PrimeNG writes max-height INLINE on the list container from its
   `scrollHeight` input (default 200px), which clips a 5-6 item list
   mid-row and shows a scrollbar for no reason. Only !important beats
   an inline style, hence the overrides below.
   ────────────────────────────────────────────────────────────── */
.p-select-list-container,
.p-multiselect-list-container,
.p-dropdown-items-wrapper,
.p-multiselect-items-wrapper {
  /* Roomy enough for a typical filter list, still capped so a long
     list can never run past a short viewport. */
  max-height: min(340px, 60vh) !important;
  scrollbar-width: thin;
  scrollbar-color: #c2ccd9 transparent;
}

.p-select-list-container::-webkit-scrollbar,
.p-multiselect-list-container::-webkit-scrollbar,
.p-dropdown-items-wrapper::-webkit-scrollbar,
.p-multiselect-items-wrapper::-webkit-scrollbar {
  width: 8px;
}

.p-select-list-container::-webkit-scrollbar-thumb,
.p-multiselect-list-container::-webkit-scrollbar-thumb,
.p-dropdown-items-wrapper::-webkit-scrollbar-thumb,
.p-multiselect-items-wrapper::-webkit-scrollbar-thumb {
  background: #c2ccd9;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.p-select-list-container::-webkit-scrollbar-thumb:hover,
.p-multiselect-list-container::-webkit-scrollbar-thumb:hover,
.p-dropdown-items-wrapper::-webkit-scrollbar-thumb:hover,
.p-multiselect-items-wrapper::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  background-clip: content-box;
}

.p-select-list-container::-webkit-scrollbar-track,
.p-multiselect-list-container::-webkit-scrollbar-track,
.p-dropdown-items-wrapper::-webkit-scrollbar-track,
.p-multiselect-items-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

/* Softer panel: the 4px radius + hard triple shadow read as a 2015 menu. */
.p-select-overlay,
.p-multiselect-overlay {
  border-radius: 10px !important;
  border-color: #c2ccd9 !important;
  overflow: hidden !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

/* Options carried no size rule of their own, so they inherited body's 14px
   while the closed control sits at 15px. Use the Inter token (NOT the legacy
   AvenirNextCyr* stack — see the blanket override further down this file,
   those families are dead and never load). */
.p-select-option,
.p-select-option-label,
.p-multiselect-option,
.p-multiselect-option-label,
.p-dropdown-item,
.p-dropdown-item span {
  font-family: var(--eshipjet-ui-font) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.005em !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Selected row gets a brand rail so it stays identifiable while a
   neighbouring row is hovered. No extra weight — the row already has a
   filled background, and bolding it on top reads as shouting. */
.p-select-option.p-select-option-selected,
.p-multiselect-option.p-multiselect-option-selected {
  box-shadow: inset 3px 0 0 0 #030e4c;
}

.p-datatable .p-datatable-tbody > tr:hover {
  background-color: #f1f1f1 !important; /* Light gray background for hover */
  cursor: pointer !important; /* Change cursor to pointer */
}

.p-datatable .p-datatable-tbody > tr {
  transition: background-color 0.3s; /* Smooth transition for hover effect */
}

polygon {
  transform: translateY(0);
  position: relative;
  transition: transform 0.3s, fill 0.3s, fill-opacity 0.3s, stroke-opacity 0.3s;
}

/* ------------------------------------------------------------------ *
 * PrimeNG 19 global drawer surface (Sidebar -> Drawer migration)
 * The old Sidebar theme painted a white surface on the panel + its
 * header/content/footer. PrimeNG 19's Drawer ships no such surface here
 * (this app configures no PrimeNG theme), so drawers whose SCSS didn't set
 * a background render transparent after the upgrade (e.g. the profile
 * drawer's scroll area). Give every drawer a default white surface, keyed
 * on the native `.p-drawer-*` classes so it applies with or without the
 * legacy class-bridge. No `!important`, so drawers that opt into a custom
 * or transparent surface (e.g. `.freight-quote-sidebar`) still win.
 * ------------------------------------------------------------------ */
.p-drawer {
  background: #ffffff;
}

.p-drawer > .p-drawer-header,
.p-drawer > .p-drawer-content,
.p-drawer > .p-drawer-footer {
  background: #ffffff;
}

/* ------------------------------------------------------------------ *
 * PrimeNG 19 global input padding
 * `.p-inputtext` lost its themed padding in the upgrade, so field values
 * sit flush against the left border everywhere. Restore comfortable
 * horizontal padding. No `!important`, so inputs with their own padding win.
 * ------------------------------------------------------------------ */
.p-inputtext {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* ------------------------------------------------------------------ *
 * Global close-button behaviour
 * Close icons must NOT spin on hover; they fill red and the icon turns
 * white instead (matches the profile drawer). `!important` overrides the
 * per-component `transform: rotate(90deg)` hover rules across the app.
 * ------------------------------------------------------------------ */
.close-icon-container:hover {
  transform: none !important;
  background-color: #DA4345 !important;
}

.close-icon-container:hover .close-icon-tag {
  filter: brightness(0) invert(1) !important;
}

/* ------------------------------------------------------------------ *
 * Global checkbox restyle (PrimeNG 19: p-checkbox -> box + icon)
 * Clean, modern checkboxes app-wide: soft rounded box, brand-green fill
 * when checked, white tick, hover feedback, and a clear focus ring.
 * `!important` so this wins over the leftover per-panel checkbox rules.
 * ------------------------------------------------------------------ */
body .p-checkbox {
  width: 20px;
  height: 20px;
}

body .p-checkbox .p-checkbox-box {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}

body .p-checkbox:not(.p-disabled):hover .p-checkbox-box {
  border-color: #16a34a !important;
  background: #f0fdf4 !important;
}

body .p-checkbox.p-checkbox-checked .p-checkbox-box {
  border-color: #16a34a !important;
  background: #16a34a !important;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.28) !important;
}

body .p-checkbox .p-checkbox-icon,
body .p-checkbox .p-checkbox-icon svg,
body .p-checkbox .p-checkbox-icon path {
  width: 13px !important;
  height: 13px !important;
  font-size: 13px !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff;
}

body .p-checkbox .p-checkbox-input:focus-visible + .p-checkbox-box,
body .p-checkbox .p-checkbox-box.p-focus {
  outline: none !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2) !important;
}

body .p-checkbox.p-disabled {
  opacity: 0.6;
}

/* ===== Global sidebar / drawer overlay =====
   One consistent dimmed + softly-blurred backdrop behind every modal drawer,
   applied app-wide. More specific scoped masks (freight-quote, ship-now-tracking)
   still win where they add their own overrides. */
body .p-drawer-mask,
body .p-sidebar-mask,
body .p-drawer-mask,
body .p-sidebar-mask,
body .p-drawer-mask.p-overlay-mask,
body .p-sidebar-mask.p-overlay-mask,
body .p-component-overlay,
body .p-overlay-mask {
  background: rgba(15, 23, 42, 0.15) !important;
  background-color: rgba(15, 23, 42, 0.15) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 0.2s ease !important;
}

/* Carrier Catalog / Carrier Accounts dialogs — full-viewport dim including topbar.
   Toggled by body.carrier-*-dialog-open from setCarrierDialogBackdrop(). */
body.carrier-catalog-dialog-open::before,
body.carrier-account-dialog-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 11990;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

body .carrier-catalog-add-dialog.p-dialog,
body .carrier-account-add-dialog.p-dialog {
  z-index: 12000 !important;
}

/* Carrier Catalog / Carrier Accounts dialog mask (if modal mask is used elsewhere) */
body .carrier-catalog-dialog-mask.p-dialog-mask,
body .carrier-catalog-dialog-mask.p-overlay-mask,
body .carrier-catalog-dialog-mask.p-component-overlay,
body .p-dialog-mask:has(.carrier-catalog-add-dialog),
body .p-overlay-mask:has(.carrier-catalog-add-dialog),
body .p-dialog-mask:has(.carrier-account-add-dialog),
body .p-overlay-mask:has(.carrier-account-add-dialog) {
  background: rgba(0, 0, 0, 0.5) !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The drawer/sidebar mask animation reads `var(--maskbg)` (theme-blue.css
   sets it to rgba(0,0,0,0.4)); override the variable so the animated final
   state is the lighter mask too. */
:root,
body {
  --maskbg: rgba(15, 23, 42, 0.15) !important;
}

/* ===== Profile dropdown backdrop =====
   The topbar profile menu (Profile / Printers & Scale Config / Theme / Sign
   Out …) is a pure-CSS popup toggled by `.active-topmenuitem`; unlike the modal
   drawers it had no dimmed backdrop. Render one when the profile menu opens so
   it reads as a focused overlay, matching the drawer masks. The topbar is
   `position:fixed; z-index:997`, so a fixed layer at 996 sits UNDER the topbar
   (and its popup) but OVER the page content. `pointer-events:none` keeps the
   existing outside-click-to-close behaviour intact. Scoped to `.user-profile`
   so the masters/settings menus are unaffected. */
/* Hidden until the profile menu opens. Real element at the app-topbar template
   root (see app-top-bar.component.html) so position:fixed is viewport-relative
   and not trapped by the topbar's fadeInDown transform. */
body .profile-menu-backdrop {
  display: none;
}

body:has(.topbar-menu > li.user-profile.active-topmenuitem):not(:has(.p-drawer-mask)):not(:has(.p-sidebar-mask)) .profile-menu-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(15, 23, 42, 0.42);
  pointer-events: none;
  animation: profile-menu-backdrop-in 0.2s ease both;
}

/* `.layout-topbar` is `position:fixed` with a dynamic inline z-index
   (`[ngStyle]="{'z-index': zIndexValue}"`, driven by zIndexService) that can
   drop below the backdrop's 996 — which would trap the whole topbar, and the
   profile popup inside it, UNDER the dim (the popup itself looked greyed out).
   While the profile menu is open, pin the topbar to its documented default of
   999: above the backdrop (996) so only the page behind is dimmed, yet still
   below the PrimeNG appendTo="body" Language/Theme dropdown panels (~1000+) so
   their options keep rendering on top of the popup as before. The `!important`
   beats the inline ngStyle value (which carries no !important). */
body:has(.topbar-menu > li.user-profile.active-topmenuitem) .layout-topbar {
  z-index: 999 !important;
}

@keyframes profile-menu-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Freight quote sidebar: global styles (overlay-safe) */
.p-drawer-mask:has(.freight-quote-sidebar),
.p-sidebar-mask:has(.freight-quote-sidebar) {
  overflow: hidden !important;
}

/* Ship Now rate shop: header title/weight spacing (overlay-safe) */
.p-drawer.shipnow-rate-shop-sidebar .shipnow-rate-header-summary,
.p-sidebar.shipnow-rate-shop-sidebar .shipnow-rate-header-summary,
body .shipnow-rate-shop-sidebar .shipnow-rate-header-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 40px !important;
}

.p-drawer.shipnow-rate-shop-sidebar .shipnow-rate-header-title,
.p-sidebar.shipnow-rate-shop-sidebar .shipnow-rate-header-title,
body .shipnow-rate-shop-sidebar .shipnow-rate-header-title.label-dialog,
body .shipnow-rate-shop-sidebar .label-dialog.shipnow-rate-header-title {
  position: static !important;
  margin: 0 !important;
  margin-left: 0 !important;
  flex: 0 0 auto !important;
  text-align: left !important;
}

.p-drawer.shipnow-rate-shop-sidebar .shipnow-rate-header-weight,
.p-sidebar.shipnow-rate-shop-sidebar .shipnow-rate-header-weight,
body .shipnow-rate-shop-sidebar .shipnow-rate-header-weight {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 40px !important;
  min-height: 32px !important;
  padding: 5px 12px !important;
  border: 1px solid #bed8f5 !important;
  border-radius: 6px !important;
  background: #eef6ff !important;
  color: #285f9d !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.p-drawer.freight-quote-sidebar,
.p-sidebar.freight-quote-sidebar {
  width: min(920px, 100vw - 56px) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 56px) !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

.p-drawer.freight-quote-sidebar .p-drawer-content,
.p-sidebar.freight-quote-sidebar .p-sidebar-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
}

.p-drawer.freight-quote-sidebar .p-drawer-header,
.p-sidebar.freight-quote-sidebar .p-sidebar-header {
  padding: 0 !important;
  min-height: 64px !important;
}

.p-drawer.freight-quote-sidebar .siderbar-header-container,
.p-sidebar.freight-quote-sidebar .siderbar-header-container {
  grid-template-columns: minmax(220px, 1fr) minmax(260px, auto) 56px !important;
  min-height: 64px !important;
  padding: 10px 0 10px 20px !important;
  gap: 12px !important;
}

.p-drawer.freight-quote-sidebar .sidebar-main-title,
.p-sidebar.freight-quote-sidebar .sidebar-main-title {
  color: #1f3e66 !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
}

.p-drawer.freight-quote-sidebar .fq-sidebar-pickup-card,
.p-sidebar.freight-quote-sidebar .fq-sidebar-pickup-card {
  max-width: 560px !important;
  justify-self: end !important;
}

.p-drawer.freight-quote-sidebar .close-icon-container,
.p-sidebar.freight-quote-sidebar .close-icon-container {
  width: 56px !important;
  height: calc(100% + 5px) !important;
  margin: -5px 0 !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip {
  width: auto !important;
  margin: 12px 14px 0 !important;
  gap: 7px !important;
  overflow: visible !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card {
  min-height: 58px !important;
  padding: 6px 4px !important;
  border-radius: 8px !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .sidebar-kpi-label,
.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-label,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .sidebar-kpi-label,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-label {
  font-size: 12px !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .sidebar-kpi-value,
.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-value,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .sidebar-kpi-value,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-value {
  font-size: 24px !important;
}

.p-drawer.freight-quote-sidebar hr,
.p-sidebar.freight-quote-sidebar hr {
  margin: 8px 14px 0 !important;
}

.p-drawer.freight-quote-sidebar .sidebar-top-tabs.sidebar-view-tabs,
.p-sidebar.freight-quote-sidebar .sidebar-top-tabs.sidebar-view-tabs {
  margin: 8px 14px 0 !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body,
.p-sidebar.freight-quote-sidebar .sidebar-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 14px 14px !important;
  background: #f6f9fc !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body > div,
.p-drawer.freight-quote-sidebar .freight-status-panel,
.p-sidebar.freight-quote-sidebar .sidebar-body > div,
.p-sidebar.freight-quote-sidebar .freight-status-panel {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(31, 47, 70, 0.08) !important;
  overflow: hidden !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .centered-title,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .centered-title {
  grid-column: 1/-1 !important;
  margin: 0 0 6px !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.freight-quote-sidebar .sidebar-body .mode-tabs-flat {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  margin: 0 0 16px 0 !important;
  border: 1px solid #d9e2ef !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.freight-quote-sidebar .sidebar-body .mode-tabs-flat .mode-step {
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  background: #fff !important;
  border-bottom: 2px solid transparent !important;
}

.freight-quote-sidebar .sidebar-body .mode-tabs-flat .mode-step:first-child {
  border-right: 1px solid #d9e2ef !important;
}

.freight-quote-sidebar .sidebar-body .mode-tabs-flat .mode-step.active {
  border-bottom: 2px solid #1d6fd0 !important;
}

.freight-quote-sidebar .sidebar-body .mode-tabs-flat .mode-step-connector {
  display: none !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-kv-table {
  display: grid !important;
  row-gap: 10px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-kv-row {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  column-gap: 16px !important;
  align-items: start !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-kv-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  color: #60758f !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-kv-label i {
  width: 14px !important;
  min-width: 14px !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #4f6987 !important;
}

/* Freight quote sidebar view tabs (hard override to avoid legacy stepper bleed) */
.freight-quote-sidebar .sidebar-top-tabs.sidebar-view-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  margin: 12px 18px 0 18px !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid #d9e2ef !important;
  border-radius: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
}

.freight-quote-sidebar .sidebar-top-tabs.sidebar-view-tabs .mode-step {
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: #fff !important;
  color: #4b627d !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

.freight-quote-sidebar .sidebar-top-tabs.sidebar-view-tabs .mode-step:first-child {
  border-right: 1px solid #d9e2ef !important;
}

.freight-quote-sidebar .sidebar-top-tabs.sidebar-view-tabs .mode-step.active {
  background: #eaf3ff !important;
  color: #1f4f88 !important;
  border-bottom: 2px solid #1d6fd0 !important;
}

.freight-quote-sidebar .sidebar-top-tabs.sidebar-view-tabs .mode-step-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: inherit !important;
}

.freight-quote-sidebar .sidebar-top-tabs.sidebar-view-tabs .mode-step-number,
.freight-quote-sidebar .sidebar-top-tabs.sidebar-view-tabs .mode-step-connector {
  display: none !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-kv-label::after {
  content: ":" !important;
  margin-left: auto !important;
  color: #8aa0bb !important;
  font-weight: 700 !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-kv-value {
  display: block !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  color: #223e62 !important;
  word-break: break-word !important;
}

.freight-quote-sidebar .statistics {
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}

.freight-quote-sidebar hr {
  margin: 8px 0 10px !important;
}

.freight-quote-sidebar .sidebar-body {
  padding-top: 6px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .centered-title {
  margin: 2px 0 14px !important;
  text-align: center !important;
  color: #1b4f8a !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-card {
  border: 1px solid #d7e2f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(24, 52, 84, 0.07) !important;
  padding: 14px 16px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-header {
  margin-bottom: 10px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-name {
  color: #224a7a !important;
  font-weight: 800 !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-meta-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 4px 0 10px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-meta-chips .meta-chip-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 9px !important;
  border: 1px solid #d9e3f1 !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  color: #30547f !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-meta-chips .meta-chip-item i {
  font-size: 11px !important;
  color: #406996 !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-meta-chips .meta-label {
  font-weight: 600 !important;
  opacity: 0.9 !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-meta-chips .meta-value {
  font-weight: 700 !important;
  color: #22476f !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-meta-chips .response-chip {
  background: #f3fbff !important;
  border-color: #cde8f8 !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .carrier-meta-chips .price-chip {
  background: #f5fbf5 !important;
  border-color: #d4ecd4 !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .centered-title {
  margin: 0 0 12px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card {
  border: 1px solid #d6e2f0 !important;
  border-radius: 14px !important;
  padding: 14px 16px 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: 0 8px 20px rgba(19, 49, 82, 0.08) !important;
  margin-bottom: 14px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-card-head {
  margin-bottom: 10px !important;
  align-items: flex-start !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card .carrier-name {
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  color: #183f6f !important;
  font-weight: 800 !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 6px !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card .carrier-name::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 75% !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #2f7ed6 0%, #63a5ec 100%) !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card .quote-status {
  border-radius: 0 !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  align-self: start !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-card-body {
  padding-top: 10px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card .carrier-kv-table {
  row-gap: 8px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card .carrier-kv-row {
  grid-template-columns: 120px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  min-height: 28px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card .carrier-kv-label {
  font-size: 13px !important;
  color: #5f7590 !important;
  font-weight: 600 !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card .carrier-kv-value {
  font-size: 14px !important;
  color: #1f3f65 !important;
  font-weight: 700 !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-insight-row {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #e8eef6 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-insight-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  border: 1px solid transparent !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-insight-chip.waiting {
  color: #8a6a20 !important;
  background: #fff9ea !important;
  border-color: #f2e4b5 !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-insight-chip.ok {
  color: #1f6d45 !important;
  background: #eefaf3 !important;
  border-color: #cdebd8 !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-insight-chip.money {
  color: #195a3b !important;
  background: #edf9f0 !important;
  border-color: #c9e8d0 !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-card-foot {
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px dashed #dce6f2 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: baseline !important;
  gap: 8px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-foot-label {
  font-size: 12px !important;
  color: #6b8099 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-foot-time {
  font-size: 13px !important;
  color: #184a82 !important;
  font-weight: 700 !important;
}

.p-sidebar.freight-quote-sidebar .fq-sheet-pickup-confirmed,
.freight-quote-sidebar .fq-sheet-pickup-confirmed {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: calc(100% - 32px) !important;
  margin: 0 16px 12px !important;
  padding: 11px 13px !important;
  border: 1px solid #bfe8d1 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #f0fff7 0%, #e8f9f0 100%) !important;
  color: #14532d !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65) !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.p-sidebar.freight-quote-sidebar .fq-sheet-pickup-confirmed-icon,
.freight-quote-sidebar .fq-sheet-pickup-confirmed-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 8px !important;
  background: #d9fbe7 !important;
  color: #15803d !important;
}

.p-sidebar.freight-quote-sidebar .fq-sheet-pickup-confirmed-copy,
.freight-quote-sidebar .fq-sheet-pickup-confirmed-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  gap: 2px !important;
  text-align: left !important;
}

.p-sidebar.freight-quote-sidebar .fq-sheet-pickup-confirmed-label,
.freight-quote-sidebar .fq-sheet-pickup-confirmed-label {
  display: block !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.p-sidebar.freight-quote-sidebar .fq-sheet-pickup-confirmed-copy strong,
.freight-quote-sidebar .fq-sheet-pickup-confirmed-copy strong {
  display: block !important;
  color: #14532d !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.p-sidebar.freight-quote-sidebar .fq-sidebar-pickup-card.fq-sidebar-pickup-card--confirmed,
.freight-quote-sidebar .fq-sidebar-pickup-card.fq-sidebar-pickup-card--confirmed {
  border-color: #bfe8d1 !important;
  background: linear-gradient(180deg, #f0fff7 0%, #e8f9f0 100%) !important;
  color: #14532d !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 6px 16px rgba(21, 128, 61, 0.1) !important;
}

.p-sidebar.freight-quote-sidebar .fq-sidebar-pickup-card--confirmed .fq-sidebar-pickup-icon,
.freight-quote-sidebar .fq-sidebar-pickup-card--confirmed .fq-sidebar-pickup-icon {
  border-color: #b7f0cc !important;
  background: #d9fbe7 !important;
  color: #15803d !important;
}

.p-sidebar.freight-quote-sidebar .fq-sidebar-pickup-card--confirmed .fq-sidebar-pickup-label,
.freight-quote-sidebar .fq-sidebar-pickup-card--confirmed .fq-sidebar-pickup-label,
.p-sidebar.freight-quote-sidebar .fq-sidebar-pickup-card--confirmed .fq-sidebar-pickup-value,
.freight-quote-sidebar .fq-sidebar-pickup-card--confirmed .fq-sidebar-pickup-value {
  color: #14532d !important;
}

.p-sidebar.freight-quote-sidebar .fq-sidebar-pickup-confirmed-badge,
.freight-quote-sidebar .fq-sidebar-pickup-confirmed-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 7px !important;
  border: 1px solid #b7f0cc !important;
  border-radius: 999px !important;
  background: #d9fbe7 !important;
  color: #15803d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.p-sidebar.freight-quote-sidebar .fq-sidebar-pickup-confirmed-badge .pi,
.freight-quote-sidebar .fq-sidebar-pickup-confirmed-badge .pi {
  font-size: 10px !important;
}

/* Freight timeline polish */
.freight-quote-sidebar .freight-history-container {
  padding: 6px 4px 2px !important;
}

.freight-quote-sidebar .freight-history-header {
  margin-bottom: 12px !important;
}

.freight-quote-sidebar .freight-history-header h4 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1d4f89 !important;
}

.freight-quote-sidebar .freight-history-timeline {
  max-height: 62vh !important;
  overflow: auto !important;
  padding-right: 4px !important;
}

.freight-quote-sidebar .timeline-stepper-row {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.freight-quote-sidebar .stepper-rail {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-top: 2px !important;
}

.freight-quote-sidebar .stepper-node {
  width: 16px !important;
  height: 16px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
}

.freight-quote-sidebar .stepper-line {
  width: 2px !important;
  flex: 1 !important;
  margin-top: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #9dbce0 0%, #d8e6f6 100%) !important;
}

.freight-quote-sidebar .stepper-card {
  border: 1px solid #d9e5f2 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: 0 4px 12px rgba(26, 56, 88, 0.08) !important;
  padding: 10px 12px !important;
}

.freight-quote-sidebar .timeline-topline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

.freight-quote-sidebar .event-badge {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

.freight-quote-sidebar .time-chip {
  margin-left: auto !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #526b87 !important;
  background: #f2f7fd !important;
  border: 1px solid #d8e4f1 !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.freight-quote-sidebar .time-chip .time-date {
  color: #1f5f9a !important;
  font-weight: 800 !important;
}

.freight-quote-sidebar .time-chip .time-sep {
  color: #9ab1c9 !important;
  font-weight: 700 !important;
}

.freight-quote-sidebar .time-chip .time-clock {
  color: #6d7f95 !important;
  font-weight: 700 !important;
}

.freight-quote-sidebar .carrier-band {
  margin: 0 0 8px 0 !important;
}

.freight-quote-sidebar .carrier-chip {
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}

.freight-quote-sidebar .timeline-meta-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.freight-quote-sidebar .meta-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #3e5877 !important;
  background: #f7fafe !important;
  border: 1px solid #dbe7f4 !important;
  border-radius: 999px !important;
  padding: 4px 9px !important;
}

.freight-quote-sidebar .timeline-footer-grid {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed #dce7f3 !important;
}

.freight-quote-sidebar .footer-meta-item {
  min-width: 0 !important;
  background: #f7fbff !important;
  border: 1px solid #dbe7f4 !important;
  border-radius: 10px !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.freight-quote-sidebar .footer-meta-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #6b7f97 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.freight-quote-sidebar .footer-meta-label i {
  color: #58779b !important;
  font-size: 11px !important;
}

.freight-quote-sidebar .footer-meta-value {
  color: #1e436c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 1200px) {
  .freight-quote-sidebar .timeline-meta-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Simplified readable timeline footer */
.freight-quote-sidebar .timeline-footer-list {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed #dce7f3 !important;
  display: grid !important;
  gap: 6px !important;
}

.freight-quote-sidebar .timeline-footer-list .footer-meta-row {
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  min-height: 24px !important;
}

.freight-quote-sidebar .timeline-footer-list .footer-meta-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #6a7f99 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.freight-quote-sidebar .timeline-footer-list .footer-meta-label i {
  color: #5a789c !important;
  font-size: 11px !important;
  width: 12px !important;
  text-align: center !important;
}

.freight-quote-sidebar .timeline-footer-list .footer-meta-value {
  color: #1f436d !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.freight-quote-sidebar .stepper-card {
  padding: 12px 14px !important;
}

.freight-quote-sidebar .timeline-topline {
  margin-bottom: 10px !important;
}

.freight-quote-sidebar .event-badge {
  padding: 5px 12px !important;
}

.freight-quote-sidebar .carrier-band {
  margin-bottom: 10px !important;
}

/* Timeline footer table view */
.freight-quote-sidebar .timeline-meta-table-wrap {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed #dce7f3 !important;
}

.freight-quote-sidebar .timeline-meta-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

.freight-quote-sidebar .timeline-meta-table tr + tr th,
.freight-quote-sidebar .timeline-meta-table tr + tr td {
  border-top: 1px solid #edf2f8 !important;
}

.freight-quote-sidebar .timeline-meta-table th,
.freight-quote-sidebar .timeline-meta-table td {
  padding: 7px 8px !important;
  vertical-align: middle !important;
}

.freight-quote-sidebar .timeline-meta-table th {
  width: 120px !important;
  color: #6b8099 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.freight-quote-sidebar .timeline-meta-table th i {
  margin-right: 6px !important;
  color: #5a789c !important;
  font-size: 11px !important;
}

.freight-quote-sidebar .timeline-meta-table td {
  color: #1f436d !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Timeline simple table view */
.freight-quote-sidebar .timeline-table-wrap {
  border: 1px solid #d8e4f2 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(24, 56, 90, 0.07) !important;
}

.freight-quote-sidebar .timeline-data-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

.freight-quote-sidebar .timeline-data-table thead th {
  background: #f0f6ff !important;
  color: #2f547b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  padding: 11px 10px !important;
  border-bottom: 1px solid #d8e4f2 !important;
  white-space: nowrap !important;
}

.freight-quote-sidebar .timeline-data-table tbody td {
  padding: 10px 10px !important;
  border-bottom: 1px solid #edf2f8 !important;
  color: #1f436d !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: left !important;
  vertical-align: middle !important;
}

.freight-quote-sidebar .timeline-data-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.freight-quote-sidebar .timeline-data-table tbody tr:nth-child(even) {
  background: #fbfdff !important;
}

.freight-quote-sidebar .timeline-data-table tbody tr:hover {
  background: #f4f9ff !important;
}

.freight-quote-sidebar .timeline-col-event,
.freight-quote-sidebar .timeline-col-carrier,
.freight-quote-sidebar .timeline-col-email {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
  word-break: break-word !important;
}

.freight-quote-sidebar .timeline-col-event {
  min-width: 180px !important;
  font-weight: 700 !important;
}

.freight-quote-sidebar .timeline-col-carrier {
  min-width: 160px !important;
  color: #245d93 !important;
  font-weight: 700 !important;
}

.freight-quote-sidebar .timeline-col-status {
  white-space: nowrap !important;
}

.freight-quote-sidebar .timeline-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: #edf6ff !important;
  color: #1f5e97 !important;
  border: 1px solid #cfe3f8 !important;
}

.freight-quote-sidebar .timeline-col-by {
  font-weight: 700 !important;
  color: #1b4c7f !important;
  white-space: nowrap !important;
  min-width: 90px !important;
}

.freight-quote-sidebar .timeline-col-email {
  min-width: 190px !important;
  color: #2a527b !important;
}

.freight-quote-sidebar .timeline-datetime-us-cell {
  color: #1f5f9a !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  min-width: 190px !important;
}

.freight-quote-sidebar .timeline-data-table .timeline-date-cell {
  color: #1f5f9a !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  min-width: 110px !important;
}

.freight-quote-sidebar .timeline-data-table .timeline-time-cell {
  color: #6d7f95 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  min-width: 110px !important;
}

@media (max-width: 1400px) {
  .freight-quote-sidebar .timeline-table-wrap {
    overflow-x: auto !important;
  }
  .freight-quote-sidebar .timeline-data-table {
    min-width: 980px !important;
  }
}
.svg-viewer th {
  text-transform: uppercase;
  text-align: left;
  color: #666;
  letter-spacing: 1px;
  font-size: 0.8rem;
  font-weight: normal;
}

.x-ray polygon {
  fill-opacity: 0.1;
  stroke-opacity: 0.2;
}

.x-ray polygon.active {
  fill-opacity: 1 !important;
  stroke-opacity: 1 !important;
}

/* Global filing modal state: hide fixed app chrome layers behind full-screen AES modal */
body.aes-filing-modal-open .layout-topbar,
body.aes-filing-modal-open .footer-Section {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

line.volume-line {
  stroke: #666;
  stroke-dasharray: 2, 1;
  stroke-width: 1;
}

polygon.volume-line {
  stroke: #666;
}

.svg-viewer ul.legend li {
  cursor: pointer;
}

.svg-viewer table {
  max-width: 100%;
}

figure {
  width: 400px;
}

polygon {
  transform: translateY(0);
  position: relative;
  transition: transform 0.3s, fill 0.3s, fill-opacity 0.3s, stroke-opacity 0.3s;
}

.svg-viewer th {
  text-transform: uppercase;
  text-align: left;
  color: #000000;
  letter-spacing: 1px;
  font-size: 0.8rem;
  font-weight: 600;
}

.x-ray polygon {
  fill-opacity: 0.1;
  stroke-opacity: 0.2;
}

.x-ray polygon.active {
  fill-opacity: 1 !important;
  stroke-opacity: 1 !important;
}

line.volume-line {
  stroke: #666;
  stroke-dasharray: 2, 1;
  stroke-width: 1;
}

polygon.volume-line {
  stroke: #666;
}

ul.legend li {
  cursor: pointer;
}

table {
  max-width: 100%;
}

figure {
  width: 400px;
}

.bg-blue-50 {
  background-color: var(--blue-50) !important;
}

.bg-blue-100 {
  background-color: var(--blue-100) !important;
}

.bg-blue-200 {
  background-color: var(--blue-200) !important;
}

.bg-blue-300 {
  background-color: var(--blue-300) !important;
}

.bg-blue-400 {
  background-color: var(--blue-400) !important;
}

.bg-blue-500 {
  background-color: var(--blue-500) !important;
}

.bg-blue-600 {
  background-color: var(--blue-600) !important;
}

.bg-blue-700 {
  background-color: var(--blue-700) !important;
}

.bg-blue-800 {
  background-color: var(--blue-800) !important;
}

.bg-blue-900 {
  background-color: var(--blue-900) !important;
}

.bg-green-50 {
  background-color: var(--green-50) !important;
}

.bg-green-100 {
  background-color: var(--green-100) !important;
}

.bg-green-200 {
  background-color: var(--green-200) !important;
}

.bg-green-300 {
  background-color: var(--green-300) !important;
}

.bg-red-50 {
  background-color: var(--red-50) !important;
}

.bg-red-100 {
  background-color: var(--red-100) !important;
}

.bg-red-200 {
  background-color: var(--red-200) !important;
}

.bg-red-300 {
  background-color: var(--red-300) !important;
}

.bg-red-400 {
  background-color: var(--red-400) !important;
}

.bg-yellow-50 {
  background-color: var(--yellow-50) !important;
}

.bg-yellow-100 {
  background-color: var(--yellow-100) !important;
}

.bg-yellow-200 {
  background-color: var(--yellow-200) !important;
}

.bg-yellow-300 {
  background-color: var(--yellow-300) !important;
}

.bg-yellow-400 {
  background-color: var(--yellow-400) !important;
}

polygon.shape-hidden {
  opacity: 0;
  fill-opacity: 0;
  stroke-opacity: 0;
  transform: translateY(-50%);
}

polygon {
  transform: translateY(0);
  position: relative;
  transition: transform 0.3s, fill 0.3s, fill-opacity 0.3s, stroke-opacity 0.3s;
}

.svg-viewer h3 {
  color: #b9b9b9;
  font-weight: normal;
}

.svg-viewer #btn-wrap {
  display: inline-block;
  text-align: center;
  width: 550px;
}

.svg-viewer button {
  padding: 5px 20px;
  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(37, 29, 68, 0.24);
  border-radius: 10px;
  font-size: 1.25rem;
  margin-left: 1.25rem;
  transition: 0.3s background-color;
  color: #251d44;
  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
  border-color: transparent;
  cursor: pointer;
}

.svg-viewer button:hover {
  background: #f9f8fa;
}

.fa-icon {
  width: 30px;
  cursor: pointer;
  padding: 4px !important;
  border-radius: 22px !important;
  display: inline-block !important;
}

.fa-icon:hover {
  background-color: #e9ecef;
  line-height: 1;
}

.fa-icon-white:hover {
  background-color: #ffffff;
  line-height: 1;
}

.input-label {
  color: #8d8d8d !important;
  font-size: 12px !important;
  font-weight: 400;
  line-height: 17.15px;
  text-align: left;
  font-family: AvenirNextCyrMedium !important;
}

.c-pointer {
  cursor: pointer;
}

body.swal2-shown:not(.swal2-no-backdrop, .swal2-toast-shown) {
  padding-right: 0px !important;
}

.swal2-container {
  z-index: 12050 !important;
}

.swal2-container:has(.carrier-swal-popup) {
  z-index: 140000 !important;
}

.p-toast {
  z-index: 12040 !important;
}

.p-dialog-mask.ship-now-product-details-mask {
  z-index: 70020 !important;
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: saturate(120%) blur(2px);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
}

.p-dialog-mask.ship-now-product-details-mask .product-details-dialog.p-dialog {
  z-index: 70030 !important;
  width: min(1120px, 100vw - 140px) !important;
  min-height: 430px !important;
  height: auto !important;
  max-height: calc(100vh - 180px) !important;
  overflow: hidden !important;
  border-radius: 6px !important;
}

.p-dialog-mask.ship-now-product-details-mask .product-details-dialog.p-dialog .p-dialog-content {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.p-dialog-mask.ship-now-product-details-mask .product-details-dialog.p-dialog app-dialog-table {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 14px 14px 16px !important;
  background: #ffffff !important;
}

.p-dialog-mask.ship-now-product-details-mask .product-details-dialog.p-dialog app-dialog-table > .table {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #e0e8f2 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.p-dialog-mask.ship-now-product-details-mask .product-details-dialog.p-dialog app-paginator {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  height: 66px !important;
  min-height: 66px !important;
  padding: 12px 14px 10px !important;
  margin: auto 0 0 !important;
  border-top: 1px solid #e4ebf4 !important;
  background: #ffffff !important;
}

body:has(.p-dialog-mask.ship-now-product-details-mask) footer.shipnow-footer,
body:has(.p-dialog-mask.ship-now-product-details-mask) .shipnow-footer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.p-sidebar-mask.ship-now-tracking-sidebar-mask {
  z-index: 12010 !important;
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: saturate(120%) blur(2px);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
}

body .ship-now-tracking-sidebar.p-sidebar {
  z-index: 12020 !important;
  width: min(860px, 52vw) !important;
  max-width: calc(100vw - 96px) !important;
  height: calc(100vh - 24px) !important;
  margin: 12px 12px 12px 0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.32) !important;
}

body .ship-now-tracking-sidebar .p-sidebar-content {
  height: 100% !important;
  padding: 0 !important;
  overflow: auto !important;
  background: #ffffff !important;
}

body .ship-now-share-manual-backdrop,
.ship-now-share-manual-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 69990 !important;
  background: rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: saturate(120%) blur(2px);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  pointer-events: none;
}

body .p-dialog-mask.share-dialog-mask,
body .p-dialog-mask.ship-now-share-dialog-mask,
body .p-component-overlay.share-dialog-mask,
body .p-component-overlay.ship-now-share-dialog-mask {
  z-index: 70000 !important;
  background: rgba(15, 23, 42, 0.48) !important;
}

body .p-dialog.share-dialog,
body .p-dialog.ship-now-share-dialog,
body .share-dialog.p-dialog,
body .ship-now-share-dialog.p-dialog,
body .p-dialog-mask.share-dialog-mask .p-dialog,
body .p-dialog-mask.ship-now-share-dialog-mask .p-dialog {
  z-index: 70010 !important;
  border: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.34) !important;
}

body .share-dialog .p-dialog-header {
  min-height: 54px !important;
  padding: 0 16px 0 20px !important;
  border-bottom: 1px solid #e6edf5 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

body .share-dialog .p-dialog-title {
  color: #26364b !important;
  font-family: AvenirNextCyrMedium, AvenirNextCyr, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body .share-dialog .p-dialog-header-close {
  width: 34px !important;
  height: 34px !important;
  color: #26364b !important;
  border-radius: 6px !important;
}

body .share-dialog .p-dialog-header-close:hover {
  background: #f3f6fb !important;
  color: #da4345 !important;
}

body .share-dialog .p-dialog-content {
  padding: 0 !important;
}

body .share-dialog .share-popup-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 22px 22px;
  background: #ffffff;
}

body .share-dialog .share-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  background: #f8fbff;
}

body .share-dialog .share-summary-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #1f4f93;
}

body .share-dialog .share-summary-label,
body .share-dialog .share-summary-value {
  margin: 0;
}

body .share-dialog .share-summary-label {
  color: #6a778b;
  font-size: 12px;
  line-height: 1.2;
}

body .share-dialog .share-summary-value {
  margin-top: 3px;
  color: #26364b;
  font-size: 15px;
  font-weight: 700;
}

body .share-dialog .popup-description {
  font-size: 14px;
  color: #6a778b;
  text-align: center;
  margin: 0;
}

body .share-dialog .input-group {
  display: flex;
  align-items: center;
  border: 1px solid #d5dfec;
  border-radius: 7px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body .share-dialog .share-link-row:focus-within {
  border-color: #2f67b0;
  box-shadow: 0 0 0 2px rgba(47, 103, 176, 0.14);
}

body .share-dialog .share-url {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: #26364b;
  text-overflow: ellipsis;
}

body .share-dialog .copy-btn {
  min-width: 88px;
  height: 40px;
  background: #2fac55;
  color: white;
  border: none;
  padding: 0 14px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 600;
}

body .share-dialog .copy-btn:hover {
  background: #238d43;
}

body .share-dialog .separator {
  display: flex;
  align-items: center;
  text-align: center;
  color: #8a96a8;
  font-size: 12px;
  position: relative;
  margin: 0;
}

body .share-dialog .separator::before,
body .share-dialog .separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d8e0eb;
  margin: 0 10px;
}

body .share-dialog .email-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d5dfec;
  border-radius: 7px;
  font-size: 14px;
  color: #26364b;
}

body .share-dialog .email-input:focus {
  border-color: #2f67b0;
  box-shadow: 0 0 0 2px rgba(47, 103, 176, 0.14);
  outline: none;
}

body .share-dialog .send-email-btn {
  min-width: 132px;
  height: 40px;
  background: #0b74de;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0 16px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: max-content;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(11, 116, 222, 0.18);
}

body .share-dialog .send-email-btn:hover {
  background: #075eb5;
}

body .share-dialog .send-email-btn:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  box-shadow: none;
}

@media (max-width: 1100px) {
  body .ship-now-tracking-sidebar.p-sidebar {
    width: min(760px, 100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin: 8px !important;
  }
}
/* styles.scss */
/* === Modal Card Styling === */
::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon .p-icon {
  height: 2.1rem !important;
  width: 2.1rem !important;
}

.swal2-popup {
  width: 775px !important;
  padding: 2rem 2.5rem;
  background: linear-gradient(145deg, #ffffff, #f0f2f5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  font-family: "Poppins", sans-serif;
  color: #2c3e50;
  animation: cardFadeUp 0.4s ease-out;
  position: relative;
  overflow: hidden;
}

/* === Title === */
.swal2-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: chocolate;
  margin-bottom: 0.4rem;
  letter-spacing: 0.3px;
  font-size: 40px !important;
  border-bottom: 2px dotted;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* === Text Content === */
.swal2-html-container {
  font-size: 30px;
  color: black;
  line-height: 1.6;
  margin-bottom: 1.4rem;
  font-weight: 700;
}

/* === Warning Icon === */
.swal2-icon.swal2-warning {
  border-color: transparent !important;
  color: #e67e22;
  font-size: 1.2rem;
  animation: subtlePulse 2s ease-in-out infinite;
  margin: 0 auto 1rem auto;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background: #fff6e5;
  box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.15);
}

/* === Confirm Button === */
.swal2-confirm {
  border: 2px solid #4ea732 !important;
  background-color: #fff !important;
  color: #4ea732 !important;
  width: 200px;
  transition: 0.4s;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 20px !important;
  padding: 10px !important;
}

.swal2-confirm:hover {
  background-color: #4ea732 !important;
  border: 2px solid #4ea732 !important;
  color: #fff !important;
}

/* Reschedule Acknowledged OK button: white label by default (SweetAlert appends to body). */
body .swal2-popup.fq-reschedule-success-popup .swal2-confirm.fq-reschedule-success-confirm,
body .swal2-confirm.fq-reschedule-success-confirm {
  border: 2px solid #16a34a !important;
  background: #16a34a !important;
  color: #ffffff !important;
}

body .swal2-popup.fq-reschedule-success-popup .swal2-confirm.fq-reschedule-success-confirm:hover,
body .swal2-popup.fq-reschedule-success-popup .swal2-confirm.fq-reschedule-success-confirm:focus,
body .swal2-popup.fq-reschedule-success-popup .swal2-confirm.fq-reschedule-success-confirm:focus-visible,
body .swal2-confirm.fq-reschedule-success-confirm:hover,
body .swal2-confirm.fq-reschedule-success-confirm:focus,
body .swal2-confirm.fq-reschedule-success-confirm:focus-visible {
  border-color: #15803d !important;
  background: #15803d !important;
  color: #ffffff !important;
}

.swal2-cancel {
  border: 2px solid #dc3545 !important;
  background-color: #fff5f5 !important;
  color: #dc3545 !important;
  width: 200px;
  transition: 0.4s;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 20px !important;
  padding: 10px !important;
}

.swal2-cancel:hover {
  background-color: #dc3545 !important;
  border: 2px solid #dc3545 !important;
  color: #fff !important;
}

.swal2-actions {
  justify-content: space-around !important;
  gap: 30px; /* Optional: additional spacing between buttons */
  padding: 0 1rem;
  width: 100%;
}

/* === Cancel / Modify freight quote toast ===
   Scoped to this toast only. Without these overrides it inherits the 775px modal
   width and the 40px dotted title above, so the message renders as a tall column
   of oversized text. */
body .swal2-popup.swal2-toast.fq-cancel-modify-toast {
  width: auto !important;
  min-width: 320px;
  max-width: 440px;
  padding: 14px 18px !important;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #16a34a;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

body .swal2-popup.swal2-toast.fq-cancel-modify-toast .swal2-title {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  color: #0f172a;
}

body .swal2-popup.swal2-toast.fq-cancel-modify-toast .swal2-html-container {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  color: #64748b;
}

body .swal2-popup.swal2-toast.fq-cancel-modify-toast .swal2-icon {
  width: 1.9em !important;
  height: 1.9em !important;
  min-width: 1.9em !important;
  margin: 0 12px 0 0 !important;
}

body .swal2-popup.swal2-toast.fq-cancel-modify-toast .swal2-timer-progress-bar {
  background: rgba(22, 163, 74, 0.45);
}

body .swal2-popup.swal2-toast.fq-cancel-modify-toast.swal2-icon-warning {
  border-left-color: #f59e0b;
}

body .swal2-popup.swal2-toast.fq-cancel-modify-toast.swal2-icon-warning .swal2-timer-progress-bar {
  background: rgba(245, 158, 11, 0.45);
}

.p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
  padding-right: 2.25rem !important;
  margin-right: 0 !important;
  font-weight: bold !important;
  font-size: 16px !important;
  color: black !important;
}

.p-dropdown-panel .p-dropdown-header .p-input-icon-left > i:first-of-type,
.p-dropdown-panel .p-dropdown-header .p-input-icon-left > .pi-search,
.p-select-overlay .p-select-header .p-input-icon-left > i:first-of-type,
.p-select-overlay .p-select-header .p-input-icon-left > .pi-search,
.p-multiselect-panel .p-multiselect-header .p-input-icon-left > i:first-of-type,
.p-multiselect-panel .p-multiselect-header .p-input-icon-left > .pi-search {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.p-dropdown-panel .p-dropdown-header i.pi-search,
.p-dropdown-panel .p-dropdown-header .pi.pi-search,
.p-dropdown-panel .p-dropdown-header .p-input-icon-left > i,
.p-dropdown-panel .p-dropdown-header .p-input-icon-left > .pi,
.p-select-overlay .p-select-header i.pi-search,
.p-select-overlay .p-select-header .pi.pi-search,
.p-select-overlay .p-select-header .p-input-icon-left > i,
.p-select-overlay .p-select-header .p-input-icon-left > .pi,
.p-multiselect-panel .p-multiselect-header i.pi-search,
.p-multiselect-panel .p-multiselect-header .pi.pi-search,
.p-multiselect-panel .p-multiselect-header .p-input-icon-left > i,
.p-multiselect-panel .p-multiselect-header .p-input-icon-left > .pi {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.p-dropdown-panel .p-dropdown-header .p-input-icon-left > i::before,
.p-dropdown-panel .p-dropdown-header .p-input-icon-left > .pi::before,
.p-dropdown-panel .p-dropdown-header i.pi-search::before,
.p-dropdown-panel .p-dropdown-header .pi.pi-search::before,
.p-select-overlay .p-select-header .p-input-icon-left > i::before,
.p-select-overlay .p-select-header .p-input-icon-left > .pi::before,
.p-select-overlay .p-select-header i.pi-search::before,
.p-select-overlay .p-select-header .pi.pi-search::before,
.p-multiselect-panel .p-multiselect-header .p-input-icon-left > i::before,
.p-multiselect-panel .p-multiselect-header .p-input-icon-left > .pi::before,
.p-multiselect-panel .p-multiselect-header i.pi-search::before,
.p-multiselect-panel .p-multiselect-header .pi.pi-search::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.pi-search {
  color: rgba(0, 0, 0, 0.87) !important;
  font-weight: 600;
  font-size: 13px !important;
  margin-left: 7px !important;
}

.form-check-input[type=checkbox] {
  border-radius: 0.25em;
  border: 1px solid black !important;
}

.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover {
  background: navajowhite;
  font-size: 15px;
  font-weight: 800;
}

.animate__fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 25px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* Opening */
.animate__fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.02);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
/* Closing */
.animate__fadeOutDown {
  animation-name: fadeOutDown;
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.94);
  }
}
/* Base timing & easing */
.animate__animated {
  animation-duration: 0.22s; /* fast but smooth */
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Faster keyword override (optional) */
.animate__faster {
  animation-duration: 0.18s;
}

/* Final status layout: 2 cards per row */
.freight-quote-sidebar .sidebar-body .freight-status-panel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .centered-title {
  grid-column: 1/-1 !important;
  margin-bottom: 2px !important;
}

.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card {
  margin-bottom: 0 !important;
}

@media (max-width: 1240px) {
  .freight-quote-sidebar .sidebar-body .freight-status-panel {
    grid-template-columns: 1fr !important;
  }
  .freight-quote-sidebar .sidebar-body .freight-status-panel .fq-card-head {
    grid-template-columns: 1fr !important;
  }
  .freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card .quote-status {
    justify-self: start !important;
  }
}
/* Freight quote statuses drawer final override: Prime renders this overlay as p-drawer on newer builds. */
.p-drawer.freight-quote-sidebar,
.p-sidebar.freight-quote-sidebar {
  width: min(920px, 100vw - 56px) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 56px) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: -10px 0 28px rgba(15, 23, 42, 0.12) !important;
}

.p-drawer.freight-quote-sidebar .p-drawer-content,
.p-sidebar.freight-quote-sidebar .p-sidebar-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body,
.p-sidebar.freight-quote-sidebar .sidebar-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 12px 16px 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 14px !important;
  align-content: start !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip {
  gap: 10px !important;
  padding: 0 2px !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card {
  min-height: 58px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(31, 47, 70, 0.14) !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(1),
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(1) {
  background: #d97706 !important;
  border-color: #d97706 !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(2),
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(2) {
  background: #0f9f8f !important;
  border-color: #0f9f8f !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(3),
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(3) {
  background: #2f9e44 !important;
  border-color: #2f9e44 !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(4),
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(4) {
  background: #0e7490 !important;
  border-color: #0e7490 !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(5),
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(5) {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(6),
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(6),
.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card.sidebar-kpi-card--cancelled,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card.sidebar-kpi-card--cancelled {
  background: #a21caf !important;
  border-color: #a21caf !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(7),
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card:nth-child(7),
.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card.sidebar-kpi-card--closed,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-card.sidebar-kpi-card--closed {
  background: #6b7280 !important;
  border-color: #6b7280 !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-label,
.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .sidebar-kpi-label,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-label,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .sidebar-kpi-label {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-value,
.p-drawer.freight-quote-sidebar .statistics.sidebar-kpi-strip .sidebar-kpi-value,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .stat-value,
.p-sidebar.freight-quote-sidebar .statistics.sidebar-kpi-strip .sidebar-kpi-value {
  color: #ffffff !important;
  font-weight: 900 !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .centered-title,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .centered-title {
  grid-column: 1/-1 !important;
  align-self: start !important;
  margin: 0 0 2px !important;
  text-align: center !important;
}

.p-drawer.freight-quote-sidebar .siderbar-header-container,
.p-sidebar.freight-quote-sidebar .siderbar-header-container {
  position: relative !important;
}

.p-drawer.freight-quote-sidebar .fq-sidebar-pickup-card.fq-sidebar-pickup-card--header,
.p-sidebar.freight-quote-sidebar .fq-sidebar-pickup-card.fq-sidebar-pickup-card--header {
  position: absolute !important;
  top: 50% !important;
  right: 88px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  max-width: 590px !important;
  justify-self: end !important;
  z-index: 1 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.p-drawer.freight-quote-sidebar .fq-sidebar-pickup-card.fq-sidebar-pickup-card--header .fq-sidebar-pickup-copy,
.p-sidebar.freight-quote-sidebar .fq-sidebar-pickup-card.fq-sidebar-pickup-card--header .fq-sidebar-pickup-copy {
  justify-content: center !important;
  min-width: 0 !important;
  gap: 7px !important;
}

.p-drawer.freight-quote-sidebar .fq-sidebar-pickup-card.fq-sidebar-pickup-card--header .fq-sidebar-pickup-icon,
.p-sidebar.freight-quote-sidebar .fq-sidebar-pickup-card.fq-sidebar-pickup-card--header .fq-sidebar-pickup-icon {
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  background: transparent !important;
}

.p-drawer.freight-quote-sidebar .fq-sidebar-pickup-card.fq-sidebar-pickup-card--header .fq-sidebar-pickup-label,
.p-sidebar.freight-quote-sidebar .fq-sidebar-pickup-card.fq-sidebar-pickup-card--header .fq-sidebar-pickup-label {
  color: #6b7a90 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.p-drawer.freight-quote-sidebar .fq-sidebar-pickup-card.fq-sidebar-pickup-card--header .fq-sidebar-pickup-value,
.p-sidebar.freight-quote-sidebar .fq-sidebar-pickup-card.fq-sidebar-pickup-card--header .fq-sidebar-pickup-value {
  color: #1f3e66 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 300px !important;
  margin: 0 !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-body,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-body {
  flex: 1 1 auto !important;
  min-height: 132px !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet:not(:has(.fq-sheet-spotlight)) .fq-sheet-body,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet:not(:has(.fq-sheet-spotlight)) .fq-sheet-body {
  margin-top: 58px !important;
  border-top: 1px solid #eef3f8 !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-body--split,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-body--split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 132px !important;
  align-items: stretch !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-contact-col,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-contact-col {
  display: flex !important;
  flex-direction: column !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-row,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-row {
  flex: 1 1 0 !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-col,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 128px !important;
  padding: 10px !important;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%) !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-body--no-response,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-body--no-response {
  grid-template-columns: minmax(0, 1fr) 132px !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-body--no-response .fq-sheet-response-col,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-body--no-response .fq-sheet-response-col {
  display: flex !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-body--no-response .fq-sheet-contact-col,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-body--no-response .fq-sheet-contact-col {
  width: 100% !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-empty-top-space,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-empty-top-space {
  min-height: 131px !important;
  flex: 0 0 131px !important;
  margin: 0 !important;
  border-bottom: 1px solid #eef3f8 !important;
  background: #ffffff !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-empty,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-empty {
  display: block !important;
  width: 100% !important;
  min-height: 96px !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-no-response,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-no-response {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 7px !important;
  width: 96px !important;
  min-height: 96px !important;
  padding: 10px !important;
  border: 3px solid #c8ecff !important;
  border-radius: 999px !important;
  background: #f8fcff !important;
  color: #315172 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  text-align: center !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-no-response-icon,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-no-response-icon {
  color: #0f72b5 !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-clock-wrap,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-clock-wrap {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-clock,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-clock {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 86px !important;
  height: 86px !important;
  min-width: 86px !important;
  min-height: 86px !important;
  padding: 10px 8px !important;
  overflow: hidden !important;
  margin: 0 auto !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-clock-icon,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-clock-icon {
  position: relative !important;
  display: inline-flex !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  line-height: 1 !important;
  flex: 0 0 16px !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-clock-icon::before,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-clock-icon::before {
  width: 13px !important;
  height: 13px !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-clock-icon::after,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-clock-icon::after {
  width: 4px !important;
  height: 5px !important;
  transform: translate(1px, -1px) !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-clock-value,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-clock-value {
  display: block !important;
  max-width: 68px !important;
  color: #1f1646 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-label,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-response-label {
  display: block !important;
  color: #1970a6 !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-align: center !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-foot,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-foot,
.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-bottom-stack,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-bottom-stack {
  margin-top: auto !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-badge.quote-status,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-badge.quote-status {
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-badge.approved-status,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-badge.approved-status {
  border: 1px solid #a7e2ba !important;
  background: #eaf8ef !important;
  color: #16733b !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-badge.closed-status,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-badge.closed-status {
  border: 1px solid #cbd5e1 !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
}

.p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-badge.received-status,
.p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel .fq-carrier-card.fq-carrier-sheet .fq-sheet-badge.received-status {
  border: 1px solid #9edbd6 !important;
  background: #e8f7f5 !important;
  color: #08756f !important;
}

@media (max-width: 1120px) {
  .p-drawer.freight-quote-sidebar .sidebar-body .freight-status-panel,
  .p-sidebar.freight-quote-sidebar .sidebar-body .freight-status-panel {
    grid-template-columns: 1fr !important;
  }
}
/* Freight Quote Orders — fullscreen timeline & report dialogs (appendTo body) */
.p-dialog.fq-dialog-fullscreen {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}

.p-dialog.fq-dialog-fullscreen .p-dialog-header {
  flex-shrink: 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.p-dialog.fq-dialog-fullscreen .p-dialog-content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 45%, #e2e8f0 100%);
}

.p-dialog.fq-dialog-fullscreen .p-dialog-content > * {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.p-dialog.fq-dialog-fullscreen.dark-theme .p-dialog-content {
  background: linear-gradient(165deg, #0f172a 0%, #1e293b 40%, #0c1222 100%);
}

.p-dialog.fq-dialog-fullscreen .p-dialog-footer {
  flex-shrink: 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Ship Now — shipping instructions + PGI combined dialog (appendTo body, PrimeNG mask) */
.p-dialog-mask.shipping-instructions-mask {
  background: rgba(15, 23, 42, 0.55);
  /* Lighter blur = less GPU composite thrash behind the dialog (reduces “shaking”) */
  backdrop-filter: saturate(125%) blur(4px);
  -webkit-backdrop-filter: saturate(125%) blur(4px);
  contain: layout paint;
  isolation: isolate;
}

.p-dialog-mask.shipping-instructions-mask.orders-pgi-mask {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* PGI Error on Orders: dialog height follows content (no tall empty shell) */
.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-pgi-error-layout {
  height: auto;
  max-height: min(88vh, 860px);
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog .shipping-instructions-dialog-header {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog .shipping-instructions-dialog-header.si-dialog-header-row {
  padding: 0 !important;
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog .p-dialog-content.shipping-instructions-dialog-content-inner {
  padding: 0 !important;
  overflow: hidden;
  max-height: min(88vh, 900px);
}

/* Orders — PGI Error: compact column; height follows content (scroll only when many lines) */
.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-pgi-error-layout .p-dialog-content.shipping-instructions-dialog-content-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(88vh, 860px);
}

/* Order lifecycle / summary dialogs (appendTo body): neutral close (override link-blue on .pi) */
.p-dialog.pgi-details-dialog .orders-ed-close,
.p-dialog.pgi-details-dialog .orders-ed-close .pi {
  color: #475569 !important;
}

.p-dialog.pgi-details-dialog .orders-ed-close:hover,
.p-dialog.pgi-details-dialog .orders-ed-close:hover .pi {
  color: #ffffff !important;
}

/* Wider order summary (same shell as shipping instructions) */
.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-dialog--wide .p-dialog-content.shipping-instructions-dialog-content-inner {
  max-height: min(96vh, 1020px);
}

/* Order summary: smaller corner radius; flex shell so header stays fixed and body scrolls */
.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-order-summary-dialog {
  border-radius: 8px;
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-order-summary-dialog .p-dialog-content.shipping-instructions-dialog-content-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(92vh, 980px);
  overflow: hidden;
  padding: 0 !important;
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-order-summary-dialog .orders-ed-header {
  flex-shrink: 0;
}

/* Same rail as global `.orders-ed-close`: left border only; red fill on hover. Only align top corner to 8px dialog radius. */
.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-order-summary-dialog .orders-ed-close {
  border-radius: 0 8px 0 0;
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-order-summary-dialog .orders-ed-close:hover,
.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-order-summary-dialog .orders-ed-close:focus-visible {
  border-radius: 0 8px 0 0;
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-order-summary-dialog .orders-ed-body.orders-ed-body--summary {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 20px;
  padding-bottom: 1.25rem;
}

/* Orders — Activity, Summary, Lifecycle (same overlay feel as shipping instructions) */
.p-dialog-mask.orders-enterprise-dialog-mask {
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: saturate(130%) blur(6px);
          backdrop-filter: saturate(130%) blur(6px);
}

.p-dialog.pgi-details-dialog.orders-enterprise-dialog {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.p-dialog.pgi-details-dialog.orders-enterprise-dialog .p-dialog-content.orders-enterprise-dialog-content-inner {
  padding: 0 !important;
  overflow: hidden;
  max-height: min(88vh, 900px);
}

/* Match Shipping Instructions header rhythm: full-width bar + separated close rail */
.orders-ed-header {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  padding: 0;
  min-height: 56px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.orders-ed-header__titles {
  flex: 1;
  min-width: 0;
  padding: 1rem 1rem 0.85rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.orders-ed-header__titles h4 {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.02em;
}

.orders-ed-header__sub {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.4;
  max-width: 42rem;
}

.orders-ed-close {
  flex-shrink: 0;
  width: 4rem;
  align-self: stretch;
  min-height: 56px;
  margin: 0;
  padding: 0;
  border: none;
  border-left: 1px solid #e2e8f0;
  border-radius: 0 16px 0 0;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.orders-ed-close .pi {
  font-size: 1.05rem;
}
.orders-ed-close:hover {
  background: #dc2626;
  color: #ffffff;
  border-left-color: #b91c1c;
}
.orders-ed-close:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

/* Ship Now — shipping instructions header row (same close treatment) */
.si-dialog-header-row {
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  min-height: 56px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.si-dialog-header-row__titles {
  flex: 1;
  min-width: 0;
  padding: 18px 12px 14px 16px;
}

.orders-ed-body {
  padding: 1rem 1.25rem 1.25rem;
  overflow: auto;
  max-height: min(72vh, 720px);
  background: #fafbfd;
}

.orders-ed-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

.orders-ed-primary.p-button {
  font-weight: 700;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-radius: 10px;
}

/*
 * Shipping Instructions look for dialogs that appendTo body (scoped CSS in ship-now does not apply).
 * Title + list/message pattern matches dashboard shipping-instructions / PGI.
 */
.shipping-instructions-title-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.shipping-instructions-title {
  margin: 0;
  color: #0f172a !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-pgi-error-layout .pgi-details-body.shipping-instructions-dialog-body.orders-pgi-shipping-canvas {
  padding: 22px 28px 26px !important;
  flex: 0 1 auto;
  min-height: 230px;
  max-height: min(52vh, 530px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #ffffff;
  border-bottom: none;
  -webkit-overflow-scrolling: touch;
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-pgi-error-layout .shipping-instructions-content {
  flex: 0 1 auto;
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-pgi-error-layout .orders-pgi-error-footer.orders-ed-footer {
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem 1rem;
  margin-top: 0;
  border-top: 1px solid #cbd5e1;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.85) inset, 0 -6px 14px rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 55%);
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-pgi-error-layout .pgi-error-summary {
  margin-bottom: 14px;
  padding: 12px 14px;
  line-height: 1.5;
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-pgi-error-layout .shipping-instructions-list.orders-pgi-error-bullets {
  padding: 14px 16px 16px 1.85rem;
  font-weight: 700;
  color: #7f1d1d;
  background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
  border: 1px solid #fecdd3;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(127, 29, 29, 0.06);
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-pgi-error-layout .shipping-instructions-list.orders-pgi-error-bullets li {
  margin-bottom: 10px;
  line-height: 1.55;
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-pgi-error-layout .shipping-instructions-list.orders-pgi-error-bullets li:last-child {
  margin-bottom: 0;
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-pgi-error-layout .pgi-error-message.shipping-instructions-single.orders-pgi-error-single-block {
  padding: 14px 18px;
  font-weight: 700;
  color: #7f1d1d;
  background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
  border-color: #fecdd3;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(127, 29, 29, 0.06);
}

.p-dialog.pgi-details-dialog.shipping-instructions-dialog.orders-pgi-error-layout .shipping-instructions-list.orders-pgi-error-bullets li::marker {
  color: #e11d48;
}

/*
 * Ship Now — PGI error footer Print (dashboard-header). Class `.btnprintCss` had no CSS anywhere;
 * dialog uses appendTo body so scoped styles may not apply — keep rules global.
 */
.p-dialog.pgi-details-dialog .pgi-details-footer-error .btnprintCss {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  height: 40px;
  min-height: 40px;
  min-width: 7.5rem;
  padding: 0 22px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid #1e88e5;
  background: linear-gradient(180deg, #42a5f5 0%, #1e88e5 100%);
  color: #fff !important;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.p-dialog.pgi-details-dialog .pgi-details-footer-error .btnprintCss:hover {
  background: linear-gradient(180deg, #1e88e5 0%, #1565c0 100%);
  border-color: #1565c0;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 136, 229, 0.35);
}

.p-dialog.pgi-details-dialog .pgi-details-footer-error .btnprintCss:focus {
  outline: none;
}

.p-dialog.pgi-details-dialog .pgi-details-footer-error .btnprintCss:focus-visible {
  outline: 2px solid #90caf9;
  outline-offset: 2px;
}

/* Same PGI error footer — Close (red fill; scoped so other `.btnCancelCss` in the app stay unchanged) */
.p-dialog.pgi-details-dialog .pgi-details-footer-error .btnCancelCss {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  height: 40px;
  min-height: 40px;
  min-width: 7.5rem;
  padding: 0 22px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid #dc2626;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  color: #fff !important;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.p-dialog.pgi-details-dialog .pgi-details-footer-error .btnCancelCss:hover {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
  border-color: #b91c1c;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

.p-dialog.pgi-details-dialog .pgi-details-footer-error .btnCancelCss:focus {
  outline: none;
}

.p-dialog.pgi-details-dialog .pgi-details-footer-error .btnCancelCss:focus-visible {
  outline: 2px solid #fca5a5;
  outline-offset: 2px;
}

/* Ship Now / header primary — same enterprise chrome as shipheadergetbuttonnew (flat, 2px border, 40px tall) */
.p-dialog .orders-pgi-print-btn.orders-pgi-footer-btn--solid.p-button,
.p-dialog .orders-pgi-close-footer-btn.orders-pgi-footer-btn--solid.p-button {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
}

.p-dialog .orders-pgi-print-btn.orders-pgi-footer-btn--solid.p-button {
  background: #1e88e5 !important;
  color: #fff !important;
  border: 2px solid #1e88e5 !important;
}

.p-dialog .orders-pgi-print-btn.orders-pgi-footer-btn--solid.p-button:enabled:hover {
  background: #1976d2 !important;
  border-color: #1976d2 !important;
  transform: translateY(-1px);
}

.p-dialog .orders-pgi-print-btn.orders-pgi-footer-btn--solid.p-button:disabled {
  opacity: 0.6;
  transform: none !important;
}

.p-dialog .orders-pgi-close-footer-btn.orders-pgi-footer-btn--solid.p-button {
  background: #dc2626 !important;
  color: #fff !important;
  border: 2px solid #dc2626 !important;
}

.p-dialog .orders-pgi-close-footer-btn.orders-pgi-footer-btn--solid.p-button:enabled:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  transform: translateY(-1px);
}

.p-dialog .orders-pgi-print-btn.orders-pgi-footer-btn--solid.p-button:focus,
.p-dialog .orders-pgi-close-footer-btn.orders-pgi-footer-btn--solid.p-button:focus {
  outline: none !important;
  box-shadow: none !important;
}

.p-dialog .orders-pgi-print-btn.orders-pgi-footer-btn--solid.p-button:focus-visible {
  outline: 2px solid #90caf9 !important;
  outline-offset: 2px;
}

.p-dialog .orders-pgi-close-footer-btn.orders-pgi-footer-btn--solid.p-button:focus-visible {
  outline: 2px solid #fca5a5 !important;
  outline-offset: 2px;
}

/* PGI Error — PDF in modal + auto-print (no new tab) */
.p-dialog.orders-pgi-pdf-preview-dialog {
  overflow: hidden;
}

.p-dialog.orders-pgi-pdf-preview-dialog .p-dialog-content.orders-pgi-pdf-preview-content {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 940px);
  background: #fff;
}

.orders-pgi-pdf-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.orders-pgi-pdf-preview-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.orders-pgi-pdf-preview-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  color: #dc2626;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.orders-pgi-pdf-preview-close:hover {
  background: #dc2626;
  border-color: #b91c1c;
  color: #fff;
}

.orders-pgi-pdf-preview-close:focus {
  outline: none;
}

.orders-pgi-pdf-preview-close:focus-visible {
  outline: 2px solid #f87171;
  outline-offset: 2px;
}

.orders-pgi-pdf-iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: min(76vh, 780px);
  border: none;
  background: #e2e8f0;
  display: block;
}

.pgi-error-summary.orders-pgi-error-summary-tight {
  align-items: flex-start;
}

.pgi-error-summary.orders-pgi-error-summary-tight .pi {
  margin-top: 2px;
}

.pgi-error-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  border-radius: 10px;
  border: 1px solid #f4b4b4;
  background: linear-gradient(180deg, #fff5f5 0%, #ffecec 100%);
  color: #b42318;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.pgi-error-summary .pi {
  font-size: 18px;
  flex-shrink: 0;
}

.pgi-error-message {
  border: 1px solid #f1d0d0;
  background: #fff;
  color: #5f1f1f;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  white-space: pre-wrap;
  word-break: break-word;
}

.shipping-instructions-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
  background: #ffffff;
  border-radius: 12px;
}

.shipping-instructions-list.orders-pgi-error-bullets {
  margin: 0;
  padding: 8px 8px 12px 1.65rem;
  color: #1e293b;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: #ffffff;
}

.shipping-instructions-list.orders-pgi-error-bullets li {
  margin-bottom: 14px;
  padding-left: 8px;
}

.shipping-instructions-list.orders-pgi-error-bullets li:last-child {
  margin-bottom: 0;
}

.shipping-instructions-list.orders-pgi-error-bullets li::marker {
  color: #94a3b8;
}

.pgi-error-message.shipping-instructions-single.orders-pgi-error-single-block {
  margin-bottom: 0 !important;
  border: 1px solid #e8edf3;
  background: #ffffff;
  color: #1e293b;
  padding: 24px 28px;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 500;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* Order summary body height is driven by flex in `.orders-order-summary-dialog` (no fixed vh on `.orders-ed-body--summary`). */
/* Freight pickup calendar is appended to <body>, so keep its header action styling global. */
body .pickup-calendar-dialog .p-dialog-header {
  padding-right: 0 !important;
}

body .pickup-calendar-dialog .p-dialog-header-icons {
  align-self: stretch !important;
  display: flex !important;
  align-items: stretch !important;
  width: 54px !important;
  margin-left: auto !important;
  border-left: 1px solid #d9e2ef !important;
}

body .pickup-calendar-dialog .p-dialog-header-close,
body .pickup-calendar-dialog .p-dialog-header-icon.p-dialog-header-close {
  width: 54px !important;
  height: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 8px 0 0 !important;
  background: #ffffff !important;
  color: #14284b !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body .pickup-calendar-dialog .p-dialog-header-icons:hover,
body .pickup-calendar-dialog .p-dialog-header-icons:focus-within {
  border-left-color: #dc3f45 !important;
}

body .pickup-calendar-dialog .p-dialog-header-close:hover,
body .pickup-calendar-dialog .p-dialog-header-close:enabled:hover,
body .pickup-calendar-dialog .p-dialog-header-close:focus-visible {
  background: #dc3f45 !important;
  color: #ffffff !important;
}

body .pickup-calendar-dialog .p-dialog-header-close .p-dialog-header-close-icon,
body .pickup-calendar-dialog .p-dialog-header-close .p-icon,
body .pickup-calendar-dialog .p-dialog-header-close .pi,
body .pickup-calendar-dialog .p-dialog-header-close svg {
  color: inherit !important;
  stroke: currentColor !important;
}

/* Appointment reschedule is appended to <body>; keep Cancel hover independent from shared blue secondary buttons. */
body .appointment-reschedule-dialog .p-dialog-footer button.appointment-reschedule-cancel:hover,
body .appointment-reschedule-dialog .p-dialog-footer button.appointment-reschedule-cancel:enabled:hover,
body .appointment-reschedule-dialog .p-dialog-footer button.appointment-reschedule-cancel:focus-visible {
  border-color: #da4345 !important;
  background: #da4345 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(218, 67, 69, 0.2) !important;
}

body .appointment-reschedule-dialog .p-dialog-footer button.overview-reschedule-btn:not(:disabled) {
  border-color: #16834f !important;
  background: #16834f !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(22, 131, 79, 0.2) !important;
}

body .appointment-reschedule-dialog .p-dialog-footer button.overview-reschedule-btn:not(:disabled):hover,
body .appointment-reschedule-dialog .p-dialog-footer button.overview-reschedule-btn:not(:disabled):focus-visible {
  border-color: #0f6d41 !important;
  background: #0f6d41 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(15, 109, 65, 0.24) !important;
}

body .appointment-reschedule-dialog .reschedule-modal-close:hover,
body .appointment-reschedule-dialog .reschedule-modal-close:focus-visible {
  background: #da4345 !important;
  color: #ffffff !important;
  border-left-color: #da4345 !important;
}

/* Appointment overview is also appended to <body>; keep the top-right close hover red. */
body .appointment-overview-dialog .p-dialog-header-close,
body .appointment-overview-dialog .p-dialog-header-close::before,
body .appointment-overview-dialog .p-dialog-header-close-icon,
body .appointment-overview-dialog .p-dialog-header-close .pi,
body .appointment-overview-dialog .p-dialog-header-close svg {
  color: #da4345 !important;
  stroke: currentColor !important;
}

body .appointment-overview-dialog .p-dialog-header-icons:hover,
body .appointment-overview-dialog .p-dialog-header-icons:focus-within {
  background: #da4345 !important;
  border-left-color: #da4345 !important;
}

body .appointment-overview-dialog .p-dialog-header-close:hover,
body .appointment-overview-dialog .p-dialog-header-close:enabled:hover,
body .appointment-overview-dialog .p-dialog-header-close:focus-visible,
body .appointment-overview-dialog .p-dialog-header-icon.p-dialog-header-close:hover,
body .appointment-overview-dialog .p-dialog-header-icon.p-dialog-header-close:enabled:hover,
body .appointment-overview-dialog .p-dialog-header-icons:hover .p-dialog-header-close,
body .appointment-overview-dialog .p-dialog-header-icons:hover .p-dialog-header-close::before,
body .appointment-overview-dialog .p-dialog-header-icons:hover .p-dialog-header-close-icon,
body .appointment-overview-dialog .p-dialog-header-icons:hover .pi,
body .appointment-overview-dialog .p-dialog-header-icons:hover svg {
  background: #da4345 !important;
  color: #ffffff !important;
  stroke: currentColor !important;
}

body .appointment-overview-dialog .p-dialog-header-close:hover::before,
body .appointment-overview-dialog .p-dialog-header-close:enabled:hover::before,
body .appointment-overview-dialog .p-dialog-header-close:focus-visible::before,
body .appointment-overview-dialog .p-dialog-header-icon.p-dialog-header-close:hover::before,
body .appointment-overview-dialog .p-dialog-header-icon.p-dialog-header-close:enabled:hover::before {
  color: #ffffff !important;
}

body .appointment-overview-dialog .overview-actions .overview-secondary-btn:hover,
body .appointment-overview-dialog .overview-actions .overview-secondary-btn:focus-visible {
  border-color: #da4345 !important;
  background: #da4345 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(218, 67, 69, 0.2) !important;
}

/* PrimeNG 19 upgrade compatibility: normalize changed component structure after Angular/PrimeNG upgrade. */
:root {
  --esj-control-height: 38px;
  --esj-control-border: #1f1646;
  --esj-control-focus: #2f67b0;
  --esj-control-selected: #030e4c;
  --esj-control-selected-text: #ffffff;
  --esj-control-value: #0f5fac;
  --esj-grid-line: #e2e8f0;
}

body .p-dropdown,
body .p-select,
body .p-multiselect,
body .p-calendar,
body .p-datepicker,
body .p-inputwrapper {
  width: 100% !important;
}

body .p-dropdown,
body .p-select,
body .p-multiselect,
body .p-calendar .p-inputtext,
body .p-datepicker .p-inputtext,
body .p-inputtext,
body input.p-inputtext {
  min-height: var(--esj-control-height) !important;
  border-color: var(--esj-control-border) !important;
  border-radius: var(--eshipjet-input-radius) !important;
  background: #ffffff !important;
  /* Keep field values off the border: comfortable inset + vertical centring.
     min-height gave the box height but no padding, so text stuck to the top-left. */
  padding: 0.5rem 0.75rem !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
}

body .p-dropdown:not(.p-disabled):hover,
body .p-select:not(.p-disabled):hover,
body .p-multiselect:not(.p-disabled):hover,
body .p-inputtext:hover {
  border-color: var(--esj-control-focus) !important;
}

body .p-dropdown.p-focus,
body .p-select.p-focus,
body .p-multiselect.p-focus,
body .p-inputtext:enabled:focus,
body .p-calendar:not(.p-disabled).p-focus .p-inputtext,
body .p-datepicker:not(.p-disabled).p-focus .p-inputtext {
  border-color: var(--esj-control-focus) !important;
  box-shadow: 0 0 0 2px rgba(47, 103, 176, 0.18) !important;
}

body .p-dropdown-label,
body .p-select-label,
body .p-multiselect-label {
  min-height: calc(var(--esj-control-height) - 2px) !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: var(--esj-control-value) !important;
  font-family: AvenirNextCyrMedium, AvenirNextCyr, sans-serif !important;
}

body .p-dropdown-label.p-placeholder,
body .p-select-label.p-placeholder,
body .p-multiselect-label.p-placeholder {
  color: #778195 !important;
  font-style: normal !important;
}

body .carrier-account-add-dialog .p-dropdown-label,
body .carrier-account-add-dialog .p-select-label,
body .carrier-account-add-dialog .p-dropdown-label.p-placeholder,
body .carrier-account-add-dialog .p-select-label.p-placeholder,
body .carrier-account-add-dialog input.p-inputtext,
body .carrier-account-add-dialog .textfieldstyling,
body .carrier-account-add-dialog input.p-inputtext::placeholder {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
}

body .carrier-account-add-dialog .additional-info-fields-row {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 0 12px !important;
  width: 100% !important;
}

body .carrier-account-add-dialog .additional-info-field {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
}

body .carrier-account-add-dialog .additional-info-fields-row p-dropdown,
body .carrier-account-add-dialog .additional-info-fields-row input.p-inputtext {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}

body .p-dropdown-trigger,
body .p-select-dropdown,
body .p-multiselect-trigger,
body .p-calendar .p-datepicker-trigger,
body .p-datepicker .p-datepicker-trigger {
  width: 2.5rem !important;
  min-width: 2.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--esj-control-focus) !important;
}

body .p-dropdown-filter-container,
body .p-select-filter-container,
body .p-multiselect-filter-container {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  padding: 0.5rem !important;
  overflow: hidden !important;
}

body .p-dropdown-filter,
body .p-select-filter,
body .p-multiselect-filter {
  width: 100% !important;
  min-height: 36px !important;
  padding-left: 0.75rem !important;
  padding-right: 2.25rem !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  grid-column: 1/2 !important;
  grid-row: 1/2 !important;
}

body .p-dropdown-filter-icon,
body .p-select-filter-icon,
body .p-multiselect-filter-icon {
  position: absolute !important;
  right: 1rem !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  margin-left: 0 !important;
  color: #60738f !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

body .p-dropdown-panel .p-dropdown-header,
body .p-select-overlay .p-select-header,
body .p-multiselect-panel .p-multiselect-header {
  position: relative !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container,
body .p-select-overlay .p-select-header .p-select-filter-container,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
  position: relative !important;
  display: block !important;
  padding: 0.5rem !important;
  overflow: visible !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container::after,
body .p-select-overlay .p-select-header .p-select-filter-container::after,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container::after {
  content: none !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container::before,
body .p-select-overlay .p-select-header .p-select-filter-container::before,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container::before {
  content: none !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter,
body .p-select-overlay .p-select-header .p-select-filter,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter {
  width: 100% !important;
  display: block !important;
  margin-right: 0 !important;
  padding-right: 2.25rem !important;
  padding-left: 0.75rem !important;
  box-sizing: border-box !important;
  grid-column: 1/2 !important;
  grid-row: 1/2 !important;
  background-image: none !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container.p-input-icon-left > .p-dropdown-filter,
body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container.p-input-icon-right > .p-dropdown-filter,
body .p-select-overlay .p-select-header .p-select-filter-container.p-input-icon-left > .p-select-filter,
body .p-select-overlay .p-select-header .p-select-filter-container.p-input-icon-right > .p-select-filter,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container.p-input-icon-left > .p-multiselect-filter,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container.p-input-icon-right > .p-multiselect-filter {
  padding-left: 0.75rem !important;
  padding-right: 2.5rem !important;
  background-image: none !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon,
body .p-select-overlay .p-select-header .p-select-filter-icon,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-icon {
  position: absolute !important;
  right: 0.75rem !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  margin-left: 0 !important;
  pointer-events: none !important;
  z-index: 3 !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container.p-input-icon-left > .p-dropdown-filter-icon,
body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container.p-input-icon-right > .p-dropdown-filter-icon,
body .p-select-overlay .p-select-header .p-select-filter-container.p-input-icon-left > .p-select-filter-icon,
body .p-select-overlay .p-select-header .p-select-filter-container.p-input-icon-right > .p-select-filter-icon,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container.p-input-icon-left > .p-multiselect-filter-icon,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container.p-input-icon-right > .p-multiselect-filter-icon {
  left: auto !important;
  right: 0.75rem !important;
  inset-inline-start: auto !important;
  inset-inline-end: 0.75rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}

body .p-dropdown-panel .p-dropdown-header .pi-search,
body .p-select-overlay .p-select-header .pi-search,
body .p-multiselect-panel .p-multiselect-header .pi-search {
  opacity: 0 !important;
  display: none !important;
  visibility: hidden !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container i,
body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container .pi,
body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container .pi-search,
body .p-select-overlay .p-select-header .p-select-filter-container i,
body .p-select-overlay .p-select-header .p-select-filter-container .pi,
body .p-select-overlay .p-select-header .p-select-filter-container .pi-search,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container i,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .pi,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .pi-search {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
}

body .p-dropdown-panel,
body .p-select-overlay,
body .p-multiselect-panel,
body .p-datepicker-panel,
body .p-menu,
body .p-tieredmenu,
body .p-overlaypanel {
  z-index: 1105 !important;
  border: 1px solid #c7d7ea !important;
  border-radius: 6px !important;
  box-shadow: 0 16px 34px rgba(12, 31, 61, 0.18) !important;
}

body .p-overlay:has(.routing-special-option-panel),
body .p-dropdown-panel.routing-special-option-panel,
body .p-select-overlay.routing-special-option-panel {
  z-index: 13050 !important;
}

/* Final dropdown filter icon placement: keep one icon on the right edge */
body .p-dropdown-panel .p-dropdown-header .p-input-icon-left > i:first-of-type,
body .p-dropdown-panel .p-dropdown-header .p-input-icon-left > .pi-search,
body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon,
body .p-select-overlay .p-select-header .p-input-icon-left > i:first-of-type,
body .p-select-overlay .p-select-header .p-input-icon-left > .pi-search,
body .p-select-overlay .p-select-header .p-select-filter-icon,
body .p-multiselect-panel .p-multiselect-header .p-input-icon-left > i:first-of-type,
body .p-multiselect-panel .p-multiselect-header .p-input-icon-left > .pi-search,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-icon {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  left: auto !important;
  right: 0.75rem !important;
  inset-inline-start: auto !important;
  inset-inline-end: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

body .p-dropdown-panel .p-dropdown-header .p-input-icon-left > i:first-of-type,
body .p-dropdown-panel .p-dropdown-header .p-input-icon-left > .pi-search,
body .p-select-overlay .p-select-header .p-input-icon-left > i:first-of-type,
body .p-select-overlay .p-select-header .p-input-icon-left > .pi-search,
body .p-multiselect-panel .p-multiselect-header .p-input-icon-left > i:first-of-type,
body .p-multiselect-panel .p-multiselect-header .p-input-icon-left > .pi-search {
  left: calc(100% - 1.8rem) !important;
  right: auto !important;
  margin-top: -0.5rem !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter,
body .p-select-overlay .p-select-header .p-select-filter,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter {
  padding-right: 2.5rem !important;
  padding-left: 0.75rem !important;
}

/* Ship Now Pack Package Material panel keeps the search icon on the left. */
body .pkg-material-panel.p-dropdown-panel {
  position: fixed !important;
  max-height: min(312px, 100vh - 190px) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  transform: translateY(calc(-100% - 44px)) !important;
  transform-origin: bottom left !important;
  z-index: 1102000 !important;
}

/* Profile Information — Configure Function Keys / Default Cursor.
   Positioning (open upward) is applied in alignProfileDropdownAbove();
   keep CSS free of transform so PrimeNG overlay click-outside stays stable.
   Override global `.p-select-overlay { width/min-width: 100% !important }` so
   the panel stays the same width as the closed field. */
body .profile-funkey-panel.p-dropdown-panel,
body .profile-funkey-panel.p-select-overlay {
  width: var(--profile-funkey-width, auto) !important;
  min-width: var(--profile-funkey-width, 0) !important;
  max-width: var(--profile-funkey-width, 100%) !important;
  max-height: min(280px, 100vh - 160px) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  box-sizing: border-box !important;
  z-index: 1200000 !important;
}

body .profile-funkey-panel .p-dropdown-items-wrapper,
body .profile-funkey-panel .p-select-list-container {
  max-height: min(220px, 100vh - 220px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body .pkg-material-panel.p-dropdown-panel .p-dropdown-header {
  padding: 8px !important;
}

body .pkg-material-panel.p-dropdown-panel .p-dropdown-filter-container,
body .pkg-material-panel.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container,
body .pkg-material-panel.p-dropdown-panel .p-iconfield,
body .pkg-material-panel.p-dropdown-panel .p-input-icon-left {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

body .pkg-material-panel.p-dropdown-panel .p-dropdown-filter,
body .pkg-material-panel.p-dropdown-panel .p-dropdown-header .p-dropdown-filter,
body .pkg-material-panel.p-dropdown-panel .p-iconfield > .p-inputtext,
body .pkg-material-panel.p-dropdown-panel .p-input-icon-left > .p-inputtext {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 6px 12px 6px 38px !important;
  box-sizing: border-box !important;
  font-weight: 700 !important;
}

body .pkg-material-panel.p-dropdown-panel .p-dropdown-filter-icon,
body .pkg-material-panel.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon,
body .pkg-material-panel.p-dropdown-panel .p-iconfield > .p-inputicon,
body .pkg-material-panel.p-dropdown-panel .p-input-icon-left > i:first-of-type,
body .pkg-material-panel.p-dropdown-panel .p-input-icon-left > .pi-search,
body .pkg-material-panel.p-dropdown-panel .p-dropdown-header .pi-search {
  position: absolute !important;
  left: 13px !important;
  right: auto !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  color: #64748b !important;
  opacity: 1 !important;
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

body .pkg-material-panel.p-dropdown-panel .p-dropdown-items-wrapper {
  max-height: min(240px, 100vh - 260px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body .pkg-material-panel.p-dropdown-panel .p-dropdown-item,
body .pkg-material-panel.p-dropdown-panel .p-dropdown-item span,
body .pkg-material-panel.p-dropdown-panel .p-select-option,
body .pkg-material-panel.p-dropdown-panel .p-select-option-label {
  font-family: AvenirNextCyrDemi, AvenirNextCyrMedium, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body .p-dropdown-items,
body .p-select-list,
body .p-multiselect-items,
body .p-menu-list {
  padding: 0.35rem !important;
}

body .p-dropdown-item,
body .p-select-option,
body .p-multiselect-option,
body .p-menuitem-link {
  min-height: 34px !important;
  margin: 2px 0 !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

body .p-dropdown-item.p-highlight,
body .p-select-option.p-selected,
body .p-select-option.p-highlight,
body .p-multiselect-option.p-highlight,
body .p-menuitem-link:focus,
body .p-menuitem-link:hover {
  background: var(--esj-control-selected) !important;
  color: var(--esj-control-selected-text) !important;
}

body .customer-freight-multiselect-panel.p-multiselect-panel,
body .customer-freight-multiselect-panel.p-multiselect-overlay,
body .p-multiselect-overlay.customer-freight-multiselect-panel {
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(260px, 100vh - 160px) !important;
  border: 1px solid #d6e2ef !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #f6f9fd !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transform-origin: top left !important;
  margin-top: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
}

/* Outer overlay host is what PrimeNG positions — keep it below the field. */
body .p-overlay:has(.customer-freight-multiselect-panel),
body .p-overlay.customer-freight-multiselect-overlay-host {
  z-index: 2147483600 !important;
  transform: none !important;
  transform-origin: top left !important;
  margin-top: 0 !important;
  bottom: auto !important;
  box-shadow: 0 18px 48px rgba(17, 35, 58, 0.22) !important;
}

body .customer-freight-multiselect-panel .p-multiselect-header {
  padding: 12px 14px !important;
  border-bottom: 1px solid #dde8f4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(180deg, #fbfdff 0%, #eef5fc 100%) !important;
}

body .customer-freight-multiselect-panel .p-multiselect-header > .p-checkbox,
body .customer-freight-multiselect-panel .p-multiselect-header > p-checkbox,
body .customer-freight-multiselect-panel .p-multiselect-header > .p-hidden-accessible + .p-checkbox {
  flex: 0 0 20px !important;
}

body .customer-freight-multiselect-panel .p-multiselect-header .p-multiselect-filter-container,
body .customer-freight-multiselect-panel .p-multiselect-header .p-inputwrapper,
body .customer-freight-multiselect-panel .p-multiselect-header > div:not(.p-checkbox):not(.p-multiselect-close) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

body .customer-freight-multiselect-panel .p-multiselect-header .p-multiselect-close {
  flex: 0 0 28px !important;
  margin-left: 0 !important;
}

body .customer-freight-multiselect-panel .p-multiselect-header .p-checkbox,
body .customer-freight-multiselect-panel .p-multiselect-header .p-multiselect-filter-container,
body .customer-freight-multiselect-panel .p-multiselect-header .p-multiselect-close {
  align-items: center !important;
}

body .customer-freight-multiselect-panel .p-checkbox {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}

body .customer-freight-multiselect-panel .p-checkbox .p-checkbox-box {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  border: 1px solid #c4d4e5 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(24, 43, 66, 0.06) !important;
}

body .customer-freight-multiselect-panel .p-checkbox .p-checkbox-box.p-highlight {
  border-color: #2269a8 !important;
  background: #2269a8 !important;
}

body .customer-freight-multiselect-panel .p-multiselect-filter-container {
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

body .customer-freight-multiselect-panel .p-multiselect-filter {
  min-height: 40px !important;
  height: 40px !important;
  width: 100% !important;
  padding: 0 42px 0 14px !important;
  border: 1px solid #c4d4e5 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #1f3148 !important;
  font-family: AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  box-shadow: 0 1px 2px rgba(24, 43, 66, 0.05) !important;
}

body .customer-freight-multiselect-panel .p-multiselect-filter:focus {
  border-color: #2269a8 !important;
  box-shadow: 0 0 0 3px rgba(34, 105, 168, 0.14) !important;
}

body .customer-freight-multiselect-panel .p-multiselect-filter-icon {
  right: 12px !important;
  color: #687891 !important;
}

body .customer-freight-multiselect-panel .p-multiselect-close {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  color: #6f8095 !important;
  background: transparent !important;
}

body .customer-freight-multiselect-panel .p-multiselect-close:hover {
  background: #e4eef8 !important;
  color: #24435f !important;
}

body .customer-freight-multiselect-panel .p-multiselect-header .p-multiselect-close svg,
body .customer-freight-multiselect-panel .p-multiselect-header .p-multiselect-close .p-icon {
  width: 18px !important;
  height: 18px !important;
}

body .customer-freight-multiselect-panel .p-multiselect-items-wrapper {
  max-height: 180px !important;
  padding: 8px !important;
  background: #f6f9fd !important;
}

body .customer-freight-multiselect-panel .p-multiselect-items {
  padding: 0 !important;
  background: transparent !important;
}

body .customer-freight-multiselect-panel .p-multiselect-option,
body .customer-freight-multiselect-panel .p-multiselect-item {
  min-height: 42px !important;
  margin: 0 0 6px !important;
  padding: 9px 12px !important;
  gap: 12px !important;
  border: 1px solid #edf2f8 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #33445a !important;
  box-shadow: 0 1px 2px rgba(24, 43, 66, 0.035) !important;
}

body .customer-freight-multiselect-panel .p-multiselect-option:not(.p-highlight):not(.p-disabled):hover,
body .customer-freight-multiselect-panel .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
  border-color: #cfe0f1 !important;
  background: #eef6ff !important;
  color: #174f84 !important;
}

body .customer-freight-multiselect-panel .p-multiselect-option.p-highlight,
body .customer-freight-multiselect-panel .p-multiselect-item.p-highlight {
  border-color: #bdd7ef !important;
  background: #e8f3ff !important;
  color: #155c9d !important;
}

body .customer-freight-multiselect-panel .p-multiselect-option .p-checkbox,
body .customer-freight-multiselect-panel .p-multiselect-item .p-checkbox {
  flex: 0 0 20px !important;
}

body .customer-freight-multiselect-panel .p-multiselect-option .p-checkbox + span,
body .customer-freight-multiselect-panel .p-multiselect-option span,
body .customer-freight-multiselect-panel .p-multiselect-item .p-checkbox + span,
body .customer-freight-multiselect-panel .p-multiselect-item span {
  color: inherit !important;
  font-family: AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}

body .p-dropdown-item:not(.p-highlight):hover,
body .p-select-option:not(.p-selected):hover,
body .p-multiselect-option:not(.p-highlight):hover {
  background: #eaf3ff !important;
  color: #183c68 !important;
}

body .p-datepicker,
body .p-calendar {
  display: inline-flex !important;
  align-items: stretch !important;
}

body .p-calendar .p-inputtext,
body .p-datepicker .p-inputtext {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

body .p-calendar .p-datepicker-trigger,
body .p-datepicker .p-datepicker-trigger {
  height: var(--esj-control-height) !important;
  margin: 0 !important;
  border-color: var(--esj-control-border) !important;
  border-left: 0 !important;
  border-radius: 0 4px 4px 0 !important;
  background: #ffffff !important;
}

/* Calendar input-icon layout: keep icon pinned to field edge for ship from/to style filters */
body .calendarCss.p-calendar,
body p-calendar.calendarCss .p-calendar,
body p-calendar.calendarCss .p-datepicker,
body .calendarCss .p-calendar,
body .calendarCss .p-datepicker,
body .master-filter-calendar .p-calendar,
body .master-filter-calendar .p-datepicker {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

body .calendarCss.p-calendar .p-inputtext,
body p-calendar.calendarCss .p-inputtext,
body .calendarCss .p-inputtext,
body .master-filter-calendar .p-inputtext {
  width: 100% !important;
  padding-right: 2.5rem !important;
}

body .calendarCss.p-calendar .p-datepicker-input-icon-container,
body p-calendar.calendarCss .p-datepicker-input-icon-container,
body .calendarCss .p-datepicker-input-icon-container,
body .master-filter-calendar .p-datepicker-input-icon-container {
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

body .calendarCss.p-calendar .p-datepicker-input-icon,
body p-calendar.calendarCss .p-datepicker-input-icon,
body .calendarCss .p-datepicker-input-icon,
body .master-filter-calendar .p-datepicker-input-icon {
  width: 1rem !important;
  height: 1rem !important;
  color: var(--esj-control-focus) !important;
}

body .p-datatable .p-datatable-thead > tr > th,
body .p-datatable .p-datatable-tbody > tr > td,
body table th,
body table td {
  border-color: var(--esj-grid-line) !important;
  border-width: 0 0 1px 0 !important;
}

body .p-datatable .p-datatable-thead > tr > th {
  border-bottom-width: 1px !important;
}

body .p-datatable .p-datatable-tbody > tr > td.p-editable-column,
body .p-datatable .p-datatable-tbody > tr > td.p-cell-editing {
  overflow: visible !important;
  max-width: none !important;
  padding: 4px 8px !important;
}

body .p-datatable .p-cell-editor-input,
body .p-datatable .p-cell-editor-input .p-inputtext,
body .p-datatable .p-cell-editor-input input,
body .p-datatable .p-cell-editing .p-inputtext,
body .p-datatable .p-cell-editing input {
  min-width: 120px !important;
  width: 100% !important;
  min-height: 34px !important;
}

body .p-paginator {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.35rem !important;
}

body .p-paginator .p-paginator-rpp-options,
body .p-paginator .p-select,
body .p-paginator .p-dropdown {
  width: 5.75rem !important;
  min-width: 5.75rem !important;
  min-height: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
}

body .p-paginator .p-paginator-rpp-options .p-dropdown-label,
body .p-paginator .p-select-label,
body .p-paginator .p-dropdown-label {
  min-height: 26px !important;
  height: 26px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 18px !important;
  display: flex !important;
  align-items: center !important;
}

body .p-paginator .p-dropdown-trigger,
body .p-paginator .p-select-dropdown {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
}

body .p-paginator .p-paginator-rpp-options .p-dropdown-label,
body .p-paginator .p-select-label {
  white-space: nowrap !important;
}

body .p-paginator-current,
body .p-paginator .p-paginator-current {
  white-space: nowrap !important;
}

body .p-paginator-bottom .p-dropdown-panel,
body .p-paginator-bottom .p-select-overlay,
body .p-paginator .p-dropdown-panel,
body .p-paginator .p-select-overlay {
  transform-origin: bottom center !important;
}

body .p-sidebar,
body .p-drawer {
  min-width: min(760px, 92vw) !important;
  max-width: 96vw !important;
}

body .p-sidebar .p-sidebar-content,
body .p-drawer .p-drawer-content {
  overflow: auto !important;
}

body .p-sidebar .p-sidebar-header,
body .p-drawer .p-drawer-header,
body .p-dialog .p-dialog-header {
  min-height: 48px !important;
}

/* Header divider for ALL drawers/sidebars. PrimeNG 19 renders `.p-drawer-header`
   (Sidebar was renamed to Drawer), so older `.p-sidebar-header`-only rules never
   painted a bottom border. Global so every panel header is separated from its
   body, matching the left divider next to the close icon. */
body .p-drawer .p-drawer-header,
body .p-drawer-header,
body .p-sidebar .p-sidebar-header,
body .p-sidebar-header {
  border-bottom: 1px solid #e4e7eb !important;
}

/* Peripheral sidebar: installer button relocated into the header, top-right.
   Keep the header row horizontal + centered so the button sits cleanly beside
   the close icon and never wraps onto the title. */
/* Make the whole peripheral header chain full-height with no padding so the
   close-icon border-left divider spans edge-to-edge (no gaps top/bottom). */
body .peripheral-sidebar .p-drawer-header,
body .peripheral-sidebar .p-sidebar-header {
  padding: 0 !important;
  align-items: stretch !important;
}

body .peripheral-sidebar .p-drawer-header > div,
body .peripheral-sidebar .p-sidebar-header > div {
  display: flex !important;
  width: 100% !important;
  min-height: 58px !important;
}

body .peripheral-sidebar .sidebar-header-container {
  display: flex !important;
  align-items: stretch !important; /* let the close divider span full header height */
  width: 100% !important;
  min-height: 58px !important;
}

/* Title: drop the Bootstrap col-8 (66%) width so it only takes its content
   width — otherwise title + button + close icon overflow and the button
   slides over the X. */
body .peripheral-sidebar .sidebar-header-container .header-sec {
  padding-left: 8px !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto !important;
}

/* Close icon stays pinned far-right, never shrinks */
body .peripheral-sidebar .close-icon-container {
  flex: 0 0 auto !important;
}

/* Keep the title vertically centered even though the row now stretches */
body .peripheral-sidebar .sidebar-header-container .header-sec {
  display: flex !important;
  align-items: center !important;
}

/* Close divider flush top-to-bottom (removes the gap beside the border-left) */
body .peripheral-sidebar .close-icon-container {
  align-self: stretch !important;
  height: auto !important;
}

/* Enhanced "Eshipjet Printer Connect 6.4" installer button.
   ROOT CAUSE of the X overlap: the close icon (.close-icon-container) is
   position:absolute; right:0 (a component-scoped rule), so it sits OUTSIDE
   the flex flow. The button's inline margin-left:auto right-aligns it to the
   header's right edge and simply ignores the out-of-flow X, sliding under it.
   Fix: reserve the close-icon zone (~52px wide) plus a gap on the button's
   right so it always lands to the LEFT of the X, at any sidebar width. The
   !important overrides the button's inline margin-right:14px.
   NOTE: scoped under .peripheral-sidebar (specificity 0-2-1) so the width
   override below beats the also-!important .auto-print-button[_ngcontent]
   width:200px rule (0-2-0) — a plain `body .peripheral-header-installer`
   (0-1-1) loses that tie and the label stays clipped. */
body .peripheral-sidebar .peripheral-header-installer {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  margin-right: 68px !important;
  /* The shared .auto-print-button pins width:200px under
     @media (max-height:864px); that is too narrow for this longer label and
     clips it to "Eshipjet Printer Conne". Let the header button size to its
     content so the full label always shows (scoped to this class only, so the
     other auto-print buttons keep their 200px). */
  width: auto !important;
  max-width: none !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #2f6bff 0%, #1e50e6 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 2px 6px rgba(30, 80, 230, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

body .peripheral-header-installer:hover {
  background: linear-gradient(180deg, #3d78ff 0%, #2358f0 100%) !important;
  box-shadow: 0 4px 12px rgba(30, 80, 230, 0.45) !important;
  transform: translateY(-1px) !important;
}

body .peripheral-header-installer:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 5px rgba(30, 80, 230, 0.35) !important;
}

body .peripheral-header-installer .pi-download {
  font-size: 15px !important;
}

body .p-sidebar-close,
body .p-drawer-close,
body .p-dialog-header-close,
body .p-overlaypanel-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  color: #1f1646 !important;
}

body .p-sidebar-close:hover,
body .p-drawer-close:hover,
body .p-dialog-header-close:hover,
body .p-overlaypanel-close:hover {
  background: #da4345 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   GLOBAL sidebar/drawer close-icon (X) divider — applies to EVERY drawer that
   uses the app's custom `.close-icon-container` close button, not just the few
   sidebars that hand-rolled it (master-sidebar, ui-sidebar-lg, popupCls).
   Pairs the existing header bottom-border with a full-height LEFT divider that
   runs flush top-to-bottom beside the X — no gap. Scoped with :has() so only
   headers that actually contain the custom close button are restructured;
   PrimeNG default-close headers are left untouched. More specific per-sidebar
   rules (e.g. .master-sidebar .close-icon-container, 0-0-3-1) still win and
   keep their own width/colour. */
body .p-drawer .p-drawer-header:has(.close-icon-container),
body .p-sidebar .p-sidebar-header:has(.close-icon-container) {
  display: flex !important;
  align-items: stretch !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* Make the header the positioned ancestor for the absolutely-positioned
     `.close-icon-container` below, so its `top:0; bottom:0` resolve against the
     HEADER's real height (not the tall drawer). This lets the close divider be
     exactly header-height on every sidebar — 58px on Profile, 55px on
     Peripheral, etc. — with no 3px overshoot and no full-height-bar balloon. */
  position: relative !important;
}

/* The app wraps the header content in `#sidebarContent > .sidebar-header-container`.
   Make that chain a full-height flex row so the close divider can stretch to
   both edges. */
body .p-drawer-header:has(.close-icon-container) > div,
body .p-sidebar-header:has(.close-icon-container) > div,
body .p-drawer-header .sidebar-header-container:has(.close-icon-container),
body .p-sidebar-header .sidebar-header-container:has(.close-icon-container) {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  /* Zero the wrapper's own vertical padding/margin so the close divider (and
     the header bottom border) reach the header's top and bottom edges — truly
     end-to-end, no residual gap. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 100% !important;
}

/* Keep the title vertically centered inside the now-stretched row. */
body .p-drawer-header .sidebar-header-container:has(.close-icon-container) .header-sec,
body .p-sidebar-header .sidebar-header-container:has(.close-icon-container) .header-sec {
  display: flex !important;
  align-items: center !important;
}

/* The X zone: left divider beside the close icon, visible slate colour.
   Bounded to a fixed header-height (58px) — do NOT use min-height:100%, which
   resolves against the full drawer when the close button is absolutely
   positioned and balloons the divider into a full-height bar. */
body .p-drawer-header .close-icon-container,
body .p-sidebar-header .close-icon-container {
  /* Stretch the (absolutely-positioned) close zone to the header's ACTUAL
     height instead of a hardcoded 58px. With the header now `position:relative`
     (above), top:0 + bottom:0 pin it flush to the header's top and bottom edges
     on every sidebar regardless of header content height — so the left divider
     ends exactly at the header bottom border, no gap, no overflow. */
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  min-width: 54px !important;
  padding: 0 !important;
  border-left: 1px solid #c2ccd9 !important;
  cursor: pointer !important;
}

/* Dashboard "Customise your shortcuts" dialog — bring the PrimeNG 19 dialog
   close button (.p-dialog-close-button; the old .p-dialog-header-close rules
   never match v19) in line with the app-standard header X: full-height zone
   with a flush border-left divider and the red fill on hover. Global because
   DynamicDialog is appended to <body>, outside any component's :host scope. */
body .p-dialog.dashboard-shortcuts-dialog {
  overflow: hidden !important; /* keep the red hover fill inside the dialog's rounded corner */
}

body .p-dialog.dashboard-shortcuts-dialog .p-dialog-header {
  align-items: stretch !important;
  padding: 0 0 0 20px !important;
  min-height: 48px !important;
  border-bottom: 1px solid #e4e7eb !important;
}

body .p-dialog.dashboard-shortcuts-dialog .p-dialog-title {
  align-self: center !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #2f3f59 !important;
}

body .p-dialog.dashboard-shortcuts-dialog .p-dialog-header-actions {
  align-self: stretch !important;
  align-items: stretch !important;
  margin: 0 !important;
  gap: 0 !important;
}

body .p-dialog.dashboard-shortcuts-dialog .p-dialog-close-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  min-width: 54px !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid #c2ccd9 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1f1646 !important;
  box-shadow: none !important;
}

body .p-dialog.dashboard-shortcuts-dialog .p-dialog-close-button:hover,
body .p-dialog.dashboard-shortcuts-dialog .p-dialog-close-button:enabled:hover {
  background: #da4345 !important;
  border-left-color: #da4345 !important;
  color: #ffffff !important;
}

body .p-dialog.dashboard-shortcuts-dialog .p-dialog-close-button .p-icon,
body .p-dialog.dashboard-shortcuts-dialog .p-dialog-close-button svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* Reschedule History dialog: full-bleed header + app-standard close X.
   Global because the dialog is appendTo="body" — PrimeNG's own
   `.p-dialog-header` wrapper carries no _ngcontent attribute, so component
   SCSS can never reach it (same trap that killed the footer button style). */
body .p-dialog.fq-reschedule-dialog {
  overflow: hidden !important; /* keep the red hover inside the rounded corner */
}

/* Zero PrimeNG's header padding so the bar and its bottom border run edge to edge. */
body .p-dialog.fq-reschedule-dialog .p-dialog-header {
  padding: 0 !important;
  border-bottom: 1px solid #e4e7eb !important;
}

body .p-dialog.fq-reschedule-dialog .p-dialog-header .fq-dialog-header-bar {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 0 20px !important;
  min-height: 52px !important;
  align-items: stretch !important;
  border-bottom: 0 !important; /* the header itself owns the divider now */
}

/* Keep the title and doc/status block vertically centred in the stretched bar. */
body .p-dialog.fq-reschedule-dialog .fq-dialog-header-copy {
  display: flex !important;
  align-items: center !important;
}

/* The X zone: flush full-height left divider, red fill on hover. */
body .p-dialog.fq-reschedule-dialog .fq-dialog-close-wrap {
  align-self: stretch !important;
  display: flex !important;
  align-items: stretch !important;
  margin-left: auto !important;
  padding: 0 !important;
  border-left: 1px solid #c2ccd9 !important;
}

body .p-dialog.fq-reschedule-dialog .fq-dialog-close-wrap .fq-dialog-close.p-button {
  width: 54px !important;
  min-width: 54px !important;
  height: auto !important;
  align-self: stretch !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1f1646 !important;
  box-shadow: none !important;
}

body .p-dialog.fq-reschedule-dialog .fq-dialog-close-wrap .fq-dialog-close.p-button:hover,
body .p-dialog.fq-reschedule-dialog .fq-dialog-close-wrap .fq-dialog-close.p-button:enabled:hover {
  background: #da4345 !important;
  color: #ffffff !important;
}

body .p-dialog.fq-reschedule-dialog .fq-dialog-close-wrap .fq-dialog-close.p-button .p-icon,
body .p-dialog.fq-reschedule-dialog .fq-dialog-close-wrap .fq-dialog-close.p-button .pi,
body .p-dialog.fq-reschedule-dialog .fq-dialog-close-wrap .fq-dialog-close.p-button svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* Footer removed — let the content own the bottom edge. */
body .p-dialog.fq-reschedule-dialog .p-dialog-content {
  padding-bottom: 0 !important;
}

/* GLOBAL PrimeNG 19 tooltip restyle. After the upgrade tooltips lost their
   theme (bare white box) and the default max-width wraps even short labels
   like "Configure Columns" onto 2 lines. Standard look: dark pill, single
   line for short labels, graceful wrap only for genuinely long text. */
body .p-tooltip {
  max-width: min(480px, 100vw - 24px) !important;
}

body .p-tooltip .p-tooltip-text {
  display: inline-block !important;
  width: max-content !important;
  max-width: min(480px, 100vw - 24px) !important;
  background: #1f2937 !important;
  color: #ffffff !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25) !important;
}

body .p-tooltip.p-tooltip-top .p-tooltip-arrow {
  border-top-color: #1f2937 !important;
}

body .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
  border-bottom-color: #1f2937 !important;
}

body .p-tooltip.p-tooltip-left .p-tooltip-arrow {
  border-left-color: #1f2937 !important;
}

body .p-tooltip.p-tooltip-right .p-tooltip-arrow {
  border-right-color: #1f2937 !important;
}

/* GLOBAL PrimeNG 19 tiered-menu restyle. SplitButton dropdowns (and standalone
   p-tieredmenu overlays) now render .p-tieredmenu-* classes — every legacy
   `.p-menu .p-menuitem-*` rule is a dead selector after the upgrade, leaving
   the menus as bare unpadded lists. Verified live DOM: .p-tieredmenu-overlay >
   -root-list > -item > -item-content > -item-link (+ -item-icon/-item-label). */
body .p-tieredmenu {
  background: #ffffff !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18) !important;
  padding: 6px !important;
  min-width: 200px !important;
  color: #1f2937 !important;
}

body .p-tieredmenu .p-tieredmenu-root-list,
body .p-tieredmenu .p-tieredmenu-submenu {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  outline: none !important;
}

body .p-tieredmenu .p-tieredmenu-item-content {
  border-radius: 6px !important;
  background: transparent !important;
  color: inherit !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

body .p-tieredmenu .p-tieredmenu-item-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  color: #1f2937 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  -webkit-user-select: none !important;
          user-select: none !important;
}

body .p-tieredmenu .p-tieredmenu-item-icon {
  font-size: 14px !important;
  color: #5a6b84 !important;
  flex: 0 0 auto !important;
}

body .p-tieredmenu .p-tieredmenu-item-label {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

body .p-tieredmenu .p-tieredmenu-item-content:hover,
body .p-tieredmenu .p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {
  background: #eef4fc !important;
  color: #123c6d !important;
}

body .p-tieredmenu .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon,
body .p-tieredmenu .p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon {
  color: #2f67b0 !important;
}

body .p-tieredmenu .p-tieredmenu-separator {
  margin: 6px 4px !important;
  border-top: 1px solid #e4e7eb !important;
}

/* GLOBAL PrimeNG 19 fq-dialog footer button restyle. The freight-quote-order
   "fq-dialog" popups (quote history timeline, reschedule history, report)
   render with appendTo="body", so the rendered p-dialog — and its footer
   button — lives outside the component's :host, and the component's
   `:host ::ng-deep .fq-footer-btn-primary.p-button` rule in
   freight-quote-order.component.scss never matches it there. Mirror that
   rule globally, scoped to .fq-dialog so it only touches these popups. */
body .fq-dialog .fq-footer-btn-primary.p-button {
  background: linear-gradient(135deg, #030e4c, #0d9488) !important;
  border: none !important;
  font-weight: 600 !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

body .fq-dialog .fq-footer-btn-primary.p-button:hover {
  filter: brightness(1.06) !important;
}

body .filter-icon-btn,
body .master-filter-trigger {
  width: 96px !important;
  height: 40px !important;
  border: 1px solid #2f67b0 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  color: #2f67b0 !important;
  box-shadow: 0 5px 12px rgba(47, 103, 176, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
}

body .filter-icon-btn:hover,
body .master-filter-trigger:hover {
  background: #2f67b0 !important;
  border-color: #2f67b0 !important;
  color: #ffffff !important;
}

body .filter-icon-btn .filters-btn,
body .master-filter-trigger .filters-btn {
  color: #2f67b0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

body .filter-icon-btn:hover .filters-btn,
body .master-filter-trigger:hover .filters-btn {
  color: #ffffff !important;
}

body .filter-overlay-panel.p-overlaypanel,
body .p-overlaypanel.filter-overlay-panel {
  background: #f4f8ff !important;
  border: 1px solid #c8ddf6 !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 36px rgba(21, 46, 80, 0.2) !important;
  overflow: visible !important;
  min-width: 540px !important;
  max-width: min(960px, 100vw - 32px) !important;
  margin-top: 24px !important;
}

body .filter-overlay-panel .p-overlaypanel-content {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  overflow: visible !important;
}

body .filter-overlay-panel .filter-content,
body .filter-overlay-panel .p-overlaypanel-content > .grid,
body .filter-overlay-panel .p-overlaypanel-content > .grid + div + .btns-container {
  position: relative !important;
}

body .filter-overlay-panel .filter-content,
body .filter-overlay-panel .p-overlaypanel-content {
  min-height: 100% !important;
}

body .filter-overlay-panel .filter-content,
body .filter-overlay-panel .p-overlaypanel-content > .grid {
  padding: 20px 48px 16px 16px !important;
}

body .filter-overlay-panel .filter-content {
  border-radius: 8px !important;
  background: #f4f8ff !important;
}

body .filter-overlay-panel .filter-content > .grid,
body .filter-overlay-panel .p-overlaypanel-content > .grid {
  margin: 0 !important;
  padding-bottom: 12px !important;
  border-radius: 7px !important;
}

body .filter-overlay-panel.p-overlaypanel::before,
body .filter-overlay-panel.p-overlaypanel::after,
body .p-overlaypanel.filter-overlay-panel::before,
body .p-overlaypanel.filter-overlay-panel::after {
  display: none !important;
}

body .filter-overlay-panel .p-overlaypanel-close {
  display: none !important;
}

body .filter-overlay-panel .p-overlaypanel-close:hover {
  display: none !important;
}

body .filter-overlay-panel .p-overlaypanel-close .p-overlaypanel-close-icon,
body .filter-overlay-panel .p-overlaypanel-close .p-icon,
body .filter-overlay-panel .p-overlaypanel-close .pi,
body .filter-overlay-panel .p-overlaypanel-close svg {
  display: none !important;
}

body .filter-overlay-panel .p-overlaypanel-close::before,
body .filter-overlay-panel .p-overlaypanel-close::after {
  content: "" !important;
  position: absolute !important;
  width: 17px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #2f67b0 !important;
}

body .filter-overlay-panel .p-overlaypanel-close::before {
  transform: rotate(45deg) !important;
}

body .filter-overlay-panel .p-overlaypanel-close::after {
  transform: rotate(-45deg) !important;
}

body .filter-overlay-panel .master-filter-close {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  width: 29px !important;
  height: 29px !important;
  border: 1px solid #2f67b0 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

body .filter-overlay-panel .master-filter-close:hover,
body .filter-overlay-panel .master-filter-close:focus-visible {
  border-color: #f04444 !important;
  background: #f04444 !important;
  box-shadow: 0 8px 18px rgba(240, 68, 68, 0.22) !important;
}

body .filter-overlay-panel .master-filter-close::before,
body .filter-overlay-panel .master-filter-close::after {
  content: "" !important;
  position: absolute !important;
  width: 17px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #2f67b0 !important;
}

body .filter-overlay-panel .master-filter-close:hover::before,
body .filter-overlay-panel .master-filter-close:hover::after,
body .filter-overlay-panel .master-filter-close:focus-visible::before,
body .filter-overlay-panel .master-filter-close:focus-visible::after {
  background: #ffffff !important;
}

body .filter-overlay-panel .master-filter-close::before {
  transform: rotate(45deg) !important;
}

body .filter-overlay-panel .master-filter-close::after {
  transform: rotate(-45deg) !important;
}

body .filter-overlay-panel .master-filter-divider,
body .filter-overlay-panel div[style*=border-top] {
  display: none !important;
}

body .filter-overlay-panel .grid {
  gap: 18px !important;
}

body .filter-overlay-panel .col-12 {
  padding: 0 !important;
}

body .filter-overlay-panel .col-12.row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .filter-overlay-panel .col-12.row > .col-6,
body .filter-overlay-panel .md\:col-6 {
  width: calc(50% - 9px) !important;
  max-width: calc(50% - 9px) !important;
  flex: 0 0 calc(50% - 9px) !important;
  padding: 0 !important;
}

body .filter-overlay-panel .md\:col-4 {
  width: calc(33.333% - 12px) !important;
  max-width: calc(33.333% - 12px) !important;
  flex: 0 0 calc(33.333% - 12px) !important;
}

body .filter-overlay-panel .md\:col-3 {
  width: calc(25% - 14px) !important;
  max-width: calc(25% - 14px) !important;
  flex: 0 0 calc(25% - 14px) !important;
}

body .filter-overlay-panel .p-field,
body .filter-overlay-panel .orders-filter-field,
body .filter-overlay-panel .master-filter-field {
  min-height: 88px !important;
  padding: 11px 10px 10px !important;
  border: 1px solid #d9e6f6 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  box-shadow: 0 3px 10px rgba(26, 58, 97, 0.08) !important;
}

body .filter-overlay-panel label {
  color: #244b7b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body .filter-overlay-panel .dropDownCss > .p-dropdown,
body .filter-overlay-panel .p-dropdown,
body .filter-overlay-panel .p-inputtext {
  height: 38px !important;
  border: 1px solid #bdd2ee !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  color: #0c1b4d !important;
  box-shadow: none !important;
}

body .filter-overlay-panel .btns-container,
body .filter-overlay-panel .master-filter-actions,
body .filter-overlay-panel .button-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 0 16px !important;
  border-top: 1px solid #d9e6f6 !important;
}

body .filter-overlay-panel .footer-reset,
body .filter-overlay-panel .footer-apply {
  padding: 0 !important;
  margin: 0 !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-dropdown-panel,
body:has(.filter-overlay-panel.p-popover) .p-dropdown-panel,
body:has(.filter-overlay-panel.p-overlaypanel) .p-select-overlay,
body:has(.filter-overlay-panel.p-popover) .p-select-overlay,
body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel,
body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker,
body:has(.filter-overlay-panel.p-popover) .p-datepicker {
  z-index: 1400 !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #ffffff !important;
  border: 1px solid #b9d0ee !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 42px rgba(13, 35, 64, 0.24), 0 1px 0 rgba(255, 255, 255, 0.74) inset !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel *,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel *,
body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker *,
body:has(.filter-overlay-panel.p-popover) .p-datepicker * {
  opacity: 1 !important;
  visibility: visible !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-dropdown-items,
body:has(.filter-overlay-panel.p-popover) .p-dropdown-items,
body:has(.filter-overlay-panel.p-overlaypanel) .p-select-list,
body:has(.filter-overlay-panel.p-popover) .p-select-list,
body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-calendar-container,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-calendar-container,
body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-group,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-group {
  background: #ffffff !important;
}

body .filter-overlay-panel .calendarCss .p-inputtext,
body .filter-overlay-panel p-calendar.calendarCss .p-inputtext,
body .filter-overlay-panel .p-datepicker .p-inputtext {
  height: 40px !important;
  padding: 0 42px 0 16px !important;
  line-height: 40px !important;
  color: #1f385c !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  background: #ffffff !important;
}

body .filter-overlay-panel .calendarCss .p-datepicker-input-icon-container,
body .filter-overlay-panel p-calendar.calendarCss .p-datepicker-input-icon-container {
  right: 14px !important;
  inset-inline-end: 14px !important;
  color: #2f67b0 !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel {
  width: 318px !important;
  min-width: 318px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  transform: translateY(8px) !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel .p-datepicker-header,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel .p-datepicker-header {
  display: grid !important;
  grid-template-columns: 34px 1fr 34px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  margin-bottom: 8px !important;
  padding: 2px !important;
  border-radius: 8px !important;
  background: #eef5ff !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel .p-datepicker-prev-button,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel .p-datepicker-prev-button,
body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel .p-datepicker-next-button,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel .p-datepicker-next-button {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  color: #174f92 !important;
  background: transparent !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel .p-datepicker-prev-button:hover,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel .p-datepicker-prev-button:hover,
body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel .p-datepicker-next-button:hover,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel .p-datepicker-next-button:hover {
  color: #ffffff !important;
  background: #2f67b0 !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel .p-datepicker-title,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel .p-datepicker-title {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  color: #1f385c !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel .p-datepicker-select-month,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel .p-datepicker-select-month,
body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel .p-datepicker-select-year,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel .p-datepicker-select-year {
  padding: 0 !important;
  color: #1f385c !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: transparent !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel table,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 4px !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel th,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel th {
  color: #5d6e84 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel td,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel td {
  padding: 0 !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel td > span,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel td > span,
body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel td > a,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel td > a {
  width: 32px !important;
  height: 32px !important;
  margin: 0 auto !important;
  border-radius: 6px !important;
  color: #253f61 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel td > span:hover,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel td > span:hover,
body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel td > a:hover,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel td > a:hover {
  background: #e7f1ff !important;
  color: #174f92 !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel .p-datepicker-today > span,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel .p-datepicker-today > span,
body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel .p-datepicker-today > a,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel .p-datepicker-today > a {
  border: 1px solid #2f67b0 !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel .p-highlight,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel .p-highlight,
body:has(.filter-overlay-panel.p-overlaypanel) .p-datepicker-panel .p-datepicker-selected > span,
body:has(.filter-overlay-panel.p-popover) .p-datepicker-panel .p-datepicker-selected > span {
  color: #ffffff !important;
  background: #2f67b0 !important;
  box-shadow: 0 6px 14px rgba(47, 103, 176, 0.22) !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-select-overlay,
body:has(.filter-overlay-panel.p-popover) .p-select-overlay,
body:has(.filter-overlay-panel.p-overlaypanel) .p-dropdown-panel,
body:has(.filter-overlay-panel.p-popover) .p-dropdown-panel {
  min-width: 270px !important;
  padding: 8px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  transform: translateY(8px) !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-select-list,
body:has(.filter-overlay-panel.p-popover) .p-select-list,
body:has(.filter-overlay-panel.p-overlaypanel) .p-dropdown-items,
body:has(.filter-overlay-panel.p-popover) .p-dropdown-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 0 !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-select-option,
body:has(.filter-overlay-panel.p-popover) .p-select-option,
body:has(.filter-overlay-panel.p-overlaypanel) .p-dropdown-item,
body:has(.filter-overlay-panel.p-popover) .p-dropdown-item {
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  color: #253f61 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: transparent !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-select-option:hover,
body:has(.filter-overlay-panel.p-popover) .p-select-option:hover,
body:has(.filter-overlay-panel.p-overlaypanel) .p-dropdown-item:hover,
body:has(.filter-overlay-panel.p-popover) .p-dropdown-item:hover {
  color: #174f92 !important;
  background: #eaf3ff !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .p-select-option.p-select-option-selected,
body:has(.filter-overlay-panel.p-popover) .p-select-option.p-select-option-selected,
body:has(.filter-overlay-panel.p-overlaypanel) .p-select-option[aria-selected=true],
body:has(.filter-overlay-panel.p-popover) .p-select-option[aria-selected=true],
body:has(.filter-overlay-panel.p-overlaypanel) .p-dropdown-item.p-highlight,
body:has(.filter-overlay-panel.p-popover) .p-dropdown-item.p-highlight,
body:has(.filter-overlay-panel.p-overlaypanel) .p-dropdown-item[aria-selected=true],
body:has(.filter-overlay-panel.p-popover) .p-dropdown-item[aria-selected=true] {
  color: #ffffff !important;
  background: #2f67b0 !important;
}

body:has(.master-filter-overlay-panel.p-popover) .gridCommonCss,
body:has(.master-filter-overlay-panel.p-overlaypanel) .gridCommonCss,
body:has(.master-filter-overlay-panel.p-popover) .grid-dev-sec,
body:has(.master-filter-overlay-panel.p-overlaypanel) .grid-dev-sec {
  position: relative !important;
}

body:has(.master-filter-overlay-panel.p-popover) .gridCommonCss::after,
body:has(.master-filter-overlay-panel.p-overlaypanel) .gridCommonCss::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 24 !important;
  pointer-events: auto !important;
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.74) 0%, rgba(238, 245, 255, 0.62) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(1.5px) saturate(1.05) !important;
          backdrop-filter: blur(1.5px) saturate(1.05) !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .orders-data-shell,
body:has(.filter-overlay-panel.p-popover) .orders-data-shell {
  position: relative !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .orders-data-shell::after,
body:has(.filter-overlay-panel.p-popover) .orders-data-shell::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 24 !important;
  pointer-events: auto !important;
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.74) 0%, rgba(238, 245, 255, 0.62) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(1.5px) saturate(1.05) !important;
          backdrop-filter: blur(1.5px) saturate(1.05) !important;
}

body:has(.filter-overlay-panel.p-overlaypanel) .orders-data-shell .filterPopup,
body:has(.filter-overlay-panel.p-popover) .orders-data-shell .filterPopup,
body:has(.filter-overlay-panel.p-overlaypanel) .orders-data-shell .filterPopup .p-overlaypanel,
body:has(.filter-overlay-panel.p-popover) .orders-data-shell .filterPopup .p-popover {
  position: relative !important;
  z-index: 1206 !important;
}

body .filter-overlay-panel.p-overlaypanel,
body .filter-overlay-panel.p-popover {
  z-index: 1207 !important;
}

body .master-filter-overlay-panel.p-popover,
body .master-filter-overlay-panel.p-overlaypanel,
body .filter-overlay-panel.p-popover,
body .filter-overlay-panel.p-overlaypanel {
  z-index: 1205 !important;
  border: 1px solid #c4d8f1 !important;
  border-radius: 8px !important;
  background: #f4f8ff !important;
  box-shadow: 0 22px 46px rgba(13, 35, 64, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.74) inset !important;
  overflow: visible !important;
}

body .master-filter-overlay-panel.p-popover::before,
body .master-filter-overlay-panel.p-popover::after,
body .filter-overlay-panel.p-popover::before,
body .filter-overlay-panel.p-popover::after {
  display: none !important;
}

body .master-filter-overlay-panel.p-popover .p-popover-content,
body .filter-overlay-panel.p-popover .p-popover-content {
  padding: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  overflow: visible !important;
}

body .master-filter-overlay-panel.p-popover .filter-content,
body .filter-overlay-panel.p-popover .filter-content {
  position: relative !important;
  padding: 20px 48px 16px 16px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
  border: 1px solid rgba(215, 228, 245, 0.72) !important;
}

body .filter-overlay-panel .filter-content,
body .master-filter-overlay-panel .filter-content {
  overflow: visible !important;
}

body .filter-overlay-panel .footer-reset .p-button,
body .filter-overlay-panel .footer-apply .p-button,
body .master-filter-overlay-panel .footer-reset .p-button,
body .master-filter-overlay-panel .footer-apply .p-button {
  min-width: 96px !important;
  height: 36px !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body .filter-overlay-panel .footer-reset .p-button,
body .master-filter-overlay-panel .footer-reset .p-button {
  border: 1px solid #d53b3b !important;
  color: #d53b3b !important;
}

body .filter-overlay-panel .footer-apply .p-button,
body .master-filter-overlay-panel .footer-apply .p-button {
  border: 1px solid #2f67b0 !important;
  color: #2f67b0 !important;
}

body .filter-overlay-panel .footer-reset .p-button .p-button-label,
body .master-filter-overlay-panel .footer-reset .p-button .p-button-label {
  background: transparent !important;
  border: 0 !important;
  color: #d53b3b !important;
  opacity: 1 !important;
}

body .filter-overlay-panel .footer-apply .p-button .p-button-label,
body .master-filter-overlay-panel .footer-apply .p-button .p-button-label {
  background: transparent !important;
  border: 0 !important;
  color: #2f67b0 !important;
  opacity: 1 !important;
}

body .filter-overlay-panel .footer-reset .p-button:hover,
body .filter-overlay-panel .footer-reset .p-button:focus,
body .filter-overlay-panel .footer-reset .p-button:focus-visible,
body .filter-overlay-panel .footer-reset .p-button:active,
body .master-filter-overlay-panel .footer-reset .p-button:hover,
body .master-filter-overlay-panel .footer-reset .p-button:focus,
body .master-filter-overlay-panel .footer-reset .p-button:focus-visible,
body .master-filter-overlay-panel .footer-reset .p-button:active {
  background: #d53b3b !important;
  border: 1px solid #bf2f2f !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(213, 59, 59, 0.18) !important;
}

body .filter-overlay-panel .footer-apply .p-button:hover,
body .filter-overlay-panel .footer-apply .p-button:focus,
body .filter-overlay-panel .footer-apply .p-button:focus-visible,
body .filter-overlay-panel .footer-apply .p-button:active,
body .master-filter-overlay-panel .footer-apply .p-button:hover,
body .master-filter-overlay-panel .footer-apply .p-button:focus,
body .master-filter-overlay-panel .footer-apply .p-button:focus-visible,
body .master-filter-overlay-panel .footer-apply .p-button:active {
  background: #2f67b0 !important;
  border: 1px solid #244b7b !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(47, 103, 176, 0.18) !important;
}

body .filter-overlay-panel .footer-reset .p-button:hover .p-button-label,
body .filter-overlay-panel .footer-reset .p-button:focus .p-button-label,
body .filter-overlay-panel .footer-reset .p-button:focus-visible .p-button-label,
body .filter-overlay-panel .footer-reset .p-button:active .p-button-label,
body .filter-overlay-panel .footer-reset .p-button .p-button-label:hover,
body .master-filter-overlay-panel .footer-reset .p-button:hover .p-button-label,
body .master-filter-overlay-panel .footer-reset .p-button:focus .p-button-label,
body .master-filter-overlay-panel .footer-reset .p-button:focus-visible .p-button-label,
body .master-filter-overlay-panel .footer-reset .p-button:active .p-button-label,
body .master-filter-overlay-panel .footer-reset .p-button .p-button-label:hover {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

body .filter-overlay-panel .footer-apply .p-button:hover .p-button-label,
body .filter-overlay-panel .footer-apply .p-button:focus .p-button-label,
body .filter-overlay-panel .footer-apply .p-button:focus-visible .p-button-label,
body .filter-overlay-panel .footer-apply .p-button:active .p-button-label,
body .filter-overlay-panel .footer-apply .p-button .p-button-label:hover,
body .master-filter-overlay-panel .footer-apply .p-button:hover .p-button-label,
body .master-filter-overlay-panel .footer-apply .p-button:focus .p-button-label,
body .master-filter-overlay-panel .footer-apply .p-button:focus-visible .p-button-label,
body .master-filter-overlay-panel .footer-apply .p-button:active .p-button-label,
body .master-filter-overlay-panel .footer-apply .p-button .p-button-label:hover {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

body .column-config-panel.p-overlaypanel {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  position: fixed !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 1202 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Do NOT lock html/body overflow or use backdrop-filter here.
   That collapses PrimeNG scrollable Pack/Product grids (blank UI) on Windows/Chrome. */
html.column-config-overlay-open,
body.column-config-overlay-open {
  overflow: visible !important;
}

body.column-config-overlay-open::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  z-index: 1198 !important;
  background: rgba(15, 23, 42, 0.16) !important;
  pointer-events: none !important;
}

html.freight-column-config-overlay-open,
body.freight-column-config-overlay-open {
  overflow: visible !important;
}

body.freight-column-config-overlay-open::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  z-index: 1198 !important;
  background: rgba(15, 23, 42, 0.18) !important;
  pointer-events: none !important;
}

body.freight-column-config-overlay-open .column-config-panel.p-overlaypanel {
  z-index: 1205 !important;
}

body.column-config-overlay-open .column-config-panel.p-overlaypanel {
  z-index: 1205 !important;
}

body .column-config-panel.p-overlaypanel::before,
body .column-config-panel.p-overlaypanel::after {
  display: none !important;
}

body .column-config-panel .p-overlaypanel-content {
  width: 100% !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #555b66 !important;
  overflow: visible !important;
}

body .column-config-panel .column-config-card {
  position: relative !important;
  width: 300px !important;
  max-height: calc(100vh - 36px) !important;
  padding: 16px 14px 14px !important;
  border: 1px solid #edf1f5 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
}

body .column-config-panel .column-config-title {
  display: block !important;
  margin: -2px 34px 10px 0 !important;
  color: #4b535f !important;
  font-family: AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

body .column-config-panel .p-overlaypanel-close {
  display: none !important;
}

body .column-config-panel .column-config-close {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-left: 1px solid #e1e8f2 !important;
  border-radius: 0 6px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease !important;
}

body .column-config-panel .column-config-close::before,
body .column-config-panel .column-config-close::after {
  content: "" !important;
  position: absolute !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #7a7685 !important;
}

body .column-config-panel .column-config-close::before {
  transform: rotate(45deg) !important;
}

body .column-config-panel .column-config-close::after {
  transform: rotate(-45deg) !important;
}

body .column-config-panel .column-config-close:hover,
body .column-config-panel .column-config-close:focus-visible {
  border-left-color: #f04444 !important;
  background: #f04444 !important;
  box-shadow: 0 8px 18px rgba(240, 68, 68, 0.22) !important;
}

body .column-config-panel .column-config-close:hover::before,
body .column-config-panel .column-config-close:hover::after,
body .column-config-panel .column-config-close:focus-visible::before,
body .column-config-panel .column-config-close:focus-visible::after {
  background: #ffffff !important;
}

body .column-config-panel .columnConfigtxt {
  display: block !important;
  width: 100% !important;
  padding-top: 0 !important;
  margin-bottom: 12px !important;
}

body .column-config-panel .columnConfigtxt .p-inputtext {
  width: 100% !important;
  height: 39px !important;
  border: 1px solid #1f1646 !important;
  border-radius: 0 !important;
  color: #333946 !important;
  font-size: 15px !important;
  font-style: italic !important;
  padding: 0 10px !important;
  box-shadow: none !important;
}

body .column-config-panel .columnConfigtxt .p-inputtext::placeholder {
  color: #7f7f88 !important;
  opacity: 0.9 !important;
}

body .column-config-panel .column-config-list {
  height: min(324px, 100vh - 178px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 8px !important;
  margin-bottom: 8px !important;
  background: #ffffff !important;
}

body .column-config-panel .column-config-list::-webkit-scrollbar {
  width: 8px !important;
}

body .column-config-panel .column-config-list::-webkit-scrollbar-track {
  background: #e8f0f8 !important;
  border-radius: 8px !important;
}

body .column-config-panel .column-config-list::-webkit-scrollbar-thumb {
  background: #2f4f82 !important;
  border-radius: 8px !important;
}

body .column-config-panel .column-config-option {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  color: #5f6570 !important;
  font-family: AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

body .column-config-panel .column-config-option.column-config-divider-before {
  border-top: 1px solid #e5edf7 !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
}

body .column-config-panel .column-config-option.shipnow-action-config-option {
  min-height: 38px !important;
}

body .column-config-panel .column-config-option.shipnow-action-config-option span:last-child {
  color: #4f5562 !important;
  font-weight: 700 !important;
}

body .column-config-panel .column-config-option span:last-child {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body .column-config-panel .p-checkbox {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}

body .column-config-panel .p-checkbox .p-checkbox-box {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #cfd7df !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .column-config-panel .p-checkbox.p-checkbox-checked .p-checkbox-box,
body .column-config-panel .p-checkbox .p-checkbox-box.p-highlight {
  border-color: #1f1646 !important;
  background: #1f1646 !important;
}

body .column-config-panel .p-checkbox:not(.p-checkbox-checked) .p-checkbox-box:not(.p-highlight) {
  border-color: #cfd7df !important;
  background: #ffffff !important;
}

body .column-config-panel .p-checkbox .p-checkbox-box:hover {
  border-color: #1f1646 !important;
}

body .column-config-panel .p-checkbox .p-checkbox-box .p-checkbox-icon {
  color: #ffffff !important;
  font-size: 13px !important;
}

body .column-config-panel .button-container {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid #edf1f5 !important;
  background: #ffffff !important;
}

body .column-config-panel .btnColumnApply {
  min-width: 72px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid #1f1646 !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: #1f1646 !important;
  font-family: AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  line-height: 32px !important;
  box-shadow: none !important;
}

body .column-config-panel .btnColumnApply:hover {
  background: #1f1646 !important;
  color: #ffffff !important;
  border-color: #1f1646 !important;
}

body .p-splitbutton {
  border: 1px solid #1f1646 !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}

body .p-splitbutton .p-button {
  border: 0 !important;
  color: #1f1646 !important;
  background: #ffffff !important;
}

body .p-splitbutton .p-splitbutton-menubutton {
  border-left: 1px solid #c7d7ea !important;
}

body .p-splitbutton .p-button:hover {
  color: #16834f !important;
  background: #f4fbf7 !important;
}

body .p-splitbutton .p-button:focus,
body .p-splitbutton .p-button.p-focus,
body .p-splitbutton .p-button[aria-expanded=true] {
  color: #ffffff !important;
  background: #1f1646 !important;
}

body .addMasterBtn.p-splitbutton,
body .addMasterBtn .p-splitbutton {
  position: relative !important;
  display: inline-grid !important;
  grid-template-columns: minmax(142px, max-content) 52px !important;
  width: max-content !important;
  min-width: 184px !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid #258f1d !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: 0% 100% !important;
  background-position: right center !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

body .addMasterBtn.p-splitbutton::after,
body .addMasterBtn .p-splitbutton::after {
  content: "" !important;
  position: absolute !important;
  top: 9px !important;
  bottom: 9px !important;
  right: 52px !important;
  width: 1px !important;
  background: #258f1d !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

body p-splitbutton.addMasterBtn::after {
  display: none !important;
  content: none !important;
}

body p-splitbutton.addMasterBtn {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin-right: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body p-splitbutton.addMasterBtn > .p-splitbutton {
  border: 1px solid #258f1d !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transform: translateX(-18px) !important;
}

body .addMasterBtn.p-splitbutton > .p-tieredmenu,
body .addMasterBtn .p-splitbutton > .p-tieredmenu {
  position: absolute !important;
  grid-column: 1/-1 !important;
  inset: auto auto auto 0 !important;
}

body .addMasterBtnMenu.p-tieredmenu,
body .addMasterBtnMenu.p-menu,
body .p-tieredmenu.addMasterBtnMenu,
body .p-menu.addMasterBtnMenu {
  min-width: 176px !important;
  margin-top: 6px !important;
  padding: 6px !important;
  border: 1px solid #258f1d !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 36px rgba(13, 35, 64, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.72) inset !important;
  overflow: hidden !important;
}

body .addMasterBtnMenu.p-tieredmenu .p-tieredmenu-root-list,
body .addMasterBtnMenu.p-tieredmenu .p-tieredmenu-list,
body .addMasterBtnMenu.p-menu .p-menu-list,
body .p-tieredmenu.addMasterBtnMenu .p-tieredmenu-root-list,
body .p-tieredmenu.addMasterBtnMenu .p-tieredmenu-list,
body .p-menu.addMasterBtnMenu .p-menu-list {
  padding: 0 !important;
  margin: 0 !important;
}

body .addMasterBtnMenu.p-tieredmenu .p-menuitem,
body .addMasterBtnMenu.p-menu .p-menuitem,
body .p-tieredmenu.addMasterBtnMenu .p-menuitem,
body .p-menu.addMasterBtnMenu .p-menuitem {
  margin: 0 !important;
}

body .addMasterBtnMenu.p-tieredmenu .p-menuitem-link,
body .addMasterBtnMenu.p-menu .p-menuitem-link,
body .p-tieredmenu.addMasterBtnMenu .p-menuitem-link,
body .p-menu.addMasterBtnMenu .p-menuitem-link {
  min-height: 34px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 3px !important;
  color: #2d3540 !important;
  font-family: AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 18px !important;
  background: transparent !important;
}

body .addMasterBtnMenu.p-tieredmenu .p-menuitem-link:hover,
body .addMasterBtnMenu.p-tieredmenu .p-menuitem-link:focus,
body .addMasterBtnMenu.p-menu .p-menuitem-link:hover,
body .addMasterBtnMenu.p-menu .p-menuitem-link:focus,
body .p-tieredmenu.addMasterBtnMenu .p-menuitem-link:hover,
body .p-tieredmenu.addMasterBtnMenu .p-menuitem-link:focus,
body .p-menu.addMasterBtnMenu .p-menuitem-link:hover,
body .p-menu.addMasterBtnMenu .p-menuitem-link:focus {
  background: #3f9d2f !important;
  color: #ffffff !important;
}

body .addMasterBtnMenu.p-tieredmenu .p-menuitem-text,
body .addMasterBtnMenu.p-menu .p-menuitem-text,
body .p-tieredmenu.addMasterBtnMenu .p-menuitem-text,
body .p-menu.addMasterBtnMenu .p-menuitem-text {
  color: inherit !important;
  line-height: 18px !important;
}

body .addMasterBtn.p-splitbutton:hover,
body .addMasterBtn .p-splitbutton:hover,
body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded=true]),
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded=true]) {
  border-color: #258f1d !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .addMasterBtn.p-splitbutton .p-button,
body .addMasterBtn .p-splitbutton .p-button,
body .addMasterBtn.p-splitbutton .p-button:focus,
body .addMasterBtn.p-splitbutton .p-button.p-focus,
body .addMasterBtn.p-splitbutton .p-button[aria-expanded=true],
body .addMasterBtn .p-splitbutton .p-button:focus,
body .addMasterBtn .p-splitbutton .p-button.p-focus,
body .addMasterBtn .p-splitbutton .p-button[aria-expanded=true] {
  height: 44px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #258f1d !important;
}

body .addMasterBtn.p-splitbutton .p-splitbutton-defaultbutton,
body .addMasterBtn .p-splitbutton .p-splitbutton-defaultbutton,
body .addMasterBtn.p-splitbutton .p-button:first-child,
body .addMasterBtn .p-splitbutton .p-button:first-child {
  grid-column: 1 !important;
  width: auto !important;
  min-width: 142px !important;
  padding: 0 18px !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}

body .addMasterBtn.p-splitbutton .p-splitbutton-menubutton,
body .addMasterBtn .p-splitbutton .p-splitbutton-menubutton,
body .addMasterBtn.p-splitbutton .p-splitbutton-dropdown,
body .addMasterBtn .p-splitbutton .p-splitbutton-dropdown,
body .addMasterBtn.p-splitbutton .p-button:last-child,
body .addMasterBtn .p-splitbutton .p-button:last-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-column: 2 !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  padding: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body .addMasterBtn.p-splitbutton .p-button-label,
body .addMasterBtn .p-splitbutton .p-button-label {
  color: #258f1d !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

body .addMasterBtn.p-splitbutton .p-splitbutton-menubutton .p-button-icon,
body .addMasterBtn .p-splitbutton .p-splitbutton-menubutton .p-button-icon,
body .addMasterBtn.p-splitbutton .p-splitbutton-dropdown .p-button-icon,
body .addMasterBtn .p-splitbutton .p-splitbutton-dropdown .p-button-icon,
body .addMasterBtn.p-splitbutton .p-splitbutton-menubutton .p-icon,
body .addMasterBtn .p-splitbutton .p-splitbutton-menubutton .p-icon,
body .addMasterBtn.p-splitbutton .p-splitbutton-dropdown .p-icon,
body .addMasterBtn .p-splitbutton .p-splitbutton-dropdown .p-icon {
  color: #111111 !important;
}

body .addMasterBtn.p-splitbutton:hover .p-button,
body .addMasterBtn .p-splitbutton:hover .p-button,
body .addMasterBtn.p-splitbutton:hover .p-button-label,
body .addMasterBtn .p-splitbutton:hover .p-button-label,
body .addMasterBtn.p-splitbutton:hover .p-button-icon,
body .addMasterBtn .p-splitbutton:hover .p-button-icon,
body .addMasterBtn.p-splitbutton:hover .p-icon,
body .addMasterBtn .p-splitbutton:hover .p-icon,
body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-button,
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-button,
body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-button-label,
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-button-label,
body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-button-icon,
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-button-icon,
body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-icon,
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-icon {
  color: #258f1d !important;
}

body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton,
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton {
  border-left-color: #258f1d !important;
}

body .addMasterBtn.p-splitbutton .p-splitbutton-defaultbutton:hover,
body .addMasterBtn .p-splitbutton .p-splitbutton-defaultbutton:hover,
body .addMasterBtn.p-splitbutton .p-button:first-child:hover,
body .addMasterBtn .p-splitbutton .p-button:first-child:hover {
  background: #3f9d2f !important;
  color: #ffffff !important;
}

body .addMasterBtn.p-splitbutton .p-splitbutton-defaultbutton:hover .p-button-label,
body .addMasterBtn .p-splitbutton .p-splitbutton-defaultbutton:hover .p-button-label,
body .addMasterBtn.p-splitbutton .p-button:first-child:hover .p-button-label,
body .addMasterBtn .p-splitbutton .p-button:first-child:hover .p-button-label {
  color: #ffffff !important;
}

body .addMasterBtn.p-splitbutton .p-splitbutton-menubutton:hover,
body .addMasterBtn .p-splitbutton .p-splitbutton-menubutton:hover,
body .addMasterBtn.p-splitbutton .p-splitbutton-dropdown:hover,
body .addMasterBtn .p-splitbutton .p-splitbutton-dropdown:hover,
body .addMasterBtn.p-splitbutton .p-button:last-child:hover,
body .addMasterBtn .p-splitbutton .p-button:last-child:hover,
body p-splitbutton.addMasterBtn .p-splitbutton-menubutton:hover,
body p-splitbutton.addMasterBtn .p-splitbutton-dropdown:hover,
body p-splitbutton.addMasterBtn .p-button:last-child:hover,
body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton,
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton,
body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown,
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown,
body p-splitbutton.addMasterBtn:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton,
body p-splitbutton.addMasterBtn:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown,
body .addMasterBtn.p-splitbutton .p-button:last-child[aria-expanded=true],
body .addMasterBtn .p-splitbutton .p-button:last-child[aria-expanded=true],
body p-splitbutton.addMasterBtn .p-button:last-child[aria-expanded=true] {
  background: #3f9d2f !important;
  background-color: #3f9d2f !important;
  background-image: none !important;
  color: #ffffff !important;
  border-left-color: rgba(255, 255, 255, 0.42) !important;
}

body .addMasterBtn.p-splitbutton .p-splitbutton-menubutton:hover .p-button-icon,
body .addMasterBtn .p-splitbutton .p-splitbutton-menubutton:hover .p-button-icon,
body .addMasterBtn.p-splitbutton .p-splitbutton-dropdown:hover .p-button-icon,
body .addMasterBtn .p-splitbutton .p-splitbutton-dropdown:hover .p-button-icon,
body .addMasterBtn.p-splitbutton .p-button:last-child:hover .p-button-icon,
body .addMasterBtn .p-splitbutton .p-button:last-child:hover .p-button-icon,
body p-splitbutton.addMasterBtn .p-splitbutton-menubutton:hover .p-button-icon,
body p-splitbutton.addMasterBtn .p-splitbutton-dropdown:hover .p-button-icon,
body p-splitbutton.addMasterBtn .p-button:last-child:hover .p-button-icon,
body .addMasterBtn.p-splitbutton .p-splitbutton-menubutton:hover .p-icon,
body .addMasterBtn .p-splitbutton .p-splitbutton-menubutton:hover .p-icon,
body .addMasterBtn.p-splitbutton .p-splitbutton-dropdown:hover .p-icon,
body .addMasterBtn .p-splitbutton .p-splitbutton-dropdown:hover .p-icon,
body .addMasterBtn.p-splitbutton .p-button:last-child:hover .p-icon,
body .addMasterBtn .p-splitbutton .p-button:last-child:hover .p-icon,
body p-splitbutton.addMasterBtn .p-splitbutton-menubutton:hover .p-icon,
body p-splitbutton.addMasterBtn .p-splitbutton-dropdown:hover .p-icon,
body p-splitbutton.addMasterBtn .p-button:last-child:hover .p-icon,
body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton .p-button-icon,
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton .p-button-icon,
body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown .p-button-icon,
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown .p-button-icon,
body p-splitbutton.addMasterBtn:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton .p-button-icon,
body p-splitbutton.addMasterBtn:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown .p-button-icon,
body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton .p-icon,
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton .p-icon,
body .addMasterBtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown .p-icon,
body .addMasterBtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown .p-icon,
body p-splitbutton.addMasterBtn:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton .p-icon,
body p-splitbutton.addMasterBtn:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown .p-icon {
  color: #ffffff !important;
}

body .master-actionbtn.p-splitbutton,
body .master-actionbtn .p-splitbutton {
  position: relative !important;
  display: inline-grid !important;
  grid-template-columns: minmax(72px, max-content) 32px !important;
  width: max-content !important;
  min-width: 104px !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid #b7d0ee !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .master-actionbtn.p-splitbutton::after,
body .master-actionbtn .p-splitbutton::after {
  content: "" !important;
  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  right: 32px !important;
  width: 1px !important;
  background: #b7d0ee !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

body .master-actionbtn.p-splitbutton .p-button,
body .master-actionbtn .p-splitbutton .p-button,
body .master-actionbtn.p-splitbutton .p-button:focus,
body .master-actionbtn.p-splitbutton .p-button.p-focus,
body .master-actionbtn.p-splitbutton .p-button[aria-expanded=true],
body .master-actionbtn .p-splitbutton .p-button:focus,
body .master-actionbtn .p-splitbutton .p-button.p-focus,
body .master-actionbtn .p-splitbutton .p-button[aria-expanded=true] {
  height: 28px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
  color: #4f83cc !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton,
body .master-actionbtn.p-splitbutton .p-button:first-child,
body .master-actionbtn .p-splitbutton .p-button:first-child {
  grid-column: 1 !important;
  min-width: 64px !important;
  padding: 0 14px !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-menubutton,
body .master-actionbtn .p-splitbutton .p-splitbutton-menubutton,
body .master-actionbtn.p-splitbutton .p-splitbutton-dropdown,
body .master-actionbtn .p-splitbutton .p-splitbutton-dropdown,
body .master-actionbtn.p-splitbutton .p-button:last-child,
body .master-actionbtn .p-splitbutton .p-button:last-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-column: 2 !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

body .master-actionbtn.p-splitbutton .p-button-label,
body .master-actionbtn .p-splitbutton .p-button-label {
  color: #4f83cc !important;
  font-family: AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

body .master-actionbtn.p-splitbutton .p-button-icon,
body .master-actionbtn .p-splitbutton .p-button-icon,
body .master-actionbtn.p-splitbutton .p-icon,
body .master-actionbtn .p-splitbutton .p-icon {
  color: #79a5df !important;
}

body .master-actionbtn.p-splitbutton:hover,
body .master-actionbtn .p-splitbutton:hover,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded=true]),
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded=true]) {
  border-color: #3d6fc4 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:hover,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:hover,
body .master-actionbtn.p-splitbutton .p-button:first-child:hover,
body .master-actionbtn .p-splitbutton .p-button:first-child:hover {
  background: #3d6fc4 !important;
  color: #ffffff !important;
  border-right-color: rgba(255, 255, 255, 0.38) !important;
}

body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-button:last-child,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-button:last-child {
  background: #ffffff !important;
  color: #79a5df !important;
  border-left-color: #b7d0ee !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:hover .p-button-label,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:hover .p-button-label,
body .master-actionbtn.p-splitbutton .p-button:first-child:hover .p-button-label,
body .master-actionbtn .p-splitbutton .p-button:first-child:hover .p-button-label,
body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:hover .p-button-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:hover .p-button-icon,
body .master-actionbtn.p-splitbutton .p-button:first-child:hover .p-button-icon,
body .master-actionbtn .p-splitbutton .p-button:first-child:hover .p-button-icon,
body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:hover .p-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:hover .p-icon,
body .master-actionbtn.p-splitbutton .p-button:first-child:hover .p-icon,
body .master-actionbtn .p-splitbutton .p-button:first-child:hover .p-icon {
  color: #ffffff !important;
  background: #3d6fc4 !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-menubutton:hover,
body .master-actionbtn .p-splitbutton .p-splitbutton-menubutton:hover,
body .master-actionbtn.p-splitbutton .p-splitbutton-dropdown:hover,
body .master-actionbtn .p-splitbutton .p-splitbutton-dropdown:hover,
body .master-actionbtn.p-splitbutton .p-button:last-child:hover,
body .master-actionbtn .p-splitbutton .p-button:last-child:hover {
  background: #3d6fc4 !important;
  background-color: #3d6fc4 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-left-color: rgba(255, 255, 255, 0.38) !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-menubutton:hover .p-button-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-menubutton:hover .p-button-icon,
body .master-actionbtn.p-splitbutton .p-splitbutton-dropdown:hover .p-button-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-dropdown:hover .p-button-icon,
body .master-actionbtn.p-splitbutton .p-button:last-child:hover .p-button-icon,
body .master-actionbtn .p-splitbutton .p-button:last-child:hover .p-button-icon,
body .master-actionbtn.p-splitbutton .p-splitbutton-menubutton:hover .p-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-menubutton:hover .p-icon,
body .master-actionbtn.p-splitbutton .p-splitbutton-dropdown:hover .p-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-dropdown:hover .p-icon,
body .master-actionbtn.p-splitbutton .p-button:last-child:hover .p-icon,
body .master-actionbtn .p-splitbutton .p-button:last-child:hover .p-icon,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton .p-button-icon,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton .p-button-icon,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown .p-button-icon,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown .p-button-icon,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-button:last-child .p-button-icon,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-button:last-child .p-button-icon,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton .p-icon,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-menubutton .p-icon,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown .p-icon,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-splitbutton-dropdown .p-icon,
body .master-actionbtn.p-splitbutton:has(.p-button[aria-expanded=true]) .p-button:last-child .p-icon,
body .master-actionbtn .p-splitbutton:has(.p-button[aria-expanded=true]) .p-button:last-child .p-icon {
  color: #ffffff !important;
  background: #3d6fc4 !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-menubutton:hover ~ .p-splitbutton-defaultbutton,
body .master-actionbtn .p-splitbutton .p-splitbutton-menubutton:hover ~ .p-splitbutton-defaultbutton,
body .master-actionbtn.p-splitbutton .p-button:last-child:hover ~ .p-button:first-child,
body .master-actionbtn .p-splitbutton .p-button:last-child:hover ~ .p-button:first-child,
body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover),
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover),
body .master-actionbtn.p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover),
body .master-actionbtn .p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) {
  background: #ffffff !important;
  color: #4f83cc !important;
  border-right-color: #b7d0ee !important;
}

body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover) .p-button-label,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover) .p-button-label,
body .master-actionbtn.p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) .p-button-label,
body .master-actionbtn .p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) .p-button-label,
body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover) .p-button-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover) .p-button-icon,
body .master-actionbtn.p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) .p-button-icon,
body .master-actionbtn .p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) .p-button-icon,
body .master-actionbtn.p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover) .p-icon,
body .master-actionbtn .p-splitbutton .p-splitbutton-defaultbutton:has(+ .p-splitbutton-menubutton:hover) .p-icon,
body .master-actionbtn.p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) .p-icon,
body .master-actionbtn .p-splitbutton .p-button:first-child:has(+ .p-button:last-child:hover) .p-icon {
  color: #4f83cc !important;
  background: #ffffff !important;
}

body .addMasterBtnMenu.p-tieredmenu {
  width: max-content !important;
  min-width: 176px !important;
  max-width: 320px !important;
  padding: 8px 0 !important;
  transform: translateX(-20px) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22) !important;
}

body .addMasterBtnMenu .p-menu-list,
body .addMasterBtnMenu .p-tieredmenu-root-list {
  padding: 0 !important;
}

body .addMasterBtnMenu .p-menuitem-link {
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 0 !important;
  color: #1f1646 !important;
  font-size: 14px !important;
  font-family: AvenirNextCyrMedium !important;
}

body .addMasterBtnMenu .p-menuitem-link:hover,
body .addMasterBtnMenu .p-menuitem-link:focus {
  background: #f4fbf7 !important;
  color: #16834f !important;
}

/* Long labels such as "Import Module Statuses" must not lose trailing characters. */
body .addMasterBtnMenu .p-menuitem-text,
body .addMasterBtnMenu .p-tieredmenu-item-label {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body .masterActionBtnMenu.p-tieredmenu,
body .masterActionBtnMenu.p-menu {
  width: 158px !important;
  min-width: 158px !important;
  padding: 10px 0 !important;
  margin-top: 6px !important;
  border: 1px solid #d6e1ef !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(15, 34, 58, 0.2) !important;
  overflow: hidden !important;
}

body .masterActionBtnMenu .p-menu-list,
body .masterActionBtnMenu .p-tieredmenu-root-list {
  padding: 0 !important;
}

body .masterActionBtnMenu .p-menuitem {
  margin: 0 !important;
}

body .masterActionBtnMenu .p-menuitem + .p-menuitem {
  border-top: 1px solid #edf2f8 !important;
}

body .masterActionBtnMenu .p-menuitem-link {
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  line-height: 22px !important;
  background: #ffffff !important;
  color: #343741 !important;
  font-size: 14px !important;
  font-family: AvenirNextCyrMedium !important;
}

body .masterActionBtnMenu .p-menuitem-link:hover,
body .masterActionBtnMenu .p-menuitem-link:focus {
  background: #ffffff !important;
  color: #343741 !important;
}

body .masterActionBtnMenu .p-menuitem-text {
  display: block !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

body .mat-mdc-tab-body-wrapper,
body .mat-mdc-tab-body,
body .mat-mdc-tab-body-content {
  transform: none !important;
  transition: none !important;
}

body .mat-mdc-tab-body-content {
  overflow: hidden !important;
}

body .serial-valid input,
body input.serial-valid,
body .serial-success input,
body input.serial-success {
  border-color: #16834f !important;
  box-shadow: 0 0 0 2px rgba(22, 131, 79, 0.16) !important;
}

body .serial-invalid input,
body input.serial-invalid,
body .serial-error input,
body input.serial-error {
  border-color: #da4345 !important;
  box-shadow: 0 0 0 2px rgba(218, 67, 69, 0.14) !important;
}

body .master-form-toggle.p-inputswitch,
body .master-form-toggle .p-inputswitch {
  width: 42px !important;
  height: 22px !important;
  display: inline-block !important;
}

body .master-form-toggle.p-inputswitch .p-inputswitch-slider,
body .master-form-toggle .p-inputswitch-slider {
  width: 42px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: #cfd6dd !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .master-form-toggle.p-inputswitch .p-inputswitch-slider::before,
body .master-form-toggle .p-inputswitch-slider::before {
  width: 16px !important;
  height: 16px !important;
  left: 3px !important;
  top: 3px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
  transform: none !important;
}

body .master-form-toggle.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider,
body .master-form-toggle .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider,
body .master-form-toggle.p-inputswitch-checked .p-inputswitch-slider {
  background: #07840d !important;
}

body .master-form-toggle.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before,
body .master-form-toggle .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before,
body .master-form-toggle.p-inputswitch-checked .p-inputswitch-slider::before {
  left: 23px !important;
  transform: none !important;
}

body .master-form-toggle-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 42px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #b7b7b7 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

body .master-form-toggle-btn::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 4px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

body .master-form-toggle-btn--on {
  background: #07840d !important;
}

body .master-form-toggle-btn--on::after {
  left: 22px !important;
}

body .master-form-toggle-btn--off {
  background: #b7b7b7 !important;
}

body .master-form-toggle-btn--off::after {
  left: 4px !important;
}

/* ==========================================================================
   PrimeNG 19 ToggleSwitch (formerly InputSwitch) global compatibility.
   In PrimeNG 19 the deprecated <p-inputSwitch> renders `.p-toggleswitch*`
   classes whose base geometry/colors come from `--p-toggleswitch-*` design
   tokens. This app has no @primeng/themes preset, so those tokens are
   undefined and every switch collapses to a tiny black square. The rules
   below restore the previous InputSwitch look for ALL switches app-wide
   (Auto Print, Auto Scale, Dim Scale, etc.) plus the green master-form
   variant, so we don't have to fix each screen individually.
   ========================================================================== */
body .p-toggleswitch {
  width: 3rem !important;
  height: 1.75rem !important;
  display: inline-block !important;
  position: relative !important;
}

body .p-toggleswitch .p-toggleswitch-slider {
  width: 100% !important;
  height: 100% !important;
  background: #da4345 !important; /* OFF = red */
  border: 0 none !important;
  border-radius: 30px !important;
  box-shadow: none !important;
  transition: background-color 0.2s, box-shadow 0.2s !important;
}

body .p-toggleswitch .p-toggleswitch-slider::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 0.25rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-top: -0.625rem !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
  transition: left 0.2s !important;
}

body .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
  background: #07840d !important; /* ON = green */
}

body .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider::before {
  left: 1.5rem !important;
  background: #ffffff !important;
}

body .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
  background: #c23a3c !important; /* OFF hover = darker red */
}

body .p-toggleswitch.p-toggleswitch-checked:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
  background: #0a9e12 !important; /* ON hover = brighter green */
}

body .p-toggleswitch.p-disabled {
  opacity: 0.6 !important;
}

/* Green master-form variant (class="master-form-toggle") on new classes */
body .master-form-toggle.p-toggleswitch,
body .master-form-toggle .p-toggleswitch {
  width: 42px !important;
  height: 22px !important;
}

body .master-form-toggle.p-toggleswitch .p-toggleswitch-slider,
body .master-form-toggle .p-toggleswitch .p-toggleswitch-slider {
  border-radius: 999px !important;
  background: #da4345 !important; /* OFF = red */
}

body .master-form-toggle.p-toggleswitch .p-toggleswitch-slider::before,
body .master-form-toggle .p-toggleswitch .p-toggleswitch-slider::before {
  width: 16px !important;
  height: 16px !important;
  left: 3px !important;
  margin-top: -8px !important;
}

body .master-form-toggle.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider,
body .master-form-toggle .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
  background: #07840d !important;
}

body .master-form-toggle.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider::before,
body .master-form-toggle .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider::before {
  left: 23px !important;
}

/* ==========================================================================
   GLOBAL toggle-switch label alignment. Older peripheral markup split the
   switch and its caption into separate Bootstrap columns and nudged each down
   with `margin-top`/`pt-4`, which knocked them off the row's vertical centre.
   The inline hacks were removed in markup; this rule keeps the switch and its
   label centred on one line everywhere and neutralises any leftover offsets so
   future screens using the same `.auto-scale-*`/`.auto-print-*` classes stay
   aligned. */
body .auto-scale-switch,
body .auto-print-switch {
  margin-top: 0 !important;
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body .auto-scale-switch .p-inputswitch,
body .auto-scale-switch .p-toggleswitch,
body .auto-print-switch .p-inputswitch,
body .auto-print-switch .p-toggleswitch {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body .auto-scale-label,
body .auto-print-label {
  display: flex !important;
  align-items: center !important;
}

body .auto-scale-label label,
body .auto-print-label label {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  line-height: 1.2 !important;
}

/* ==========================================================================
   Profile / form panels — label-to-field breathing room and checkbox
   alignment. After the migration form labels sat flush on their inputs and
   checkbox labels were pushed off-center by a stray `mt-1`. Global so every
   panel (Profile, Peripheral, masters) reads consistently.
   ========================================================================== */
/* Field labels inside any profile/config panel. Excludes checkbox labels
   (which carry `.ms-2` and must stay inline beside their box). Covers
   Default Cursor, Configure Function Keys, Phone/Email, etc. whether or not
   they sit in a `.form-group`. */
body .fields-container label:not(.ms-2) {
  display: block !important;
  margin-bottom: 0.45rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* Checkbox + label: kill the mt-1 that broke vertical centering, keep an
   even gap, and vertically center the label against the box. */
body p-checkbox + label,
body .p-checkbox + label {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0.5rem !important;
  line-height: 1.1 !important;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

/* Notification-type style checkbox rows: consistent vertical rhythm so the
   two wrapped rows (Email/SMS/… and All statuses/Tracking Status) don't
   crowd each other. */
body .fields-container .col-auto.d-flex.align-items-center {
  margin-top: 0.4rem !important;
  margin-bottom: 0.4rem !important;
}

body .p-sidebar.ui-sidebar-lg,
body .p-drawer.ui-sidebar-lg,
body .p-sidebar.popupCls,
body .p-drawer.popupCls {
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: calc(100vw - 94px) !important;
  max-width: calc(100vw - 94px) !important;
  min-width: min(960px, 100vw - 94px) !important;
  height: 100vh !important;
  margin-top: 0 !important;
  position: fixed !important;
  z-index: 2147483000 !important;
  border-left: 1px solid #d7d7d7 !important;
  background: #f7f8fa !important;
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.22) !important;
}

body .p-sidebar.routing-options-popup,
body .p-drawer.routing-options-popup {
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: min(560px, 100vw - 96px) !important;
  max-width: min(560px, 100vw - 96px) !important;
  height: 100vh !important;
  margin-top: 0 !important;
  position: fixed !important;
  z-index: 2147483000 !important;
  border-left: 1px solid #d8e2ee !important;
  background: #f7f8fa !important;
  box-shadow: -10px 0 24px rgba(15, 35, 64, 0.18) !important;
}

body .p-sidebar.routing-options-popup.brokerPopUp,
body .p-sidebar.routing-options-popup.codPopUp,
body .p-drawer.routing-options-popup.brokerPopUp,
body .p-drawer.routing-options-popup.codPopUp {
  width: min(720px, 100vw - 96px) !important;
  max-width: min(720px, 100vw - 96px) !important;
}

body .p-sidebar.routing-options-popup .p-sidebar-header,
body .p-drawer.routing-options-popup .p-drawer-header {
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  border-bottom: 1px solid #e1e7ef !important;
  background: #ffffff !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 2147483002 !important;
}

body .p-sidebar.routing-options-popup .p-sidebar-header > div,
body .p-drawer.routing-options-popup .p-drawer-header > div {
  width: 100% !important;
}

body .p-sidebar.routing-options-popup .siderbar-header-container,
body .p-drawer.routing-options-popup .siderbar-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 58px !important;
  padding: 0 0 0 22px !important;
}

body .p-sidebar.routing-options-popup .routing-options-popup-title,
body .p-drawer.routing-options-popup .routing-options-popup-title {
  min-width: 0 !important;
  padding-right: 16px !important;
  color: #243247 !important;
  font-family: AvenirNextCyrMedium, Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body .p-sidebar.routing-options-popup .close-icon-container,
body .p-drawer.routing-options-popup .close-icon-container {
  width: 54px !important;
  height: 58px !important;
  border-left: 1px solid #d6dde7 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  cursor: pointer !important;
}

body .p-sidebar.routing-options-popup .close-icon-container:hover,
body .p-sidebar.routing-options-popup .close-icon-container:focus-visible,
body .p-drawer.routing-options-popup .close-icon-container:hover,
body .p-drawer.routing-options-popup .close-icon-container:focus-visible {
  background: #DA4345 !important;
  border-left-color: #DA4345 !important;
  transform: none !important;
}

body .p-sidebar.routing-options-popup .close-icon-container:hover .close-icon-tag,
body .p-sidebar.routing-options-popup .close-icon-container:hover .pi,
body .p-sidebar.routing-options-popup .close-icon-container:hover i,
body .p-sidebar.routing-options-popup .close-icon-container:focus-visible .close-icon-tag,
body .p-sidebar.routing-options-popup .close-icon-container:focus-visible .pi,
body .p-sidebar.routing-options-popup .close-icon-container:focus-visible i,
body .p-drawer.routing-options-popup .close-icon-container:hover .close-icon-tag,
body .p-drawer.routing-options-popup .close-icon-container:hover .pi,
body .p-drawer.routing-options-popup .close-icon-container:hover i,
body .p-drawer.routing-options-popup .close-icon-container:focus-visible .close-icon-tag,
body .p-drawer.routing-options-popup .close-icon-container:focus-visible .pi,
body .p-drawer.routing-options-popup .close-icon-container:focus-visible i {
  color: #ffffff !important;
  filter: brightness(0) invert(1) !important;
}

body .p-sidebar.routing-options-popup .p-sidebar-content,
body .p-drawer.routing-options-popup .p-drawer-content {
  padding: 18px 20px 74px !important;
  background: #f7f8fa !important;
  overflow-y: auto !important;
}

body .p-sidebar.routing-options-popup .p-sidebar-footer,
body .p-drawer.routing-options-popup .p-drawer-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 10px 18px !important;
  border-top: 1px solid #d8e2ee !important;
  background: #ffffff !important;
  z-index: 2147483002 !important;
}

body .p-sidebar.routing-options-popup .popupcontainer,
body .p-drawer.routing-options-popup .popupcontainer {
  padding: 0 !important;
  margin: 0 !important;
}

body .p-sidebar.routing-options-popup .poup-content,
body .p-drawer.routing-options-popup .poup-content {
  padding: 18px !important;
  border: 1px solid #e1e8f2 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(14, 32, 58, 0.08) !important;
}

body .p-sidebar.routing-options-popup .card-title,
body .p-drawer.routing-options-popup .card-title {
  display: block !important;
  margin: 0 0 18px !important;
}

body .p-sidebar.routing-options-popup .routing-options-section-title,
body .p-drawer.routing-options-popup .routing-options-section-title,
body .p-sidebar.routing-options-popup .card-title > span:not(:has(img)),
body .p-drawer.routing-options-popup .card-title > span:not(:has(img)) {
  display: block !important;
  color: #2f3542 !important;
  font-family: AvenirNextCyrMedium, Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
}

body .p-sidebar.routing-options-popup .routeBill,
body .p-drawer.routing-options-popup .routeBill {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 18px 14px !important;
  padding: 0 !important;
  overflow: visible !important;
}

body .p-sidebar.routing-options-popup .popupitem,
body .p-drawer.routing-options-popup .popupitem {
  display: flex !important;
  flex-direction: column !important;
  width: calc(50% - 7px) !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
}

body .p-sidebar.routing-options-popup .popupitem label,
body .p-drawer.routing-options-popup .popupitem label {
  display: block !important;
  margin: 0 !important;
  color: #687083 !important;
  font-family: AvenirNextCyrMedium, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

body .p-sidebar.routing-options-popup .popupitem input[pInputText],
body .p-drawer.routing-options-popup .popupitem input[pInputText],
body .p-sidebar.routing-options-popup .popupitem .p-inputtext,
body .p-drawer.routing-options-popup .popupitem .p-inputtext,
body .p-sidebar.routing-options-popup .popupitem .p-dropdown,
body .p-drawer.routing-options-popup .popupitem .p-dropdown,
body .p-sidebar.routing-options-popup .popupitem .p-calendar,
body .p-drawer.routing-options-popup .popupitem .p-calendar {
  width: 100% !important;
  min-height: 40px !important;
}

body .p-sidebar.routing-options-popup .popupitem p-calendar,
body .p-drawer.routing-options-popup .popupitem p-calendar {
  display: block !important;
  width: 100% !important;
}

body .p-sidebar.routing-options-popup .popupitem .p-calendar,
body .p-drawer.routing-options-popup .popupitem .p-calendar,
body .p-sidebar.routing-options-popup .popupitem .p-datepicker,
body .p-drawer.routing-options-popup .popupitem .p-datepicker {
  display: flex !important;
  align-items: stretch !important;
  box-shadow: none !important;
}

body .p-sidebar.routing-options-popup .popupitem .p-calendar .p-inputtext,
body .p-drawer.routing-options-popup .popupitem .p-calendar .p-inputtext,
body .p-sidebar.routing-options-popup .popupitem .p-datepicker .p-inputtext,
body .p-drawer.routing-options-popup .popupitem .p-datepicker .p-inputtext {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

body .p-sidebar.routing-options-popup .popupitem .p-calendar .p-datepicker-trigger,
body .p-drawer.routing-options-popup .popupitem .p-calendar .p-datepicker-trigger,
body .p-sidebar.routing-options-popup .popupitem .p-datepicker .p-datepicker-trigger,
body .p-drawer.routing-options-popup .popupitem .p-datepicker .p-datepicker-trigger,
body .p-sidebar.routing-options-popup .popupitem .p-calendar .p-datepicker-input-icon-container,
body .p-drawer.routing-options-popup .popupitem .p-calendar .p-datepicker-input-icon-container,
body .p-sidebar.routing-options-popup .popupitem .p-datepicker .p-datepicker-input-icon-container,
body .p-drawer.routing-options-popup .popupitem .p-datepicker .p-datepicker-input-icon-container {
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  border: 1px solid var(--esj-control-border) !important;
  border-left: 0 !important;
  border-radius: 0 4px 4px 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .p-sidebar.routing-options-popup .popupitem input[pInputText],
body .p-drawer.routing-options-popup .popupitem input[pInputText],
body .p-sidebar.routing-options-popup .popupitem .p-inputtext,
body .p-drawer.routing-options-popup .popupitem .p-inputtext {
  padding: 9px 12px !important;
}

@media (max-width: 900px) {
  body .p-sidebar.routing-options-popup,
  body .p-drawer.routing-options-popup {
    width: min(560px, 100vw - 32px) !important;
    max-width: min(560px, 100vw - 32px) !important;
  }
  body .p-sidebar.routing-options-popup .popupitem,
  body .p-drawer.routing-options-popup .popupitem {
    width: 100% !important;
  }
}
body .p-sidebar.ui-sidebar-lg .p-sidebar-header,
body .p-drawer.ui-sidebar-lg .p-drawer-header,
body .p-sidebar.popupCls .p-sidebar-header,
body .p-drawer.popupCls .p-drawer-header {
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  border-bottom: 1px solid #e4e7eb !important;
  background: #ffffff !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 2147483002 !important;
}

body .p-sidebar.ui-sidebar-lg .p-sidebar-header > div,
body .p-sidebar.popupCls .p-sidebar-header > div,
body .master-sidebar .p-sidebar-header > div {
  width: 100% !important;
}

body .p-sidebar.ui-sidebar-lg .siderbar-header-container,
body .p-sidebar.popupCls .siderbar-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 58px !important;
  padding: 0 0 0 22px !important;
}

body .p-sidebar.ui-sidebar-lg .close-icon-container,
body .p-sidebar.popupCls .close-icon-container,
body .p-sidebar.popupCls .close-icon-container-small {
  width: 54px !important;
  height: 58px !important;
  border-left: 1px solid #8f8f8f !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  cursor: pointer !important;
}

body .p-sidebar.ui-sidebar-lg .p-sidebar-content,
body .p-drawer.ui-sidebar-lg .p-drawer-content,
body .p-sidebar.popupCls .p-sidebar-content,
body .p-drawer.popupCls .p-drawer-content {
  padding: 16px 20px 74px !important;
  background: #f7f8fa !important;
  overflow-y: auto !important;
}

body .p-sidebar.ui-sidebar-lg .p-sidebar-footer,
body .p-drawer.ui-sidebar-lg .p-drawer-footer,
body .p-sidebar.popupCls .p-sidebar-footer,
body .p-drawer.popupCls .p-drawer-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 10px 20px !important;
  border-top: 1px solid #d7d7d7 !important;
  background: #ffffff !important;
  z-index: 2147483002 !important;
}

body .p-sidebar.master-sidebar,
body .p-drawer.master-sidebar,
body .master-sidebar.p-sidebar,
body .master-sidebar.p-drawer {
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  /* Right-side form drawer, styled to match the Profile Information drawer:
     compact width + light canvas so the white section cards float. */
  width: min(880px, 100vw - 94px) !important;
  max-width: calc(100vw - 94px) !important;
  height: 100vh !important;
  margin-top: 0 !important;
  position: fixed !important;
  z-index: 2147483000 !important;
  background: #f4f6fb !important;
  border-left: 1px solid #d7d7d7 !important;
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.22) !important;
}

body .master-sidebar .p-sidebar-header,
body .master-sidebar .p-drawer-header {
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #eef2f6 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2147483002 !important;
}

body .master-sidebar .siderbar-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 58px !important;
  padding: 0 0 0 22px !important;
  background: #ffffff !important;
}

body .master-sidebar .close-icon-container {
  display: inline-flex !important;
  width: 54px !important;
  height: 58px !important;
  border-left: 1px solid #8f8f8f !important;
  background: #ffffff !important;
}

body .master-sidebar .p-sidebar-content,
body .master-sidebar .p-drawer-content {
  padding: 16px 18px 74px !important;
  background: #f4f6fb !important;
}

/* No outer white slab — sections become individual floating cards on the
   light canvas, matching the Profile Information drawer. */
body .master-sidebar .master-sidebar-card-shell {
  width: 100% !important;
  min-height: calc(100vh - 132px) !important;
  padding: 4px 0 18px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .master-sidebar .custom-form-container,
body .master-sidebar .contact-info-card {
  margin: 0 0 16px !important;
  zoom: 1 !important;
  overflow: visible !important;
}

body .master-sidebar .contact-info-card .fields-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

body .master-sidebar .contact-info-card .p-card,
body .master-sidebar .contact-info-card .p-card.p-component {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .master-sidebar .contact-info-card .p-card .p-card-body {
  background: #ffffff !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(15, 31, 52, 0.1) !important;
  padding: 18px 22px 22px !important;
  height: auto !important;
}

body .master-sidebar .p-sidebar-footer,
body .master-sidebar .p-drawer-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 58px !important;
  padding: 10px 20px !important;
  background: #ffffff !important;
  border-top: 1px solid #d7d7d7 !important;
  z-index: 2147483002 !important;
}

body .master-sidebar .footer-save-cm {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  background: #ffffff !important;
}

body:has(.p-sidebar.master-sidebar.p-sidebar-active) .layout-topbar .topbar-menu,
body:has(.p-sidebar.master-sidebar.p-sidebar-visible) .layout-topbar .topbar-menu,
body:has(.p-drawer.master-sidebar.p-drawer-open) .layout-topbar .topbar-menu,
body.master-sidebar-open .layout-topbar .topbar-menu {
  visibility: hidden !important;
  pointer-events: none !important;
}

body:has(.p-sidebar.master-sidebar.p-sidebar-active) .layout-topbar .notification-menu,
body:has(.p-sidebar.master-sidebar.p-sidebar-visible) .layout-topbar .notification-menu,
body:has(.p-drawer.master-sidebar.p-drawer-open) .layout-topbar .notification-menu,
body.master-sidebar-open .layout-topbar .notification-menu {
  visibility: hidden !important;
  pointer-events: none !important;
}

body:has(.p-sidebar.master-sidebar.p-sidebar-active) .footer-Section,
body:has(.p-sidebar.master-sidebar.p-sidebar-visible) .footer-Section,
body:has(.p-sidebar.ui-sidebar-lg.p-sidebar-active) .footer-Section,
body:has(.p-sidebar.ui-sidebar-lg.p-sidebar-visible) .footer-Section,
body:has(.p-drawer.master-sidebar.p-drawer-open) .footer-Section,
body:has(.p-drawer.ui-sidebar-lg.p-drawer-open) .footer-Section,
body.master-sidebar-open .footer-Section {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body .master-sidebar .p-sidebar-header::before,
body .master-sidebar .p-drawer-header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: #ffffff !important;
  z-index: -1 !important;
}

body .roles-master-sidebar.p-sidebar,
body .roles-master-sidebar.p-drawer {
  top: 0 !important;
  right: 0 !important;
  /* Match the common-master drawer width so roles never drifts wider. */
  width: min(880px, 100vw - 94px) !important;
  max-width: calc(100vw - 94px) !important;
  height: 100vh !important;
  margin-top: 0 !important;
  background: #f4f6fb !important;
  border-left: 1px solid #d7d7d7 !important;
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.22) !important;
  z-index: 2147483000 !important;
}

body .roles-master-sidebar .p-sidebar-header,
body .roles-master-sidebar .p-drawer-header {
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  background: #ffffff !important;
  border-bottom: 1px solid #eef2f6 !important;
  box-shadow: none !important;
}

body .roles-master-sidebar .siderbar-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 58px !important;
  padding: 0 0 0 22px !important;
  background: #ffffff !important;
}

body .roles-master-sidebar .close-icon-container {
  position: static !important;
  width: 54px !important;
  height: 58px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-left: 1px solid #8f8f8f !important;
  background: #ffffff !important;
}

body .roles-master-sidebar .close-icon-tag {
  padding-top: 0 !important;
}

body .roles-master-sidebar .p-sidebar-content,
body .roles-master-sidebar .p-drawer-content {
  padding: 16px 20px 74px !important;
  background: #f4f6fb !important;
}

/* ================================================================== *
 * Master / Roles drawers — Profile Information drawer parity (polish)
 * Soft header shadow, red-fill close on hover, and refined form fields
 * lifted from the profile-sidebar design. CSS-only, all masters share it.
 * ================================================================== */
body .master-sidebar .p-sidebar-header,
body .master-sidebar .p-drawer-header,
body .roles-master-sidebar .p-sidebar-header,
body .roles-master-sidebar .p-drawer-header {
  border-bottom: 0 !important;
  box-shadow: 0 1px 6px rgba(15, 31, 52, 0.12) !important;
}

body .master-sidebar .close-icon-container:hover,
body .roles-master-sidebar .close-icon-container:hover {
  background: #da4345 !important;
}

body .master-sidebar .close-icon-container:hover .close-icon-tag,
body .master-sidebar .close-icon-container:hover .pi,
body .master-sidebar .close-icon-container:hover i,
body .roles-master-sidebar .close-icon-container:hover .close-icon-tag,
body .roles-master-sidebar .close-icon-container:hover .pi,
body .roles-master-sidebar .close-icon-container:hover i {
  color: #ffffff !important;
  filter: brightness(0) invert(1) !important;
}

/* Section title a touch heavier, like the profile card headers. */
body .master-sidebar .contact-info-card .title-border {
  padding-bottom: 10px !important;
  margin-bottom: 6px !important;
}

/* Form fields: rounded, soft surface, clear blue focus ring. */
body .master-sidebar .fields-container .fieldItem .p-inputtext,
body .master-sidebar .fields-container .fieldItem input.p-inputtext,
body .master-sidebar .fields-container .fieldItem textarea,
body .master-sidebar .fields-container .fieldItem .p-dropdown,
body .master-sidebar .fields-container .fieldItem .p-select,
body .master-sidebar .fields-container .fieldItem .p-multiselect,
body .roles-master-sidebar .form-group .p-inputtext,
body .roles-master-sidebar .form-group input.p-inputtext {
  width: 100% !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  border: 1px solid #e2e6ee !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

body .master-sidebar .fields-container .fieldItem .p-inputtext:enabled:hover,
body .master-sidebar .fields-container .fieldItem .p-dropdown:not(.p-disabled):hover,
body .roles-master-sidebar .form-group .p-inputtext:enabled:hover {
  border-color: #c4ccda !important;
}

body .master-sidebar .fields-container .fieldItem .p-inputtext:enabled:focus,
body .master-sidebar .fields-container .fieldItem textarea:focus,
body .master-sidebar .fields-container .fieldItem .p-dropdown.p-focus,
body .roles-master-sidebar .form-group .p-inputtext:enabled:focus {
  border-color: #0b5ed7 !important;
  box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.15) !important;
  background: #ffffff !important;
  outline: none !important;
}

body .master-sidebar .fields-container .fieldItem .p-inputtext:disabled,
body .master-sidebar .fields-container .fieldItem .p-inputtext[disabled] {
  background: #f1f3f7 !important;
  color: #6b7280 !important;
  opacity: 1 !important;
}

body .roles-master-sidebar .custom-form-container {
  height: auto !important;
  margin-bottom: 0 !important;
}

body .roles-master-sidebar .form-info-card .p-card,
body .roles-master-sidebar .form-info-card .p-card.p-component,
body .roles-master-sidebar .role-access-card {
  width: 100% !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 12px rgba(20, 32, 48, 0.08) !important;
}

body .roles-master-sidebar .form-info-card .p-card .p-card-body,
body .roles-master-sidebar .role-access-card {
  background: #ffffff !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 12px rgba(20, 32, 48, 0.08) !important;
  border: 0 !important;
}

/* Role ID / Role Name — full-width half columns like SS2
 * Root cause: component `label { width: 170px }` / flex shrink-wrap + size= attr.
 * Use grid + broad selectors (sidebar class is not always on an ancestor). */
body .form-info-card .role-fields-row,
body .master-sidebar .role-fields-row,
body .roles-master-sidebar .role-fields-row,
body .p-fluid .role-fields-row,
body .role-fields-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 12px !important;
  box-sizing: border-box !important;
}

body .form-info-card .role-fields-row .role-field,
body .master-sidebar .role-fields-row .role-field,
body .roles-master-sidebar .role-fields-row .role-field,
body .p-fluid .role-fields-row .role-field,
body .role-fields-row .role-field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

body .form-info-card .role-fields-row .role-field label,
body .master-sidebar .role-fields-row .role-field label,
body .roles-master-sidebar .role-fields-row .role-field label,
body .p-fluid .role-fields-row .role-field label,
body .role-fields-row .role-field label {
  width: auto !important;
  max-width: none !important;
  display: block !important;
  margin: 0 0 8px !important;
}

body .form-info-card .role-fields-row .role-field-input,
body .form-info-card .role-fields-row .role-field .p-inputtext,
body .form-info-card .role-fields-row .role-field input.p-inputtext,
body .master-sidebar .role-fields-row .role-field-input,
body .master-sidebar .role-fields-row .role-field .p-inputtext,
body .master-sidebar .role-fields-row .role-field input.p-inputtext,
body .roles-master-sidebar .role-fields-row .role-field-input,
body .roles-master-sidebar .role-fields-row .role-field .p-inputtext,
body .roles-master-sidebar .role-fields-row .role-field input.p-inputtext,
body .p-fluid .role-fields-row .role-field-input,
body .p-fluid .role-fields-row .role-field .p-inputtext,
body .p-fluid .role-fields-row .role-field input.p-inputtext,
body .role-fields-row .role-field-input,
body .role-fields-row .role-field .p-inputtext,
body .role-fields-row .role-field input.p-inputtext {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  align-self: stretch !important;
  /* Global theme sets display:flex on .p-inputtext — force block so % width sticks */
  display: block !important;
  box-sizing: border-box !important;
}

body .roles-master-sidebar .TabsCardSec {
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

body .roles-master-sidebar .role-access-container {
  padding: 0 !important;
}

/* ── PrimeNG 19 accordion: remove the heavy near-black frame ───────────────
 * The v19 upgrade renamed accordion parts (.p-accordion-tab → .p-accordionpanel,
 * .p-accordion-header-link → button.p-accordionheader, content →
 * .p-accordioncontent > .p-accordioncontent-content), so pre-19 overrides are
 * dead and the theme paints a ~2.78px #212529 (black) frame — as a border on
 * the content wrapper AND a focus outline when a panel is expanded.
 * Neutralise border + outline + box-shadow on every part, app-wide.
 * ------------------------------------------------------------------------- */
.p-accordion .p-accordionpanel,
.p-accordion .p-accordionheader,
.p-accordion .p-accordioncontent,
.p-accordion .p-accordioncontent-content,
.p-accordionpanel,
.p-accordionheader,
.p-accordioncontent,
.p-accordioncontent-content {
  border-color: #dfe3ea !important;
  border-width: 1px !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.p-accordionheader:focus,
.p-accordionheader:focus-visible,
.p-accordioncontent:focus,
.p-accordioncontent:focus-visible,
.p-accordioncontent-content:focus,
.p-accordioncontent-content:focus-visible,
.p-accordionpanel:focus-within {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Roles access accordion — lock the header "select-all" checkboxes to the body
   column centers (50% / 83.33%) so they sit in one line with the row checkboxes
   below, independent of the chevron / flex layout. The template positions them
   with viewport units tuned for a full-width drawer, so they drift otherwise. */
body .roles-master-sidebar .role-access-accordion .p-accordionheader {
  position: relative !important;
}

body .roles-master-sidebar .role-access-accordion .p-accordionheader .header-content {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

body .roles-master-sidebar .role-access-accordion .header-content > span:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}

body .roles-master-sidebar .role-access-accordion .header-content > p-checkbox {
  position: absolute !important;
  top: 50% !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body .roles-master-sidebar .role-access-accordion .header-content > p-checkbox:nth-of-type(1) {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

body .roles-master-sidebar .role-access-accordion .header-content > p-checkbox:nth-of-type(2) {
  left: 83.333% !important;
  transform: translate(-50%, -50%) !important;
}

body .roles-master-sidebar .role-access-accordion .header-content .p-checkbox {
  margin: 0 !important;
}

/* Accordion header polish: taller, comfortable rows and a tidy chevron.
   Padding is vertical only, and the chevron→label gap lives inside the label
   cell, so the View/Write checkbox columns stay put. */
body .roles-master-sidebar .role-access-accordion .p-accordionheader {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  min-height: 46px !important;
  align-items: center !important;
  background: #f7f9fc !important;
}

body .roles-master-sidebar .role-access-accordion .p-accordionheader:hover {
  background: #eef2f8 !important;
}

body .roles-master-sidebar .role-access-accordion .p-accordionheader-toggle-icon {
  margin-left: 14px !important;
  margin-right: 0 !important;
  color: #5a6b82 !important;
  font-size: 0.8rem !important;
  flex: 0 0 auto !important;
}

/* Readability: gentle hover highlight on the access rows. */
body .roles-master-sidebar .access-table tbody tr:hover > td {
  background: #eef4ff !important;
}

body .roles-master-sidebar .role-access-accordion .header-content > span:first-child {
  padding-left: 12px !important;
  font-weight: 600 !important;
  color: #2f3a4a !important;
}

/* A little more air in the access-table rows to match the roomier headers. */
body .roles-master-sidebar .access-table th,
body .roles-master-sidebar .access-table td,
body .roles-master-sidebar .accordion-table th,
body .roles-master-sidebar .accordion-table td {
  padding: 13px 16px !important;
}

/* Inset the whole access block (label table + accordion together) off the card
   edge. Both live in .role-access-container, so padding it keeps their columns
   aligned; zero the content wrapper's side padding so widths stay equal. */
body .roles-master-sidebar .role-access-container {
  padding: 0 12px 14px !important;
}

body .roles-master-sidebar .role-access-accordion .p-accordioncontent-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Status label + toggle: the block is a narrow Bootstrap col-2, so "Status"
   collided with the switch. Give it room, keep it on one line, add a gap. */
body .roles-master-sidebar .form-info-card .switch-blck {
  width: auto !important;
  min-width: 150px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

body .roles-master-sidebar .form-info-card .switch-blck .switch-container .row {
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

body .roles-master-sidebar .form-info-card .switch-blck .switch-container .col-2,
body .roles-master-sidebar .form-info-card .switch-blck .switch-container .col-10 {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}

body .roles-master-sidebar .form-info-card .switch-blck label[for=status] {
  width: auto !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

body .roles-master-sidebar .role-access-accordion {
  display: block !important;
  width: 100% !important;
  border: 1px solid #d9e2ec !important;
  border-top: 0 !important;
  border-radius: 0 0 4px 4px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

body .roles-master-sidebar .role-access-accordion > .p-accordion-tab {
  margin: 0 !important;
  border: 0 !important;
  background: #ffffff !important;
}

body .roles-master-sidebar .switch-container,
body .roles-master-sidebar .switch-container .row,
body .roles-master-sidebar .switch-container .col-2,
body .roles-master-sidebar .switch-container .col-10 {
  display: flex !important;
  align-items: center !important;
}

body .roles-master-sidebar .switch-container label {
  width: auto !important;
  margin: 0 10px 0 0 !important;
}

body .roles-master-sidebar .access-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  margin: 0 !important;
}

body .roles-master-sidebar .access-table th,
body .roles-master-sidebar .access-table td,
body .roles-master-sidebar .accordion-table th,
body .roles-master-sidebar .accordion-table td {
  border: 1px solid #d9e2ec !important;
  background: #ffffff !important;
  padding: 12px 14px !important;
  text-align: center !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body .roles-master-sidebar .access-table th {
  font-weight: 600 !important;
  color: #3f4752 !important;
}

body .roles-master-sidebar .access-table td:first-child,
body .roles-master-sidebar .access-table th:first-child {
  text-align: left !important;
}

body .roles-master-sidebar .p-accordion,
body .roles-master-sidebar .p-accordion .p-accordion-tab,
body .roles-master-sidebar .p-accordion .p-accordion-header,
body .roles-master-sidebar .p-accordion .p-accordion-header .p-accordion-header-link,
body .roles-master-sidebar .p-accordion .p-accordion-content {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .roles-master-sidebar .p-accordion .p-accordion-header .p-accordion-header-link {
  padding: 0 !important;
  min-height: 50px !important;
  color: #4b5563 !important;
}

body .roles-master-sidebar .p-accordion .p-accordion-content {
  padding: 0 !important;
}

body .roles-master-sidebar .role-access-accordion > .p-accordion-tab > .p-accordion-header {
  border-top: 1px solid #d9e2ec !important;
}

body .roles-master-sidebar .role-access-accordion > .p-accordion-tab:first-child > .p-accordion-header {
  border-top: 0 !important;
}

body .roles-master-sidebar .role-access-accordion > .p-accordion-tab > .p-accordion-header > .p-accordion-header-link {
  background: #f9fbfd !important;
}

body .roles-master-sidebar .role-access-accordion > .p-accordion-tab > .p-accordion-content {
  background: #ffffff !important;
}

body .roles-master-sidebar .role-access-accordion .accordion-table tbody tr,
body .roles-master-sidebar .role-access-accordion .access-table tbody tr {
  background: #ffffff !important;
}

body .roles-master-sidebar .role-access-accordion .accordion-table tbody td,
body .roles-master-sidebar .role-access-accordion .access-table tbody td {
  height: 50px !important;
  vertical-align: middle !important;
  border-color: #d9e2ec !important;
  background: #ffffff !important;
}

body .roles-master-sidebar .role-access-accordion .p-accordion-toggle-icon {
  color: #374151 !important;
  font-size: 16px !important;
  margin-right: 10px !important;
}

body .roles-master-sidebar .header-content {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) 160px 160px !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
}

body .roles-master-sidebar .header-content span {
  width: auto !important;
}

body .roles-master-sidebar .header-content p-checkbox {
  justify-self: start !important;
}

body .roles-master-sidebar .p-sidebar-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 58px !important;
  padding: 10px 20px !important;
  background: #ffffff !important;
  border-top: 1px solid #d7d7d7 !important;
}

/* Global compact day/date filter dropdown */
body .custom-dropdown-datefilter {
  display: inline-flex !important;
  align-items: center !important;
}

body .custom-dropdown-datefilter > .p-dropdown,
body .custom-dropdown-datefilter .p-dropdown,
body p-dropdown.custom-dropdown-datefilter .p-dropdown,
body p-dropdown.custom-dropdown-datefilter {
  min-height: 32px !important;
  height: 32px !important;
  border: 1px solid #2f67b0 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .custom-dropdown-datefilter > .p-dropdown:hover,
body .custom-dropdown-datefilter .p-dropdown:hover,
body .custom-dropdown-datefilter > .p-dropdown.p-focus,
body .custom-dropdown-datefilter .p-dropdown.p-focus {
  border-color: #2f67b0 !important;
  box-shadow: none !important;
}

body .custom-dropdown-datefilter > .p-dropdown .p-dropdown-label,
body .custom-dropdown-datefilter .p-dropdown .p-dropdown-label,
body p-dropdown.custom-dropdown-datefilter .p-dropdown .p-dropdown-label {
  display: flex !important;
  align-items: center !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  color: #000000 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
}

body .custom-dropdown-datefilter > .p-dropdown .p-dropdown-trigger,
body .custom-dropdown-datefilter .p-dropdown .p-dropdown-trigger,
body p-dropdown.custom-dropdown-datefilter .p-dropdown .p-dropdown-trigger {
  width: 2.2rem !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #143a67 !important;
  background: #ffffff !important;
}

body .custom-dropdown-datefilter > .p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon,
body .custom-dropdown-datefilter .p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon,
body p-dropdown.custom-dropdown-datefilter .p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon {
  color: #143a67 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

body .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
  color: #000000 !important;
  font-weight: 500 !important;
}

body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:hover {
  color: #000000 !important;
  background: #f3f6fb !important;
}

body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  color: #ffffff !important;
  background: #0f2f63 !important;
}

body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight:hover {
  color: #ffffff !important;
  background: #0f2f63 !important;
}

body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-focus,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item[aria-selected=true],
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight .p-dropdown-item-label,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-focus .p-dropdown-item-label,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item[aria-selected=true] .p-dropdown-item-label,
body .track-shipment-datefilter-panel .p-dropdown-item.p-highlight,
body .track-shipment-datefilter-panel .p-dropdown-item.p-focus,
body .track-shipment-datefilter-panel .p-dropdown-item[aria-selected=true],
body .track-shipment-datefilter-panel .p-dropdown-item.p-highlight .p-dropdown-item-label,
body .track-shipment-datefilter-panel .p-dropdown-item.p-focus .p-dropdown-item-label,
body .track-shipment-datefilter-panel .p-dropdown-item[aria-selected=true] .p-dropdown-item-label,
body .shipment-error-datefilter-panel .p-dropdown-item.p-highlight,
body .shipment-error-datefilter-panel .p-dropdown-item.p-focus,
body .shipment-error-datefilter-panel .p-dropdown-item[aria-selected=true],
body .shipment-error-datefilter-panel .p-dropdown-item.p-highlight .p-dropdown-item-label,
body .shipment-error-datefilter-panel .p-dropdown-item.p-focus .p-dropdown-item-label,
body .shipment-error-datefilter-panel .p-dropdown-item[aria-selected=true] .p-dropdown-item-label,
body .audit-date-filter-panel .p-dropdown-item.p-highlight,
body .audit-date-filter-panel .p-dropdown-item.p-focus,
body .audit-date-filter-panel .p-dropdown-item[aria-selected=true],
body .audit-date-filter-panel .p-dropdown-item.p-highlight .p-dropdown-item-label,
body .audit-date-filter-panel .p-dropdown-item.p-focus .p-dropdown-item-label,
body .audit-date-filter-panel .p-dropdown-item[aria-selected=true] .p-dropdown-item-label,
body .compass-datefilter-panel .p-dropdown-item.p-highlight,
body .compass-datefilter-panel .p-dropdown-item.p-focus,
body .compass-datefilter-panel .p-dropdown-item[aria-selected=true],
body .compass-datefilter-panel .p-dropdown-item.p-highlight .p-dropdown-item-label,
body .compass-datefilter-panel .p-dropdown-item.p-focus .p-dropdown-item-label,
body .compass-datefilter-panel .p-dropdown-item[aria-selected=true] .p-dropdown-item-label {
  color: #ffffff !important;
  background: #0f2f63 !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 9999px #0f2f63 !important;
}

body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-focus:hover,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item[aria-selected=true]:hover,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight:hover .p-dropdown-item-label,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-focus:hover .p-dropdown-item-label,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item[aria-selected=true]:hover .p-dropdown-item-label,
body .track-shipment-datefilter-panel .p-dropdown-item.p-highlight:hover,
body .track-shipment-datefilter-panel .p-dropdown-item.p-focus:hover,
body .track-shipment-datefilter-panel .p-dropdown-item[aria-selected=true]:hover,
body .track-shipment-datefilter-panel .p-dropdown-item.p-highlight:hover .p-dropdown-item-label,
body .track-shipment-datefilter-panel .p-dropdown-item.p-focus:hover .p-dropdown-item-label,
body .track-shipment-datefilter-panel .p-dropdown-item[aria-selected=true]:hover .p-dropdown-item-label,
body .shipment-error-datefilter-panel .p-dropdown-item.p-highlight:hover,
body .shipment-error-datefilter-panel .p-dropdown-item.p-focus:hover,
body .shipment-error-datefilter-panel .p-dropdown-item[aria-selected=true]:hover,
body .shipment-error-datefilter-panel .p-dropdown-item.p-highlight:hover .p-dropdown-item-label,
body .shipment-error-datefilter-panel .p-dropdown-item.p-focus:hover .p-dropdown-item-label,
body .shipment-error-datefilter-panel .p-dropdown-item[aria-selected=true]:hover .p-dropdown-item-label,
body .audit-date-filter-panel .p-dropdown-item.p-highlight:hover,
body .audit-date-filter-panel .p-dropdown-item.p-focus:hover,
body .audit-date-filter-panel .p-dropdown-item[aria-selected=true]:hover,
body .audit-date-filter-panel .p-dropdown-item.p-highlight:hover .p-dropdown-item-label,
body .audit-date-filter-panel .p-dropdown-item.p-focus:hover .p-dropdown-item-label,
body .audit-date-filter-panel .p-dropdown-item[aria-selected=true]:hover .p-dropdown-item-label,
body .compass-datefilter-panel .p-dropdown-item.p-highlight:hover,
body .compass-datefilter-panel .p-dropdown-item.p-focus:hover,
body .compass-datefilter-panel .p-dropdown-item[aria-selected=true]:hover,
body .compass-datefilter-panel .p-dropdown-item.p-highlight:hover .p-dropdown-item-label,
body .compass-datefilter-panel .p-dropdown-item.p-focus:hover .p-dropdown-item-label,
body .compass-datefilter-panel .p-dropdown-item[aria-selected=true]:hover .p-dropdown-item-label {
  color: #ffffff !important;
  background: #0f2f63 !important;
  box-shadow: inset 0 0 0 9999px #0f2f63 !important;
}

body .p-select-overlay .p-select-option,
body .p-select-overlay .p-select-option .p-select-option-label,
body .p-dropdown-panel .p-select-option,
body .p-dropdown-panel .p-select-option .p-select-option-label,
body .track-shipment-datefilter-panel .p-select-option,
body .track-shipment-datefilter-panel .p-select-option .p-select-option-label,
body .shipment-error-datefilter-panel .p-select-option,
body .shipment-error-datefilter-panel .p-select-option .p-select-option-label,
body .audit-date-filter-panel .p-select-option,
body .audit-date-filter-panel .p-select-option .p-select-option-label,
body .compass-datefilter-panel .p-select-option,
body .compass-datefilter-panel .p-select-option .p-select-option-label {
  color: #000000 !important;
}

body .p-select-overlay .p-select-option.p-select-option-selected,
body .p-select-overlay .p-select-option.p-highlight,
body .p-select-overlay .p-select-option[aria-selected=true],
body .p-dropdown-panel .p-select-option.p-select-option-selected,
body .p-dropdown-panel .p-select-option.p-highlight,
body .p-dropdown-panel .p-select-option[aria-selected=true],
body .track-shipment-datefilter-panel .p-select-option.p-select-option-selected,
body .track-shipment-datefilter-panel .p-select-option.p-highlight,
body .track-shipment-datefilter-panel .p-select-option[aria-selected=true],
body .shipment-error-datefilter-panel .p-select-option.p-select-option-selected,
body .shipment-error-datefilter-panel .p-select-option.p-highlight,
body .shipment-error-datefilter-panel .p-select-option[aria-selected=true],
body .audit-date-filter-panel .p-select-option.p-select-option-selected,
body .audit-date-filter-panel .p-select-option.p-highlight,
body .audit-date-filter-panel .p-select-option[aria-selected=true],
body .compass-datefilter-panel .p-select-option.p-select-option-selected,
body .compass-datefilter-panel .p-select-option.p-highlight,
body .compass-datefilter-panel .p-select-option[aria-selected=true] {
  color: #ffffff !important;
  background: #0f2f63 !important;
  box-shadow: inset 0 0 0 9999px #0f2f63 !important;
}

body .p-select-overlay .p-select-option.p-select-option-selected .p-select-option-label,
body .p-select-overlay .p-select-option.p-highlight .p-select-option-label,
body .p-select-overlay .p-select-option[aria-selected=true] .p-select-option-label,
body .p-dropdown-panel .p-select-option.p-select-option-selected .p-select-option-label,
body .p-dropdown-panel .p-select-option.p.highlight .p-select-option-label,
body .p-dropdown-panel .p-select-option[aria-selected=true] .p-select-option-label,
body .track-shipment-datefilter-panel .p-select-option.p-select-option-selected .p-select-option-label,
body .track-shipment-datefilter-panel .p-select-option.p-highlight .p-select-option-label,
body .track-shipment-datefilter-panel .p-select-option[aria-selected=true] .p-select-option-label,
body .shipment-error-datefilter-panel .p-select-option.p-select-option-selected .p-select-option-label,
body .shipment-error-datefilter-panel .p-select-option.p.highlight .p-select-option-label,
body .shipment-error-datefilter-panel .p-select-option[aria-selected=true] .p-select-option-label,
body .audit-date-filter-panel .p-select-option.p-select-option-selected .p-select-option-label,
body .audit-date-filter-panel .p-select-option.p.highlight .p-select-option-label,
body .audit-date-filter-panel .p-select-option[aria-selected=true] .p-select-option-label,
body .compass-datefilter-panel .p-select-option.p-select-option-selected .p-select-option-label,
body .compass-datefilter-panel .p-select-option.p.highlight .p-select-option-label,
body .compass-datefilter-panel .p-select-option[aria-selected=true] .p-select-option-label {
  color: #ffffff !important;
}

body input.p-inputtext,
body textarea.p-inputtextarea,
body .p-inputtext,
body .p-inputnumber-input,
body .p-dropdown,
body .p-select,
body .p-multiselect,
body .p-calendar .p-inputtext,
body .p-datepicker .p-inputtext {
  border-radius: var(--eshipjet-input-radius) !important;
}

body .iconsdiv,
body .filterSec .iconsdiv,
body .gridCommonCss .iconsdiv {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body .iconsdiv .download-icon,
body .iconsdiv .filter-icon,
body .iconsdiv .action-icon,
body .iconsdiv .file-export-icon,
body .iconsdiv app-col-config .action-icon,
body app-col-config .action-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 6px !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #0f2f63 !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease !important;
}

body .iconsdiv app-col-config,
body .filterSec .iconsdiv app-col-config,
body .gridCommonCss .iconsdiv app-col-config {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
}

body .iconsdiv .download-icon,
body .iconsdiv .filter-icon {
  object-fit: contain !important;
  object-position: center !important;
}

body .iconsdiv .filter-icon {
  filter: brightness(0) saturate(100%) invert(15%) sepia(45%) saturate(1655%) hue-rotate(190deg) brightness(90%) contrast(97%) !important;
}

body .iconsdiv .download-icon,
body .iconsdiv .download-icon:hover {
  filter: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  transform: none !important;
}

body .iconsdiv .action-icon::before,
body .iconsdiv .file-export-icon::before,
body .iconsdiv app-col-config .action-icon::before,
body app-col-config .action-icon::before {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  line-height: 16px !important;
  text-align: center !important;
}

body .iconsdiv .action-icon:hover,
body .iconsdiv .file-export-icon:hover,
body .iconsdiv app-col-config .action-icon:hover,
body app-col-config .action-icon:hover {
  background: #edf4ff !important;
  color: #3276cb !important;
  transform: translateY(-1px) !important;
}

body p-splitbutton.master-actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button,
body p-splitbutton.actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button,
body .master-actionbtn.p-splitbutton > .p-splitbutton-dropdown.p-button,
body .actionbtn.p-splitbutton > .p-splitbutton-dropdown.p-button {
  flex: 0 0 32px !important;
  inline-size: 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  border-left: 0 !important;
}

body p-splitbutton.master-actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button:hover,
body p-splitbutton.master-actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button:enabled:hover,
body p-splitbutton.master-actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button.p-button-outlined:hover,
body p-splitbutton.master-actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button.p-button-outlined:enabled:hover,
body p-splitbutton.actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button:hover,
body p-splitbutton.actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button:enabled:hover,
body p-splitbutton.actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button.p-button-outlined:hover,
body p-splitbutton.actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button.p-button-outlined:enabled:hover,
body .master-actionbtn.p-splitbutton > .p-splitbutton-dropdown.p-button:hover,
body .master-actionbtn.p-splitbutton > .p-splitbutton-dropdown.p-button:enabled:hover,
body .actionbtn.p-splitbutton > .p-splitbutton-dropdown.p-button:hover,
body .actionbtn.p-splitbutton > .p-splitbutton-dropdown.p-button:enabled:hover {
  background: #3d6fc4 !important;
  background-color: #3d6fc4 !important;
  background-image: none !important;
  color: #ffffff !important;
}

body p-splitbutton.master-actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button:hover .p-icon,
body p-splitbutton.master-actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button:hover .p-button-icon,
body p-splitbutton.actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button:hover .p-icon,
body p-splitbutton.actionbtn .p-splitbutton > .p-splitbutton-dropdown.p-button:hover .p-button-icon,
body .master-actionbtn.p-splitbutton > .p-splitbutton-dropdown.p-button:hover .p-icon,
body .master-actionbtn.p-splitbutton > .p-splitbutton-dropdown.p-button:hover .p-button-icon,
body .actionbtn.p-splitbutton > .p-splitbutton-dropdown.p-button:hover .p-icon,
body .actionbtn.p-splitbutton > .p-splitbutton-dropdown.p-button:hover .p-button-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
}

body app-config-table th .sort-icon,
body app-config-table th p-sorticon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 3px !important;
  opacity: 0 !important;
  visibility: visible !important;
  vertical-align: -2px !important;
  color: #8b98a8 !important;
  transition: opacity 160ms ease, color 160ms ease !important;
}

body app-config-table th:hover .sort-icon,
body app-config-table th.p-highlight .sort-icon,
body app-config-table th.p-sortable-column.p-highlight .sort-icon {
  opacity: 1 !important;
}

body app-config-table th .sort-icon .p-icon,
body app-config-table th .sort-icon svg,
body app-config-table th .p-sortable-column-icon {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  font-size: 12px !important;
  color: #8b98a8 !important;
}

body app-config-table th:hover .sort-icon .p-icon,
body app-config-table th:hover .sort-icon svg,
body app-config-table th.p-highlight .sort-icon .p-icon,
body app-config-table th.p-highlight .sort-icon svg {
  color: #3276cb !important;
}

body .filterSec .iconsdiv img.download-icon.download-icon,
body .filterSec .iconsdiv img.filter-icon.filter-icon,
body .gridCommonCss .iconsdiv img.download-icon.download-icon,
body .gridCommonCss .iconsdiv img.filter-icon.filter-icon,
body .filterSec .iconsdiv i.action-icon.action-icon,
body .filterSec .iconsdiv i.file-export-icon.file-export-icon,
body .filterSec .iconsdiv app-col-config i.action-icon.action-icon,
body .gridCommonCss .iconsdiv app-col-config i.action-icon.action-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #0f2f63 !important;
  vertical-align: middle !important;
  transform: none !important;
}

body .filterSec .iconsdiv img.download-icon.download-icon,
body .filterSec .iconsdiv img.filter-icon.filter-icon,
body .gridCommonCss .iconsdiv img.download-icon.download-icon,
body .gridCommonCss .iconsdiv img.filter-icon.filter-icon {
  object-fit: contain !important;
  object-position: center !important;
}

body .filterSec .iconsdiv img.filter-icon.filter-icon,
body .gridCommonCss .iconsdiv img.filter-icon.filter-icon {
  filter: brightness(0) saturate(100%) invert(15%) sepia(45%) saturate(1655%) hue-rotate(190deg) brightness(90%) contrast(97%) !important;
}

body .filterSec .iconsdiv img.download-icon.download-icon,
body .gridCommonCss .iconsdiv img.download-icon.download-icon,
body .filterSec .iconsdiv img.download-icon.download-icon:hover,
body .gridCommonCss .iconsdiv img.download-icon.download-icon:hover {
  filter: none !important;
  background: transparent !important;
  background-color: transparent !important;
  transform: none !important;
}

body .filterSec .iconsdiv i.action-icon.action-icon::before,
body .filterSec .iconsdiv i.file-export-icon.file-export-icon::before,
body .filterSec .iconsdiv app-col-config i.action-icon.action-icon::before,
body .gridCommonCss .iconsdiv app-col-config i.action-icon.action-icon::before {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  line-height: 16px !important;
}

/* Final PrimeNG v18 split-menu override: used by Add/Import master buttons. */
body .p-tieredmenu.p-component.p-tieredmenu-overlay.addMasterBtnMenu,
body .p-menu.p-component.p-menu-overlay.addMasterBtnMenu,
body .addMasterBtnMenu.p-tieredmenu.p-component,
body .addMasterBtnMenu.p-menu.p-component {
  --p-tieredmenu-item-padding: 8px 12px;
  --p-tieredmenu-item-gap: 8px;
  --p-tieredmenu-item-border-radius: 3px;
  --p-tieredmenu-item-color: #2d3540;
  --p-tieredmenu-item-focus-background: #3f9d2f;
  --p-tieredmenu-item-focus-color: #ffffff;
  --p-menu-item-padding: 8px 12px;
  --p-menu-item-gap: 8px;
  --p-menu-item-border-radius: 3px;
  --p-menu-item-color: #2d3540;
  --p-menu-item-focus-background: #3f9d2f;
  --p-menu-item-focus-color: #ffffff;
  width: max-content !important;
  min-width: 176px !important;
  max-width: 320px !important;
  margin-top: 6px !important;
  padding: 6px !important;
  border: 1px solid #258f1d !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 36px rgba(13, 35, 64, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.72) inset !important;
  overflow: hidden !important;
}

body .p-tieredmenu.p-component.p-tieredmenu-overlay.addMasterBtnMenu .p-tieredmenu-root-list,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.addMasterBtnMenu .p-tieredmenu-list,
body .p-menu.p-component.p-menu-overlay.addMasterBtnMenu .p-menu-list,
body .addMasterBtnMenu.p-tieredmenu.p-component .p-tieredmenu-root-list,
body .addMasterBtnMenu.p-tieredmenu.p-component .p-tieredmenu-list,
body .addMasterBtnMenu.p-menu.p-component .p-menu-list {
  padding: 0 !important;
  margin: 0 !important;
}

body .p-tieredmenu.p-component.p-tieredmenu-overlay.addMasterBtnMenu .p-menuitem-link,
body .p-menu.p-component.p-menu-overlay.addMasterBtnMenu .p-menuitem-link,
body .addMasterBtnMenu.p-tieredmenu.p-component .p-menuitem-link,
body .addMasterBtnMenu.p-menu.p-component .p-menuitem-link,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.addMasterBtnMenu .p-tieredmenu-item-link,
body .addMasterBtnMenu.p-tieredmenu.p-component .p-tieredmenu-item-link {
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: #2d3540 !important;
  font-family: AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 18px !important;
}

body .p-tieredmenu.p-component.p-tieredmenu-overlay.addMasterBtnMenu .p-menuitem-link:hover,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.addMasterBtnMenu .p-menuitem-link:focus,
body .p-menu.p-component.p-menu-overlay.addMasterBtnMenu .p-menuitem-link:hover,
body .p-menu.p-component.p-menu-overlay.addMasterBtnMenu .p-menuitem-link:focus,
body .addMasterBtnMenu.p-tieredmenu.p-component .p-menuitem-link:hover,
body .addMasterBtnMenu.p-tieredmenu.p-component .p-menuitem-link:focus,
body .addMasterBtnMenu.p-menu.p-component .p-menuitem-link:hover,
body .addMasterBtnMenu.p-menu.p-component .p-menuitem-link:focus,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.addMasterBtnMenu .p-tieredmenu-item-link:hover,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.addMasterBtnMenu .p-tieredmenu-item-link:focus,
body .addMasterBtnMenu.p-tieredmenu.p-component .p-tieredmenu-item-link:hover,
body .addMasterBtnMenu.p-tieredmenu.p-component .p-tieredmenu-item-link:focus,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.addMasterBtnMenu .p-tieredmenu-item-content:hover .p-tieredmenu-item-link,
body .addMasterBtnMenu.p-tieredmenu.p-component .p-tieredmenu-item-content:hover .p-tieredmenu-item-link {
  background: #3f9d2f !important;
  color: #ffffff !important;
}

body .p-tieredmenu.p-component.p-tieredmenu-overlay.addMasterBtnMenu .p-menuitem-text,
body .p-menu.p-component.p-menu-overlay.addMasterBtnMenu .p-menuitem-text,
body .addMasterBtnMenu.p-tieredmenu.p-component .p-menuitem-text,
body .addMasterBtnMenu.p-menu.p-component .p-menuitem-text,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.addMasterBtnMenu .p-tieredmenu-item-label,
body .addMasterBtnMenu.p-tieredmenu.p-component .p-tieredmenu-item-label {
  color: inherit !important;
  line-height: 18px !important;
}

/* Final PrimeNG v18 split-menu override: row action buttons. */
body .p-tieredmenu.p-component.p-tieredmenu-overlay.masterActionBtnMenu,
body .p-menu.p-component.p-menu-overlay.masterActionBtnMenu,
body .masterActionBtnMenu.p-tieredmenu.p-component,
body .masterActionBtnMenu.p-menu.p-component {
  --p-tieredmenu-item-padding: 8px 12px;
  --p-tieredmenu-item-gap: 8px;
  --p-tieredmenu-item-border-radius: 3px;
  --p-tieredmenu-item-color: #2d3540;
  --p-tieredmenu-item-focus-background: #3d6fc4;
  --p-tieredmenu-item-focus-color: #ffffff;
  --p-menu-item-padding: 8px 12px;
  --p-menu-item-gap: 8px;
  --p-menu-item-border-radius: 3px;
  --p-menu-item-color: #2d3540;
  --p-menu-item-focus-background: #3d6fc4;
  --p-menu-item-focus-color: #ffffff;
  min-width: 118px !important;
  margin-top: 6px !important;
  padding: 6px !important;
  border: 1px solid #b7d0ee !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 30px rgba(13, 35, 64, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.72) inset !important;
  overflow: hidden !important;
}

body .p-tieredmenu.p-component.p-tieredmenu-overlay.masterActionBtnMenu .p-tieredmenu-root-list,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.masterActionBtnMenu .p-tieredmenu-list,
body .p-menu.p-component.p-menu-overlay.masterActionBtnMenu .p-menu-list,
body .masterActionBtnMenu.p-tieredmenu.p-component .p-tieredmenu-root-list,
body .masterActionBtnMenu.p-tieredmenu.p-component .p-tieredmenu-list,
body .masterActionBtnMenu.p-menu.p-component .p-menu-list {
  padding: 0 !important;
  margin: 0 !important;
}

body .p-tieredmenu.p-component.p-tieredmenu-overlay.masterActionBtnMenu .p-menuitem-link,
body .p-menu.p-component.p-menu-overlay.masterActionBtnMenu .p-menuitem-link,
body .masterActionBtnMenu.p-tieredmenu.p-component .p-menuitem-link,
body .masterActionBtnMenu.p-menu.p-component .p-menuitem-link,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.masterActionBtnMenu .p-tieredmenu-item-link,
body .masterActionBtnMenu.p-tieredmenu.p-component .p-tieredmenu-item-link {
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: #2d3540 !important;
  font-family: AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 18px !important;
}

body .p-tieredmenu.p-component.p-tieredmenu-overlay.masterActionBtnMenu .p-menuitem-link:hover,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.masterActionBtnMenu .p-menuitem-link:focus,
body .p-menu.p-component.p-menu-overlay.masterActionBtnMenu .p-menuitem-link:hover,
body .p-menu.p-component.p-menu-overlay.masterActionBtnMenu .p-menuitem-link:focus,
body .masterActionBtnMenu.p-tieredmenu.p-component .p-menuitem-link:hover,
body .masterActionBtnMenu.p-tieredmenu.p-component .p-menuitem-link:focus,
body .masterActionBtnMenu.p-menu.p-component .p-menuitem-link:hover,
body .masterActionBtnMenu.p-menu.p-component .p-menuitem-link:focus,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.masterActionBtnMenu .p-tieredmenu-item-link:hover,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.masterActionBtnMenu .p-tieredmenu-item-link:focus,
body .masterActionBtnMenu.p-tieredmenu.p-component .p-tieredmenu-item-link:hover,
body .masterActionBtnMenu.p-tieredmenu.p-component .p-tieredmenu-item-link:focus,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.masterActionBtnMenu .p-tieredmenu-item-content:hover .p-tieredmenu-item-link,
body .masterActionBtnMenu.p-tieredmenu.p-component .p-tieredmenu-item-content:hover .p-tieredmenu-item-link {
  background: #3d6fc4 !important;
  color: #ffffff !important;
}

body .p-tieredmenu.p-component.p-tieredmenu-overlay.masterActionBtnMenu .p-menuitem-text,
body .p-menu.p-component.p-menu-overlay.masterActionBtnMenu .p-menuitem-text,
body .masterActionBtnMenu.p-tieredmenu.p-component .p-menuitem-text,
body .masterActionBtnMenu.p-menu.p-component .p-menuitem-text,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.masterActionBtnMenu .p-tieredmenu-item-label,
body .masterActionBtnMenu.p-tieredmenu.p-component .p-tieredmenu-item-label {
  color: inherit !important;
  line-height: 18px !important;
}

/* Final PrimeNG v18 icon-size exception: Custom Reports sortable headers. */
body .custom-report-page .customer-report-table .p-sortable-column-icon,
body .custom-report-page .customer-report-table svg.p-sortable-column-icon,
body .custom-report-page .customer-report-table .p-sortable-column-icon.p-icon,
body .custom-report-page .customer-report-table .p-sortable-column-icon .p-icon,
body .custom-report-page .customer-report-table .p-sortable-column-icon svg {
  display: inline-flex !important;
  height: 12px !important;
  max-height: 12px !important;
  max-width: 12px !important;
  min-height: 12px !important;
  min-width: 12px !important;
  width: 12px !important;
  font-size: 12px !important;
  line-height: 12px !important;
  margin-left: 3px !important;
  vertical-align: -1px !important;
}

/* Final PrimeNG v18 icon/button exception: Orders row action split button. */
body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton {
  position: relative !important;
  min-width: 126px !important;
  height: 28px !important;
  border: 1px solid #b7d0ee !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton::after,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton::after,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton::after,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton::after {
  content: "" !important;
  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  right: 32px !important;
  width: 1px !important;
  background: #b7d0ee !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton > .p-button,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton > .p-button,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton > .p-button,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton > .p-button {
  height: 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: #3276cb !important;
  font-size: 14px !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton > .p-splitbutton-defaultbutton,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton > .p-splitbutton-defaultbutton,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton > .p-splitbutton-defaultbutton,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton > .p-splitbutton-defaultbutton {
  min-width: 92px !important;
  padding: 0 18px !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton > .p-splitbutton-menubutton,
body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton > .p-splitbutton-dropdown,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton > .p-splitbutton-menubutton,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton > .p-splitbutton-dropdown,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton > .p-splitbutton-menubutton,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton > .p-splitbutton-dropdown,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton > .p-splitbutton-menubutton,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton > .p-splitbutton-dropdown {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton:hover,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton:hover,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton:hover,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton:hover {
  border-color: #3276cb !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton:hover > .p-button,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton:hover > .p-button,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton:hover > .p-button,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton:hover > .p-button,
body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton:has(.p-button:hover) > .p-button,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton:has(.p-button:hover) > .p-button,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton:has(.p-button:hover) > .p-button,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton:has(.p-button:hover) > .p-button {
  background: #3276cb !important;
  background-color: #3276cb !important;
  background-image: none !important;
  color: #ffffff !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton > .p-splitbutton-defaultbutton:hover,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton > .p-splitbutton-defaultbutton:hover,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton > .p-splitbutton-defaultbutton:hover,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton > .p-splitbutton-defaultbutton:hover,
body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton > .p-splitbutton-menubutton:hover,
body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton > .p-splitbutton-dropdown:hover,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton > .p-splitbutton-menubutton:hover,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton > .p-splitbutton-dropdown:hover,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton > .p-splitbutton-menubutton:hover,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton > .p-splitbutton-dropdown:hover,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton > .p-splitbutton-menubutton:hover,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton > .p-splitbutton-dropdown:hover {
  background: #3276cb !important;
  color: #ffffff !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn .p-button:hover .p-button-label,
body .orders-data-shell app-config-table td.actntbn .actionbtn .p-button:hover .p-button-icon,
body .orders-data-shell app-config-table td.actntbn .actionbtn .p-button:hover .p-icon,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn .p-button:hover .p-button-label,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn .p-button:hover .p-button-icon,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn .p-button:hover .p-icon,
body .orders-data-shell app-config-table td.actntbn .actionbtn .p-splitbutton:hover .p-button-label,
body .orders-data-shell app-config-table td.actntbn .actionbtn .p-splitbutton:hover .p-button-icon,
body .orders-data-shell app-config-table td.actntbn .actionbtn .p-splitbutton:hover .p-icon,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn .p-splitbutton:hover .p-button-label,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn .p-splitbutton:hover .p-button-icon,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn .p-splitbutton:hover .p-icon {
  color: #ffffff !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn .p-button:hover .chevron-icon,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn .p-button:hover .chevron-icon,
body .orders-data-shell app-config-table td.actntbn .actionbtn .p-splitbutton:hover .chevron-icon,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn .p-splitbutton:hover .chevron-icon {
  filter: brightness(0) invert(1) !important;
}

/* Final Orders table polish: production-like cell padding and split-button segment hover. */
/* Cell metrics measured against prod (eshipjet.drivemedical.com/home/orders):
 *   th  padding 7px 7px 7px 12px
 *   td  padding 0 10px 0 12px, line-height 1.2  (row height stays 40px; the
 *       zero block padding lets vertical-align:middle do the centring, which is
 *       what prod does — 6px block padding here pushed the text off-centre).
 * These two rules are the ONLY winners for padding/line-height on this grid:
 * the `#track-grid` ID gives them (1,5,3), so component-level :host ::ng-deep
 * rules — however many :not() guards they carry — can never override them.
 * Set the values here rather than escalating specificity elsewhere. */
body .orders-data-shell app-config-table .orders-table-theme #track-grid .p-datatable-thead > tr > th {
  padding: 7px 7px 7px 12px !important;
  vertical-align: middle !important;
}

body .orders-data-shell app-config-table .orders-table-theme #track-grid .p-datatable-tbody > tr > td {
  padding: 0 10px 0 12px !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

body .orders-data-shell app-config-table .orders-table-theme #track-grid .p-datatable-tbody > tr > td.actntbn,
body .orders-data-shell app-config-table .orders-table-theme #track-grid .p-datatable-tbody > tr > td[style*="right: 0"] {
  padding: 5px 10px !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton:hover > .p-button:not(:hover),
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton:hover > .p-button:not(:hover),
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton:hover > .p-button:not(:hover),
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton:hover > .p-button:not(:hover) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #3276cb !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton > .p-button:hover,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton > .p-button:hover,
body .orders-data-shell app-config-table td.actntbn .actionbtn.p-splitbutton > .p-button:hover,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn.p-splitbutton > .p-button:hover {
  background: #3276cb !important;
  background-color: #3276cb !important;
  background-image: none !important;
  color: #ffffff !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton:hover > .p-button:not(:hover) .p-button-label,
body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton:hover > .p-button:not(:hover) .p-button-icon,
body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton:hover > .p-button:not(:hover) .p-icon,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton:hover > .p-button:not(:hover) .p-button-label,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton:hover > .p-button:not(:hover) .p-button-icon,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton:hover > .p-button:not(:hover) .p-icon {
  color: #3276cb !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton > .p-button:hover .p-button-label,
body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton > .p-button:hover .p-button-icon,
body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton > .p-button:hover .p-icon,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton > .p-button:hover .p-button-label,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton > .p-button:hover .p-button-icon,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton > .p-button:hover .p-icon {
  color: #ffffff !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton:hover > .p-button:not(:hover) .chevron-icon,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton:hover > .p-button:not(:hover) .chevron-icon {
  filter: none !important;
}

body .orders-data-shell app-config-table td.actntbn .actionbtn > .p-splitbutton > .p-button:hover .chevron-icon,
body .orders-data-shell app-config-table td[style*="right: 0"] .actionbtn > .p-splitbutton > .p-button:hover .chevron-icon {
  filter: brightness(0) invert(1) !important;
}

/* Orders row split-button menu: PrimeNG v18 overlay alignment. */
body .ordersActionBtnMenu.p-tieredmenu,
body .ordersActionBtnMenu.p-menu,
body .p-tieredmenu.p-component.p-tieredmenu-overlay.ordersActionBtnMenu,
body .p-menu.p-component.p-menu-overlay.ordersActionBtnMenu {
  --p-tieredmenu-item-padding: 8px 12px;
  --p-tieredmenu-item-gap: 8px;
  --p-tieredmenu-item-border-radius: 3px;
  --p-tieredmenu-item-color: #2d3540;
  --p-tieredmenu-item-focus-background: #eef5ff;
  --p-tieredmenu-item-focus-color: #174f92;
  --p-menu-item-padding: 8px 12px;
  --p-menu-item-gap: 8px;
  --p-menu-item-border-radius: 3px;
  --p-menu-item-color: #2d3540;
  --p-menu-item-focus-background: #eef5ff;
  --p-menu-item-focus-color: #174f92;
  width: max-content !important;
  min-width: 178px !important;
  max-width: 240px !important;
  margin-top: 6px !important;
  padding: 6px !important;
  border: 1px solid #b7d0ee !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 30px rgba(13, 35, 64, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.72) inset !important;
  overflow: hidden !important;
}

body .ordersActionBtnMenu .p-tieredmenu-root-list,
body .ordersActionBtnMenu .p-tieredmenu-list,
body .ordersActionBtnMenu .p-menu-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .ordersActionBtnMenu .p-menuitem,
body .ordersActionBtnMenu .p-tieredmenu-item {
  margin: 0 !important;
}

body .ordersActionBtnMenu .p-menuitem-link,
body .ordersActionBtnMenu .p-tieredmenu-item-link,
body .ordersActionBtnMenu .p-tieredmenu-item-content {
  display: flex !important;
  align-items: center !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: #2d3540 !important;
  font-family: AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  line-height: 18px !important;
  white-space: nowrap !important;
}

body .ordersActionBtnMenu .p-menuitem-link:hover,
body .ordersActionBtnMenu .p-menuitem-link:focus,
body .ordersActionBtnMenu .p-tieredmenu-item-link:hover,
body .ordersActionBtnMenu .p-tieredmenu-item-link:focus,
body .ordersActionBtnMenu .p-tieredmenu-item-content:hover {
  background: #eef5ff !important;
  color: #174f92 !important;
}

body .ordersActionBtnMenu .p-menuitem-icon,
body .ordersActionBtnMenu .p-tieredmenu-item-icon,
body .ordersActionBtnMenu .pi {
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin: 0 8px 0 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  line-height: 16px !important;
  text-align: center !important;
}

body .ordersActionBtnMenu .p-menuitem-text,
body .ordersActionBtnMenu .p-tieredmenu-item-label {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: inherit !important;
  line-height: 18px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .ordersActionBtnMenu .p-tieredmenu-item-content {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
}

body .ordersActionBtnMenu .p-tieredmenu-item-content > .p-tieredmenu-item-link,
body .ordersActionBtnMenu .p-menuitem-link {
  width: 100% !important;
  min-height: 32px !important;
}

body .ordersActionBtnMenu .p-tieredmenu-item-content:hover {
  background: transparent !important;
}

/* Orders header date filter: make the Today dropdown match the taller header action controls. */
body .freight-quote-page-header .fq-header-controls .custom-dropdown-datefilter,
body .freight-quote-page-header .fq-header-controls p-dropdown.custom-dropdown-datefilter {
  min-width: 230px !important;
  width: 230px !important;
}

body .freight-quote-page-header .fq-header-controls .custom-dropdown-datefilter > .p-dropdown,
body .freight-quote-page-header .fq-header-controls .custom-dropdown-datefilter .p-dropdown,
body .freight-quote-page-header .fq-header-controls p-dropdown.custom-dropdown-datefilter .p-dropdown,
body .freight-quote-page-header .fq-header-controls p-dropdown.custom-dropdown-datefilter {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 3px !important;
}

body .freight-quote-page-header .fq-header-controls .custom-dropdown-datefilter .p-dropdown-label,
body .freight-quote-page-header .fq-header-controls p-dropdown.custom-dropdown-datefilter .p-dropdown .p-dropdown-label,
body .freight-quote-page-header .fq-header-controls .custom-dropdown-datefilter .p-select-label,
body .freight-quote-page-header .fq-header-controls p-dropdown.custom-dropdown-datefilter .p-select-label {
  display: inline-flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  color: #000000 !important;
  font-size: 15px !important;
  /* 700 in Inter reads far heavier than 700 did in AvenirNextCyr; 600 keeps
     the value prominent without shouting next to the list options. */
  font-weight: 600 !important;
  line-height: 38px !important;
}

body .freight-quote-page-header .fq-header-controls .custom-dropdown-datefilter .p-dropdown-trigger,
body .freight-quote-page-header .fq-header-controls p-dropdown.custom-dropdown-datefilter .p-dropdown .p-dropdown-trigger,
body .freight-quote-page-header .fq-header-controls .custom-dropdown-datefilter .p-select-dropdown,
body .freight-quote-page-header .fq-header-controls p-dropdown.custom-dropdown-datefilter .p-select-dropdown {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-height: 38px !important;
  width: 42px !important;
  color: #143a67 !important;
}

body .freight-quote-page-header .fq-header-controls .custom-dropdown-datefilter .p-select-dropdown-icon,
body .freight-quote-page-header .fq-header-controls p-dropdown.custom-dropdown-datefilter .p-select-dropdown-icon {
  width: 14px !important;
  height: 14px !important;
  color: #143a67 !important;
}

/* Orders table: Carrier Name width left at the shared 165px cap to match prod.
 * The earlier 190/240 widening (added to show long carrier names fully after the
 * PrimeNG upgrade) is deliberately gone — prod truncates long names instead. */
body .orders-data-shell app-config-table .orders-table-theme #track-grid .p-datatable-tbody > tr > td.orders-col-carrier-name,
body .orders-data-shell app-config-table .orders-table-theme #track-grid .p-datatable-tbody > tr > td.orders-col-carrier-name span,
body .orders-data-shell app-config-table .orders-table-theme #track-grid .p-datatable-tbody > tr > td.orders-col-carrier-name a {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* Carrier Name width intentionally NOT widened — prod leaves this column on the
 * shared 165px cap (measured: min-width 0, max-width 165px), which is why prod
 * truncates long names like "PITT OHIO Corporate (". The previous 230/260 here
 * made the column 65px wider than prod and left a visible gap before Ship Type.
 * Note this was also keyed on :nth-child(4), which is only Carrier Name for
 * column configs that happen to place it 4th — prefer .orders-col-carrier-name
 * if this ever needs to come back. */
body .orders-data-shell app-config-table .orders-table-theme #track-grid .p-datatable-tbody > tr > td:nth-child(4),
body .orders-data-shell app-config-table .orders-table-theme #track-grid .p-datatable-tbody > tr > td:nth-child(4) span,
body .orders-data-shell app-config-table .orders-table-theme #track-grid .p-datatable-tbody > tr > td:nth-child(4) a {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

body .filter-overlay-panel.p-popover,
body .filter-overlay-panel.p-overlaypanel {
  z-index: 1207 !important;
}

/* Orders filter should sit cleanly over the grid, without the heavy table blur. */
body:has(.filter-overlay-panel.p-popover) .orders-data-shell::after,
body:has(.filter-overlay-panel.p-overlaypanel) .orders-data-shell::after {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  pointer-events: none !important;
}

body:has(.filter-overlay-panel.p-popover) .orders-data-shell .filterPopup,
body:has(.filter-overlay-panel.p-overlaypanel) .orders-data-shell .filterPopup {
  z-index: 1206 !important;
}

/* Orders filter overlay: full-screen production-style sheet, no heavy blur. */
body:has(.orders-data-shell):has(.filter-overlay-panel.p-popover)::before,
body:has(.orders-data-shell):has(.filter-overlay-panel.p-overlaypanel)::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1198 !important;
  pointer-events: none !important;
  background: rgba(246, 250, 255, 0.68) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

body:has(.orders-data-shell):has(.filter-overlay-panel.p-popover) .orders-data-shell::after,
body:has(.orders-data-shell):has(.filter-overlay-panel.p-overlaypanel) .orders-data-shell::after {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  pointer-events: none !important;
}

body:has(.orders-data-shell):has(.filter-overlay-panel.p-popover) .filter-icon-btn,
body:has(.orders-data-shell):has(.filter-overlay-panel.p-overlaypanel) .filter-icon-btn {
  position: relative !important;
  z-index: 1206 !important;
  border-color: #2f67b0 !important;
  background: #2f67b0 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(47, 103, 176, 0.18) !important;
}

body:has(.orders-data-shell):has(.filter-overlay-panel.p-popover) .filter-icon-btn .p-button-label,
body:has(.orders-data-shell):has(.filter-overlay-panel.p-overlaypanel) .filter-icon-btn .p-button-label {
  color: #ffffff !important;
}

body:has(.orders-data-shell) .filter-overlay-panel.p-popover,
body:has(.orders-data-shell) .filter-overlay-panel.p-overlaypanel {
  width: min(980px, 100vw - 32px) !important;
  min-width: min(980px, 100vw - 32px) !important;
  max-width: min(980px, 100vw - 32px) !important;
  z-index: 1207 !important;
  border: 1px solid #d4e4f6 !important;
  border-radius: 8px !important;
  background: #f7fbff !important;
  box-shadow: 0 18px 36px rgba(20, 42, 72, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.72) inset !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .p-popover-content,
body:has(.orders-data-shell) .filter-overlay-panel .p-overlaypanel-content,
body:has(.orders-data-shell) .filter-overlay-panel .filter-content {
  background: #f7fbff !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .orders-filter-field,
body:has(.orders-data-shell) .filter-overlay-panel .master-filter-field {
  border: 1px solid #dce9f8 !important;
  border-radius: 7px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 4px 12px rgba(26, 58, 97, 0.06) !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .dropDownCss,
body:has(.orders-data-shell) .filter-overlay-panel .p-dropdown,
body:has(.orders-data-shell) .filter-overlay-panel .p-select,
body:has(.orders-data-shell) .filter-overlay-panel p-dropdown,
body:has(.orders-data-shell) .filter-overlay-panel .p-select-label,
body:has(.orders-data-shell) .filter-overlay-panel .p-dropdown-label,
body:has(.orders-data-shell) .filter-overlay-panel .p-select-dropdown,
body:has(.orders-data-shell) .filter-overlay-panel .p-dropdown-trigger {
  background: #ffffff !important;
  box-shadow: none !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .dropDownCss,
body:has(.orders-data-shell) .filter-overlay-panel .p-dropdown,
body:has(.orders-data-shell) .filter-overlay-panel .p-select,
body:has(.orders-data-shell) .filter-overlay-panel p-dropdown {
  height: 42px !important;
  min-height: 42px !important;
  border: 1px solid #bfd3ec !important;
  border-radius: 3px !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .p-select-label,
body:has(.orders-data-shell) .filter-overlay-panel .p-dropdown-label {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  color: #778195 !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .p-select-dropdown,
body:has(.orders-data-shell) .filter-overlay-panel .p-dropdown-trigger {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  color: #2f67b0 !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .calendarCss,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-calendar,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-datepicker,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss.p-calendar,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss.p-datepicker {
  width: 100% !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-inputtext,
body:has(.orders-data-shell) .filter-overlay-panel .p-datepicker-input,
body:has(.orders-data-shell) .filter-overlay-panel .p-calendar .p-inputtext {
  height: 42px !important;
  min-height: 42px !important;
  border: 1px solid #bfd3ec !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: #35445a !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  padding-left: 14px !important;
  padding-right: 42px !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-datepicker-input-icon-container {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .calendarCss.p-focus,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-focus,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-inputwrapper-focus,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss.p-inputwrapper-focus,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-datepicker.p-focus,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-datepicker.p-inputwrapper-focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-inputtext:focus,
body:has(.orders-data-shell) .filter-overlay-panel .p-datepicker-input:focus,
body:has(.orders-data-shell) .filter-overlay-panel .p-calendar .p-inputtext:focus {
  border-color: #2f67b0 !important;
  box-shadow: 0 0 0 2px rgba(47, 103, 176, 0.12) !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-datepicker-trigger,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-calendar-button,
body:has(.orders-data-shell) .filter-overlay-panel .p-datepicker-trigger,
body:has(.orders-data-shell) .filter-overlay-panel .p-calendar-button {
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: #697a8d !important;
  box-shadow: none !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-datepicker-trigger:hover,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-calendar-button:hover,
body:has(.orders-data-shell) .filter-overlay-panel .p-datepicker-trigger:hover,
body:has(.orders-data-shell) .filter-overlay-panel .p-calendar-button:hover {
  background: #f3f7fc !important;
  color: #2f67b0 !important;
}

body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-datepicker-trigger .p-icon,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-calendar-button .p-icon,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-datepicker-trigger svg,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-calendar-button svg,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-datepicker-input-icon,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-datepicker-input-icon svg,
body:has(.orders-data-shell) .filter-overlay-panel .calendarCss .p-icon {
  width: 15px !important;
  height: 15px !important;
  color: #697a8d !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Orders POD / PPOD document dialog: PrimeNG v18 renders this in the global overlay. */
body .p-dialog-mask:has(.pod-header-elegant),
body .p-component-overlay:has(.pod-header-elegant) {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(15, 23, 42, 0.42) !important;
  -webkit-backdrop-filter: blur(2px) !important;
          backdrop-filter: blur(2px) !important;
  transform: none !important;
  z-index: 13000 !important;
}

body .p-dialog-mask:has(.pod-header-elegant) > .p-dialog,
body .p-component-overlay:has(.pod-header-elegant) > .p-dialog,
body .p-dialog:has(.pod-header-elegant) {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(980px, 100vw - 64px) !important;
  max-width: calc(100vw - 48px) !important;
  height: auto !important;
  max-height: calc(100vh - 56px) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 0 auto !important;
}

body .p-dialog:has(.pod-header-elegant) .p-dialog-content {
  display: flex !important;
  flex-direction: column !important;
  height: min(760px, 100vh - 56px) !important;
  max-height: calc(100vh - 56px) !important;
  padding: 0 !important;
  border-radius: 14px !important;
  background: #f6f9fd !important;
  overflow: hidden !important;
  box-shadow: 0 26px 54px rgba(15, 23, 42, 0.26) !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-header-elegant {
  background: #ffffff !important;
  border-bottom: 1px solid #dce6f2 !important;
  box-shadow: 0 6px 18px rgba(15, 35, 66, 0.08) !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-header-content {
  max-width: none !important;
  padding: 16px 22px !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-icon-container {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  background: #eef5ff !important;
  border: 1px solid #cfe0f5 !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-icon-primary {
  color: #2f67b0 !important;
  filter: none !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-title-main {
  font-size: 21px !important;
  letter-spacing: 0 !important;
  color: #1f2d45 !important;
  text-shadow: none !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-subtitle {
  color: #6f7d91 !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-tracking-label {
  color: #7d8aa0 !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-tracking-number {
  color: #174f92 !important;
  background: #eef5ff !important;
  border: 1px solid #d6e6fa !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-action-btn-close {
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
  background: #ef4444 !important;
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.26) !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-action-btn-close:hover {
  background: #dc2626 !important;
  transform: translateY(-1px) !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-tabs-container {
  position: relative !important;
  z-index: 2 !important;
  padding: 10px 18px 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #dce6f2 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-tabs-elegant .p-tablist,
body .p-dialog:has(.pod-header-elegant) .pod-tabs-elegant .p-tablist-content,
body .p-dialog:has(.pod-header-elegant) .pod-tabs-elegant .p-tablist-tab-list {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-tabs-elegant .p-tab {
  min-height: 36px !important;
  padding: 8px 13px !important;
  border: 1px solid #cfe0f5 !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  background: #f7fbff !important;
  color: #345070 !important;
  box-shadow: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-tabs-elegant .p-tab:hover {
  background: #eef6ff !important;
  border-color: #9fc0ea !important;
  color: #174f92 !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-tabs-elegant .p-tab.p-tab-active,
body .p-dialog:has(.pod-header-elegant) .pod-tabs-elegant .p-tab.p-highlight,
body .p-dialog:has(.pod-header-elegant) .pod-tabs-elegant .pod-tab-active {
  border-color: #2f67b0 !important;
  background: #ffffff !important;
  color: #143a67 !important;
  box-shadow: 0 -2px 10px rgba(47, 103, 176, 0.12) !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-tabs-elegant .p-tablist-active-bar,
body .p-dialog:has(.pod-header-elegant) .pod-tabs-elegant .p-tabpanels {
  display: none !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-tab-header {
  gap: 7px !important;
  font-size: 13px !important;
  line-height: 18px !important;
  white-space: nowrap !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-tab-header .pi {
  width: 14px !important;
  min-width: 14px !important;
  font-size: 13px !important;
  color: currentColor !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-tab-label {
  font-size: 13px !important;
  font-weight: 700 !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-viewer-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 18px 18px 20px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%) !important;
  overflow: auto !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-viewer-wrapper {
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 1px solid #e0e9f4 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(25, 53, 91, 0.08) !important;
  overflow: auto !important;
}

body .p-dialog:has(.pod-header-elegant) .pod-image-viewer-modern {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 520px) !important;
  height: auto !important;
  max-height: calc(100vh - 300px) !important;
  margin: 0 auto !important;
  border: 1px solid #dbe6f2 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1) !important;
  object-fit: contain !important;
}

/* Final Orders filter overlay surface pass for PrimeNG v18 body-appended popups. */
body:has(.filter-overlay-panel) .p-datepicker-panel.p-component,
body:has(.filter-overlay-panel) .p-datepicker-panel.p-component.ng-trigger,
body:has(.filter-overlay-panel) .p-select-overlay.p-component,
body:has(.filter-overlay-panel) .p-dropdown-panel.p-component {
  z-index: 1400 !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 10px !important;
  border: 1px solid #bad0eb !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: 0 22px 48px rgba(13, 35, 64, 0.26), 0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
}

body:has(.filter-overlay-panel) .p-overlay:has(.p-select-overlay),
body:has(.filter-overlay-panel) .p-overlay:has(.p-dropdown-panel),
body:has(.filter-overlay-panel) .p-overlay:has(.p-datepicker-panel),
body:has(.filter-overlay-panel) .p-overlay-content:has(.p-select-overlay),
body:has(.filter-overlay-panel) .p-overlay-content:has(.p-dropdown-panel),
body:has(.filter-overlay-panel) .p-overlay-content:has(.p-datepicker-panel) {
  z-index: 1500 !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel.p-component {
  width: 320px !important;
  min-width: 320px !important;
  padding: 12px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-calendar-container,
body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-calendar,
body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-group {
  border-radius: 8px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-header {
  display: grid !important;
  grid-template-columns: 34px 1fr 34px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  margin-bottom: 8px !important;
  padding: 2px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #eef5ff !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: #1f385c !important;
  font-weight: 800 !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-select-month,
body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-select-year {
  min-width: auto !important;
  padding: 0 !important;
  color: #1f385c !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
  background: transparent !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-select-month::after {
  content: " " !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-prev-button,
body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-next-button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 6px !important;
  color: #174f92 !important;
  background: transparent !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-prev-button:hover,
body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-next-button:hover {
  color: #ffffff !important;
  background: #2f67b0 !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 4px !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel th {
  color: #61728a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel td {
  padding: 0 !important;
  text-align: center !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-day,
body:has(.filter-overlay-panel) .p-datepicker-panel td > span,
body:has(.filter-overlay-panel) .p-datepicker-panel td > a {
  width: 32px !important;
  height: 32px !important;
  margin: 0 auto !important;
  border-radius: 6px !important;
  color: #253f61 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  background: transparent !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-day:hover,
body:has(.filter-overlay-panel) .p-datepicker-panel td > span:hover,
body:has(.filter-overlay-panel) .p-datepicker-panel td > a:hover {
  color: #174f92 !important;
  background: #eaf3ff !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-day-selected,
body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-day.p-datepicker-day-selected,
body:has(.filter-overlay-panel) .p-datepicker-panel .p-highlight,
body:has(.filter-overlay-panel) .p-datepicker-panel [aria-selected=true] {
  color: #ffffff !important;
  background: #2f67b0 !important;
  box-shadow: 0 6px 14px rgba(47, 103, 176, 0.22) !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-day.p-datepicker-day-selected *,
body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-day-selected * {
  color: #ffffff !important;
}

body:has(.filter-overlay-panel) .p-datepicker-panel .p-datepicker-other-month .p-datepicker-day,
body:has(.filter-overlay-panel) .p-datepicker-panel .p-disabled {
  color: #9aa8ba !important;
  opacity: 1 !important;
}

body:has(.filter-overlay-panel) .p-select-overlay.p-component,
body:has(.filter-overlay-panel) .p-dropdown-panel.p-component {
  min-width: 272px !important;
  padding: 8px !important;
  background: #ffffff !important;
}

body:has(.filter-overlay-panel) .p-select-overlay .p-select-header,
body:has(.filter-overlay-panel) .p-dropdown-panel .p-dropdown-header {
  padding: 0 0 8px !important;
  background: #ffffff !important;
}

body:has(.filter-overlay-panel) .p-select-overlay .p-iconfield,
body:has(.filter-overlay-panel) .p-dropdown-panel .p-iconfield,
body:has(.filter-overlay-panel) .p-select-overlay .p-select-filter-container,
body:has(.filter-overlay-panel) .p-dropdown-panel .p-dropdown-filter-container {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

body:has(.filter-overlay-panel) .p-select-overlay .p-iconfield.p-iconfield-left > .p-inputtext,
body:has(.filter-overlay-panel) .p-dropdown-panel .p-iconfield.p-iconfield-left > .p-inputtext,
body:has(.filter-overlay-panel) .p-select-overlay .p-select-filter,
body:has(.filter-overlay-panel) .p-dropdown-panel .p-dropdown-filter {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 40px 0 12px !important;
  border: 1px solid #bad0eb !important;
  border-radius: 6px !important;
  color: #1f385c !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body:has(.filter-overlay-panel) .p-select-overlay .p-iconfield > .p-inputicon,
body:has(.filter-overlay-panel) .p-dropdown-panel .p-iconfield > .p-inputicon,
body:has(.filter-overlay-panel) .p-select-overlay .p-select-filter-icon,
body:has(.filter-overlay-panel) .p-dropdown-panel .p-dropdown-filter-icon {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  left: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: 12px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  color: #2f67b0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:has(.filter-overlay-panel) .p-select-overlay .p-inputicon .p-icon,
body:has(.filter-overlay-panel) .p-dropdown-panel .p-inputicon .p-icon,
body:has(.filter-overlay-panel) .p-select-overlay .p-select-filter-icon .p-icon,
body:has(.filter-overlay-panel) .p-dropdown-panel .p-dropdown-filter-icon .p-icon {
  width: 15px !important;
  height: 15px !important;
  color: #2f67b0 !important;
}

body:has(.filter-overlay-panel) .p-select-list,
body:has(.filter-overlay-panel) .p-dropdown-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 0 !important;
  background: #ffffff !important;
}

body:has(.filter-overlay-panel) .p-select-option,
body:has(.filter-overlay-panel) .p-dropdown-item {
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  color: #253f61 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: transparent !important;
}

body:has(.filter-overlay-panel) .p-select-option:hover,
body:has(.filter-overlay-panel) .p-dropdown-item:hover {
  color: #174f92 !important;
  background: #eaf3ff !important;
}

body:has(.filter-overlay-panel) .p-select-option.p-select-option-selected,
body:has(.filter-overlay-panel) .p-select-option[aria-selected=true],
body:has(.filter-overlay-panel) .p-dropdown-item.p-highlight,
body:has(.filter-overlay-panel) .p-dropdown-item[aria-selected=true] {
  color: #ffffff !important;
  background: #2f67b0 !important;
}

/* Freight Quote / Ship Now Pack Spot Type: preserve row balance and keep the chevron readable. */
body .shipnow_header2 .field-box.pack-spot-type-field,
body .shipnow_header2 div.field-box.pack-spot-type-field {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

body .shipnow_header2 .field-box.pack-spot-type-field .p-dropdown,
body .shipnow_header2 .field-box.pack-spot-type-field .p-select {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body .shipnow_header2 .field-box.pack-spot-type-field .p-dropdown-label,
body .shipnow_header2 .field-box.pack-spot-type-field .p-select-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  padding-left: 10px !important;
  padding-right: 6px !important;
}

body .shipnow_header2 .field-box.pack-spot-type-field .p-dropdown-trigger,
body .shipnow_header2 .field-box.pack-spot-type-field .p-select-dropdown {
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
}

/* Freight Quote Submissions — Submit to Carrier: blue fill left → right on hover. */
body .freight-submission-sidebar .custom-submit-button,
body .freight-sidebar-footer .custom-submit-button,
body .fq-submit-sweep:not(.btn-new) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  z-index: 0;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #1f1646 !important;
  border: 1px solid #1f1646 !important;
  box-shadow: 0 3px 10px rgba(31, 22, 70, 0.1) !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}

body .btn-new.fq-submit-sweep {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  z-index: 0;
}

body .freight-submission-sidebar .custom-submit-button .fq-submit-label,
body .freight-sidebar-footer .custom-submit-button .fq-submit-label,
body .fq-submit-sweep .fq-submit-label {
  position: relative;
  z-index: 1;
}

body .freight-submission-sidebar .custom-submit-button::before,
body .freight-sidebar-footer .custom-submit-button::before,
body .fq-submit-sweep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #3b5ccc;
  z-index: 0;
  pointer-events: none;
  transition: width 0.35s ease;
}

body .freight-submission-sidebar .custom-submit-button:hover:not(.fq-submit-disabled)::before,
body .freight-sidebar-footer .custom-submit-button:hover:not(.fq-submit-disabled)::before,
body .fq-submit-sweep:hover:not(.fq-submit-disabled)::before,
body .fq-submit-sweep:hover:not(:disabled)::before,
body .freight-submission-sidebar .custom-submit-button:focus-visible:not(.fq-submit-disabled)::before,
body .freight-sidebar-footer .custom-submit-button:focus-visible:not(.fq-submit-disabled)::before,
body .fq-submit-sweep:focus-visible:not(.fq-submit-disabled)::before,
body .fq-submit-sweep:focus-visible:not(:disabled)::before {
  width: 100%;
}

body .freight-submission-sidebar .custom-submit-button:hover:not(.fq-submit-disabled),
body .freight-sidebar-footer .custom-submit-button:hover:not(.fq-submit-disabled),
body .fq-submit-sweep:hover:not(.fq-submit-disabled),
body .fq-submit-sweep:hover:not(:disabled),
body .freight-submission-sidebar .custom-submit-button:focus-visible:not(.fq-submit-disabled),
body .freight-sidebar-footer .custom-submit-button:focus-visible:not(.fq-submit-disabled),
body .fq-submit-sweep:focus-visible:not(.fq-submit-disabled),
body .fq-submit-sweep:focus-visible:not(:disabled),
body .freight-sidebar-footer .btn-new.fq-submit-sweep:hover:not(:disabled),
body .freight-submission-sidebar .btn-new.fq-submit-sweep:hover:not(:disabled) {
  color: #ffffff !important;
  border-color: #3b5ccc !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: 0 6px 14px rgba(59, 92, 204, 0.28) !important;
}

body .freight-submission-sidebar .custom-submit-button.fq-submit-disabled,
body .freight-submission-sidebar .custom-submit-button.fq-submit-disabled:hover,
body .freight-submission-sidebar .custom-submit-button.fq-submit-disabled:focus,
body .freight-submission-sidebar .custom-submit-button.fq-submit-disabled:active,
body .freight-sidebar-footer .custom-submit-button.fq-submit-disabled,
body .freight-sidebar-footer .custom-submit-button.fq-submit-disabled:hover,
body .freight-sidebar-footer .custom-submit-button.fq-submit-disabled:focus,
body .freight-sidebar-footer .custom-submit-button.fq-submit-disabled:active,
body .fq-submit-sweep.fq-submit-disabled,
body .fq-submit-sweep.fq-submit-disabled:hover,
body .fq-submit-sweep.fq-submit-disabled:focus,
body .fq-submit-sweep.fq-submit-disabled:active {
  background: #cccccc !important;
  background-color: #cccccc !important;
  color: #666666 !important;
  border: 1px solid #cccccc !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

body .freight-submission-sidebar .custom-submit-button.fq-submit-disabled::before,
body .freight-sidebar-footer .custom-submit-button.fq-submit-disabled::before,
body .fq-submit-sweep.fq-submit-disabled::before,
body .fq-submit-sweep:disabled::before {
  width: 0 !important;
  background: transparent !important;
}

/* Freight quote carrier grid: never blue-wash a hovered/selected row. */
body app-freight-quote-popup .freight-main-table .p-datatable-tbody > tr:hover,
body app-freight-quote-popup .freight-main-table .p-datatable-tbody > tr.p-highlight,
body .freight-submission-sidebar .freight-main-table .p-datatable-tbody > tr:hover,
body .freight-submission-sidebar .freight-main-table .p-datatable-tbody > tr.p-highlight {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

body app-freight-quote-popup .freight-main-table .p-datatable-tbody > tr:hover > td,
body app-freight-quote-popup .freight-main-table .p-datatable-tbody > tr.p-highlight > td,
body .freight-submission-sidebar .freight-main-table .p-datatable-tbody > tr:hover > td,
body .freight-submission-sidebar .freight-main-table .p-datatable-tbody > tr.p-highlight > td {
  /* Do not set background here — inline cell tints must remain. */
  color: inherit !important;
  box-shadow: none !important;
}

/* Freight Quote submissions opens as a full-screen work surface, not a right drawer. */
body .p-sidebar.freight-submission-sidebar,
body .p-drawer.freight-submission-sidebar,
body .p-sidebar.freight-submission-sidebar.freight-submission-sidebar--embedded,
body .p-drawer.freight-submission-sidebar.freight-submission-sidebar--embedded {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

body app-freight-quote-popup .freight-main-table p-checkbox,
body app-freight-quote-popup .freight-main-table .p-checkbox,
body app-freight-quote-popup .freight-special-row p-checkbox,
body app-freight-quote-popup .freight-special-row .p-checkbox {
  width: 21px !important;
  height: 21px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

body app-freight-quote-popup .freight-main-table .p-checkbox-input,
body app-freight-quote-popup .freight-special-row .p-checkbox-input {
  width: 21px !important;
  height: 21px !important;
}

body app-freight-quote-popup .freight-main-table .p-checkbox-box,
body app-freight-quote-popup .freight-special-row .p-checkbox-box {
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  border: 2px solid #cfd7df !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: transparent !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body app-freight-quote-popup .freight-main-table .p-checkbox:not(.p-disabled) .p-checkbox-box:hover,
body app-freight-quote-popup .freight-special-row .p-checkbox:not(.p-disabled) .p-checkbox-box:hover {
  border-color: #4ea732 !important;
  box-shadow: 0 0 0 2px rgba(78, 167, 50, 0.12) !important;
}

body app-freight-quote-popup .freight-main-table .p-checkbox.p-checkbox-checked .p-checkbox-box,
body app-freight-quote-popup .freight-main-table .p-checkbox-box.p-highlight,
body app-freight-quote-popup .freight-special-row .p-checkbox.p-checkbox-checked .p-checkbox-box,
body app-freight-quote-popup .freight-special-row .p-checkbox-box.p-highlight {
  border-color: #24a148 !important;
  background: #24a148 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body app-freight-quote-popup .freight-main-table .p-checkbox-icon,
body app-freight-quote-popup .freight-special-row .p-checkbox-icon,
body app-freight-quote-popup .freight-main-table .p-checkbox-icon svg,
body app-freight-quote-popup .freight-special-row .p-checkbox-icon svg {
  width: 13px !important;
  height: 13px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 3px !important;
}

body app-freight-quote-popup .freight-main-table .p-checkbox-box.p-highlight .p-checkbox-icon,
body app-freight-quote-popup .freight-main-table .p-checkbox-box.p-highlight .p-checkbox-icon::before,
body app-freight-quote-popup .freight-special-row .p-checkbox-box.p-highlight .p-checkbox-icon,
body app-freight-quote-popup .freight-special-row .p-checkbox-box.p-highlight .p-checkbox-icon::before {
  color: #ffffff !important;
}

body app-freight-quote-popup .freight-main-table .p-checkbox-box.p-highlight > svg.p-checkbox-icon.p-icon,
body app-freight-quote-popup .freight-special-row .p-checkbox-box.p-highlight > svg.p-checkbox-icon.p-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

body app-freight-quote-popup .freight-main-table .p-checkbox-box.p-highlight > svg.p-checkbox-icon.p-icon path,
body app-freight-quote-popup .freight-special-row .p-checkbox-box.p-highlight > svg.p-checkbox-icon.p-icon path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

body app-freight-quote-popup .freight-main-table th:first-child,
body app-freight-quote-popup .freight-main-table td:first-child {
  width: 60px !important;
  min-width: 60px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

body app-dashboard-header .main-dev-sec > .add-ship-request-header .ship-date-calendar .p-datepicker-input.p-inputtext,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .ship-date-calendar input.p-datepicker-input.p-inputtext {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  line-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Ship Now workflow tabs: global final polish for active highlight and typography. */
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs {
  margin-top: 0 !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs > .mat-mdc-tab-header {
  min-height: 52px !important;
  margin: 0 0 7px 0 !important;
  padding: 5px 8px !important;
  border-radius: 0 !important;
  border-top: 1px solid #e5edf6 !important;
  border-bottom: 1px solid #d8e5f3 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: inset 0 -1px 0 rgba(46, 91, 135, 0.04) !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab-labels {
  gap: 8px !important;
  align-items: center !important;
  border-bottom: 0 !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab::after {
  display: none !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab .mdc-tab__content {
  justify-content: center !important;
  width: 100% !important;
  padding: 0 12px !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .ship-step-label {
  height: 100% !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .ship-step-text {
  font-family: AvenirNextCyrDemi, AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  color: #667a92 !important;
  white-space: nowrap !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):hover {
  background: #eef5fd !important;
  border-color: #c9d9ec !important;
  transform: translateY(-1px) !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):hover .ship-step-text {
  color: #294f7f !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab--active,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab[aria-selected=true] {
  border-color: #9fc6ec !important;
  background: linear-gradient(180deg, #ffffff 0%, #edf6ff 100%) !important;
  box-shadow: inset 0 -3px 0 #0b74bd, 0 6px 14px rgba(21, 88, 148, 0.16) !important;
  transform: translateY(-1px) !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab--active .ship-step-text,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab[aria-selected=true] .ship-step-text,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .ship-step-text.ship-step-text-active {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: #123f68 !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab .mdc-tab-indicator,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab .mdc-tab-indicator__content,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab .mdc-tab-indicator__content--underline,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mdc-tab__ripple,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-ripple {
  display: none !important;
  border: 0 !important;
}

/* Ship Now workflow tabs v2: flat elegant navigation, no raised active tile. */
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs > .mat-mdc-tab-header {
  min-height: 50px !important;
  margin: 0 0 6px 0 !important;
  padding: 0 10px !important;
  border-radius: 0 !important;
  border-top: 1px solid #edf3f9 !important;
  border-bottom: 1px solid #dbe7f3 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: none !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab-labels {
  gap: 0 !important;
  align-items: stretch !important;
  min-height: 50px !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab {
  height: 50px !important;
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
  position: relative !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 0 !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
  background: transparent !important;
  transform: scaleX(0.35) !important;
  opacity: 0 !important;
  transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):hover {
  background: linear-gradient(180deg, rgba(239, 246, 253, 0.65) 0%, rgba(248, 252, 255, 0.75) 100%) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab--active,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab[aria-selected=true] {
  background: linear-gradient(180deg, rgba(239, 247, 255, 0.82) 0%, rgba(255, 255, 255, 0.98) 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab--active::before,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab[aria-selected=true]::before {
  background: #0b74bd !important;
  transform: scaleX(1) !important;
  opacity: 1 !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab .mdc-tab__content {
  justify-content: center !important;
  height: 50px !important;
  padding: 0 12px !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .ship-step-label {
  height: 50px !important;
  align-items: center !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .ship-step-text {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.012em !important;
  color: #6d7887 !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab:hover .ship-step-text {
  color: #2f5f8f !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab--active .ship-step-text,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab[aria-selected=true] .ship-step-text,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .ship-step-text.ship-step-text-active {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #123f68 !important;
}

/* Ship Now workflow tabs v3: crisp bottom-border selection matched to the dense screen. */
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs > .mat-mdc-tab-header {
  min-height: 48px !important;
  margin: 0 0 7px 0 !important;
  padding: 0 8px !important;
  background: #fbfdff !important;
  border-top: 1px solid #edf3f9 !important;
  border-bottom: 2px solid #d8e6f4 !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab-labels {
  min-height: 48px !important;
  gap: 2px !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab {
  height: 48px !important;
  min-height: 48px !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab::before {
  display: none !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab .mdc-tab__content,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .ship-step-label {
  height: 45px !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .ship-step-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #637489 !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):hover {
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%) !important;
  border-bottom-color: #bcd3ea !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):hover .ship-step-text {
  color: #335d87 !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab--active,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab[aria-selected=true] {
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%) !important;
  border-bottom-color: #0b74bd !important;
  box-shadow: inset 0 -1px 0 rgba(11, 116, 189, 0.16) !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab--active .ship-step-text,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab[aria-selected=true] .ship-step-text,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .ship-step-text.ship-step-text-active {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: #143f68 !important;
}

/* Ship Now header control rail: keep search controls on one crisp baseline. */
body app-dashboard-header .main-dev-sec > .add-ship-request-header {
  --ship-now-header-control-height: 40px;
  min-height: 53px !important;
  padding: 7px 10px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%) !important;
  border-top: 1px solid #eaf1f8 !important;
  border-bottom: 1px solid #d8e6f4 !important;
  box-shadow: inset 0 -1px 0 rgba(31, 86, 139, 0.04) !important;
}

body app-dashboard-header .main-dev-sec > .add-ship-request-header > .row.m-0,
body app-dashboard-header .main-dev-sec > .add-ship-request-header > .row.m-0 > [class*=col-md-],
body app-dashboard-header .main-dev-sec > .add-ship-request-header .gridclass,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .ship-mid-controls,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .ship-header-actions-right,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .menu-dropdown-sec,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .search-container,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .ship-get-slot,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .ship-date-inline-wrap,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .ship-date-inline,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .ship-date-input {
  display: flex !important;
  align-items: center !important;
  align-content: center !important;
  min-height: var(--ship-now-header-control-height) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: none !important;
}

body app-dashboard-header .main-dev-sec > .add-ship-request-header input.custom-input,
body app-dashboard-header .main-dev-sec > .add-ship-request-header input.p-inputtext,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .shipheadergetbuttonnew,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .btn-clear,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .btn-new,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.attachment-dropdown,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.deliveryOrderCss,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.attachment-dropdown.p-select,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.deliveryOrderCss.p-select,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.attachment-dropdown .p-dropdown,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.deliveryOrderCss .p-dropdown,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.attachment-dropdown .p-select,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.deliveryOrderCss .p-select,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-calendar.ship-date-calendar,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-calendar.ship-date-calendar .p-calendar,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-calendar.ship-date-calendar .p-datepicker,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-calendar.ship-date-calendar input.p-inputtext,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-calendar.ship-date-calendar input.p-datepicker-input {
  height: var(--ship-now-header-control-height) !important;
  min-height: var(--ship-now-header-control-height) !important;
  max-height: var(--ship-now-header-control-height) !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: top !important;
  transform: none !important;
}

body app-dashboard-header .main-dev-sec > .add-ship-request-header input.custom-input,
body app-dashboard-header .main-dev-sec > .add-ship-request-header input.p-inputtext,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-calendar.ship-date-calendar input.p-inputtext,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-calendar.ship-date-calendar input.p-datepicker-input {
  display: block !important;
  line-height: calc(var(--ship-now-header-control-height) - 2px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
}

body app-dashboard-header .main-dev-sec > .add-ship-request-header .shipheadergetbuttonnew,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .btn-clear,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .btn-new {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 4px !important;
}

body app-dashboard-header .main-dev-sec > .add-ship-request-header .ship-header-actions-right .btn-clear,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .btn-default-css.btn-clear {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.attachment-dropdown .p-select-label,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.deliveryOrderCss .p-select-label,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.attachment-dropdown .p-dropdown-label,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.deliveryOrderCss .p-dropdown-label,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.attachment-dropdown .p-select-dropdown,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.deliveryOrderCss .p-select-dropdown,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.attachment-dropdown .p-dropdown-trigger,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-dropdown.deliveryOrderCss .p-dropdown-trigger {
  height: calc(var(--ship-now-header-control-height) - 2px) !important;
  min-height: calc(var(--ship-now-header-control-height) - 2px) !important;
  max-height: calc(var(--ship-now-header-control-height) - 2px) !important;
  display: flex !important;
  align-items: center !important;
}

body app-dashboard-header .main-dev-sec > .add-ship-request-header p-calendar.ship-date-calendar .p-datepicker-input-icon-container,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-calendar.ship-date-calendar .p-datepicker-input-icon,
body app-dashboard-header .main-dev-sec > .add-ship-request-header p-calendar.ship-date-calendar .p-datepicker-trigger {
  height: var(--ship-now-header-control-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Global PrimeNG dropdown search field: keep the icon cleanly inside the right edge. */
body .p-dropdown-panel .p-dropdown-header,
body .p-select-overlay .p-select-header,
body .p-multiselect-panel .p-multiselect-header {
  padding: 8px !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container,
body .p-select-overlay .p-select-header .p-select-filter-container,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container,
body .p-dropdown-panel .p-dropdown-header .p-iconfield,
body .p-select-overlay .p-select-header .p-iconfield,
body .p-multiselect-panel .p-multiselect-header .p-iconfield,
body .p-dropdown-panel .p-dropdown-header .p-input-icon-left,
body .p-select-overlay .p-select-header .p-input-icon-left,
body .p-multiselect-panel .p-multiselect-header .p-input-icon-left {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter,
body .p-select-overlay .p-select-header .p-select-filter,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter,
body .p-dropdown-panel .p-dropdown-header .p-iconfield > .p-inputtext,
body .p-select-overlay .p-select-header .p-iconfield > .p-inputtext,
body .p-multiselect-panel .p-multiselect-header .p-iconfield > .p-inputtext,
body .p-dropdown-panel .p-dropdown-header .p-input-icon-left > .p-inputtext,
body .p-select-overlay .p-select-header .p-input-icon-left > .p-inputtext,
body .p-multiselect-panel .p-multiselect-header .p-input-icon-left > .p-inputtext {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 2.35rem 0 0.85rem !important;
  border: 1px solid #b8cbe1 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #263f5f !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 36px !important;
  box-shadow: inset 0 0 0 1px rgba(47, 95, 142, 0.04) !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon,
body .p-select-overlay .p-select-header .p-select-filter-icon,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-icon,
body .p-dropdown-panel .p-dropdown-header .p-iconfield > .p-inputicon,
body .p-select-overlay .p-select-header .p-iconfield > .p-inputicon,
body .p-multiselect-panel .p-multiselect-header .p-iconfield > .p-inputicon,
body .p-dropdown-panel .p-dropdown-header .p-input-icon-left > i:first-of-type,
body .p-dropdown-panel .p-dropdown-header .p-input-icon-left > .pi-search,
body .p-select-overlay .p-select-header .p-input-icon-left > i:first-of-type,
body .p-select-overlay .p-select-header .p-input-icon-left > .pi-search,
body .p-multiselect-panel .p-multiselect-header .p-input-icon-left > i:first-of-type,
body .p-multiselect-panel .p-multiselect-header .p-input-icon-left > .pi-search {
  position: absolute !important;
  left: auto !important;
  right: 0.8rem !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  color: #60738f !important;
  font-size: 15px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

body .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon svg,
body .p-select-overlay .p-select-header .p-select-filter-icon svg,
body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-icon svg,
body .p-dropdown-panel .p-dropdown-header .p-iconfield > .p-inputicon svg,
body .p-select-overlay .p-select-header .p-iconfield > .p-inputicon svg,
body .p-multiselect-panel .p-multiselect-header .p-iconfield > .p-inputicon svg {
  width: 16px !important;
  height: 16px !important;
  color: #60738f !important;
  stroke: #60738f !important;
}

/* Global PrimeNG dropdown empty state: make "No results found" feel intentional. */
body .p-dropdown-panel .p-dropdown-items-wrapper,
body .p-select-overlay .p-select-list-container,
body .p-multiselect-panel .p-multiselect-items-wrapper {
  background: #ffffff !important;
}

body .p-dropdown-panel .p-dropdown-empty-message,
body .p-select-overlay .p-select-empty-message,
body .p-multiselect-panel .p-multiselect-empty-message,
body .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message,
body .p-select-overlay .p-select-list .p-select-empty-message,
body .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
  min-height: 42px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-top: 1px solid #e6eef7 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  color: #68798f !important;
  font-family: AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal !important;
}

body .p-dropdown-panel .p-dropdown-empty-message::before,
body .p-select-overlay .p-select-empty-message::before,
body .p-multiselect-panel .p-multiselect-empty-message::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  margin-right: 8px !important;
  border-radius: 50% !important;
  background: #9eb0c5 !important;
  box-shadow: 0 0 0 4px rgba(158, 176, 197, 0.13) !important;
  flex: 0 0 auto !important;
}

/* Ship Now shipment date overlay: append-to-body panel must stay above the dense grid. */
body .ship-date-calendar-panel.p-datepicker-panel,
body .ship-date-calendar-panel.p-datepicker-panel.p-component {
  z-index: 24000 !important;
  min-width: 320px !important;
  border: 1px solid #b9cbe0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 18px 38px rgba(16, 47, 82, 0.24), 0 1px 0 rgba(255, 255, 255, 0.78) inset !important;
}

/* Ship Now Pack: Pkg Material dropdown is appended to body as a PrimeNG select overlay. */
body .pkg-material-panel.p-select-overlay,
body .pkg-material-panel.p-dropdown-panel,
body .pkg-material-panel.p-component {
  min-width: 260px !important;
  width: max-content !important;
  max-width: min(420px, 100vw - 32px) !important;
  max-height: min(420px, 100vh - 120px) !important;
  z-index: 120500 !important;
  border: 1px solid #c9d7e8 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.24) !important;
}

body .pkg-material-panel .p-select-header,
body .pkg-material-panel .p-dropdown-header {
  padding: 8px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
  border-bottom: 1px solid #dde7f5 !important;
}

body .pkg-material-panel .p-select-filter,
body .pkg-material-panel .p-dropdown-filter,
body .pkg-material-panel .p-inputtext {
  width: 100% !important;
  height: 34px !important;
  padding: 6px 12px 6px 34px !important;
  border: 1px solid #c8d4e8 !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #12365d !important;
  background: #ffffff !important;
}

body .pkg-material-panel .p-select-list-container,
body .pkg-material-panel .p-dropdown-items-wrapper {
  max-height: min(245px, 100vh - 193px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  background: #ffffff !important;
}

body .pkg-material-panel .p-select-list,
body .pkg-material-panel .p-dropdown-items {
  max-height: none !important;
  padding: 6px 0 !important;
  overflow: visible !important;
}

body .pkg-material-panel .p-virtualscroller,
body .pkg-material-panel .p-virtualscroller-content {
  overflow: visible !important;
  max-height: none !important;
}

body .pkg-material-panel .p-select-option,
body .pkg-material-panel .p-dropdown-item {
  min-height: 42px !important;
  margin: 0 6px !important;
  padding: 9px 12px !important;
  border-radius: 6px !important;
  color: #1f2a44 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

body .pkg-material-panel .p-select-option.p-select-option-selected,
body .pkg-material-panel .p-select-option[aria-selected=true],
body .pkg-material-panel .p-dropdown-item.p-highlight,
body .pkg-material-panel .p-dropdown-item[aria-selected=true] {
  color: #ffffff !important;
  background: #e8f1ff !important;
}

body .pkg-material-panel .p-select-option:not(.p-disabled):hover,
body .pkg-material-panel .p-dropdown-item:not(.p-disabled):hover {
  background: #f4f8ff !important;
}

body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-header {
  min-height: 46px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid #dfeaf6 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7fd 100%) !important;
}

body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: #183f68 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-month,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-year,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-select-month,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-select-year {
  color: #183f68 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-prev-button,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-next-button {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: #173b63 !important;
  background: transparent !important;
}

body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-prev-button:hover,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-next-button:hover {
  border-color: #bdd3ea !important;
  background: #edf6ff !important;
  color: #0b5f9e !important;
}

body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-calendar-container,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-calendar,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-group {
  padding: 8px 12px 12px !important;
  background: #ffffff !important;
}

body .ship-date-calendar-panel.p-datepicker-panel table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
}

body .ship-date-calendar-panel.p-datepicker-panel th {
  height: 26px !important;
  padding: 0 2px !important;
  color: #52687f !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

body .ship-date-calendar-panel.p-datepicker-panel td {
  padding: 1px 2px !important;
  text-align: center !important;
}

body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-day,
body .ship-date-calendar-panel.p-datepicker-panel td > span,
body .ship-date-calendar-panel.p-datepicker-panel td > a {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  margin: 0 auto !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #344963 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease !important;
}

body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-day:hover,
body .ship-date-calendar-panel.p-datepicker-panel td > span:hover,
body .ship-date-calendar-panel.p-datepicker-panel td > a:hover {
  border-color: #b9d2ec !important;
  background: #edf6ff !important;
  color: #0b5f9e !important;
}

body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-today .p-datepicker-day,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-today > span,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-today > a {
  border-color: #7bbde9 !important;
  background: #f0f8ff !important;
  color: #0b5f9e !important;
  font-weight: 800 !important;
}

body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-day-selected,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-day.p-datepicker-day-selected,
body .ship-date-calendar-panel.p-datepicker-panel .p-highlight,
body .ship-date-calendar-panel.p-datepicker-panel [aria-selected=true],
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-selected > span,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-selected > a {
  border-color: #075eac !important;
  background: linear-gradient(180deg, #0b84d8 0%, #075eac 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(7, 94, 172, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  font-weight: 900 !important;
}

body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-day-selected *,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-day.p-datepicker-day-selected *,
body .ship-date-calendar-panel.p-datepicker-panel .p-highlight *,
body .ship-date-calendar-panel.p-datepicker-panel [aria-selected=true] * {
  color: #ffffff !important;
}

body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-other-month .p-datepicker-day,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-other-month > span,
body .ship-date-calendar-panel.p-datepicker-panel .p-datepicker-other-month > a,
body .ship-date-calendar-panel.p-datepicker-panel .p-disabled {
  color: #a7b3c2 !important;
  opacity: 0.72 !important;
}

/* Global checkbox polish: PrimeNG and native checkboxes. */
body {
  --esj-checkbox-size: 20px;
  --esj-checkbox-radius: 6px;
  --esj-checkbox-border: #cbd5e1;
  --esj-checkbox-border-hover: #16a34a;
  --esj-checkbox-checked: #16a34a;
  --esj-checkbox-checked-2: #16a34a;
  --esj-checkbox-check: #ffffff;
  --esj-checkbox-focus: rgba(22, 163, 74, 0.2);
  --esj-checkbox-checked-shadow: 0 2px 4px rgba(22, 163, 74, 0.28);
}

body .p-checkbox,
body p-checkbox {
  width: var(--esj-checkbox-size) !important;
  height: var(--esj-checkbox-size) !important;
  min-width: var(--esj-checkbox-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* The checkbox WRAPPER must never paint a background; only .p-checkbox-box is the
   visual. A generic brand .p-highlight rule otherwise fills the wrapper deep-purple
   (#1f1646), which leaks through the box's rounded corners when checked. */
body .p-checkbox,
body p-checkbox,
body .p-checkbox.p-checkbox-checked,
body .p-checkbox.p-highlight,
body p-checkbox.p-highlight {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body .p-checkbox .p-checkbox-box {
  width: var(--esj-checkbox-size) !important;
  height: var(--esj-checkbox-size) !important;
  min-width: var(--esj-checkbox-size) !important;
  border: 2px solid var(--esj-checkbox-border) !important;
  border-radius: var(--esj-checkbox-radius) !important;
  background: #ffffff !important;
  color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(18, 38, 63, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
}

body .p-checkbox:not(.p-disabled) .p-checkbox-box:hover {
  border-color: var(--esj-checkbox-border-hover) !important;
  box-shadow: 0 0 0 3px rgba(84, 132, 185, 0.12), 0 3px 8px rgba(18, 38, 63, 0.1) !important;
  transform: translateY(-1px);
}

body .p-checkbox.p-focus .p-checkbox-box,
body .p-checkbox .p-checkbox-input:focus-visible + .p-checkbox-box,
body .p-checkbox .p-checkbox-box:focus-visible {
  border-color: var(--esj-checkbox-checked) !important;
  box-shadow: 0 0 0 3px var(--esj-checkbox-focus) !important;
}

body .p-checkbox.p-checkbox-checked .p-checkbox-box,
body .p-checkbox .p-checkbox-box.p-highlight,
body .p-checkbox .p-checkbox-input:checked + .p-checkbox-box,
body .p-checkbox .p-checkbox-input[aria-checked=true] + .p-checkbox-box,
body .p-checkbox .p-checkbox-box[aria-checked=true] {
  border-color: var(--esj-checkbox-checked) !important;
  background: var(--esj-checkbox-checked) !important;
  color: var(--esj-checkbox-check) !important;
  box-shadow: var(--esj-checkbox-checked-shadow) !important;
}

body .p-checkbox .p-checkbox-icon,
body .p-checkbox .p-checkbox-icon svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--esj-checkbox-check) !important;
  fill: var(--esj-checkbox-check) !important;
  stroke: var(--esj-checkbox-check) !important;
  stroke-width: 1px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 1px 1px rgba(6, 78, 41, 0.35)) !important;
}

body .p-checkbox .p-checkbox-icon path {
  fill: var(--esj-checkbox-check) !important;
  stroke: var(--esj-checkbox-check) !important;
  stroke-width: 1px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body .p-checkbox.p-disabled,
body .p-checkbox.p-disabled .p-checkbox-box,
body p-checkbox.p-disabled {
  cursor: not-allowed !important;
  opacity: 0.58 !important;
}

body input[type=checkbox]:not(.p-checkbox-input) {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: var(--esj-checkbox-size) !important;
  height: var(--esj-checkbox-size) !important;
  min-width: var(--esj-checkbox-size) !important;
  margin: 0 !important;
  border: 2px solid var(--esj-checkbox-border) !important;
  border-radius: var(--esj-checkbox-radius) !important;
  background: #ffffff !important;
  display: inline-grid !important;
  place-content: center !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(18, 38, 63, 0.08) !important;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
}

body input[type=checkbox]:not(.p-checkbox-input)::after {
  content: "" !important;
  width: 5px !important;
  height: 10px !important;
  border: solid var(--esj-checkbox-check) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) scale(0) !important;
  transform-origin: center !important;
  transition: transform 0.14s ease !important;
}

body input[type=checkbox]:not(.p-checkbox-input):hover {
  border-color: var(--esj-checkbox-border-hover) !important;
  box-shadow: 0 0 0 3px rgba(84, 132, 185, 0.12), 0 3px 8px rgba(18, 38, 63, 0.1) !important;
  transform: translateY(-1px);
}

body input[type=checkbox]:not(.p-checkbox-input):focus-visible {
  outline: 0 !important;
  border-color: var(--esj-checkbox-checked) !important;
  box-shadow: 0 0 0 3px var(--esj-checkbox-focus) !important;
}

body input[type=checkbox]:not(.p-checkbox-input):checked {
  border-color: var(--esj-checkbox-checked) !important;
  background: var(--esj-checkbox-checked) !important;
  box-shadow: var(--esj-checkbox-checked-shadow) !important;
}

body input[type=checkbox]:not(.p-checkbox-input):checked::after {
  transform: rotate(45deg) scale(1) !important;
}

body input[type=checkbox]:not(.p-checkbox-input):disabled {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
}

body .p-datatable .p-datatable-thead .pi.pi-check-square {
  width: var(--esj-checkbox-size) !important;
  height: var(--esj-checkbox-size) !important;
  border: 2px solid #b9c9db !important;
  border-radius: var(--esj-checkbox-radius) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fb 100%) !important;
  color: #2d5f92 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  box-shadow: 0 1px 3px rgba(18, 38, 63, 0.1) !important;
}

/* Freight Quote Submissions date picker overlay */
body .freight-quote-calendar-overlay.p-datepicker,
body .freight-quote-calendar-overlay.p-datepicker-panel,
body .freight-quote-calendar-overlay.p-component {
  width: 292px !important;
  min-width: 292px !important;
  max-width: 292px !important;
  padding: 10px 12px !important;
  border: 1px solid #d6e1ef !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18) !important;
  z-index: 100001 !important;
}

body .freight-quote-calendar-overlay .p-datepicker-header {
  min-height: 32px !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 1px solid #edf2f7 !important;
  background: #ffffff !important;
}

body .freight-quote-calendar-overlay .p-datepicker-title {
  color: #303846 !important;
  font-family: AvenirNextCyrDemi, AvenirNextCyrMedium, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body .freight-quote-calendar-overlay .p-datepicker-prev-button,
body .freight-quote-calendar-overlay .p-datepicker-next-button,
body .freight-quote-calendar-overlay .p-datepicker-prev,
body .freight-quote-calendar-overlay .p-datepicker-next {
  width: 28px !important;
  height: 28px !important;
  border-radius: 4px !important;
  color: #1f1646 !important;
}

body .freight-quote-calendar-overlay table {
  margin: 6px 0 4px 0 !important;
  font-size: 12px !important;
}

body .freight-quote-calendar-overlay th {
  height: 24px !important;
  padding: 0 !important;
  color: #6d7788 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body .freight-quote-calendar-overlay td {
  padding: 1px !important;
}

body .freight-quote-calendar-overlay td > span,
body .freight-quote-calendar-overlay td > a,
body .freight-quote-calendar-overlay .p-datepicker-day {
  width: 26px !important;
  height: 24px !important;
  min-width: 26px !important;
  border-radius: 4px !important;
  color: #4b5565 !important;
  font-size: 12px !important;
  line-height: 24px !important;
}

body .freight-quote-calendar-overlay .p-highlight,
body .freight-quote-calendar-overlay [aria-selected=true],
body .freight-quote-calendar-overlay .p-datepicker-day-selected {
  background: #1f1646 !important;
  color: #ffffff !important;
}

body .freight-quote-calendar-overlay .p-timepicker {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid #edf2f7 !important;
}

body .freight-quote-calendar-overlay .p-timepicker span {
  color: #303846 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body .freight-quote-calendar-overlay .p-timepicker button {
  width: 28px !important;
  height: 24px !important;
  color: #1f1646 !important;
}

/* Freight pickup appointment modal overlay */
body .pickup-calendar-dialog-mask.p-dialog-mask,
body .p-dialog-mask:has(.pickup-calendar-dialog) {
  z-index: 119990 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

body .pickup-calendar-dialog.p-dialog {
  z-index: 120000 !important;
  width: min(1240px, 100vw - 72px) !important;
  max-width: calc(100vw - 72px) !important;
  max-height: calc(100vh - 72px) !important;
  border: 1px solid #d6e1ef !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 28px 80px rgba(4, 14, 34, 0.34) !important;
}

body .pickup-calendar-dialog.p-dialog,
body .pickup-calendar-dialog.p-dialog * {
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

body .pickup-calendar-dialog.p-dialog .pi,
body .pickup-calendar-dialog.p-dialog .p-icon,
body .pickup-calendar-dialog.p-dialog .p-icon * {
  font-family: "PrimeIcons" !important;
}

/* Global readability trial: use Inter/system UI across dense enterprise screens. */
html,
body,
app-root,
.layout-wrapper,
.layout-main,
.p-component,
.p-inputtext,
.p-dropdown,
.p-select,
.p-button,
.p-dialog,
.p-datatable,
.p-tooltip,
.p-overlaypanel,
.p-popover,
.p-menu,
.p-toast,
input,
select,
textarea,
button {
  font-family: var(--eshipjet-ui-font) !important;
}

.pi,
.pi::before,
.p-icon,
.p-icon *,
[class^=pi-],
[class*=" pi-"] {
  font-family: "PrimeIcons" !important;
}

.material-icons {
  font-family: "Material Icons" !important;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded" !important;
}

.material-symbols-sharp {
  font-family: "Material Symbols Sharp" !important;
}

code,
pre,
kbd,
samp,
.monospace,
.tracking-number,
.timer,
.timer *,
.countdown,
.countdown * {
  font-family: var(--eshipjet-mono-font) !important;
}

/* ============================================================
   TYPOGRAPHY V3 — Mono for machine-readable identifiers only
   UI stays Source Sans; only codes/IDs render in IBM Plex Mono.
   Matched by placeholder tokens so prose fields (Product Name /
   Description) are NOT affected. Add column classes here later
   for Product Code / Tracking / SN# table cells once locked in.
   ============================================================ */
body input[placeholder*=Number i],
body input[placeholder*=Plate i],
body input[placeholder*=Account i],
body input[placeholder*=Postal i],
body input[placeholder*=Zip i],
body input[placeholder*=Tracking i],
body input[placeholder*="Pro#" i],
body input[placeholder*="Pro #" i],
body input[placeholder*=Code i],
body input[placeholder*=Serial i],
body input[placeholder*=SN i] {
  font-family: var(--eshipjet-mono-font) !important;
  font-variant-numeric: tabular-nums slashed-zero !important;
  letter-spacing: 0.01em !important;
}

body .pickup-calendar-dialog .p-dialog-header {
  min-height: 52px !important;
  padding: 0 !important;
  border-bottom: 1px solid #dce7f3 !important;
  background: #ffffff !important;
}

body .pickup-calendar-dialog .p-dialog-content {
  max-height: calc(100vh - 126px) !important;
  padding: 0 !important;
  overflow: auto !important;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%) !important;
}

body .pickup-calendar-dialog .pickup-calendar-panel {
  padding: 16px 24px 20px !important;
}

body .pickup-calendar-dialog .pickup-calendar-grid {
  max-height: calc(100vh - 300px) !important;
  overflow: auto !important;
  border: 1px solid #dce7f3 !important;
  border-radius: 8px !important;
}

body .pickup-calendar-dialog .pickup-calendar-dialog-close {
  width: 56px !important;
  background: #da4345 !important;
  color: #ffffff !important;
}

body .pickup-calendar-dialog .pickup-calendar-dialog-close .pi {
  color: #ffffff !important;
}

/* Final override for the Inter readability trial; keep icons and code untouched. */
body app-root *:not(.pi):not(.p-icon):not(.material-icons):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(code):not(pre):not(kbd):not(samp),
body .p-component *:not(.pi):not(.p-icon):not(.material-icons):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--eshipjet-ui-font) !important;
}

/* ============================================================
   TYPOGRAPHY V1 — Hardened Inter for shipping data legibility
   - tabular-nums : digits share equal width -> columns line up
   - slashed-zero : 0 vs O, and clearer 1/l/I in codes & IDs
   Scoped to data surfaces (inputs, dropdown values, table cells,
   numeric badges, timer). Headings/labels keep default figures.
   ============================================================ */
body .p-inputtext,
body input,
body textarea,
body select,
body .p-dropdown-label,
body .p-select-label,
body .p-datatable .p-datatable-tbody > tr > td,
body .p-datatable .p-datatable-thead > tr > th,
body .p-column-title,
body table td,
body table th,
body .timer,
body .timer *,
body .countdown,
body .countdown *,
body .tracking-number,
body [class*=qty],
body [class*=weight] {
  font-variant-numeric: tabular-nums slashed-zero !important;
  font-feature-settings: "tnum" 1, "ss02" 1 !important;
}

body label,
body .label,
body .p-datatable .p-datatable-thead > tr > th,
body .p-column-title,
body .table-header,
body .btn-default-css,
body .p-button {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

body .p-inputtext,
body .p-dropdown-label,
body .p-select-label,
body input,
body select,
body textarea {
  letter-spacing: 0 !important;
}

/* ------------------------------------------------------------------
   Dimmed backdrop behind the "Master Data Settings" mega-menu.

   Keyed off `.active-topmenuitem` — the class AppMain.onTopbarItemClick()
   toggles on the open top-bar <li> (app-top-bar.component.html:151). Scoped
   with :has(.mastersScreensCss) so the scrim appears ONLY for the masters
   mega-menu, not the profile dropdown, which shares the same open-state class.

   The scrim is a page-level ::before on .layout-wrapper at z-index 900:
   above normal page content, below .layout-topbar (z-index 997) and the white
   panel that lives inside it, so the panel stays fully visible and interactive.

   pointer-events:none lets a backdrop click fall through to
   .layout-wrapper (click)="onLayoutClick()", which already clears
   activeTopbarItem and closes the menu — no extra TS/HTML state needed.
   ------------------------------------------------------------------ */
.layout-wrapper:has(.active-topmenuitem .mastersScreensCss)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 900;
  pointer-events: none;
  animation: esjMasterScrimFade 0.2s ease;
}

@keyframes esjMasterScrimFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Freight quote status drawer: rescheduled pickup was/requested summary. */
body .p-sidebar.freight-quote-sidebar .fq-sheet-pickup-rescheduled,
body .p-drawer.freight-quote-sidebar .fq-sheet-pickup-rescheduled {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  border: 1px solid #f6dca8 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #fffaf0 0%, #fff3df 100%) !important;
  color: #7c2d12 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65) !important;
}

body .p-sidebar.freight-quote-sidebar .fq-sheet-pickup-rescheduled-icon,
body .p-drawer.freight-quote-sidebar .fq-sheet-pickup-rescheduled-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 8px !important;
  background: #fdebc8 !important;
  color: #b45309 !important;
}

body .p-sidebar.freight-quote-sidebar .fq-sheet-pickup-rescheduled-copy,
body .p-drawer.freight-quote-sidebar .fq-sheet-pickup-rescheduled-copy {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 6px !important;
}

body .p-sidebar.freight-quote-sidebar .fq-sheet-pickup-rescheduled-label,
body .p-drawer.freight-quote-sidebar .fq-sheet-pickup-rescheduled-label {
  color: #b45309 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body .p-sidebar.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times,
body .p-drawer.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body .p-sidebar.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times > div,
body .p-drawer.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times > div {
  min-width: 0 !important;
  padding: 6px 9px !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 7px !important;
  background: #f0fdf4 !important;
}

body .p-sidebar.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times span,
body .p-drawer.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times span {
  display: block !important;
  margin-bottom: 3px !important;
  color: #15803d !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.07em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body .p-sidebar.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times strong,
body .p-drawer.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times strong {
  display: block !important;
  color: #166534 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
}

body .p-sidebar.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times > div:first-child,
body .p-drawer.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times > div:first-child {
  border-color: #fecaca !important;
  background: #fff1f2 !important;
}

body .p-sidebar.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times > div:first-child span,
body .p-drawer.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times > div:first-child span {
  color: #b91c1c !important;
}

body .p-sidebar.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times > div:first-child strong,
body .p-drawer.freight-quote-sidebar .fq-sheet-pickup-rescheduled-times > div:first-child strong {
  color: #b91c1c !important;
  font-weight: 900 !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(185, 28, 28, 0.75) !important;
}

body .p-sidebar.freight-quote-sidebar .fq-sheet-spotlight--empty,
body .p-drawer.freight-quote-sidebar .fq-sheet-spotlight--empty {
  margin: 0 16px 12px !important;
  padding: 10px 12px !important;
  border: 1px dashed #dbe5f1 !important;
  border-radius: 8px !important;
  background: #f8fbff !important;
  color: #64748b !important;
}

body .p-sidebar.freight-quote-sidebar .fq-sheet-spotlight--empty .fq-sheet-spotlight-msg,
body .p-drawer.freight-quote-sidebar .fq-sheet-spotlight--empty .fq-sheet-spotlight-msg {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* Freight quote View Now pickup grid: make reschedule states unmistakable. */
body .pickup-calendar-dialog .pickup-reschedule-pill--before {
  background: #fff1f2 !important;
  border: 1px solid #fecaca !important;
  color: #b91c1c !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(185, 28, 28, 0.75) !important;
  text-decoration-thickness: 2px !important;
}

body .pickup-calendar-dialog .pickup-reschedule-pill--requested {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #15803d !important;
}

body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-original,
body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-original.is-booked,
body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-original.is-selected {
  position: relative !important;
  background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%) !important;
  border-left-color: #dc2626 !important;
  box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.28) !important;
  color: #b91c1c !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(185, 28, 28, 0.75) !important;
  text-decoration-thickness: 2px !important;
}

body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-original::after {
  content: "Cancelled" !important;
  position: absolute !important;
  top: 8px !important;
  right: 9px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: #fecdd3 !important;
  color: #b91c1c !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-original .pickup-cell-status,
body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-original strong,
body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-original span:last-child {
  color: #b91c1c !important;
}

body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-requested,
body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-requested.is-booked,
body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-requested.is-selected {
  position: relative !important;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-left-color: #16a34a !important;
  box-shadow: inset 0 0 0 2px rgba(22, 163, 74, 0.34), 0 7px 18px rgba(22, 163, 74, 0.14) !important;
  color: #166534 !important;
}

body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-requested::after {
  content: "Selected" !important;
  position: absolute !important;
  top: 8px !important;
  right: 9px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: #bbf7d0 !important;
  color: #15803d !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-requested .pickup-cell-status,
body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-requested strong,
body .pickup-calendar-dialog .pickup-calendar-cell.is-reschedule-requested span:last-child {
  color: #166534 !important;
}

/* Customer Freight Quote Setup: keep the white form card behind appended multiselect panels. */
body .p-sidebar.customer-freight-sidebar .p-sidebar-content,
body .p-drawer.customer-freight-sidebar .p-drawer-content,
body .p-drawer.customer-freight-sidebar .p-sidebar-content {
  display: flex !important;
  flex-direction: column !important;
}

body .p-sidebar.customer-freight-sidebar .master-sidebar-card-shell,
body .p-drawer.customer-freight-sidebar .master-sidebar-card-shell,
body .p-sidebar.customer-freight-sidebar .custom-form-container,
body .p-drawer.customer-freight-sidebar .custom-form-container,
body .p-sidebar.customer-freight-sidebar .form-section,
body .p-drawer.customer-freight-sidebar .form-section,
body .p-sidebar.customer-freight-sidebar .contact-info-card,
body .p-drawer.customer-freight-sidebar .contact-info-card,
body .p-sidebar.customer-freight-sidebar .contact-info-card .titleTypoh3,
body .p-drawer.customer-freight-sidebar .contact-info-card .titleTypoh3,
body .p-sidebar.customer-freight-sidebar .contact-info-card .p-card,
body .p-drawer.customer-freight-sidebar .contact-info-card .p-card,
body .p-sidebar.customer-freight-sidebar .contact-info-card .p-card-body,
body .p-drawer.customer-freight-sidebar .contact-info-card .p-card-body,
body .p-sidebar.customer-freight-sidebar .contact-info-card .p-card-content,
body .p-drawer.customer-freight-sidebar .contact-info-card .p-card-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

body .p-sidebar.customer-freight-sidebar .contact-info-card,
body .p-drawer.customer-freight-sidebar .contact-info-card,
body .p-sidebar.customer-freight-sidebar .contact-info-card .titleTypoh3,
body .p-drawer.customer-freight-sidebar .contact-info-card .titleTypoh3,
body .p-sidebar.customer-freight-sidebar .contact-info-card .p-card,
body .p-drawer.customer-freight-sidebar .contact-info-card .p-card {
  min-height: calc(100vh - 138px) !important;
}

/* Final Ship Now Pack package-material typography override. */
body .pkg-material-panel.p-select-overlay input,
body .pkg-material-panel.p-dropdown-panel input,
body .pkg-material-panel.p-select-overlay .p-inputtext,
body .pkg-material-panel.p-dropdown-panel .p-inputtext {
  font-size: 16px !important;
  line-height: 1.35 !important;
}

body .pkg-material-panel.p-select-overlay .p-select-option,
body .pkg-material-panel.p-select-overlay .p-select-option-label,
body .pkg-material-panel.p-dropdown-panel .p-dropdown-item,
body .pkg-material-panel.p-dropdown-panel .p-dropdown-item span {
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
}

/* Custom Reports Configuration Studio: body-appended account pickers.
   Keep checkbox rows padded and stop the global selected-row rail from
   making the left edge look like it jumps while the multiselect opens. */
body .subscription-account-dropdown-panel.p-dropdown-panel,
body .subscription-account-dropdown-panel.p-select-overlay,
body .subscription-account-dropdown-panel.p-multiselect-panel,
body .subscription-account-dropdown-panel.p-multiselect-overlay {
  background: #fff !important;
  overflow: hidden !important;
}

body .subscription-account-dropdown-panel .p-dropdown-items,
body .subscription-account-dropdown-panel .p-select-list,
body .subscription-account-dropdown-panel .p-multiselect-items,
body .subscription-account-dropdown-panel .p-multiselect-list {
  background: #fff !important;
  padding: 8px !important;
}

body .subscription-account-dropdown-panel .p-dropdown-item,
body .subscription-account-dropdown-panel .p-select-option,
body .subscription-account-dropdown-panel .p-multiselect-item,
body .subscription-account-dropdown-panel .p-multiselect-option {
  align-items: center !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #17233c !important;
  display: flex !important;
  gap: 12px !important;
  margin: 0 0 4px !important;
  min-height: 44px !important;
  padding: 10px 14px 10px 18px !important;
  transform: none !important;
}

body .subscription-account-dropdown-panel .p-dropdown-item:hover,
body .subscription-account-dropdown-panel .p-dropdown-item.p-highlight,
body .subscription-account-dropdown-panel .p-select-option:not(.p-disabled):hover,
body .subscription-account-dropdown-panel .p-select-option.p-select-option-selected,
body .subscription-account-dropdown-panel .p-multiselect-item:not(.p-disabled):hover,
body .subscription-account-dropdown-panel .p-multiselect-item.p-highlight,
body .subscription-account-dropdown-panel .p-multiselect-option:not(.p-disabled):hover,
body .subscription-account-dropdown-panel .p-multiselect-option.p-multiselect-option-selected {
  background: #edf5ff !important;
  box-shadow: none !important;
  color: #10223d !important;
}

body .subscription-account-dropdown-panel .p-checkbox,
body .subscription-account-dropdown-panel p-checkbox {
  flex: 0 0 22px !important;
  height: 22px !important;
  margin: 0 !important;
  min-width: 22px !important;
  transform: none !important;
  width: 22px !important;
}

body .subscription-account-dropdown-panel .p-checkbox .p-checkbox-box {
  margin: 0 !important;
}

/* Keep open nav flush with main content — attached like reference (no gap) */
app-topbar {
  display: block;
  width: 100%;
  --app-sidebar-width: 300px;
  --app-content-offset: 300px;
}

app-topbar .sidebar,
app-topbar .sidebar-dark {
  width: var(--app-sidebar-width, 300px) !important;
  max-width: var(--app-sidebar-width, 300px) !important;
  zoom: 1 !important;
  box-shadow: none !important;
  border-right: 1px solid #dfe7f2 !important;
  z-index: 999 !important;
}

app-topbar .sidebar.open,
app-topbar .sidebar-dark.open {
  left: 0 !important;
  top: 0 !important;
  margin-top: 0 !important;
  width: var(--app-sidebar-width, 300px) !important;
  max-width: var(--app-sidebar-width, 300px) !important;
  height: 100% !important;
  zoom: 1 !important;
  box-shadow: none !important;
}

app-topbar .layout-topbar {
  left: 0 !important;
  margin-left: 0 !important;
}

/* Content + topbar sit exactly at the sidebar's right edge */
app-topbar .layout-topbar.shifted,
app-topbar .content-wrapper.shifted {
  transform: none !important;
  left: 0 !important;
  padding-left: 0 !important;
  margin-left: var(--app-content-offset, 300px) !important;
  width: calc(100% - var(--app-content-offset, 300px)) !important;
  max-width: calc(100% - var(--app-content-offset, 300px)) !important;
  box-sizing: border-box !important;
  transition: margin-left 0.22s ease-out, width 0.22s ease-out !important;
}

app-topbar .layout-topbar.shifted {
  padding-left: 6px !important;
  z-index: 1002 !important;
}

app-topbar .layout-topbar.shifted .nav-icon:not(.close) {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

app-topbar .content-wrapper.shifted .main-container {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Remove floating-card look on the logo header so it docks flush */
app-topbar .sidebar .sidebar-brand-header,
app-topbar.nav-open .sidebar .sidebar-brand-header {
  box-shadow: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}

/* Carrier Address country dropdown: one scrollbar, no white-page growth */
body .carrier-address-country-panel.p-dropdown-panel,
body .carrier-address-country-panel.p-select-overlay {
  z-index: 2147483600 !important;
  max-width: 280px !important;
  width: auto !important;
  min-width: 200px !important;
  max-height: 280px !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

body .carrier-address-country-panel.p-dropdown-panel .p-dropdown-items-wrapper,
body .carrier-address-country-panel.p-dropdown-panel .p-select-list-container,
body .carrier-address-country-panel.p-select-overlay .p-select-list-container,
body .carrier-address-country-panel.p-select-overlay .p-dropdown-items-wrapper {
  max-height: 200px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body:has(.carrier-address-country-panel.p-dropdown-panel),
body:has(.carrier-address-country-panel.p-select-overlay) {
  overflow: hidden !important;
}

body:has(.carrier-address-country-panel) .p-sidebar.carrier-address-sidebar .p-sidebar-content,
body:has(.carrier-address-country-panel) .p-drawer.carrier-address-sidebar .p-drawer-content {
  overflow: hidden !important;
}

/* Common master / Carrier Address country dropdown — float above sidebar, one scroll */
body .common-master-dropdown-panel.p-dropdown-panel,
body .common-master-dropdown-panel.p-select-overlay {
  z-index: 2147483600 !important;
  overflow: hidden !important;
}

body .common-master-country-dropdown-panel.p-dropdown-panel,
body .common-master-country-dropdown-panel.p-select-overlay {
  z-index: 2147483600 !important;
  max-height: 280px !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

body .common-master-country-dropdown-panel.p-dropdown-panel .p-dropdown-items-wrapper,
body .common-master-country-dropdown-panel.p-select-overlay .p-select-list-container,
body .common-master-country-dropdown-panel.p-dropdown-panel .p-select-list-container {
  max-height: 200px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* Freeze page + master sidebar while country list is open (stops white page / 2nd scrollbar) */
body:has(.common-master-country-dropdown-panel) {
  overflow: hidden !important;
}

body:has(.common-master-country-dropdown-panel) .master-sidebar.p-sidebar .p-sidebar-content,
body:has(.common-master-country-dropdown-panel) .p-sidebar.master-sidebar .p-sidebar-content,
body:has(.common-master-country-dropdown-panel) .p-sidebar.ui-sidebar-lg .p-sidebar-content,
body:has(.common-master-country-dropdown-panel) .master-sidebar.p-drawer .p-drawer-content {
  overflow: hidden !important;
}

body:has(.common-master-country-dropdown-panel) .master-sidebar .master-sidebar-card-shell {
  min-height: 0 !important;
}

/* ==========================================================================
   PrimeNG 19 date picker — global restore
   --------------------------------------------------------------------------
   PrimeNG 19 renders component CSS through design tokens: every value in the
   injected stylesheet is `var(--p-datepicker-*)`, supplied by a theme preset
   (@primeng/themes + providePrimeNG({theme})). This app deliberately ships no
   preset — all PrimeNG styling is hand-authored here — so those variables are
   undefined and the browser DROPS each declaration. Structural rules with
   literal values survive, which is why the panel keeps its flex header but
   loses every gap, padding and cell size ("July2026", cramped day grid).

   Fix has two halves:
     1. define the missing --p-datepicker-* variables, so PrimeNG's own
        injected CSS resolves (covers month/year/time views and the buttonbar
        without us restating them);
     2. state the ESJ look explicitly for the panel chrome and day grid.

   v19 renamed the DOM: the overlay is .p-datepicker-panel (.p-datepicker is
   now the INPUT wrapper), the title is two buttons (.p-datepicker-select-month
   / -select-year), days are .p-datepicker-day inside .p-datepicker-day-cell.
   Legacy `td > span` / .p-highlight selectors are kept as fallbacks.

   Scoped per-screen copies of this design (e.g. the .filter-overlay-panel
   block above) carry higher specificity and intentionally still win.
   ========================================================================== */
:root {
  --p-datepicker-transition-duration: 0.2s;
  --p-datepicker-panel-background: #ffffff;
  --p-datepicker-panel-color: #253f61;
  --p-datepicker-panel-border-color: #b9d0ee;
  --p-datepicker-panel-border-radius: 10px;
  --p-datepicker-panel-padding: 12px;
  --p-datepicker-panel-shadow: 0 18px 42px rgba(13, 35, 64, 0.24);
  --p-datepicker-header-background: #eef5ff;
  --p-datepicker-header-color: #1f385c;
  --p-datepicker-header-border-color: transparent;
  --p-datepicker-header-padding: 2px;
  --p-datepicker-title-gap: 6px;
  --p-datepicker-title-font-weight: 800;
  --p-datepicker-select-month-padding: 4px 6px;
  --p-datepicker-select-month-color: #1f385c;
  --p-datepicker-select-month-border-radius: 6px;
  --p-datepicker-select-month-hover-background: #dcebff;
  --p-datepicker-select-month-hover-color: #174f92;
  --p-datepicker-select-year-padding: 4px 6px;
  --p-datepicker-select-year-color: #1f385c;
  --p-datepicker-select-year-border-radius: 6px;
  --p-datepicker-select-year-hover-background: #dcebff;
  --p-datepicker-select-year-hover-color: #174f92;
  --p-datepicker-day-view-margin: 8px 0 0 0;
  --p-datepicker-week-day-padding: 4px;
  --p-datepicker-week-day-color: #5d6e84;
  --p-datepicker-week-day-font-weight: 800;
  --p-datepicker-date-width: 32px;
  --p-datepicker-date-height: 32px;
  --p-datepicker-date-padding: 0;
  --p-datepicker-date-border-radius: 6px;
  --p-datepicker-date-color: #253f61;
  --p-datepicker-date-hover-background: #e7f1ff;
  --p-datepicker-date-hover-color: #174f92;
  --p-datepicker-date-selected-background: #2f67b0;
  --p-datepicker-date-selected-color: #ffffff;
  --p-datepicker-date-range-selected-background: #dcebff;
  --p-datepicker-date-range-selected-color: #174f92;
  --p-datepicker-date-focus-ring-width: 2px;
  --p-datepicker-date-focus-ring-style: solid;
  --p-datepicker-date-focus-ring-color: #2f67b0;
  --p-datepicker-date-focus-ring-offset: -2px;
  --p-datepicker-date-focus-ring-shadow: none;
  --p-datepicker-today-background: transparent;
  --p-datepicker-today-color: #174f92;
  --p-datepicker-month-view-margin: 8px 0 0 0;
  --p-datepicker-month-padding: 8px;
  --p-datepicker-month-border-radius: 6px;
  --p-datepicker-year-view-margin: 8px 0 0 0;
  --p-datepicker-year-padding: 8px;
  --p-datepicker-year-border-radius: 6px;
  --p-datepicker-group-gap: 12px;
  --p-datepicker-group-border-color: #dbe6f5;
  --p-datepicker-buttonbar-padding: 8px 0 0 0;
  --p-datepicker-buttonbar-border-color: #dbe6f5;
  --p-datepicker-time-picker-padding: 8px 0 0 0;
  --p-datepicker-time-picker-gap: 8px;
  --p-datepicker-time-picker-button-gap: 4px;
  --p-datepicker-time-picker-border-color: #dbe6f5;
  /* INPUT-SIDE TOKENS ARE DELIBERATELY LEFT UNDEFINED.
     PrimeNG styles the trigger button and the inline calendar icon from this
     same pool -- .p-datepicker-dropdown (the v19 trigger; the app still styles
     the dead v17 name .p-datepicker-trigger), plus:

       .p-datepicker-input-icon-container {
         inset-inline-end: var(--p-form-field-padding-x);
         margin-top: calc(-1 * (var(--p-icon-size) / 2));
       }
       .p-datepicker-input {
         padding-inline-end: calc((var(--p-form-field-padding-x) * 2)
                                  + var(--p-icon-size));
       }

     Those rules have always been inert here, so the closed field is positioned
     entirely by this file's own .p-datepicker/.calendarCss rules. Defining
     --p-form-field-padding-x, --p-icon-size or any --p-datepicker-dropdown-*
     switches them back on and shifts the icon in every date field (it broke the
     Ship Now shipment-date icon). Only panel tokens belong above. */
}

/* -- panel chrome -------------------------------------------------------- */
body .p-datepicker-panel {
  /* Definite width on purpose: the month/year views size their cells in %, so
     an auto-width panel resolves shrink-to-fit against max-content (all 12
     months on one line) and blows the panel out. Multi-month pickers opt out
     via the rule below. */
  width: 318px !important;
  min-width: 318px !important;
  padding: 12px !important;
  border: 1px solid #b9d0ee !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  box-shadow: 0 18px 42px rgba(13, 35, 64, 0.24), 0 1px 0 rgba(255, 255, 255, 0.74) inset !important;
  color: #253f61 !important;
  /* Date pickers use appendTo="body", so the panel must clear dialogs and
     sidebars it is logically nested inside (e.g. the Run Logs dialog). */
  z-index: 1102100 !important;
}

/* Range / multi-month pickers render several .p-datepicker-group side by side
   and must keep sizing themselves. */
body .p-datepicker-panel:has(.p-datepicker-group + .p-datepicker-group) {
  width: auto !important;
  min-width: 318px !important;
}

body .p-datepicker-panel .p-datepicker-header {
  display: grid !important;
  grid-template-columns: 34px 1fr 34px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  margin: 0 0 8px 0 !important;
  padding: 2px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #eef5ff !important;
}

body .p-datepicker-panel .p-datepicker-prev-button,
body .p-datepicker-panel .p-datepicker-next-button {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #174f92 !important;
  background: transparent !important;
  cursor: pointer !important;
}

body .p-datepicker-panel .p-datepicker-prev-button:hover,
body .p-datepicker-panel .p-datepicker-next-button:hover {
  color: #ffffff !important;
  background: #2f67b0 !important;
}

/* v19 splits the title into two buttons; without the gap token they collide
   and render as "July2026". */
body .p-datepicker-panel .p-datepicker-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #1f385c !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

body .p-datepicker-panel .p-datepicker-select-month,
body .p-datepicker-panel .p-datepicker-select-year {
  padding: 4px 6px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #1f385c !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: transparent !important;
  cursor: pointer !important;
}

body .p-datepicker-panel .p-datepicker-select-month:enabled:hover,
body .p-datepicker-panel .p-datepicker-select-year:enabled:hover {
  color: #174f92 !important;
  background: #dcebff !important;
}

/* -- day grid ------------------------------------------------------------ */
body .p-datepicker-panel .p-datepicker-calendar,
body .p-datepicker-panel table {
  width: 100% !important;
  margin: 8px 0 0 0 !important;
  border-collapse: separate !important;
  border-spacing: 4px !important;
}

/* v19 nests a <span class="p-datepicker-weekday"> inside the <th
   class="p-datepicker-weekday-cell">, so spacing belongs on the cell only. */
body .p-datepicker-panel .p-datepicker-weekday-cell,
body .p-datepicker-panel th {
  padding: 4px !important;
  text-align: center !important;
}

body .p-datepicker-panel .p-datepicker-weekday,
body .p-datepicker-panel th {
  color: #5d6e84 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body .p-datepicker-panel .p-datepicker-day-cell,
body .p-datepicker-panel td {
  padding: 0 !important;
  text-align: center !important;
}

body .p-datepicker-panel .p-datepicker-day,
body .p-datepicker-panel td > span,
body .p-datepicker-panel td > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: #253f61 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
}

body .p-datepicker-panel .p-datepicker-day:not(.p-disabled):hover,
body .p-datepicker-panel td > span:not(.p-disabled):hover,
body .p-datepicker-panel td > a:hover {
  color: #174f92 !important;
  background: #e7f1ff !important;
}

body .p-datepicker-panel .p-datepicker-other-month {
  color: #9aa8bb !important;
  opacity: 0.75 !important;
}

body .p-datepicker-panel .p-datepicker-today > .p-datepicker-day,
body .p-datepicker-panel .p-datepicker-today > span,
body .p-datepicker-panel .p-datepicker-today > a {
  border-color: #2f67b0 !important;
}

body .p-datepicker-panel .p-datepicker-day-selected,
body .p-datepicker-panel .p-highlight,
body .p-datepicker-panel .p-datepicker-selected > span {
  color: #ffffff !important;
  background: #2f67b0 !important;
  border-color: #2f67b0 !important;
  box-shadow: 0 6px 14px rgba(47, 103, 176, 0.22) !important;
}

body .p-datepicker-panel .p-datepicker-day-selected-range {
  color: #174f92 !important;
  background: #dcebff !important;
}

body .p-datepicker-panel .p-datepicker-day.p-disabled,
body .p-datepicker-panel td > span.p-disabled {
  opacity: 0.4 !important;
  cursor: default !important;
}

/* -- month / year pick views --------------------------------------------- */
body .p-datepicker-panel .p-datepicker-month-view,
body .p-datepicker-panel .p-datepicker-year-view {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 8px 0 0 0 !important;
}

/* The app has no universal border-box reset, so the padding below would be
   added to the 33.333% basis and only two cells would fit per row. */
body .p-datepicker-panel .p-datepicker-month,
body .p-datepicker-panel .p-datepicker-year {
  box-sizing: border-box !important;
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important;
  padding: 8px !important;
  border-radius: 6px !important;
  color: #253f61 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  cursor: pointer !important;
}

body .p-datepicker-panel .p-datepicker-month:not(.p-disabled):hover,
body .p-datepicker-panel .p-datepicker-year:not(.p-disabled):hover {
  color: #174f92 !important;
  background: #e7f1ff !important;
}

body .p-datepicker-panel .p-datepicker-month-selected,
body .p-datepicker-panel .p-datepicker-year-selected {
  color: #ffffff !important;
  background: #2f67b0 !important;
}

/* -- footer / time picker ------------------------------------------------ */
body .p-datepicker-panel .p-datepicker-buttonbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding: 8px 0 0 0 !important;
  border-top: 1px solid #dbe6f5 !important;
}

body .p-datepicker-panel .p-datepicker-time-picker {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding: 8px 0 0 0 !important;
  border-top: 1px solid #dbe6f5 !important;
}

body .p-datepicker-panel .p-datepicker-time-picker > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Freight pickup appointment picker is appended to body by PrimeNG. Keep this
   scoped globally so the hourly master schedule can use the full dialog height. */
body .pickup-calendar-dialog.p-dialog {
  width: min(1720px, 98vw) !important;
  max-width: 98vw !important;
  height: min(980px, 94vh) !important;
  max-height: 94vh !important;
}

body .pickup-calendar-dialog .p-dialog-header {
  min-height: 50px !important;
  height: 50px !important;
}

body .pickup-calendar-dialog .p-dialog-content {
  height: calc(min(980px, 94vh) - 50px) !important;
  max-height: calc(min(980px, 94vh) - 50px) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

body .pickup-calendar-dialog .pickup-calendar-panel {
  height: 100% !important;
  max-height: 100% !important;
  padding: 8px 24px 10px !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body .pickup-calendar-dialog .pickup-calendar-toolbar {
  flex: 0 0 40px !important;
  min-height: 40px !important;
  grid-template-columns: 36px minmax(0, 1fr) auto 36px !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
  padding: 4px 10px !important;
  border: 1px solid #d8e5f4 !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%) !important;
}

body .pickup-calendar-dialog .pickup-calendar-grid {
  grid-template-columns: 76px repeat(var(--pickup-visible-day-count, 5), minmax(0, 1fr)) !important;
  flex: 0 0 calc(100% - 40px) !important;
  height: calc(100% - 40px) !important;
  max-height: calc(100% - 40px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  grid-auto-rows: minmax(42px, 1fr) !important;
  border-top: 1px solid #d8e5f4 !important;
  border-radius: 0 0 8px 8px !important;
}

body .pickup-calendar-dialog .pickup-calendar-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body .pickup-calendar-dialog .pickup-calendar-nav i {
  display: block !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

body .pickup-calendar-dialog .pickup-calendar-view-switch {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 3px !important;
  border: 1px solid #cfdced !important;
  border-radius: 7px !important;
  background: #eef4fb !important;
  box-shadow: inset 0 1px 2px rgba(23, 48, 79, 0.05) !important;
}

body .pickup-calendar-dialog .pickup-calendar-view-switch button {
  height: 26px !important;
  min-width: 78px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #47617f !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body .pickup-calendar-dialog .pickup-calendar-view-switch button.is-active {
  background: #ffffff !important;
  color: #1d5c8f !important;
  box-shadow: 0 2px 7px rgba(25, 55, 92, 0.12) !important;
}

/* Keep header zones separate: title left, week range center, capacity + toggles right. */
body .pickup-calendar-dialog .pickup-calendar-dialog-title {
  justify-content: flex-start !important;
  max-width: calc(50% - 220px) !important;
}

body .pickup-calendar-dialog .pickup-calendar-header-center {
  left: 50% !important;
  max-width: min(360px, 34vw) !important;
  z-index: 1 !important;
}

body .pickup-calendar-dialog .pickup-calendar-header-center .pickup-calendar-heading strong {
  white-space: nowrap !important;
}

body .pickup-calendar-dialog .pickup-calendar-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 2 !important;
}

body .pickup-calendar-dialog .pickup-calendar-capacity-value--header {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Reschedule Before / Carrier selected strip lives under the title, not in the overlapping header. */
body .pickup-calendar-dialog .pickup-reschedule-strip--panel {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 10px 14px !important;
  border: 1px solid #dbe7f5 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  box-shadow: 0 4px 14px rgba(20, 40, 75, 0.05) !important;
}

body .pickup-calendar-dialog .pickup-reschedule-strip--panel .pickup-reschedule-summary {
  display: inline-grid !important;
  gap: 2px !important;
  min-width: 200px !important;
  max-width: 280px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  line-height: 1.15 !important;
}

body .pickup-calendar-dialog .pickup-reschedule-strip--panel .pickup-reschedule-summary span {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body .pickup-calendar-dialog .pickup-reschedule-strip--panel .pickup-reschedule-summary strong {
  display: block !important;
  overflow: hidden !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .pickup-calendar-dialog .pickup-reschedule-strip--panel .pickup-reschedule-summary--before {
  background: #fff8f8 !important;
  border: 1px solid #fecdd3 !important;
}

body .pickup-calendar-dialog .pickup-reschedule-strip--panel .pickup-reschedule-summary--before strong {
  color: #be123c !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(190, 18, 60, 0.7) !important;
}

body .pickup-calendar-dialog .pickup-reschedule-strip--panel .pickup-reschedule-summary--requested {
  background: #ecfdf5 !important;
  border: 1px solid #bbf7d0 !important;
}

body .pickup-calendar-dialog .pickup-reschedule-strip--panel .pickup-reschedule-summary--requested strong {
  color: #166534 !important;
}

body .pickup-calendar-dialog .pickup-calendar-panel--reschedule .pickup-calendar-nav {
  top: 88px !important;
}

/* Shared master-data import drawer (PrimeNG Sidebar/Drawer compatible). */
body .p-sidebar.import-sidebar .p-sidebar-header,
body .p-drawer.import-sidebar .p-drawer-header {
  align-items: center !important;
  padding: 0 !important;
  background: #ffffff !important;
}

body .p-sidebar.import-sidebar .p-sidebar-header > div,
body .p-drawer.import-sidebar .p-drawer-header > div {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

body .import-sidebar .import-sidebar-title {
  margin-left: 16px !important;
  padding: 0 !important;
}

body .import-sidebar .import-sidebar-close {
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 52px !important;
  width: 52px !important;
  min-height: 58px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid #8f8f8f !important;
  border-radius: 0 !important;
  outline: 0;
  background: #ffffff !important;
  color: #3f4752 !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body .import-sidebar .import-sidebar-close:hover,
body .import-sidebar .import-sidebar-close:focus-visible,
body .import-sidebar .import-sidebar-close:active {
  background: #da4345 !important;
  color: #ffffff !important;
}

body .import-sidebar .import-sidebar-close .pi {
  font-size: 16px !important;
  line-height: 1;
}

/* PrimeNG 17 uses buttonbar; newer versions renamed it to header. */
body .import-sidebar .p-fileupload-buttonbar,
body .import-sidebar .p-fileupload-header {
  display: none !important;
}

/* Light visual polish for all master import forms. */
body .import-sidebar .p-sidebar-content,
body .import-sidebar .p-drawer-content {
  background: #ffffff !important;
}

body .import-sidebar .row.mb-3 > [class*=col-].d-flex,
body .import-sidebar .import-field-row {
  gap: 12px !important;
}

body .import-sidebar label,
body .import-sidebar .import-field-label {
  color: #667085 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  margin: 0 !important;
  padding-right: 0 !important;
}

body .import-sidebar input.form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 40px;
  border: 1px solid #b8c4d2 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body .import-sidebar input.form-control:hover {
  border-color: #6f8eae !important;
}

body .import-sidebar input.form-control:focus {
  border-color: #1677c8 !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 200, 0.12) !important;
}

body .import-sidebar .p-fileupload-content {
  padding: 14px !important;
  border: 1px solid #d7e0e9 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
}

body .import-sidebar .upload-area {
  border-color: #1684e8 !important;
  background: #f8fbff !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

body .import-sidebar .upload-area:hover,
body .import-sidebar .upload-area:focus-within {
  border-color: #086fc5 !important;
  background: #f2f8fe !important;
  box-shadow: 0 4px 14px rgba(22, 119, 200, 0.08);
}

body .import-sidebar .upload-instruction {
  color: #0878d1 !important;
}

body .import-sidebar .frieghtCancelBtn {
  min-height: 40px;
  border-color: #143b7d !important;
  color: #102a67 !important;
  background: #ffffff !important;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body .import-sidebar .frieghtCancelBtn:hover {
  border-color: #1677c8 !important;
  color: #ffffff !important;
  background: #1677c8 !important;
}

body .import-sidebar .frieghtCancelBtn:focus-visible {
  border-color: #1677c8 !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 200, 0.16) !important;
}

body .import-sidebar .frieghtReviewBtn {
  min-height: 40px;
  box-shadow: 0 2px 5px rgba(48, 137, 34, 0.2);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

body .import-sidebar .frieghtReviewBtn:hover {
  box-shadow: 0 4px 10px rgba(37, 143, 29, 0.24);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
 * Pack carrier / service picker panels ("pack-picker-panel").
 *
 * These p-dropdowns use appendTo="body", so the overlay is NOT a descendant of
 * the component host — every `:host ::ng-deep` rule in
 * ship-now-pack.component.scss is inert for it (the component uses default
 * Emulated encapsulation). Overlay styling has to live here, globally.
 *
 * SCOPED ON PURPOSE via panelStyleClass rather than widening `.p-select-overlay`
 * (L477), which is width:100% for EVERY dropdown panel in the app — editing that
 * would resize unrelated pickers.
 *
 * Dual-written for both PrimeNG generations: v19 renders .p-select-overlay /
 * .p-select-option / .p-select-list, older markup uses .p-dropdown-panel /
 * .p-dropdown-item / .p-dropdown-items.
 * ------------------------------------------------------------------------- */
/* PrimeNG stamps `min-width: <trigger width>px` inline on the panel, which is why
 * a long carrier list gets cut to the width of the closed field. Sizing to
 * max-content lets the panel be as wide as its longest option instead, capped so
 * it can never run off-screen on a laptop. */
body .p-select-overlay.pack-picker-panel,
body .p-dropdown-panel.pack-picker-panel {
  width: max-content !important;
  min-width: 100% !important;
  max-width: min(440px, 92vw) !important;
}

/* Long names stay on one line and ellipsise only past the 440px cap; the [title]
 * on each option span then exposes the full text on hover, so nothing is ever
 * silently lost the way "AAA Cooper Transpor" was. */
body .p-select-overlay.pack-picker-panel .p-select-option,
body .p-dropdown-panel.pack-picker-panel .p-dropdown-item {
  /* 13px matches the closed field, so the value does not visually resize when the
   * panel opens; the tighter row also fits ~3 more carriers on screen. */
  padding: 0.45rem 0.9rem !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Tighter rows than the global 0.75rem so more of the list is visible at once —
 * a carrier list is long and scanned, not read. */
body .p-select-overlay.pack-picker-panel .p-select-list,
body .p-dropdown-panel.pack-picker-panel .p-dropdown-items {
  padding: 0.25rem 0 !important;
}

/* Hairline separators give the eye a rhythm to scan down a long carrier list.
 * :not(:last-child) keeps the panel's bottom edge clean.
 *
 * #e6ecf3, not the #f1f5f9 this started as: at ~2% contrast that line was
 * invisible on a laptop panel, so the list read as one undifferentiated column.
 * This is still a hairline — perceived without being read — just an actually
 * visible one. */
body .p-select-overlay.pack-picker-panel .p-select-option:not(:last-child),
body .p-dropdown-panel.pack-picker-panel .p-dropdown-item:not(:last-child) {
  border-bottom: 1px solid #e6ecf3 !important;
}

/* Show ~11 carriers instead of ~8. PrimeNG stamps max-height INLINE on the scroll
 * container from its `scrollHeight` input (default 200px), so only !important
 * beats it — same constraint the global panel-sizing block above documents.
 * Deliberately left as a non-multiple of the row height: a half-visible final row
 * is the cheapest possible "there is more below" affordance. */
body .p-select-overlay.pack-picker-panel .p-select-list-container,
body .p-select-overlay.pack-picker-panel .p-select-list-wrapper,
body .p-dropdown-panel.pack-picker-panel .p-dropdown-items-wrapper {
  max-height: 330px !important;
}

/* Keep the filter box pinned while the list scrolls — on a list this long the
 * search field would otherwise scroll out of reach exactly when it is needed. */
body .p-select-overlay.pack-picker-panel .p-select-header,
body .p-dropdown-panel.pack-picker-panel .p-dropdown-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
}

/* Selected option needs to be findable at a glance in a list this long; the
 * global rule gives selected and hover the SAME background, so the current value
 * is invisible until you hover it. Weight + accent rail distinguish them. */
body .p-select-overlay.pack-picker-panel .p-select-option.p-select-option-selected,
body .p-dropdown-panel.pack-picker-panel .p-dropdown-item.p-highlight {
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 0 #1f1646 !important;
}

.shipnow_header2 .field-box .input-style,
.shipnow_header2 .field-box .form-control,
.shipnow_header2 .border-box .input-style,
.shipnow_header2 .border-box .form-control,
.shipnow_header2 .field-box input.p-inputtext,
.shipnow_header2 .border-box input.p-inputtext,
.shipnow_header2 .field-box .p-dropdown .p-dropdown-label,
.shipnow_header2 .border-box .p-dropdown .p-dropdown-label,
.shipnow_header2 .field-box .p-dropdown .p-select-label,
.shipnow_header2 .border-box .p-dropdown .p-select-label,
.shipnow_header2 .field-box .p-select .p-select-label,
.shipnow_header2 .border-box .p-select .p-select-label {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

body .shipnow_header2 .meta-group .field-box .input-style,
body .shipnow_header2 .meta-group .field-box .form-control,
body .shipnow_header2 .meta-group .field-box input.p-inputtext,
body .shipnow_header2 .meta-group .field-box .p-inputtext,
body .shipnow_header2 .meta-group .field-box .p-dropdown .p-dropdown-label,
body .shipnow_header2 .meta-group .field-box .p-dropdown .p-select-label,
body .shipnow_header2 .meta-group .field-box .p-select .p-select-label {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Master drawer input width lock. Keep this at the end of the global cascade:
   component and global input resets above can leave native inputs at intrinsic
   width while dropdown widgets fill the same master field cell. */
body .master-sidebar .fields-container .fieldItem > input.p-inputtext,
body .master-sidebar .fields-container .fieldItem > input:not([type=checkbox]):not([type=radio]):not([type=file]),
body .master-sidebar .fields-container .fieldItem > textarea.p-inputtextarea,
body .master-sidebar .fields-container .fieldItem > .p-inputtext {
  display: block !important;
  width: 100% !important;
  inline-size: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0.5rem 0.75rem !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

/* ShipperCopilot 6.4 Dev reference parity: Avenir Ship Now typography and table headers. */
body app-ship-now .ship-stepper-tabs .mat-mdc-tab .mdc-tab__text-label,
body app-ship-now .ship-stepper-tabs .ship-step-text,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .ship-step-text {
  color: #6f6f6f !important;
  font-family: var(--eshipjet-ui-font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

body app-ship-now .ship-stepper-tabs .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label,
body app-ship-now .ship-stepper-tabs .mat-mdc-tab[aria-selected=true] .mdc-tab__text-label,
body app-ship-now .ship-stepper-tabs .mat-mdc-tab.mdc-tab--active .ship-step-text,
body app-ship-now .ship-stepper-tabs .mat-mdc-tab[aria-selected=true] .ship-step-text,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab--active .ship-step-text,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab[aria-selected=true] .ship-step-text {
  color: #ffffff !important;
  font-weight: 800 !important;
}

body app-ship-now-pack label,
body app-ship-now-pack .label,
body app-ship-now-pack .pkg-material-label,
body app-ship-now-pack .tracking-pro-label,
body app-ship-now-pack .shipnow_header2 label,
body app-ship-now-pack .shipnow_header2 .label,
body app-ship-now-pack .pack-mid-toolbar label {
  color: #6f6f6f !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body app-ship-now-pack .p-dropdown-label,
body app-ship-now-pack .p-select-label,
body app-ship-now-pack .p-inputtext,
body app-ship-now-pack input,
body app-dashboard-header .p-dropdown-label,
body app-dashboard-header .p-select-label,
body app-dashboard-header .p-inputtext,
body app-dashboard-header input {
  color: #4f5f70 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body app-ship-now-pack input::placeholder,
body app-dashboard-header input::placeholder {
  color: #8b9bb0 !important;
  font-weight: 500 !important;
}

body app-ship-now-pack .ship-now-main-table .p-datatable-thead,
body app-ship-now-pack .ship-now-pack-table .p-datatable-thead,
body app-ship-now-pack .ship-now-main-table .p-datatable-thead > tr,
body app-ship-now-pack .ship-now-pack-table .p-datatable-thead > tr,
body app-ship-now-pack .ship-now-main-table .p-datatable-thead > tr > th,
body app-ship-now-pack .ship-now-pack-table .p-datatable-thead > tr > th,
body app-ship-now-pack .ship-now-main-table .p-datatable-thead > tr > th *,
body app-ship-now-pack .ship-now-pack-table .p-datatable-thead > tr > th *,
body app-ship-now-pack #productTable .product-col-config-th {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

body app-ship-now-pack .ship-now-main-table .p-datatable-thead > tr > th,
body app-ship-now-pack .ship-now-pack-table .p-datatable-thead > tr > th,
body app-ship-now-pack .p-datatable-scrollable .p-datatable-thead > tr > th,
body app-ship-now-pack .p-datatable .p-datatable-thead > tr > th {
  color: #6f6f6f !important;
  font-family: var(--eshipjet-ui-font) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* Prod Ship Now visual lock: keep this after all broad UI resets. */
body app-dashboard-header .main-dev-sec > .add-ship-request-title,
body app-dashboard-header .main-dev-sec > .add-ship-request-header,
body app-ship-now .shipnow-modern-shell,
body app-ship-now .shipnow-main-content {
  background: #ffffff !important;
}

body app-dashboard-header .main-dev-sec > .add-ship-request-title {
  min-height: 76px !important;
  height: 76px !important;
  border-top: 1px solid #d8e2ef !important;
  border-bottom: 1px solid #d8e2ef !important;
  box-shadow: none !important;
}

body app-dashboard-header .main-dev-sec > .add-ship-request-header {
  min-height: 58px !important;
  height: 58px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid #e5ebf3 !important;
  box-shadow: 0 1px 2px rgba(25, 52, 82, 0.08) !important;
}

body app-dashboard-header .main-dev-sec > .add-ship-request-header .p-dropdown,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .p-select,
body app-dashboard-header .main-dev-sec > .add-ship-request-header input.p-inputtext,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .ship-date-input,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .btn-default-css,
body app-dashboard-header .main-dev-sec > .add-ship-request-header .btn-clear {
  min-height: 42px !important;
  height: 42px !important;
  border-radius: 4px !important;
}

body app-ship-now .ship-stepper-tabs .mat-mdc-tab-header {
  height: 48px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid #dbe5f1 !important;
  background: #ffffff !important;
}

body app-ship-now .ship-stepper-tabs .mat-mdc-tab.mdc-tab {
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  border-right: 1px solid #e0e7f0 !important;
  box-shadow: none !important;
}

body app-ship-now .ship-stepper-tabs .mat-mdc-tab.mdc-tab--active,
body app-ship-now .ship-stepper-tabs .mat-mdc-tab[aria-selected=true] {
  background: linear-gradient(180deg, var(--eshipjet-brand-deep) 0%, #555d6f 100%) !important;
  background-image: linear-gradient(180deg, var(--eshipjet-brand-deep) 0%, #555d6f 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* SINGLE CARD: this element owns the Pack meta strip's frame — border, background
 * and shadow all live here and nowhere else.
 *
 * The 26px horizontal padding used to inset .container-box far enough that its own
 * background + inset bottom shadow read as a SECOND card floating inside this one.
 * Trimmed to 12px so the strip is one flat full-width band; .container-box is
 * stripped of its competing frame in the rule directly below. Keep the two rules
 * together — splitting them is what let the double frame reappear.
 *
 * HEIGHT IS MATCHED TO PROD reference dimensions from the current Ship Now strip:
 * 101px. min-height was 116 and vertical padding 16, which stacked ~15px of dead
 * space under the controls. 100 + 7px top/bottom lands on 101 exactly — the
 * content itself measures 86px, so min-height is the binding constraint and the
 * two must be changed together. */
body app-ship-now-pack .shipnow_header2 {
  min-height: 100px !important;
  padding: 7px 12px !important;
  background: #ffffff !important;
  border: 1px solid #e5ebf3 !important;
  box-shadow: 0 1px 2px rgba(25, 52, 82, 0.06) !important;
}

body app-ship-now-pack .shipnow_header2 .field-box,
body app-ship-now-pack .shipnow_header2 .border-box {
  min-height: 68px !important;
}

body app-ship-now-pack .shipnow_header2 .p-dropdown,
body app-ship-now-pack .shipnow_header2 .p-select,
body app-ship-now-pack .shipnow_header2 input.p-inputtext,
body app-ship-now-pack .shipnow_header2 .input-style,
body app-ship-now-pack .shipnow_header2 .form-control {
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 4px !important;
  border-color: #9aa0ba !important;
  background: #ffffff !important;
}

body app-ship-now-pack .ship-now-main-table .p-datatable-thead > tr > th,
body app-ship-now-pack .ship-now-pack-table .p-datatable-thead > tr > th {
  height: 44px !important;
  padding: 9px 10px !important;
  color: #767676 !important;
  border-color: #e5edf6 !important;
  border-bottom: 1px solid #d7e0ea !important;
  line-height: 18px !important;
  vertical-align: middle !important;
}

body app-ship-now-pack .ship-now-main-table .p-datatable-tbody > tr,
body app-ship-now-pack .ship-now-pack-table .p-datatable-tbody > tr {
  height: 43px !important;
}

body app-ship-now-pack .ship-now-main-table .p-datatable-tbody > tr > td,
body app-ship-now-pack .ship-now-pack-table .p-datatable-tbody > tr > td {
  padding: 6px 10px !important;
  border-color: #e9eef5 !important;
  color: #4f5f70 !important;
  font-family: var(--eshipjet-ui-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

body app-ship-now-pack .pack-mid-toolbar {
  min-height: 68px !important;
  height: 68px !important;
  padding: 8px 26px !important;
  background: #ffffff !important;
  border-top: 1px solid #e5ebf3 !important;
  border-bottom: 1px solid #e5ebf3 !important;
}

body app-ship-now-pack .pack-mid-toolbar .p-dropdown,
body app-ship-now-pack .pack-mid-toolbar .p-select,
body app-ship-now-pack .pack-mid-toolbar input.p-inputtext,
body app-ship-now-pack .pack-mid-toolbar .pack-button,
body app-ship-now-pack .pack-mid-toolbar .packall-button,
body app-ship-now-pack .pack-mid-toolbar .multi-pack-button,
body app-ship-now-pack .pack-mid-toolbar .ai-pack-main-button,
body app-ship-now-pack .pack-mid-toolbar .packall-button-AI {
  min-height: 46px !important;
  height: 46px !important;
  border-radius: 4px !important;
}

body app-ship-now .shipnow-footer {
  min-height: 64px !important;
  height: 64px !important;
  background: #ffffff !important;
  border-top: 1px solid #dbe5f1 !important;
  box-shadow: none !important;
}

/* Prod Pack-tab selected state: solid block, readable white text, no washed-out ripple. */
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab.mdc-tab--active,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab[aria-selected=true],
body app-ship-now .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab.mdc-tab--active,
body app-ship-now .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab[aria-selected=true] {
  background: linear-gradient(180deg, var(--eshipjet-brand-deep) 0%, #555d6f 100%) !important;
  background-color: var(--eshipjet-brand-deep) !important;
  background-image: linear-gradient(180deg, var(--eshipjet-brand-deep) 0%, #555d6f 100%) !important;
  border-color: var(--eshipjet-brand-deep) !important;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.22) !important;
  opacity: 1 !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab.mdc-tab--active::before,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab[aria-selected=true]::before,
body app-ship-now .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab.mdc-tab--active::before,
body app-ship-now .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab-header .mat-mdc-tab.mdc-tab[aria-selected=true]::before {
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__ripple,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab[aria-selected=true] .mdc-tab__ripple,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab.mdc-tab--active .mat-mdc-tab-ripple,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab[aria-selected=true] .mat-mdc-tab-ripple {
  background: transparent !important;
  opacity: 0 !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__content,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab[aria-selected=true] .mdc-tab__content,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab.mdc-tab--active .ship-step-label,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab[aria-selected=true] .ship-step-label,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab.mdc-tab--active .ship-step-text,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab[aria-selected=true] .ship-step-text,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .ship-step-text.ship-step-text-active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab .mdc-tab-indicator,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab .mdc-tab-indicator__content,
body app-ship-now .shipnow-modern-shell .ship-stepper-tabs.ship-stepper-tabs .mat-mdc-tab.mdc-tab .mdc-tab-indicator__content--underline {
  border-color: transparent !important;
  opacity: 0 !important;
}

/* Ship Now rate-shopping sidebar is appended to the document overlay layer, so
   the panel width must live globally instead of in component-scoped SCSS. */
body .p-sidebar.shipnow-rate-shop-sidebar,
body .p-drawer.shipnow-rate-shop-sidebar {
  width: 95vw !important;
  min-width: 95vw !important;
  max-width: 95vw !important;
  left: auto !important;
  right: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-left: 1px solid #dbe6f3 !important;
  box-shadow: -18px 0 36px rgba(15, 23, 42, 0.18) !important;
}

body .p-sidebar.shipnow-rate-shop-sidebar .p-sidebar-header,
body .p-sidebar.shipnow-rate-shop-sidebar .p-sidebar-content,
body .p-drawer.shipnow-rate-shop-sidebar .p-drawer-header,
body .p-drawer.shipnow-rate-shop-sidebar .p-drawer-content {
  width: 100% !important;
  max-width: 100% !important;
}

body .p-sidebar.shipnow-rate-shop-sidebar .p-sidebar-content,
body .p-drawer.shipnow-rate-shop-sidebar .p-drawer-content {
  padding: 0 !important;
  overflow: hidden !important;
}

/* Ship Now Pack Class/NMFC dropdowns are appended to body, so keep their panel
   compact globally instead of letting the overlay create page-height scroll. */
body .freight-toolbar-dropdown-panel.p-dropdown-panel,
body .freight-toolbar-dropdown-panel.p-select-overlay,
body .freight-toolbar-dropdown-panel.p-select-panel {
  max-height: 212px !important;
  overflow: hidden !important;
  border: 1px solid #d8dfeb !important;
  border-radius: 6px !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16) !important;
  z-index: 1102000 !important;
}

body .freight-toolbar-dropdown-panel .p-dropdown-items-wrapper,
body .freight-toolbar-dropdown-panel .p-select-list-container,
body .freight-toolbar-dropdown-panel .p-scroller {
  max-height: 180px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body .freight-toolbar-dropdown-panel .p-dropdown-item,
body .freight-toolbar-dropdown-panel .p-select-option {
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  padding: 7px 14px !important;
  font-family: AvenirNextCyrDemi, AvenirNextCyrMedium, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

@media (max-width: 900px) {
  body .p-sidebar.shipnow-rate-shop-sidebar,
  body .p-drawer.shipnow-rate-shop-sidebar {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
  }
}
/* Quote Now Pick a Carrier: edge-to-edge overlay. Do not change Ship Now 95vw. */
body .p-sidebar.shipnow-rate-shop-sidebar.quotenow-rate-shop-sidebar,
body .p-drawer.shipnow-rate-shop-sidebar.quotenow-rate-shop-sidebar,
body .p-sidebar.p-sidebar-full.quotenow-rate-shop-sidebar,
body .p-drawer.p-drawer-full.quotenow-rate-shop-sidebar {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  box-shadow: none !important;
  transform: none !important;
}

body .p-sidebar.quotenow-rate-shop-sidebar .p-sidebar-content,
body .p-drawer.quotenow-rate-shop-sidebar .p-drawer-content {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
}

body .quotenow-rate-shop-sidebar .shipnow-rate-shop-layout {
  flex-direction: row !important;
}

body .quotenow-rate-shop-sidebar .shipnow-rate-summary-rail {
  order: 0 !important;
}

body .quotenow-rate-shop-sidebar .shipnow-rate-shop-body {
  order: 1 !important;
}

/* ==========================================================================
   Rate-shop ("Pick a Carrier") left summary rail: lane map, addresses, items.
   `.shipnow-rate-shop-layout` turns the previously single-column shell into
   rail + rate table without touching the existing body/footer rules.

   These live HERE and not in ship-now.component.scss on purpose: that
   component is ViewEncapsulation.None, so Angular never strips `::ng-deep`
   and the browser discards every such rule as an invalid selector. Every
   rate-shop sidebar style that actually works is in this global sheet.
   ========================================================================== */
body .shipnow-rate-shop-sidebar .shipnow-rate-shop-layout {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: hidden !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-summary-rail {
  flex: 0 0 336px !important;
  width: 336px !important;
  min-width: 336px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 14px 16px 12px !important;
  border-right: 1px solid #e3ebf5 !important;
  background: linear-gradient(180deg, #f7fafe 0%, #ffffff 60%) !important;
  overflow: hidden !important;
}

/* The table keeps every rule it already had; it just stops being full-bleed. */
body .shipnow-rate-shop-sidebar .shipnow-rate-shop-layout .shipnow-rate-shop-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* --- Lane card: map on top, dark address plate underneath (mirrors the ref) --- */
body .shipnow-rate-shop-sidebar .rate-shop-lane-card {
  flex: 0 0 auto !important;
  border: 1px solid #dbe6f4 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(20, 45, 82, 0.07) !important;
  overflow: hidden !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-map-host {
  position: relative !important;
  height: 168px !important;
  background: #eef3f8 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-map {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  width: 100% !important;
  z-index: 0 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-map-fallback {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #eef3f8 !important;
  color: #7d8ea3 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-map-fallback i {
  font-size: 20px !important;
  color: #a8bbd0 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-map-distance {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 3 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 2px 8px rgba(20, 45, 82, 0.18) !important;
  color: #24507f !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

/* Leaflet renders markers as plain divs; style the pins here. */
body .rate-shop-map-pin .rate-shop-map-pin-dot {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  margin: 2px !important;
  border-radius: 50% !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 0 0 1px rgba(20, 45, 82, 0.35), 0 2px 6px rgba(20, 45, 82, 0.35) !important;
}

body .rate-shop-map-pin-origin .rate-shop-map-pin-dot {
  background: #e0492f !important;
}

body .rate-shop-map-pin-destination .rate-shop-map-pin-dot {
  background: #1f78d1 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-map-host .leaflet-control-attribution {
  font-size: 8px !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-lane-endpoints {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 14px 14px 15px !important;
  background: #1d2431 !important;
  color: #ffffff !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-lane-endpoint {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-lane-tag {
  color: #93a3b8 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-lane-company {
  color: #cbd8e8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-lane-address {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-lane-date {
  margin-top: 2px !important;
  color: #8fa2ba !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* --- Items --- */
body .shipnow-rate-shop-sidebar .rate-shop-items-block {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: 16px !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-items-title {
  flex: 0 0 auto !important;
  margin: 0 0 8px !important;
  color: #1d2a44 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-items-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-item-card {
  border: 1px solid #dfe8f3 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  padding: 10px 12px 11px !important;
  box-shadow: 0 2px 8px rgba(20, 45, 82, 0.05) !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-item-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid #eef3f9 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-item-name {
  color: #1d2a44 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-item-class {
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: #eef6ff !important;
  color: #2f6ca8 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-item-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 3px 0 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-item-key {
  color: #6b7c92 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-item-value {
  color: #1d2a44 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: right !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-items-empty {
  padding: 18px 12px !important;
  border: 1px dashed #d8e3f0 !important;
  border-radius: 10px !important;
  color: #8496ab !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* --- Total weight --- */
body .shipnow-rate-shop-sidebar .rate-shop-total-row {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 2px solid #e3ebf5 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-total-key {
  color: #56657c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-total-value {
  color: #1d2a44 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

@media (max-width: 1280px) {
  body .shipnow-rate-shop-sidebar .shipnow-rate-summary-rail {
    flex-basis: 288px !important;
    width: 288px !important;
    min-width: 288px !important;
  }
}
/* ==========================================================================
   Rate-shop sidebar: shell + footer geometry.
   Ported from ship-now.component.scss, where the identical rules sit behind
   `::ng-deep` and are therefore DEAD (that component is ViewEncapsulation.None,
   so Angular never strips the pseudo-element and the browser drops the rule).
   Without these the shell was never a flex column and the footer was never
   pinned, which is why Cancel/Submit landed on top of the summary rail.
   ========================================================================== */
body .shipnow-rate-shop-sidebar .shipnow-rate-shop-shell {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-bottom: 74px !important; /* reserve the fixed footer strip */
}

body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 20 !important;
  flex: 0 0 74px !important;
  width: 100% !important;
  height: 74px !important;
  margin: 0 !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  border-top: 1px solid #e4edf7 !important;
  background: #ffffff !important;
  box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06) !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer .btnCancelCss,
body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer .frieghtReviewBtn {
  min-width: 132px !important;
  height: 42px !important;
  border-radius: 7px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer .btnCancelCss {
  border: 1px solid #c9d8ea !important;
  background: #ffffff !important;
  color: #40526e !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer .frieghtReviewBtn {
  border: 1px solid #1f8b4c !important;
  background: #17833f !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(23, 131, 63, 0.22) !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer .frieghtReviewBtn:disabled {
  opacity: 0.55 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ==========================================================================
   Rate rows: carrier identity chip + calmer rate columns.
   ========================================================================== */
body .shipnow-rate-shop-sidebar .shipnow-carrier-cell {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body .shipnow-rate-shop-sidebar .shipnow-carrier-badge {
  position: relative !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #e2eaf4 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(20, 45, 82, 0.09) !important;
  overflow: hidden !important;
}

body .shipnow-rate-shop-sidebar .shipnow-carrier-badge-logo {
  max-width: 26px !important;
  max-height: 20px !important;
  object-fit: contain !important;
}

/* The monogram only shows when no logo img rendered (or the asset 404'd). */
body .shipnow-rate-shop-sidebar .shipnow-carrier-badge-initials {
  display: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  color: #44586f !important;
}

body .shipnow-rate-shop-sidebar .shipnow-carrier-badge:not(:has(.shipnow-carrier-badge-logo)) .shipnow-carrier-badge-initials,
body .shipnow-rate-shop-sidebar .shipnow-carrier-badge.shipnow-carrier-badge-fallback .shipnow-carrier-badge-initials {
  display: inline-flex !important;
}

body .shipnow-rate-shop-sidebar .shipnow-carrier-badge.shipnow-carrier-badge-fallback .shipnow-carrier-badge-logo {
  display: none !important;
}

/* Tone the monogram chip to the carrier colour the name already uses. */
body .shipnow-rate-shop-sidebar .shipnow-carrier-badge.shipnow-carrier-name-estes {
  border-color: #d8c7a8 !important;
  background: #fdf6e9 !important;
}

body .shipnow-rate-shop-sidebar .shipnow-carrier-badge.shipnow-carrier-name-estes .shipnow-carrier-badge-initials {
  color: #8a6a1f !important;
}

body .shipnow-rate-shop-sidebar .shipnow-carrier-badge.shipnow-carrier-name-rl {
  border-color: #e3c0c0 !important;
  background: #fdeeee !important;
}

body .shipnow-rate-shop-sidebar .shipnow-carrier-badge.shipnow-carrier-name-rl .shipnow-carrier-badge-initials {
  color: #a33232 !important;
}

body .shipnow-rate-shop-sidebar .shipnow-carrier-badge.shipnow-carrier-name-saia {
  border-color: #bcd3ea !important;
  background: #eef5fd !important;
}

body .shipnow-rate-shop-sidebar .shipnow-carrier-badge.shipnow-carrier-name-saia .shipnow-carrier-badge-initials {
  color: #275e93 !important;
}

body .shipnow-rate-shop-sidebar .shipnow-carrier-badge.shipnow-carrier-name-xpo,
body .shipnow-rate-shop-sidebar .shipnow-carrier-badge.shipnow-carrier-name-sefl {
  border-color: #cdc6e6 !important;
  background: #f3f1fb !important;
}

body .shipnow-rate-shop-sidebar .shipnow-carrier-badge.shipnow-carrier-name-xpo .shipnow-carrier-badge-initials,
body .shipnow-rate-shop-sidebar .shipnow-carrier-badge.shipnow-carrier-name-sefl .shipnow-carrier-badge-initials {
  color: #4b3f86 !important;
}

/* Rate columns: no dividing rules, alignment carries the grouping instead. */
body .shipnow-rate-shop-sidebar .shipnow-rate-stack {
  border-right: 0 !important;
  padding-right: 4px !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-stack-discounted strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Selected + lowest-rate rows read as state, not as extra chrome. */
body .shipnow-rate-shop-sidebar .freight-main-table .p-datatable-tbody > tr > td {
  border-bottom: 1px solid #f0f4f9 !important;
}

/* ==========================================================================
   Rate-shop sidebar: scrollable rate table.
   Ported from the DEAD `::ng-deep` block in ship-now.component.scss AND
   updated for PrimeNG 19 -- the old rules named `.p-datatable-wrapper` /
   `.p-datatable-scrollable-body`, which v19 no longer renders (it emits
   `.p-datatable-table-container`). Both are listed so the chain holds either
   way. `scrollHeight="flex"` only resolves if every ancestor is a flex box
   with `min-height: 0`, which is why the list could not scroll at all.
   ========================================================================== */
body .shipnow-rate-shop-sidebar .shipnow-rate-shop-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 14px 18px 10px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%) !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-shop-loading,
body .shipnow-rate-shop-sidebar .shipnow-rate-shop-empty {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 2rem !important;
}

body .shipnow-rate-shop-sidebar .freight-main-table,
body .shipnow-rate-shop-sidebar .p-datatable {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #e2ebf5 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* v19 container + legacy names, so the scroll chain survives either version. */
body .shipnow-rate-shop-sidebar .p-datatable .p-datatable-table-container,
body .shipnow-rate-shop-sidebar .p-datatable .p-datatable-wrapper,
body .shipnow-rate-shop-sidebar .p-datatable-scrollable-wrapper,
body .shipnow-rate-shop-sidebar .p-datatable-scrollable-view {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

body .shipnow-rate-shop-sidebar .p-datatable-scrollable-body {
  max-height: none !important;
  overflow: auto !important;
}

/* Sticky header so column labels stay put while the rates scroll. */
body .shipnow-rate-shop-sidebar .p-datatable .p-datatable-thead > tr > th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  background: #f7fafd !important;
}

body .shipnow-rate-shop-sidebar .p-datatable-table-container::-webkit-scrollbar,
body .shipnow-rate-shop-sidebar .p-datatable-wrapper::-webkit-scrollbar,
body .shipnow-rate-shop-sidebar .rate-shop-items-scroll::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

body .shipnow-rate-shop-sidebar .p-datatable-table-container::-webkit-scrollbar-thumb,
body .shipnow-rate-shop-sidebar .p-datatable-wrapper::-webkit-scrollbar-thumb,
body .shipnow-rate-shop-sidebar .rate-shop-items-scroll::-webkit-scrollbar-thumb {
  background: #c5d4e6;
  border-radius: 999px;
}

body .shipnow-rate-shop-sidebar .p-datatable-table-container::-webkit-scrollbar-track,
body .shipnow-rate-shop-sidebar .p-datatable-wrapper::-webkit-scrollbar-track,
body .shipnow-rate-shop-sidebar .rate-shop-items-scroll::-webkit-scrollbar-track {
  background: #eef3f9;
}

/* ==========================================================================
   Rate-shop header facts strip.
   ========================================================================== */
body .shipnow-rate-shop-sidebar .shipnow-rate-header-facts {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin-left: 18px !important;
  overflow: hidden !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-fact {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 5px 11px !important;
  border: 1px solid #e2ebf5 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  white-space: nowrap !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-fact-key {
  color: #7688a0 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-fact-value {
  color: #1d2a44 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-fact-lane {
  max-width: 300px !important;
  min-width: 0 !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-fact-lane i {
  color: #e0492f !important;
  font-size: 12px !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-fact-lane .shipnow-rate-fact-value {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-fact-best {
  border-color: #bfe4cd !important;
  background: #f1fbf5 !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-fact-best .shipnow-rate-fact-value {
  color: #17833f !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-fact-best .shipnow-rate-fact-key {
  color: #4e9169 !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-fact-fastest {
  border-color: #c6dcf4 !important;
  background: #f1f7fe !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-fact-fastest .shipnow-rate-fact-value {
  color: #2867ad !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-fact-fastest .shipnow-rate-fact-key {
  color: #5e87b5 !important;
}

/* Real carrier logos need a wider window than the 2-letter monogram did. */
body .shipnow-rate-shop-sidebar .shipnow-carrier-badge {
  flex-basis: 46px !important;
  width: 46px !important;
  height: 32px !important;
  border-radius: 7px !important;
  padding: 3px 4px !important;
}

body .shipnow-rate-shop-sidebar .shipnow-carrier-badge-logo {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* ==========================================================================
   Rate-shop: Table / Card view toggle and the card list.
   ========================================================================== */
body .shipnow-rate-shop-sidebar .shipnow-rate-view-toggle {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  margin-right: 14px !important;
  padding: 3px !important;
  border: 1px solid #dfe8f3 !important;
  border-radius: 8px !important;
  background: #f2f6fb !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-view-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #63758c !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: background 120ms ease, color 120ms ease !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-view-btn i {
  font-size: 12px !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-view-btn:hover {
  color: #24425f !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-view-btn.active {
  background: #ffffff !important;
  color: #1d2a44 !important;
  box-shadow: 0 1px 3px rgba(20, 45, 82, 0.16) !important;
}

/* ==========================================================================
   Rate-shop card view — "freight ticket".
   Direction: each rate is a ticket stub. The three date fields become one
   journey strip (depart -> transit -> arrive) because a shipping app should
   show the trip, not a row of disconnected dates; the fare is torn off to the
   right behind a perforation so price scanning happens in a single column.
   Typography stays on the app's Avenir stack -- no new webfont is loaded, so
   this still renders identically on the offline QAS box.
   ========================================================================== */
body .shipnow-rate-shop-sidebar .rate-ticket-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 4px 6px 8px 4px !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-list::-webkit-scrollbar {
  width: 8px;
}

body .shipnow-rate-shop-sidebar .rate-ticket-list::-webkit-scrollbar-thumb {
  background: #c5d4e6;
  border-radius: 999px;
}

body .shipnow-rate-shop-sidebar .rate-ticket-list::-webkit-scrollbar-track {
  background: #eef3f9;
}

body .shipnow-rate-shop-sidebar .rate-ticket {
  position: relative !important;
  /* Flex items shrink by default: without this the 12 cards squash to fit the
     column instead of letting the list scroll, and `overflow: hidden` then
     clips the journey strip and the fare. */
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) 214px !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid #e1eaf5 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: transform 160ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 160ms ease, border-color 160ms ease !important;
  /* Staggered entrance: the list resolves top-down instead of snapping in. */
  animation: rateTicketIn 320ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards !important;
  animation-delay: calc(var(--ticket-index, 0) * 45ms) !important;
}

@keyframes rateTicketIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .shipnow-rate-shop-sidebar .rate-ticket {
    animation: none !important;
    transition: none !important;
  }
}
body .shipnow-rate-shop-sidebar .rate-ticket:hover {
  transform: none !important;
  border-color: #c6dbf1 !important;
  box-shadow: none !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket.is-selected {
  border-color: #1f78d1 !important;
  box-shadow: none !important;
}

/* Accent spine, not a heavy border — colour carries the rank. */
body .shipnow-rate-shop-sidebar .rate-ticket::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, #dfe8f3, #eef3f9) !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket.is-lowest::before {
  background: linear-gradient(180deg, #34c06d, #17833f) !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket.is-selected::before {
  background: linear-gradient(180deg, #4f9ee6, #1f78d1) !important;
}

/* --- Brand rail --- */
body .shipnow-rate-shop-sidebar .rate-ticket-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 16px 10px 16px 14px !important;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f9fd 100%) !important;
  border-right: 1px solid #edf2f8 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-rank {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  background: #eaf0f7 !important;
  color: #7b8da3 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket.is-lowest .rate-ticket-rank {
  background: #e4f7ec !important;
  color: #17833f !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket .shipnow-carrier-badge {
  flex-basis: auto !important;
  width: 52px !important;
  height: 36px !important;
  border-radius: 8px !important;
  padding: 4px 5px !important;
}

/* --- Body --- */
body .shipnow-rate-shop-sidebar .rate-ticket-body {
  min-width: 0 !important;
  padding: 15px 18px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-head {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  min-width: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  color: inherit !important;
  padding: 0 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-carrier,
body .shipnow-rate-shop-sidebar .rate-ticket-carrier.shipnow-carrier-name-estes,
body .shipnow-rate-shop-sidebar .rate-ticket-carrier.shipnow-carrier-name-fedex,
body .shipnow-rate-shop-sidebar .rate-ticket-carrier.shipnow-carrier-name-rl,
body .shipnow-rate-shop-sidebar .rate-ticket-carrier.shipnow-carrier-name-saia,
body .shipnow-rate-shop-sidebar .rate-ticket-carrier.shipnow-carrier-name-sefl,
body .shipnow-rate-shop-sidebar .rate-ticket-carrier.shipnow-carrier-name-xpo,
body .shipnow-rate-shop-sidebar .rate-ticket-carrier.shipnow-carrier-name-default {
  color: #2f67b0 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-sep {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #c3d0e0 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-service {
  min-width: 0 !important;
  color: #16233c !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-flag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #effaf3, #e2f5e9) !important;
  border: 1px solid #c4e8d3 !important;
  color: #14713a !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-flag i {
  font-size: 9px !important;
  color: #e2a007 !important;
}

/* --- Journey strip: depart -> transit -> arrive --- */
body .shipnow-rate-shop-sidebar .rate-ticket-journey {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(64px, 1fr) minmax(0, auto) !important;
  align-items: center !important;
  gap: 14px !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-node {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-node-end {
  text-align: right !important;
  align-items: flex-end !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-node-date {
  color: #16233c !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-node-place {
  color: #8395ab !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 150px !important;
}

/* Track = dotted rule with endpoint dots and the transit pill riding on top. */
body .shipnow-rate-shop-sidebar .rate-ticket-track {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-track::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 2px !important;
  transform: translateY(-50%) !important;
  background-image: linear-gradient(90deg, #c9d8e9 45%, transparent 0) !important;
  background-size: 7px 2px !important;
  background-repeat: repeat-x !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-track::after {
  content: "" !important;
  position: absolute !important;
  right: -1px !important;
  top: 50% !important;
  width: 7px !important;
  height: 7px !important;
  transform: translateY(-50%) rotate(45deg) !important;
  border-top: 2px solid #9fb6cf !important;
  border-right: 2px solid #9fb6cf !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-transit {
  position: relative !important;
  z-index: 1 !important;
  padding: 3px 11px !important;
  border: 1px solid #d5e5f7 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #2867ad !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(20, 45, 82, 0.07) !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket.is-lowest .rate-ticket-transit {
  border-color: #bfe4cd !important;
  color: #17833f !important;
}

/* --- Meta chips --- */
body .shipnow-rate-shop-sidebar .rate-ticket-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  background: #f3f7fc !important;
  color: #61758f !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-chip i {
  font-size: 10px !important;
  color: #9db1c8 !important;
}

/* --- Fare stub, torn off behind a perforation --- */
body .shipnow-rate-shop-sidebar .rate-ticket-fare {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 1px !important;
  padding: 14px 20px 14px 22px !important;
  background: linear-gradient(180deg, #f8fbfe 0%, #f1f6fc 100%) !important;
  text-align: right !important;
}

/* Perforation line + the two notches that sell the ticket tear. */
body .shipnow-rate-shop-sidebar .rate-ticket-fare::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 2px !important;
  background-image: linear-gradient(180deg, #cfdded 50%, transparent 0) !important;
  background-size: 2px 7px !important;
  background-repeat: repeat-y !important;
}

/* Notches punched at both ends of the perforation, height-independent. */
body .shipnow-rate-shop-sidebar .rate-ticket-fare::after {
  content: "" !important;
  position: absolute !important;
  left: -7px !important;
  top: -7px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #e1eaf5 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-body::after {
  content: "" !important;
  position: absolute !important;
  right: 207px !important;
  bottom: -7px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #e1eaf5 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-body {
  position: relative !important;
}

@media (max-width: 1400px) {
  body .shipnow-rate-shop-sidebar .rate-ticket-body::after {
    right: 179px !important;
  }
}
body .shipnow-rate-shop-sidebar .rate-ticket-fare-key {
  color: #8fa1b7 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-fare-key-main {
  margin-top: 7px !important;
  color: #5e8f74 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-fare-published {
  color: #6d7f97 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-fare-published.is-struck {
  text-decoration: line-through !important;
  text-decoration-color: #b9c6d6 !important;
  opacity: 0.85 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-fare-amount {
  color: #12703a !important;
  font-size: 25px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  font-variant-numeric: tabular-nums !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-save {
  margin-top: 5px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: #e4f7ec !important;
  color: #14713a !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
}

@media (max-width: 1400px) {
  body .shipnow-rate-shop-sidebar .rate-ticket {
    grid-template-columns: 70px minmax(0, 1fr) 186px !important;
  }
  body .shipnow-rate-shop-sidebar .rate-ticket-fare-amount {
    font-size: 22px !important;
  }
  body .shipnow-rate-shop-sidebar .rate-ticket-node-place {
    max-width: 108px !important;
  }
}
/* Footer: Close pinned left, Cancel/Submit stay right (header X removed). */
body .shipnow-rate-shop-sidebar .shipnow-rate-footer-spacer {
  flex: 1 1 auto !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer .shipnow-rate-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 118px !important;
  height: 42px !important;
  padding: 0 16px !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #5b6c85 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer .shipnow-rate-close-btn:hover {
  border-color: #c3d3e6 !important;
  background: #f5f8fc !important;
  color: #22334c !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer .shipnow-rate-close-btn i {
  font-size: 12px !important;
}

/* The rate view toggle no longer needs to leave room for the header X. */
body .shipnow-rate-shop-sidebar .shipnow-rate-view-toggle {
  margin-right: 4px !important;
}

/* ==========================================================================
   Rate ticket: free-standing carrier logos + comparison signals.
   The logo chip's white box and border fought the card's own surface, so the
   mark now sits directly on the rail. The tinted plate is kept ONLY for the
   monogram fallback, which needs a shape to read as an identity.
   ========================================================================== */
body .shipnow-rate-shop-sidebar .rate-ticket .shipnow-carrier-badge {
  width: 84px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket .shipnow-carrier-badge-logo {
  max-width: 84px !important;
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  /* Most carrier marks ship on white; multiply drops that box onto the rail. */
  mix-blend-mode: multiply !important;
  filter: saturate(1.04) !important;
}

/* Fallback monogram still needs a plate to read as a logo. */
body .shipnow-rate-shop-sidebar .rate-ticket .shipnow-carrier-badge:not(:has(.shipnow-carrier-badge-logo)),
body .shipnow-rate-shop-sidebar .rate-ticket .shipnow-carrier-badge.shipnow-carrier-badge-fallback {
  width: 46px !important;
  height: 34px !important;
  border: 1px solid #e2eaf4 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(20, 45, 82, 0.08) !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-brand {
  padding: 16px 12px 16px 16px !important;
  gap: 10px !important;
  background: transparent !important;
  border-right: 1px solid #f0f4f9 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket {
  grid-template-columns: 122px minmax(0, 1fr) 214px !important;
}

@media (max-width: 1400px) {
  body .shipnow-rate-shop-sidebar .rate-ticket {
    grid-template-columns: 110px minmax(0, 1fr) 186px !important;
  }
  body .shipnow-rate-shop-sidebar .rate-ticket .shipnow-carrier-badge {
    width: 74px !important;
  }
  body .shipnow-rate-shop-sidebar .rate-ticket .shipnow-carrier-badge-logo {
    max-width: 74px !important;
  }
}
/* --- Extra badges --- */
body .shipnow-rate-shop-sidebar .rate-ticket-flag-fast {
  background: linear-gradient(180deg, #fff8e9, #fdf1d8) !important;
  border-color: #f0dcae !important;
  color: #8a5d06 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-flag-fast i {
  color: #d9930b !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-flag-guaranteed {
  background: linear-gradient(180deg, #f2f6fe, #e8effc) !important;
  border-color: #ccdcf5 !important;
  color: #2b5896 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-flag-guaranteed i {
  color: #3a72c4 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-chip-accessorial {
  background: #fff6ec !important;
  color: #935b16 !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket-chip-accessorial i {
  color: #d08a35 !important;
}

/* Delta against the cheapest option: the cost of choosing this row. */
body .shipnow-rate-shop-sidebar .rate-ticket-delta {
  margin-top: 5px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: #f2f5f9 !important;
  color: #78889d !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

body .shipnow-rate-shop-sidebar .rate-ticket.is-lowest .rate-ticket-fare {
  background: linear-gradient(180deg, #f4fcf7 0%, #eaf8f0 100%) !important;
}

/* Header: unstick the Table/Cards toggle from the sidebar edge. */
body .shipnow-rate-shop-sidebar .shipnow-rate-view-toggle {
  margin-right: 28px !important;
}

/* ==========================================================================
   Rate detail dialog: standard close button + grouped charge breakdown.
   PrimeNG 19 renders `.p-dialog-close-button`; the legacy
   `.p-dialog-header-close` rules elsewhere in this file are dead, so both are
   listed here to match the app's standard X (left divider, red on hover).
   ========================================================================== */
body .p-dialog.shipnow-rate-detail-dialog,
body .shipnow-rate-detail-dialog.p-dialog {
  overflow: hidden !important;
  box-shadow: none !important;
  background: #ffffff !important;
  border: 1px solid #e4edf6 !important;
}

body .shipnow-rate-detail-dialog .p-dialog-header,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-header {
  position: relative !important;
  align-items: stretch !important;
  padding: 0 0 0 22px !important;
  border-bottom: 1px solid #e8eef6 !important;
  background: #ffffff !important;
}

body .shipnow-rate-detail-dialog .shipnow-rate-dialog-title {
  padding: 16px 0 !important;
}

body .shipnow-rate-detail-dialog .shipnow-rate-dialog-title > span,
body .shipnow-rate-detail-dialog .shipnow-rate-dialog-title > span[class*=shipnow-carrier-name],
body .p-dialog.shipnow-rate-detail-dialog .shipnow-rate-dialog-title > span {
  color: #2f67b0 !important;
}

body .shipnow-rate-detail-dialog .p-dialog-header-icons,
body .shipnow-rate-detail-dialog .p-dialog-header-actions,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-header-icons,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-header-actions {
  align-self: stretch !important;
  align-items: stretch !important;
  margin: 0 0 0 auto !important;
  display: flex !important;
  gap: 0 !important;
}

body .shipnow-rate-detail-dialog .p-dialog-close-button,
body .shipnow-rate-detail-dialog .p-button.p-dialog-close-button,
body .shipnow-rate-detail-dialog .p-dialog-header-close,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-close-button,
body .p-dialog.shipnow-rate-detail-dialog .p-button.p-dialog-close-button,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-header-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 100% !important;
  min-height: 62px !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid #c2ccd9 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #55677f !important;
  box-shadow: none !important;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease !important;
}

body .shipnow-rate-detail-dialog .p-dialog-close-button .p-icon,
body .shipnow-rate-detail-dialog .p-dialog-close-button svg,
body .shipnow-rate-detail-dialog .p-dialog-close-button svg path,
body .shipnow-rate-detail-dialog .p-dialog-header-close .p-icon,
body .shipnow-rate-detail-dialog .p-dialog-header-close svg,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-close-button .p-icon,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-close-button svg,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-close-button svg path {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

body .shipnow-rate-detail-dialog .p-dialog-close-button:hover,
body .shipnow-rate-detail-dialog .p-dialog-close-button:enabled:hover,
body .shipnow-rate-detail-dialog .p-button.p-dialog-close-button:hover,
body .shipnow-rate-detail-dialog .p-button.p-dialog-close-button:enabled:hover,
body .shipnow-rate-detail-dialog .p-dialog-header-close:hover,
body .shipnow-rate-detail-dialog .p-dialog-header-close:enabled:hover,
body .shipnow-rate-detail-dialog .p-dialog-header-actions:hover,
body .shipnow-rate-detail-dialog .p-dialog-header-icons:hover,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-close-button:hover,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-close-button:enabled:hover,
body .p-dialog.shipnow-rate-detail-dialog .p-button.p-dialog-close-button:hover,
body .p-dialog.shipnow-rate-detail-dialog .p-button.p-dialog-close-button:enabled:hover,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-header-actions:hover {
  background: #da4345 !important;
  border-left-color: #da4345 !important;
  color: #ffffff !important;
}

body .shipnow-rate-detail-dialog .p-dialog-close-button:hover .p-icon,
body .shipnow-rate-detail-dialog .p-dialog-close-button:hover svg,
body .shipnow-rate-detail-dialog .p-dialog-close-button:hover svg path,
body .shipnow-rate-detail-dialog .p-dialog-close-button:enabled:hover .p-icon,
body .shipnow-rate-detail-dialog .p-dialog-close-button:enabled:hover svg,
body .shipnow-rate-detail-dialog .p-dialog-close-button:enabled:hover svg path,
body .shipnow-rate-detail-dialog .p-dialog-header-actions:hover .p-dialog-close-button,
body .shipnow-rate-detail-dialog .p-dialog-header-actions:hover .p-icon,
body .shipnow-rate-detail-dialog .p-dialog-header-actions:hover svg,
body .shipnow-rate-detail-dialog .p-dialog-header-actions:hover svg path,
body .shipnow-rate-detail-dialog .p-dialog-header-close:hover .p-icon,
body .shipnow-rate-detail-dialog .p-dialog-header-close:hover svg,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-close-button:hover .p-icon,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-close-button:hover svg,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-close-button:hover svg path,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-header-actions:hover .p-dialog-close-button,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-header-actions:hover .p-icon,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-header-actions:hover svg,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-header-actions:hover svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

body .shipnow-rate-detail-dialog .p-dialog-header-actions:hover .p-dialog-close-button,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-header-actions:hover .p-dialog-close-button {
  background: #da4345 !important;
  color: #ffffff !important;
}

body .shipnow-rate-detail-dialog svg.p-icon:hover,
body .shipnow-rate-detail-dialog svg.p-dialog-header-close-icon:hover,
body .p-dialog.shipnow-rate-detail-dialog svg.p-icon:hover {
  background: transparent !important;
}

body .shipnow-rate-detail-dialog .p-dialog-content,
body .p-dialog.shipnow-rate-detail-dialog .p-dialog-content {
  background: #ffffff !important;
}

/* --- Grouped charge breakdown --- */
body .shipnow-rate-detail-dialog .shipnow-charge-group {
  margin-bottom: 14px !important;
  padding: 10px 12px 6px !important;
  border: 1px solid #eaf0f7 !important;
  border-radius: 10px !important;
  background: #fbfdff !important;
}

body .shipnow-rate-detail-dialog .shipnow-charge-group[data-section=accessorials] {
  border-color: #f1e3cf !important;
  background: #fffaf3 !important;
}

body .shipnow-rate-detail-dialog .shipnow-charge-group-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px dashed #e2eaf4 !important;
}

body .shipnow-rate-detail-dialog .shipnow-charge-group-title {
  color: #55677f !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

body .shipnow-rate-detail-dialog .shipnow-charge-group-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #efdcc2 !important;
  color: #8a5d06 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

body .shipnow-rate-detail-dialog .shipnow-charge-group-note {
  margin-left: auto !important;
  color: #93a3b8 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-style: italic !important;
}

body .shipnow-rate-detail-dialog .shipnow-charge-line-subtotal {
  border-top: 1px solid #e2eaf4 !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
}

body .shipnow-rate-detail-dialog .shipnow-charge-line-subtotal .shipnow-charge-label,
body .shipnow-rate-detail-dialog .shipnow-charge-line-subtotal strong {
  font-weight: 900 !important;
  color: #1d2a44 !important;
}

body .shipnow-rate-detail-dialog .shipnow-charge-line-credit strong {
  color: #17833f !important;
}

body .shipnow-rate-detail-dialog .shipnow-charge-line-muted .shipnow-charge-label,
body .shipnow-rate-detail-dialog .shipnow-charge-line-muted strong {
  color: #7d8ea3 !important;
}

body .shipnow-rate-detail-dialog .shipnow-selected-detail-panel {
  display: grid !important;
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr) !important;
  gap: 14px !important;
  min-height: 430px !important;
  padding: 18px !important;
  background: #ffffff !important;
}

body .shipnow-rate-detail-dialog .shipnow-rate-metrics-strip {
  grid-column: 1/-1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
  gap: 10px !important;
}

body .shipnow-rate-detail-dialog .shipnow-rate-metric {
  min-height: 74px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  border: 1px solid #d7e6f8 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

body .shipnow-rate-detail-dialog .shipnow-rate-metric span {
  color: #6b7f9d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

body .shipnow-rate-detail-dialog .shipnow-rate-metric strong {
  color: #233a5a !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

body .shipnow-rate-detail-dialog .shipnow-rate-metric-customer {
  border-color: #b9e8ca !important;
  background: linear-gradient(180deg, #ffffff 0%, #edfff5 100%) !important;
}

body .shipnow-rate-detail-dialog .shipnow-rate-metric-customer strong {
  color: #137748 !important;
}

body .shipnow-rate-detail-dialog .shipnow-route-panel,
body .shipnow-rate-detail-dialog .shipnow-charge-panel {
  min-width: 0 !important;
  border: 1px solid #d6e5f6 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

body .shipnow-rate-detail-dialog .shipnow-detail-header {
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #e1ebf6 !important;
}

body .shipnow-rate-detail-dialog .shipnow-route-card {
  margin: 12px !important;
  min-height: 170px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
}

body .shipnow-rate-detail-dialog .shipnow-route-node {
  min-width: 0 !important;
  padding: 16px !important;
  border: 1px solid #d9e8f8 !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 7px !important;
}

body .shipnow-rate-detail-dialog .shipnow-route-node-origin {
  border-left: 4px solid #14a86d !important;
}

body .shipnow-rate-detail-dialog .shipnow-route-node-destination {
  border-left: 4px solid #f36a3d !important;
}

body .shipnow-rate-detail-dialog .shipnow-route-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1f78d1 !important;
}

body .shipnow-rate-detail-dialog .shipnow-route-facts {
  margin: 0 12px 12px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body .shipnow-rate-detail-dialog .shipnow-route-facts div {
  min-height: 68px !important;
  padding: 12px 14px !important;
  border: 1px solid #e1ebf6 !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
}

body .shipnow-rate-detail-dialog .shipnow-customer-charge-card {
  margin: 12px !important;
  padding: 14px 16px !important;
  border: 1px solid #bae8ca !important;
  border-radius: 8px !important;
  background: #f0fff6 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 4px 12px !important;
}

body .shipnow-rate-detail-dialog .shipnow-charge-list {
  max-height: 344px !important;
  overflow: auto !important;
  padding: 0 12px 12px !important;
}

body .shipnow-rate-detail-dialog .shipnow-charge-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 130px 70px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 44px !important;
  padding: 9px 8px !important;
  border-bottom: 1px solid #edf3fa !important;
}

body .shipnow-rate-detail-dialog .shipnow-charge-empty {
  margin-top: 8px !important;
  padding: 8px 10px !important;
  border: 1px dashed #c8d8eb !important;
  border-radius: 6px !important;
  background: #f8fbff !important;
  color: #667d9b !important;
}

@media (max-width: 1100px) {
  body .shipnow-rate-detail-dialog .shipnow-selected-detail-panel {
    grid-template-columns: 1fr !important;
  }
  body .shipnow-rate-detail-dialog .shipnow-rate-metrics-strip {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }
}
/* Toggle: pull further off the sidebar edge. */
body .shipnow-rate-shop-sidebar .shipnow-rate-view-toggle {
  margin-right: 44px !important;
}

/* ==========================================================================
   Rail: carrier spread panel. Fills the dead space under Items with the one
   comparison the rate list cannot make — carrier vs carrier, cheapest first.
   ========================================================================== */
body .shipnow-rate-shop-sidebar .rate-shop-spread {
  flex: 0 0 auto !important;
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid #e7eef7 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-head .rate-shop-items-title {
  margin: 0 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-range {
  color: #7a8da8 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-row {
  display: grid !important;
  grid-template-areas: "top top" "bar bar" "count count" !important;
  gap: 5px !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-top {
  grid-area: top !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 22px !important;
  min-width: 0 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-mark img {
  max-width: 68px !important;
  max-height: 22px !important;
  width: auto !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-initials {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 30px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border: 1px solid #e2eaf4 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  color: #44586f !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-price {
  color: #1d2a44 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-row.is-best .rate-shop-spread-price {
  color: #17833f !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-bar {
  grid-area: bar !important;
  position: relative !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #eef3f9 !important;
  overflow: hidden !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-fill {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #8fb6dd, #5f93c7) !important;
  transition: width 420ms cubic-bezier(0.2, 0.7, 0.3, 1) !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-row.is-best .rate-shop-spread-fill {
  background: linear-gradient(90deg, #4fc287, #17833f) !important;
}

body .shipnow-rate-shop-sidebar .rate-shop-spread-count {
  grid-area: count !important;
  color: #93a3b8 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Header: separate the facts strip from the Table/Cards toggle.
   The summary is `flex: 1 1 auto`, so it grows right up to the toggle and the
   two read as one control. A gap plus a hairline divider breaks them apart. */
body .shipnow-rate-shop-sidebar .shipnow-rate-header-facts {
  padding-right: 6px !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-view-toggle {
  margin-left: 30px !important;
  margin-right: 44px !important;
  position: relative !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-view-toggle::before {
  content: "" !important;
  position: absolute !important;
  left: -16px !important;
  top: 50% !important;
  width: 1px !important;
  height: 24px !important;
  transform: translateY(-50%) !important;
  background: #dde6f1 !important;
}

/* Close pinned left without a spacer element: `margin-right:auto` on the first
   flex child eats the free space, so the button cannot depend on a sibling
   span picking up `flex:1`. Also drops the shared `.btn`/`.btnCloseCss`
   classes, so no other stylesheet in the app can reach this button. */
body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer {
  justify-content: flex-end !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer > .shipnow-rate-close-btn {
  order: -1 !important;
  margin-right: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 118px !important;
  height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #5b6c85 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer > .shipnow-rate-close-btn:hover {
  border-color: #e0a3a0 !important;
  background: #fdf3f2 !important;
  color: #c23b34 !important;
}

/* ==========================================================================
   Rate-shop header close: flush top-right corner of the panel.
   Close sits OUTSIDE the padded flex row, absolute on .shipnow-rate-header-bar.
   ========================================================================== */
body .p-sidebar.shipnow-rate-shop-sidebar .p-sidebar-header,
body .p-drawer.shipnow-rate-shop-sidebar .p-drawer-header,
body .shipnow-rate-shop-sidebar.p-sidebar .p-sidebar-header,
body .shipnow-rate-shop-sidebar.p-drawer .p-drawer-header {
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  min-height: 76px !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-header-bar {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-header-bar > .siderbar-header-container {
  position: static !important;
  width: 100% !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 0 56px 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-header-close {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  min-width: 56px !important;
  height: auto !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid #c2ccd9 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #55677f !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 130ms ease, color 130ms ease !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-header-close i {
  font-size: 17px !important;
  line-height: 1 !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-header-close:hover {
  background: #e5342b !important;
  color: #ffffff !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-header-close:focus-visible {
  outline: 2px solid #1f78d1 !important;
  outline-offset: -2px !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-view-toggle {
  margin-right: 0 !important;
}

body .shipnow-rate-shop-sidebar .shipnow-rate-shop-footer {
  justify-content: flex-end !important;
}