@import url("global-variables.css");




/*----------------------------------------------------

How To - Notes on Implementation

----------------------------------------------------*/


/*----------------------------------------------------
Replacing Icons Icon
----------------------------------------------------*/
/*
Replacing icons with custom svgs (like in the dropdown / k-dropdownlist):

#test::before {
	content: url("data:image/svg+xml; utf8, <svg ... code here</svg>");
	width: 200px;
	height: 200px;
}

Pull the svg code from Figma
You MUST reformat the svg code. You can use this: 
https://yoksel.github.io/url-encoder/

Source: 
https: //stackoverflow.com/questions/19255296/is-there-a-way-to-use-svg-as-content-in-a-pseudo-element-before-or-after#answer-29276505

*/








/*----------------------------------------------------

Testing Elements

---------------------------------------------------
#blazor-error-ui {

    display: none;


    position: fixed;
    bottom: 0;
    width: 100%;
    gap: var(--spacing-mode-spacing-complex-component-base, 1rem);
    padding: var(--spacing-mode-spacing-complex-component-base, 1rem);
}
#blazor-error-ui > * {
    display: flex;
    margin: 0;
    gap: var(--spacing-mode-spacing-complex-component-small, 0.5rem);
}
-*/



/* Commenting out whilw working only 11/18/24
#blazor-error-ui {
	position: fixed;
	width: 100%;
	z-index: 1000;
	bottom: 0;
	display: none;
    padding: var(--spacing-mode-spacing-complex-component-base, 1rem);
}
#blazor-error-ui > * {
    margin: unset;
    display: inline-block;
}
#blazor-error-ui a.dismiss {
	cursor: pointer;
    border: none;
    float: right;
}
*/


/* User ID for testing */
.accountID-forTesting {
    display: block;
    position: absolute;
    top: 0;
    right: 1.5rem;
    z-index: 100000;
    padding: 0.125rem 0.5rem;
    letter-spacing: 1px !important;
    background: #FFCAB1;
}








/*----------------------------------------------------

Resets / Basic Layout

----------------------------------------------------*/
html,
body {
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    background: #f8fafb; /* NOTE - this is the correct color; Figma has an incorrect variable used */
}
#app,
.k-drawer-container,
.k-drawer-content {
    display: flex;
    flex: 1 1 auto;
}
main {
    all: unset;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.holman-drawer-desktop article {
	width: 100%;
    padding: var(--spacing-mode-spacing-page-large, 1.5rem);
}
.article-content,
.k-tabstrip-content-inner-wrapper {
    gap: var(--spacing-mode-spacing-page-base, 1rem) !important;
}


/* resetting bootstrap layouts to match our new layouts */
.row {
	padding: 0 0 var(--spacing-mode-spacing-component-base, 1rem) 0 !important;
	margin: 0;
}
.row.p-0 {
	padding: 0 !important;
}
.rowHorizontal,
.rowVertical {
	display: flex !important;
	flex: 1 1 auto;
	width: 100%;
	gap: var(--spacing-mode-spacing-page-large, 1.5rem);
	justify-content: space-between;
	align-items: center; /* vertical */
}
.rowHorizontal-noGap {
	margin-top: -1rem !important;
}
.rowVertical {
	flex-direction: column !important;
	gap: var(--spacing-mode-spacing-component-small, 0.5rem) !important;
	align-items: unset;
}
.rowVertical-noGap {
	gap: 0 !important;
}
.rowVertical-smallTopGap {
	margin-top: -0.5rem !important;
}
.k-card-body .rowHorizontal .col {
	justify-content: space-between;
}
.col {
	display: flex;
	gap: var(--spacing-mode-spacing-component-base, 1rem);
}
.col-noGap {
	display: flex;
	gap: 0;
}
@media (max-width: 575.99px) {
	.row-vp {
		flex-direction: column;
		gap: var(--spacing-mode-spacing-component-small, 0.5rem) !important;
	}
}


.filters-section-left .k-dropdownlist.k-picker {
    width: 100%;
    max-width: 250px;
}
.filters-section-left,
.filters-switch {
    gap: var(--spacing-mode-spacing-page-small, 0.5rem);
}



/* Page Height - Left nav is fixed while content can scroll vertically and horizontally */
/* Layout */
main > .k-drawer-container.k-drawer-push.app-container > .k-drawer.telerik-blazor.k-drawer-start {
	position: fixed;
	height: 100svh;
	z-index: 100;
}







/*----------------------------------------------------

Left Nav Navigation - Desktop

----------------------------------------------------
li.vendorname-li {
	display: none;
}
*/

@media (min-width: 768px) {

main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper {
	width: unset !important;
	display: flex;
	flex: 1 1 auto;
}
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-title {
	display: flex;
	padding: 1rem 1rem var(--spacing-mode-spacing-complex-component-small, 0.5rem) 1rem;
	align-items: center;
	gap: 0.35rem;
}
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-title .logo {
	width: 57px;
	height: 13px;
	margin-top: -1px;
}
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-title span {
	font-family: var(--heading-font-family, "Poppins");
	font-size: var(--body-regular-font-size, 16px);
	line-height: var(--body-regular-line-height, 24px);
	font-weight: var(--body-regular-font-weight, 400);
	letter-spacing: var(--body-regular-letter-spacing, 0);
	font-style: var(--body-regular-font-style, normal);

	color: var(--color-mode-text-inverse-primary, #FFF);
}


main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-container.menubar {
 	display: flex;
 	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;

	padding: 0.5rem;
 }
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-container.menubar .menubar-body,
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-container.menubar .menubar-footer {
 	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-container.menubar .menubar-body .k-drawer-items,
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-container.menubar .menubar-footer .k-drawer-items {
 	display: flex;
	flex-direction: column;
	gap: var(--spacing-mode-spacing-complex-component-xsmall, 0.25rem);
}
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-container.menubar .menubar-body .k-drawer-item,
.k-drawer-container.k-drawer-expanded.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .k-drawer-items .k-drawer-item,
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-container.menubar .menubar-footer .k-drawer-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-mode-spacing-complex-component-small, 0.5rem);

	margin: unset !important;
	padding: var(--spacing-mode-spacing-complex-component-xsmall, 0.25rem) var(--spacing-mode-spacing-complex-component-small, 0.5rem);

	border-radius: var(--spacing-mode-spacing-complex-component-small, 0.5rem);
}



/* Menu Items */
main > .k-drawer-container.k-drawer-push .k-drawer-item .material-symbols-outlined,
main > .k-drawer-container.k-drawer-push .k-drawer-item .k-item-text,

main > .k-drawer-container.k-drawer-push .k-drawer-item.k-selected:hover .material-symbols-outlined,
main > .k-drawer-container.k-drawer-push .k-drawer-item.k-selected:hover .k-item-text{
	color: var(--color-mode-icon-inverse, #fff) !important;
}
main > .k-drawer-container.k-drawer-push .k-drawer-item .k-item-text ,
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item .k-item-text {
	font-family: var(--body-small-bold-font-family, "Source Sans Pro");
	font-size: var(--body-small-bold-font-size, 0.875rem);
	font-style: var(--body-small-bold-font-style, normal);
	font-weight: 500;
	line-height: var(--body-small-bold-line-height, 1.25rem);
	letter-spacing: var(--body-small-bold-letter-spacing);
}
main > .k-drawer-container.k-drawer-push .k-drawer-item.k-selected {
	border-radius: 8px;
	background: var(--color-primitives-blue-200, #8ABAD7) ;
}
main > .k-drawer-container.k-drawer-push .k-drawer-item.k-selected .material-symbols-outlined,
main > .k-drawer-container.k-drawer-push .k-drawer-item.k-selected .k-item-text {
	color: var(--color-mode-text-primary, #242627) !important;
}
main > .k-drawer-container.k-drawer-push .k-drawer-item .material-symbols-outlined {
	font-size: 1rem;
}
main > .k-drawer-container.k-drawer-push .k-drawer-item:hover,
main > .k-drawer-container.k-drawer-push .k-drawer-item.k-selected:hover,
.k-drawer-container.k-drawer-expanded.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .k-drawer-items .k-drawer-item:hover {
	background: var(--color-primitives-blue-700, #004b78);
}


/* Expand / Collapse Button - expand and collapse states below */
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-container.menubar .chevron-wrapper-expanded,
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-container.menubar .chevron-wrapper-collapsed {
	display: flex;

	position: fixed;
	bottom: 10px;

	width: 1.5rem;
	height: 1.5rem;

	background: var(--tokens-color-blue-900, #002C46);
	border-radius: 4px;
	border: 1px solid var(--color-mode-border-primary, #E9EBEC);
}
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-container.menubar .chevron-wrapper-expanded .chevron-box,
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-container.menubar .chevron-wrapper-collapsed .chevron-box {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	align-items: center;
}
/* Button Animations
https: //animista.net/play/basic/slide/slide-right */
.slide-right,
.chevron-wrapper-expanded {
	-webkit-animation: slide-right 0.35s cubic-bezier(0.250, 0.460, 0.450, 1) both;
	animation: slide-right 0.35s cubic-bezier(0.250, 0.460, 0.450, 1) both;
}
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(203px);
            transform: translateX(203px);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(203px);
            transform: translateX(203px);
  }
}
.slide-left,
.chevron-wrapper-collapsed {
	-webkit-animation: slide-left 0.35s cubic-bezier(0.250, 0.460, 0.450, 1) both;
	animation: slide-left 0.35s cubic-bezier(0.250, 0.460, 0.450, 1) both;
}
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(203px);
            transform: translateX(203px);
  }
  100% {
    -webkit-transform: translateX(28px);
            transform: translateX(28px);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(203px);
            transform: translateX(203px);
  }
  100% {
    -webkit-transform: translateX(28px);
            transform: translateX(28px);
  }
}

}


/* -----------------------------------
Left Nav Expanded
----------------------------------- */
main > .k-drawer-container.k-drawer-push.app-container.k-drawer-expanded > .k-drawer.telerik-blazor.k-drawer-start {
	position: fixed; /* removed this at horizontal scroll fix */
	width: 14rem;
}
main > .k-drawer-container.k-drawer-push.app-container.k-drawer-expanded > .k-drawer-content {
	margin-left: 14rem; /* removed this at horizontal scroll fix */
}


/* -----------------------------------
Left Nav Collapsed
----------------------------------- */
main > .k-drawer-container.k-drawer-push.app-container.k-drawer-mini.holman-drawer-desktop > .k-drawer.telerik-blazor.k-drawer-start {
	width: 3rem;
}
main > .k-drawer-container.k-drawer-push.app-container.k-drawer-mini.holman-drawer-desktop > .k-drawer-content {
	margin-left: 3rem;
}
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-title .logoh {
	display: flex;
	justify-content: center;
}
main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-container.menubar .chevron-wrapper-collapsed {
	/*
	left: 34px;
	*/
}
main > .k-drawer-container.k-drawer-push.k-drawer-mini .k-drawer-wrapper .drawer-container ul.k-drawer-mini-items {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	gap: 4px;
}
main > .k-drawer-container.k-drawer-push.k-drawer-mini .k-drawer-wrapper .drawer-container ul.k-drawer-mini-items li.k-drawer-item {
	width: 32px;
	height: 32px;
	padding: 0 !important;
	margin: 0;
	display: flex;
	justify-content: center;
}
main > .k-drawer-container.k-drawer-push.k-drawer-mini .k-drawer-wrapper .drawer-container ul.k-drawer-mini-items li.vendorname-li {
	/*
	If want to truncate on collapse
	max-height: 20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 32px;
	*/
	display: none;
}
main > .k-drawer-container.k-drawer-push.k-drawer-mini .k-drawer-wrapper .drawer-container ul.k-drawer-mini-items li.k-drawer-item .k-item-text {
	display: none;
	-webkit-animation: slide-left 0.35s cubic-bezier(0.250, 0.460, 0.450, 1) both;
	animation: slide-left 0.35s cubic-bezier(0.250, 0.460, 0.450, 1) both;
}
main > .k-drawer-container.k-drawer-push .k-drawer-item .material-symbols-outlined {
	margin-left: -2px;
}



@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(203px);
            transform: translateX(203px);
  }
  100% {
    -webkit-transform: translateX(28px);
            transform: translateX(28px);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(203px);
            transform: translateX(203px);
  }
  100% {
    -webkit-transform: translateX(28px);
            transform: translateX(28px);
  }
}
/*----------------------------------------------------

Nav Navigation - Mobile

Note - this could be in a media query, but b/c of 
class .holman-drawer-mobile, it should not need to be
----------------------------------------------------*/




/*----------------------------------------------------
Mobile Nav
----------------------------------------------------*/


/*---------------------------------------------------------------------------------- NOT DONE Mobile Nav */
/* pulled directly from old file 
.holman-drawer-mobile .k-drawer,
.holman-drawer-mobile .drawer-container,
.holman-drawer-mobile .k-drawer-wrapper {
	border-color: #F1F5F7;
	color: #242627;
	background-color: #FFFFFF;
	width: 100vw !important;
	height: calc(100svh - 68px);
	font-family: "Source Sans Pro";
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px;
}
.holman-drawer-mobile .drawer-container {
	width: calc(100vw - 16px) !important;
	margin: 8px;
}
.holman-drawer-mobile .k-drawer-item {
	padding: 16px 8px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	border-bottom: 1px solid #E9EBEC;
}
.holman-drawer-mobile .k-drawer-item.k-selected {
	color: #FFFFFF;
	background-color: #002c46;
	border-radius: 8px;
}*/

/* --------------- */
.k-drawer-mini .k-drawer.k-drawer-end {
	display: none !important;
}
main > .holman-mobileappbar.k-appbar-sticky.k-appbar {
	display: flex;
	justify-content: space-between;
	overflow: visible;
	background: var(--color-primitives-blue-900, #002C46);
	z-index: 1001;
}

main > .holman-mobileappbar.k-appbar-sticky.k-appbar {
	padding: var(--spacing-mode-spacing-component-base, 1rem);
	box-shadow: none;
}
main > .k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper {
	width: unset !important;
}
/* Animate menu opening and closing 
https: //animista.net/play/basic/slide/slide-bottom */
main > .k-drawer-container.k-drawer-mini.app-container.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper {
	height: 0%;
}
.slide-bottom,
main > .k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper {
	display: block;
	height: 100%;
	-webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}



main > .k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile,
main > .k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile .k-drawer-end,
main > .k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper,
main > .k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar,
main > .k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar .menubar-body,
main > .k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar .menubar-body ul.k-drawer-items,
main > .k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar .menubar-footer ul.k-drawer-items {
	all: unset;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
}

main > .k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar {
	margin: var(--spacing-mode-spacing-component-small, 0.5rem);
}
main > .k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar  {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile > div + div {
	display:  none !important;
}

/* all items */
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item {
	border-radius: 8px;
}
/* Selected / Active Item */
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item.k-selected {
	background: var(--color-primitives-blue-900, #002C46);
}
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item.k-selected .k-item-text,
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item.k-selected .material-symbols-outlined {
	color: #fff;
}
/* Hover */
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item:focus, 
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item.k-selected:focus,
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item:hover, 
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item.k-selected:hover {
	background: #004b78;
	color: #fff;
}
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item:focus .k-item-text, 
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item.k-selected:focus .k-item-text,
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item:hover .k-item-text, 
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item.k-selected:hover .k-item-text,

main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item:focus .material-symbols-outlined, 
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item.k-selected:focus .material-symbols-outlined,
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item:hover .material-symbols-outlined, 
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item.k-selected:hover .material-symbols-outlined {
	background: #004b78;
	color: #fff;
}
 

/* main, top nav items */
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar .menubar-body {
	margin-bottom: var(--spacing-mode-spacing-component-small, 0.5rem) !important;
}
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar .menubar-body ul.k-drawer-items li.k-drawer-item {
	display: flex;
	padding: 16px 8px;
	gap: var(--spacing-mode-spacing-component-small, 0.5rem);
	align-self: stretch;
}
/* footer nav items */
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar .menubar-footer {
	margin-top: var(--spacing-mode-spacing-component-small, 0.5rem);
}
main > .k-drawer-container.k-drawer-expanded.app-container.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar .menubar-footer ul.k-drawer-items {
	gap: 0;
}
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar .menubar-footer ul.k-drawer-items li.k-drawer-item {
	display: flex;
	margin: 1px 0;
	border-bottom: 1px solid var(--color-mode-border-primary, #E9EBEC);
	padding: 8px;
	gap: var(--spacing-mode-spacing-component-small, 0.5rem); 
	align-self: stretch;
}
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar .menubar-footer ul.k-drawer-items li.k-drawer-item:first-of-type {
	margin-top: 0;
}
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar .menubar-footer ul.k-drawer-items li.k-drawer-item:last-of-type {
	margin-bottom: 0;
	border-bottom: none;
}
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item .k-item-text {
	font-family: var(--body-small-bold-font-family, "Source Sans Pro");
	font-size: var(--body-small-bold-font-size, 0.875rem);
	font-style: var(--body-small-bold-font-style, normal);
	font-weight: 500;
	line-height: var(--body-small-bold-line-height, 1.25rem);
	letter-spacing: var(--body-small-bold-letter-spacing);

	color: var(--color-mode-text-primary, #242627);
}
main > .k-drawer-expanded.holman-drawer-mobile .k-drawer-end .k-drawer-wrapper .drawer-container.holman-drawer-mobile.menubar ul.k-drawer-items li.k-drawer-item .material-symbols-outlined {
	font-size: 1rem;
	line-height: 20px;
}




/*----------------------------------------------------

Mobile Styles

----------------------------------------------------*/



















/*----------------------------------------------------

Loading Animation

----------------------------------------------------*/
.loading-progress {
	position: relative;
	display: block;
	width: 8rem;
	height: 8rem;
	margin: 20vh auto 1rem auto;
}
.loading-progress circle {
	fill: none;
	stroke: #e0e0e0;
	stroke: var(--color-mode-CTA-primary-fill-default, #0169A7);
	stroke-width: 0.6rem;
	transform-origin: 50% 50%;
	transform: rotate(-90deg);
}
.loading-progress circle:last-child {
	stroke: var(--color-mode-CTA-primary-fill-default, #0169A7);
	stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
	transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
	position: absolute;
	text-align: center;
	/*
	font-weight: bold;
	*/
	inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
	font-family: var(--body-small-bold-font-family);
	font-size: var(--body-small-bold-font-size);
	font-style: var(--body-small-bold-font-style);
	font-weight: var(--body-small-bold-font-weight);
	line-height: var(--body-small-bold-line-height);
	letter-spacing: var(--body-small-bold-letter-spacing);
}
.loading-progress-text:after {
	content: var(--blazor-load-percentage-text, "Loading");
	padding-left: 8px;
}




/*----------------------------------------------------

Typography

----------------------------------------------------*/
html, body {
	font-family: var(--body-font-family, "Source Sans Pro");
	color: var(--textregular, #242627);
	font-synthesis: none !important;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--heading-font-family, "Poppins");
    /* Margins aren't used in page layouts - gap is used instead 
	margin: var(--heading-margin);
    */
    margin: 0;
}
/* h1 = brand h3 */
h1 {
	font-size: var(--heading-heading-3-28px-font-size, 28px);
	line-height: var(--heading-heading-3-28px-line-height, 36px);
	font-weight: var(--heading-heading-3-28px-font-weight, 500);
	letter-spacing: var(--heading-heading-3-28px-letter-spacing, 0);
	font-style: var(--heading-heading-3-28px-font-style, normal);
}
h1:focus {
    outline: none;
}
/* h2 = brand h5 */
h2 {
	font-size: var(--heading-heading-5-20px-font-size, 20px);
	line-height: var(--heading-heading-5-20px-line-height, 28px);
	font-weight: var(--heading-heading-5-20px-font-weight, 500);
	letter-spacing: var(--heading-heading-5-20px-letter-spacing, 0);
	font-style: var(--heading-heading-5-20px-font-style, normal);
}
/* h3 = brand h6 */
h3 {
	font-size: var(--heading-heading-6-18px-font-size, 18px);
	line-height: var(--heading-heading-6-18px-line-height, 24px);
	font-weight: var(--heading-heading-6-18px-font-weight, 500);
	letter-spacing: var(--heading-heading-6-18px-letter-spacing, 0);
	font-style: var(--heading-heading-6-18px-font-style, normal);
}
h4 {
	font-size: var(--heading-heading-4-24px-font-size, 24px);
	line-height: var(--heading-heading-4-24px-line-height, 32px);
	font-weight: var(--heading-heading-4-24px-font-weight, 500);
	letter-spacing: var(--heading-heading-4-24px-letter-spacing, 0);
	font-style: var(--heading-heading-4-24px-font-style, normal);
}
h5 {
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 28px;
	/* 140% */
}
h6 {
	font-family: "Poppins";
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px; /* 133.333% */
}
p,
.regular {
	/*
	margin: var(--p-margin); Figma has this variable - but layout for Holman Orders / Vendor Portal shows that no type elements have padding or margin.
	*/
	margin: 0;
	padding: 0;
	font-size: var(--body-regular-font-size, 16px);
	line-height: var(--body-regular-line-height, 24px);
	font-weight: var(--body-regular-font-weight, 400);
	letter-spacing: var(--body-regular-letter-spacing, 0);
	font-style: var(--body-regular-font-style, normal);
}
p.p-title {
	font-family: "Poppins";
	font-size: var(--body-regular-font-size, 16px);
	line-height: var(--body-regular-line-height, 24px);
	font-weight: var(--body-regular-font-weight, 400);
	letter-spacing: var(--body-regular-letter-spacing, 0);
	font-style: var(--body-regular-font-style, normal);
}
@media (max-width: 767.99px) {
	main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-title .logo,
	.holman-mobileappbar img.logo  {
		width: 58px;
		height: 13.4667px;
		margin-top: -1px;
		margin-right: 4px;
	}
	main > .k-drawer-container.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .drawer-title span,
	.holman-mobileappbar .drawer-title span {
		font-family: "Poppins";
		font-size: var(--body-regular-font-size, 16px);
		line-height: var(--body-regular-line-height, 24px);
		font-weight: var(--body-regular-font-weight, 400);
		letter-spacing: var(--body-regular-letter-spacing, 0);
		font-style: var(--body-regular-font-style, normal);

	}
}
.largeRegular {
	font-size: var(--body-large-regular-font-size, 18px);
	line-height: var(--body-large-regular-line-height, 24px);
	font-weight: var(--body-large-regular-font-weight, 400);
	letter-spacing: var(--ody-large-regular-letter-spacing, 0);
	font-style: var(--body-large-regular-font-style, normal);
}
.largeBold {
	font-size: var(--body-large-bold-font-size, 18px);
	line-height: var(--body-large-bold-line-height, 24px);
	font-weight: var(--body-large-bold-font-weight, 600);
	letter-spacing: var(--ody-large-bold-letter-spacing, 0);
	font-style: var(--body-large-bold-font-style, normal);
}
.largeItalic {
    font-size: var(--body-large-italic-font-size, 18px);
    line-height: var(--body-large-italic-line-height, 24px);
    font-weight: var(--body-large-italic-font-weight, 400);
    letter-spacing: var(--ody-large-italic-letter-spacing, 0);
    font-style: var(--body-large-italic-font-style, italic);
}
small,
.small {
	font-family: var(--body-small-regular-font-family, "Source Sans Pro");
	font-size: var(--body-small-regular-font-size, 14px);
	line-height: var(--body-small-regular-line-height, 20px);
	font-weight: var(--body-small-regular-font-weight, 400);
	letter-spacing: var(--body-small-regular-letter-spacing, 0);
	font-style: var(--body-small-regular-font-style, normal);
}
.small-italic {
	font-family: var(--body-small-italic-font-family, "Source Sans Pro");
	font-size: var(--body-small-italic-font-size, 14px);
	line-height: var(--body-small-italic-line-height, 20px);
	font-weight: var(--body-small-italic-font-weight, 400);
	letter-spacing: var(--body-small-italic-letter-spacing, 0);
	font-style: var(--body-small-italic-font-style, normal);
}
.small-bold {
	font-family: var(--body-small-bold-font-family, "Source Sans Pro");
	font-size: var(--body-small-bold-font-size, 14px);
	line-height: var(--body-small-bold-line-height, 20px);
	font-weight: var(--body-small-bold-font-weight, 600);
	letter-spacing: var(--body-small-bold-letter-spacing, 0);
	font-style: var(--body-small-bold-font-style, normal);
}
/*
.classyouputinthatworked {
	font-size: var(--body-small-bold-font-size, 14px) !important;
	font-weight: var(--body-small-bold-font-weight, 600) !important;
}
*/
.k-window.telerik-blazor.detailsFlyout .k-form .k-floating-label-container.holman-label-extra-small-bold {
	font-family: var(--body-extra-small-bold-font-family, "Source Sans Pro");
	font-size: var(--body-extra-small-bold-font-size, 12px) !important;
	line-height: var(--body-extra-small-bold-line-height, 16px) !important;
	font-weight: var(--body-extra-small-bold-font-weight, 600) !important;
	letter-spacing: var(--body-extra-small-bold-letter-spacing, 0);
	font-style: var(--body-extra-small-bold-font-style, normal);
}
.extra-small {
	font-family: var(--body-extra-small-regular-font-family, "Source Sans Pro");
	font-size: var(--body-extra-small-regular-font-size, 12px);
	line-height: var(--body-extra-small-regular-line-height, 16px);
	font-weight: var(--body-extra-small-regular-font-weight), 400;
	letter-spacing: var(--body-extra-small-regular-letter-spacing, 0);
	font-style: var(--body-extra-small-regular-font-style, normal);
}
.extra-small-bold,
label {
	font-family: var(--body-extra-small-bold-font-family, "Source Sans Pro");
	font-size: var(--body-extra-small-bold-font-size, 12px);
	line-height: var(--body-extra-small-bold-line-height, 16px);
	font-weight: var(--body-extra-small-bold-font-weight, 600);
	letter-spacing: var(--body-extra-small-bold-letter-spacing, 0);
	font-style: var(--body-extra-small-bold-font-style, normal);
}
.small.preheader {
	font-size: 0.75em;
}
.nowrap {
	white-space: nowrap;
}
a, 
.text-link {
	color: var(--color-mode-text-link-primary, #0169a7);
	text-decoration: none;
}
a:focus,
a:hover,
a:active,
button.notabutton:focus,
button.notabutton:hover,
button.notabutton:active,
.text-link:focus,
.text-link:hover,
.text-link:active {
    margin-bottom: -1px;
	/*
	color: var(--color-mode-text-link-primary);
	border-bottom: 1px solid var(--color-mode-text-link-primary);
	*/
	color: #003057;
	border: none;
	text-decoration: none;
}
strong {
	font-weight: 600;
}
em {
	font-style: italic;
}
code {
	color: #c02d76;
}
/* 
Color 
*/
.text-success,
.k-text-success {
	color: var(--color-mode-text-success, #117b26) !important;
}
.text-warning,
.k-text-warning {
	color: var(--color-mode-surface-accent-warning, #AB6D11) !important;
}
.text-danger,
.k-text-error {
	color: var(--color-mode-text-danger, #860212) !important;
}
.text-danger-soft,
.k-text-error-soft,
.validationMessage-error.text-danger-soft {
	color: #EBB1B8 !important;
}

.validation-row {
	display: block;
	clear: both; /* ensures we start on a fresh line */
	margin-top: 0.25rem; /* small spacing below the input */
	text-align: right; /* match your previous right alignment */
}

.text-info,
.k-text-info {
 	color: var(--color-mode-text-info, #003a5c) !important;
 }
.text-info-alt,
.k-text-nfo-alt {
 	color: var(--color-mode-text-info-alt, #242627) !important;
 }
.text-disabled,
.k-text-disabled {
 	color: var(--color-mode-text-info, #a4adb2) !important;
 }










/*----------------------------------------------------

Notifications

----------------------------------------------------*/

.k-notification.telerik-blazor {
	margin-bottom: 0 !important;
	display: flex;
	padding: 0.5rem;
	align-items: center;
	gap: 0.5rem;
	align-self: stretch;
	border: 0;
	box-shadow: none;
	border-radius: 0.25rem;
}
/*
.k-notification-group.pagesectionalert div
*/
.k-notification-group div {
	width: 100%;
	display: flex;
	font-family: var(--body-small-regular-font-family);
	font-size: var(--body-small-regular-font-size);
	font-style: var(--body-small-regular-font-style);
	font-weight: var(--body-small-regular-font-weight);
	line-height: var(--body-small-regular-line-height);
	letter-spacing: var(--body-small-regular-letter-spacing);
}
.k-notification-group {
	max-height: 100%;
	display: inline-flex;
	flex-flow: column-reverse wrap;
	position: unset;
	gap: .5rem 0;
	width: 100%;
	flex-wrap: initial !important;
}
.k-notification.telerik-blazor.k-notification-Success,
.alertSuccess { /* Success -Green */
	color: var(--color-primitives-green-green-700);
	background: var(--color-primitives-green-green-50);
}
.k-notification.telerik-blazor.k-notification-Warning,
.alertWarning { /* Warning - Yellow */
	color: var(--color-primitives-orange-orange-800);
	background: var(--color-primitives-orange-orange-50);
}
.k-notification.telerik-blazor.k-notification-Error,
.k-notification-Error,
.alertError { /* Error - Red */
	color: var(--color-primitives-red-red-700);
	background: var(--color-primitives-red-red-50);
}
.k-notification.telerik-blazor.k-notification-Info,
.alertInfo { /* Info - Blue */
	color: var(--color-primitives-blue-700);
	background: var(--color-primitives-blue-50);
}
.k-notification.telerik-blazor .k-notification-content p {
	align-self: center;
}



/*----------------------------------------------------

Badges / Chips

How to use telerik:
- Telerik's default is medium size, but our default is small size. So we must set the size in the component:
Size="sm" or Size="md" or Size="lg"
			<TelerikChipList Data="@ChipListSource"
                     Size="sm">
            </TelerikChipList>
If we do not set the size, then keeping straight which size we actually want to use - that will become a mess
- DueDateStatusChip template has Size="sm" built in, DueDateStatusChip.razor
https: //docs.telerik.com/blazor-ui/components/chiplist/appearance#size

----------------------------------------------------*/
/* General */
.k-chip,
.k-chip.k-rounded-md.k-chip-solid-base,
.ordertype,
.k-chip.ordertype.k-rounded-md.k-chip-solid-base,
.ordertype.k-chip,
.ordertype.k-chip.k-chip-solid-base,
.ordertype.k-chip.k-rounded-md {
	display: inline-flex;
	padding: 0.125rem var(--spacing-mode-spacing-component-small, 0.5rem);
	justify-content: center;
	align-items: center;
	gap: var(--spacing-mode-spacing-component-xsmall, 0.25rem);
	font-style: var(--body-extra-small-bold-font-style, normal);
	font-weight: var(--body-extra-small-bold-font-weight, 600);
	letter-spacing: var(--body-extra-small-bold-letter-spacing, 0);
	text-align: center;
	border-radius: var(--tokens-spacing-border-radius-huge, 3rem);
}
.k-window.telerik-blazor.detailsFlyout .k-window-content .header-with-chip,
.header-with-chip { /* was .orderId - aligning header with chip, vertically */
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0 0 1.5rem 0 !important;
    margin: 0 !important;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content .header-with-chip h1,
.k-window.telerik-blazor.detailsFlyout .k-window-content .header-with-chip h2,
.k-window.telerik-blazor.detailsFlyout .k-window-content .header-with-chip h3,
.k-window.telerik-blazor.detailsFlyout .k-window-content .header-with-chip h4,
.header-with-chip h1,
.header-with-chip h2,
.header-with-chip h3,
.header-with-chip h4 {
	margin: 0 !important;
}

/*
Size 
*/
/* Small - Default */ /* NOTE - telerik's default is medium (.k-chip.md, see above for how to change) */
.chip-small,
.k-chip.k-rounded-md.k-chip-solid-base.chip-small {
	padding: 
		var(--spacing-mode-spacing-component-tiny, 0.125rem) 
		var(--spacing-mode-spacing-component-small, 0.5rem);  /* Figma has spacing tiny as --2 */
	gap: 
		var(--spacing-mode-spacing-component-xsmall, 0.25rem);
	font-family: var(--body-extra-small-bold-font-family, "Source Sans Pro");
	font-size: var(--body-extra-small-bold-font-size, 0.75rem);
	line-height: var(--body-extra-small-bold-line-height, 1rem);
}
/* Medium */
.chip-medium,
.k-chip.k-rounded-md.k-chip-solid-base.chip-medium {
	padding: 
		var(--spacing-mode-spacing-component-xsmall, 0.25rem) 
		var(--spacing-mode-spacing-component-small, 0.5rem);
	gap: 
		var(--spacing-mode-spacing-component-xsmall, 0.25rem);
	font-family: var(--body-extra-small-bold-font-family, "Source Sans Pro");
	font-size: var(--body-extra-small-bold-font-size, 0.75rem);
	line-height: var(--body-extra-small-bold-line-height, 1rem);
}
/* Large */
.chip-large,
.k-chip.k-rounded-md.k-chip-solid-base.chip-large {
	padding: 
		var(--spacing-mode-spacing-component-xsmall, 0.25rem) 
		var(--spacing-mode-spacing-component-small, 0.5rem);
	gap: 
		var(--spacing-mode-spacing-component-xsmall, 0.25rem);
	font-family: var(--body-small-bold-font-family, "Source Sans Pro");
	font-size: var(--body-small-bold-font-size, 0.875rem);
	line-height: var(--body-small-bold-line-height, 1.25rem);
}
.chip-icon-small {
	font-size: 16px !important;
}


/* Hand cursor only on the chip close/remove icon */
.k-chip-actions {
	cursor: pointer !important;
}
/*----------------------------------------------------
Badges / Chips - Variations / Emphasis 
----------------------------------------------------*/


/* 
QUESTIONS
What is just .ordertype?
 */

/*--------------------------- 
Subtle (pastel solid background)
----------------------------*/
/* 
Subtle - Red - Error
.ordertype - .overdue 
*/
.chip-subtle-error,
.k-chip.k-rounded-md.k-chip-solid-base.chip-subtle-error {
	color: var(--color-mode-text-danger, #860212);
	background: var(--color-mode-surface-accent-error-subtle, #F8E6E8);
}
.chip-icon-subtle-error,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-subtle-error {
	color: var(--color-mode-icon-error, rgba(134, 2, 18, 1));
	fill: var(--color-mode-icon-error, rgba(134, 2, 18, 1));
}
/* 
Subtle - Yellow - Warning
.ordertype - .duesoon
*/
.chip-subtle-warning,
.k-chip.k-rounded-md.k-chip-solid-base.chip-subtle-warning {
	color: var(--color-mode-text-warning, #85550D);
	background: var(--color-mode-surface-accent-warning-subtle, #FEF5E8);
}
.chip-icon-subtle-warning,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-subtle-warning {
	color: var(--color-mode-icon-warning, rgba(171, 109, 17, 1));
	fill: var(--color-mode-icon-warning, rgba(171, 109, 17, 1));
}
/* 
Subtle - Green - Success
.ordertype - .currentpo - with arrow circle type in VehicleStatus DetailsUpdate.razor
.currentpo
*/
.chip-subtle-success,
.k-chip.k-rounded-md.k-chip-solid-base.chip-subtle-success {
	color: var(--color-mode-icon-success, rgba(8, 94, 25, 1));
	background: var(--color-mode-surface-accent-success-subtle, #EEF7EF);
	
}
.chip-icon-subtle-success,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-subtle-success {
	color: var(--color-mode-icon-success, rgba(8, 94, 25, 1));
	fill: var(--color-mode-icon-success, rgba(8, 94, 25, 1));
}
/* 
Subtle - Blue - Info
.ordertype - .notyetdue
*/
.chip-subtle-info,
.k-chip.k-rounded-md.k-chip-solid-base.chip-subtle-info {
	color: var(--color-mode-text-info, #85550D);
	background: var(--color-mode-surface-accent-info-subtle, #FEF5E8);
}
.chip-icon-subtle-info,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-subtle-info {
	color: var(--color-mode-icon-info, rgba(0, 58, 92, 1));
	fill: var(--color-mode-icon-info, rgba(0, 58, 92, 1));
}
/* 
Subtle - Gray - Info II / Info Alt
.currentstage
*/
.chip-subtle-info-alt,
.k-chip.k-rounded-md.k-chip-solid-base.chip-subtle-info-alt,
.ordertype.k-chip,
.ordertype.k-chip.k-chip-solid-base,
.ordertype.k-chip.k-rounded-md {
	color: var(--color-mode-icon-primary, #242627);
	background: var(--color-mode-surface-accent-info-alt-subtle, #FEF5E8);
}
.chip-icon-subtle-info-alt,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-subtle-info-alt {
	color: var(--color-mode-icon-primary, rgba(36, 38, 39, 1));
	fill: var(--color-mode-icon-primary, rgba(36, 38, 39, 1));
}

/*--------------------------- 
Outline
----------------------------*/
/* 
Outline - Red - Error
*/
.chip-outline-error,
.k-chip.k-rounded-md.k-chip-solid-base.chip-outline-error {
	color: var(--color-mode-text-primary, rgba(36, 38, 39, 1));
	border: 1px solid var(--Surface-Accent-Error, #860212);
}
.chip-icon-outline-error,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-outline-error {
	color: var(--color-mode-surface-accent-error, rgba(134, 2, 18, 1));
	fill: var(--color-mode-surface-accent-error, rgba(134, 2, 18, 1));
}
/* 
Outline - Yellow - Warning
*/
.chip-outline-warning,
.k-chip.k-rounded-md.k-chip-solid-base.chip-outline-warning {
	color: var(--color-mode-text-primary, rgba(36, 38, 39, 1));
	border: 1px solid var(--color-mode-surface-accent-warning-subtle, #FEF5E8);
}
.chip-icon-outline-warning,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-outline-warning {
	color: var(--color-mode-icon-warning, rgba(171, 109, 17, 1));
	fill: var(--color-mode-icon-warning, rgba(171, 109, 17, 1));
}
/* 
Outline - Green - Success
*/
.chip-outline-success,
.k-chip.k-rounded-md.k-chip-solid-base.chip-outline-success {
	color: var(--color-mode-text-primary, rgba(36, 38, 39, 1));
	border: 1px solid var(--color-mode-surface-accent-success-subtle, #FEF5E8);
}
.chip-icon-outline-success,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-outline-success {
	color: var(--color-mode-icon-success, rgba(8, 94, 25, 1));
	fill: var(--color-mode-icon-success, rgba(8, 94, 25, 1));
}
/* 
Outline - Blue - Info
*/
.chip-outline-info,
.k-chip.k-rounded-md.k-chip-solid-base.chip-outline-info {
	color: var(--color-mode-text-primary, rgba(36, 38, 39, 1));
	border: 1px solid var(--color-mode-surface-accent-info-subtle, #FEF5E8);
}
.chip-icon-outline-info,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-outline-info {
	color: var(--color-mode-icon-info, rgba(0, 58, 92, 1));
	fill: var(--color-mode-icon-info, rgba(0, 58, 92, 1));
}
/* 
Outline - Gray - Info II / Info Alt
*/
.chip-outline-info-alt,
.k-chip.k-rounded-md.k-chip-solid-base.chip-outline-info-alt {
	color: var(--color-mode-text-primary, rgba(36, 38, 39, 1));
	border: 1px solid var(--color-mode-surface-accent-info-alt-subtle, #FEF5E8);
}
.chip-icon-outline-info-alt,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-outline-info-alt {
	color: var(--color-mode-icon-primary, rgba(36, 38, 39, 1));
	fill: var(--color-mode-icon-primary, rgba(36, 38, 39, 1));
}


/*--------------------------- 
Strong 
----------------------------*/
/* 
Strong - Red - Error
*/
.chip-strong-error ,
.k-chip.k-rounded-md.k-chip-solid-base.chip-strong-error{
	color: var(--color-mode-text-inverse-primary, #ffffff);
	background: var(--color-mode-surface-accent-error, rgba(134, 2, 18, 1));
}
.chip-icon-strong-error,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-strong-error {
	color: var(--color-mode-icon-inverse, #ffffff);
	fill: var(--color-mode-icon-inverse, #ffffff);
}
/* 
Strong - Yellow - Warning
*/
.chip-strong-warning,
.k-chip.k-rounded-md.k-chip-solid-base.chip-strong-warning {
	color: var(--color-mode-text-inverse-primary, #fff);
	background: var(--color-mode-surface-accent-warning, rgba(171, 109, 17, 1));
}
.chip-icon-strong-warning,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-strong-warning {
	color: var(--color-mode-icon-inverse, #ffffff);
	fill: var(--color-mode-icon-inverse, #ffffff);
}
/* 
Strong - Green - Success
*/
.chip-strong-success,
.k-chip.k-rounded-md.k-chip-solid-base.chip-strong-success {
	color: var(--color-mode-text-inverse-primary, #fff);
	background: var(--color-mode-surface-accent-success, rgba(8, 94, 25, 1));
}
.chip-icon-strong-success,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-strong-success {
	color: var(--color-mode-icon-inverse, #ffffff);
	fill: var(--color-mode-icon-inverse, #ffffff);
}
/* 
Strong - Blue - Info
*/
.chip-strong-info,
.k-chip.k-rounded-md.k-chip-solid-base.chip-strong-info {
	color: var(--color-mode-text-inverse-primary, #fff);
	background: var(--color-mode-surface-accent-info, rgba(0, 75, 120, 1));
}
.chip-icon-strong-info,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-strong-info {
	color: var(--color-mode-icon-inverse, #ffffff);
	fill: var(--color-mode-icon-inverse, #ffffff);
}
/* 
Strong - Gray - Info II / Info Alt
*/
.chip-strong-info-alt,
.k-chip.k-rounded-md.k-chip-solid-base.chip-strong-info-alt {
	color: var(--color-mode-text-inverse-primary, #fff);
	background: var(--color-mode-surface-accent-info-alt, rgba(36, 38, 39, 1));
}
.chip-icon-strong-info-alt,
.k-chip.k-rounded-md.k-chip-solid-base.chip-icon-strong-info-alt {
	color: var(--color-mode-icon-inverse, #ffffff);
	fill: var(--color-mode-icon-inverse, #ffffff);
}







/*----------------------------------------------------

Tabs - .pagemodeswitch is container
Ex: Vehicles / Driveaway

add classes
tabstrip-large
tabstrip-small
----------------------------------------------------*/
/* General */
.k-tabstrip-top > .k-tabstrip-items-wrapper {
	border: unset;
}
/* Content inside tabs */
.pagemodeswitch.k-tabstrip .k-tabstrip-content,
.pagemodeswitch.k-tabstrip .k-tabstrip-content.k-active,
.pagemodeswitch.k-tabstrip .k-tabstrip-content.k-state-active,
.pagemodeswitch.k-tabstrip .k-tabstrip-content:active {
	background: none !important;
}
.pagemodeswitch.k-tabstrip .k-tabstrip-content:focus {
	outline: none !important;
}
.k-tabstrip-items {
	gap: var(--spacing-mode-spacing-component-base, 1rem);
	border-bottom: 1px solid var(--color-mode-border-secondary, #CDD3D7);
}
.k-tabstrip-items .k-link {
	padding: unset;
}
.pagemodeswitch.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset .k-item.k-tabstrip-item .k-link {
	font-family: var(--body-large-regular-font-family, "Source Sans Pro");
	font-weight: var(--body-large-regular-font-weight, 400);
	letter-spacing: var(--body-large-regular-letter-spacing, 0);
	font-style: var(--body-large-regular-font-style, normal);

	border-bottom: 3px solid rgba(255, 255, 255, 0);
}
/*
Sizes 
*/
/* ---------------------------
Large / Default - .tabstrip-large 
---------------------------*/
.pagemodeswitch.k-tabstrip.tabstrip-large .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset .k-item.k-tabstrip-item .k-link {
	padding-bottom: var(--spacing-mode-spacing-component-small, 0.5rem) !important;
	font-size: var(--body-large-regular-font-size, 1.125rem); /* 14 px*/
	line-height: var(--body-large-regular-line-height, 1.5rem); /* 20px */
}
/*--------------------------- 
Medium - there is no Medium size 
---------------------------*/
/*--------------------------- 
Small 
---------------------------*/
.tabstrip-small {
	font-size: var(--body-small-regular-font-size, 0.875rem); /* 18 px*/
	line-height: var(--body-small-regular-line-height, 1.25rem); /* 24px */
}
/*
States - Only states are active/selected and disabled 
*/
/*--------------------------- 
Active 
---------------------------*/
.pagemodeswitch.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset .k-item.k-tabstrip-item.k-active .k-link {
	font-weight: var(--body-bold-font-weight, 600);
}
/*--------------------------- 
Disabled - https: //docs.telerik.com/blazor-ui/components/tabstrip/tabs-configuration 
---------------------------*/ 
.pagemodeswitch.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset .k-item.k-tabstrip-item.k-active .k-link, 
.pagemodeswitch.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset .k-item.k-tabstrip-item.k-state-active .k-link, 
.pagemodeswitch.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset .k-item.k-tabstrip-item:active .k-link,
.pagemodeswitch-flyout.k-button-group .k-button.k-selected {
	margin-bottom: -1px !important;
	border-bottom: 4px solid var(--color-mode-surface-selection-primary-default, #012C4F);
}
.pagemodeswitch.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset .k-item.k-tabstrip-item.k-disabled .k-link {
	color: var(--color-mode-text-disabled, rgba(164, 173, 178, 1))
}



/* Workaround - Styling Buttons as Tabstrip, to be able to work in Flyout
did use class sectionswitch - changed to better match nomenclature above
Just using Large  */
.pagemodeswitch-flyout {
	all: unset;
	display: flex !important;
	gap: var(--spacing-mode-spacing-component-base, 1rem);
	border-bottom: 1px solid var(--color-mode-border-secondary, #CDD3D7);

}
.pagemodeswitch-flyout > button,
.pagemodeswitch-flyout > button .k-button-text,
.pagemodeswitch-flyout > .k-button::before,
.pagemodeswitch-flyout > .k-button::after,
.pagemodeswitch-flyout .k-button-overlay, 
.pagemodeswitch-flyout .k-button::before,
.k-button-overlay,
.k-button::before {
	all: unset !important;
}
.pagemodeswitch-flyout > button {
	/*
	margin-top: -4px !important;
	*/
	margin-bottom: 3px !important;
	padding-bottom: var(--spacing-mode-spacing-component-small, 0.5rem) !important;
	cursor: pointer !important;
}
.pagemodeswitch-flyout > button.k-selected {
	
}
.pagemodeswitch-flyout > button .k-button-text {
	font-size: var(--body-large-regular-font-size, 1.125rem) !important; /* 14 px*/
	line-height: var(--body-large-regular-line-height, 1.5rem) !important; /* 20px */
	font-family: var(--body-large-regular-font-family, "Source Sans Pro") !important;
	font-weight: var(--body-large-regular-font-weight, 400) !important;
	letter-spacing: var(--body-large-regular-letter-spacing, 0) !important;
	font-style: var(--body-large-regular-font-style, normal) !important;

	border-bottom: 3px solid rgba(255, 255, 255, 0) !important;
}
.pagemodeswitch-flyout > button.k-selected,
.pagemodeswitch-flyout button.k-selected,
.pagemodeswitch-flyout > .k-button::-moz-focus-inner,
.pagemodeswitch-flyout .k-button::-moz-focus-inner {
	/*
	margin-bottom: -4px !important;
	*/
	margin-top: 0 !important;
	border-bottom: 4px solid var(--color-mode-surface-selection-primary-default, #012C4F) !important;
		
}
.pagemodeswitch-flyout.k-button-group .k-button.k-selected {
	/*
	border-bottom-color: #012c4f;
	border-bottom-style: solid;
	border-bottom-width: 4px
	*/
	border-bottom: 4px solid var(--color-mode-surface-selection-primary-default, #012C4F) !important;
	margin-bottom: -1px !important;
}
.pagemodeswitch-flyout.k-button-group .k-button.k-selected .k-button-text {
	font-weight: 600 !important;
}
/*
.pagemodeswitch-flyout > button:not(.k-selected),
.pagemodeswitch-flyout > .k-button:not(::-moz-focus-inner) {
	color: red !important;
}
	*/
.pagemodeswitch-flyout > button:focus,
.pagemodeswitch-flyout > button:focus .k-button-text,
.pagemodeswitch-flyout > button:hover,
.pagemodeswitch-flyout > button:hover .k-button-text,
.pagemodeswitch-flyout > button:active,
.pagemodeswitch-flyout > button:active .k-button-text {
		background: unset !important;
		cursor: pointer !important;
}








/*----------------------------------------------------

Menu

----------------------------------------------------

/* Restyle List Elements 
.app-container > .k-drawer ul,
.app-container>.k-drawer li {
    padding-inline-start: 0px;
}

/* Nav Item 
.k-drawer-container.k-drawer-expanded.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .k-drawer-items .k-drawer-item

/* Nav Item - Selected 
.k-drawer-container.k-drawer-expanded.k-drawer-push .k-drawer.k-drawer-start .k-drawer-wrapper .k-drawer-items .k-drawer-item.k-selected {
}


.k-drawer-container.k-drawer-push.k-drawer-expanded {
	
}

*/










/*----------------------------------------------------

Forms

----------------------------------------------------*/


/*----------------------------------------------------
Validation Styles
----------------------------------------------------*/
/*
Focus 
element {
	border-color: var(--color-primitives-blue-300, #549BC4);
	box-shadow: 0px 0px 2px 2px rgba(232, 241, 246, 1);
}
Error 
element {
	border-color: #F9C6C6;
	box-shadow: 0px 0px 0px 2px #FF8282;
}
Disabled - Don't know how telerik marks disabled dropdowns 
element { 
	background: var(--color-mode-surface-accent-disabled, #E9EBEC);
}
*/
/*---------------------------------------------------------------------------------- NOT DONE Extra error */
/*
Another Error - 
.k-dropdownlist.k-warning {
	border-radius: 4px;
	border: 2px solid #D5B688;
	box-shadow: 0px 0px 0px 2px var(--color-mode-surface-accent-warning-subtle);
}
*/
.validationMessage-error,
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td .k-floating-label-container.validationMessage-error,
.k-window.telerik-blazor.detailsFlyout .k-form .k-floating-label-container.validationMessage-error,
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td:nth-of-type(2) .k-floating-label-container.validationMessage-error {
	align-self: flex-start !important;
	margin-top: var(--spacing-mode-spacing-component-xsmall, 4px);

	color: var(--color-mode-text-danger, #860212) !important;

	font-family: var(--body-extra-small-regular-font-family, "Source Sans Pro") !important;
	font-size: var(--body-extra-small-regular-font-size, 12px) !important;
	line-height: var(--body-extra-small-regular-line-height, 16px) !important;
	font-weight: 400 !important;
	letter-spacing: var(--body-extra-small-regular-letter-spacing, 0) !important;
	font-style: var(--body-extra-small-regular-font-style, normal) !important;
}
/*
.k-input.k-invalid,
.k-input.ng-invalid.ng-touched,
.k-input.ng-invalid.ng-dirty {
	box-shadow: 0px 0px 0px 0 #f9c6c6 !important;
	margin: 0 2px;
}
*/

/*----------------------------------------------------------- NOT DONE Button Icons before & after */
/*----------------------------------------------------
Buttons

remove all telerik modifiers
instead use classes*

Size:
button-medium - Default
button-small
button large

Hierarchy: - Default
button-primary
button-secondary
button-tertiary

* telerik classes for buttons have an almost endless amount of combinations (md, primary, flat, etc) - overwriting them all was taking a lot of code, and would not be future-proof. The cleanest implementation was to unset and restyle.

----------------------------------------------------*/
/* https: //demos.telerik.com/blazor-ui/button/appearance */

/* All Buttons */
button,
.button-primary,
a.button,
a.button-primary {
	display: flex !important; /* changed from inline-flex */
	height: unset !important;
	justify-content: center !important;
	align-items: center !important;
	align-self: flex-start !important;
	border-radius: var(--tokens-spacing-border-radius-xsmall, 0.25rem) !important;
	flex-shrink: 0;
}
button .k-button-text,
.button .k-button-text,
a.button {
	gap: unset !important;
	border: none !important;
	display: flex !important;
	gap: 0.5rem !important;
	align-items: center !important;
	font-weight: 400 !important;
	font-family: var(--body-small-regular-font-family, "Source Sans Pro") !important;
	font-weight: var(--body-bold-font-weight, 600) !important;
	font-style: var(--body-small-regular-font-style, normal) !important;
	letter-spacing: var(--body-small-regular-letter-spacing, 0) !important;
}
.k-item-text,
a.button {
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	font-style: inherit;
}
button .material-symbols-outlined {
	font-weight: var(--body-bold-font-weight, 600) !important;
	font-style: var(--body-small-regular-font-style, normal) !important;
	letter-spacing: var(--body-small-regular-letter-spacing, 0) !important;
}
.k-button-overlay,
.k-button::before {
	display: none !important;
}
/* Sizes */
/*--------------------------- 
Medium / Default 
---------------------------*/
.button-medium,
.k-upload-button.k-button.k-button-md.k-button-solid.k-button-solid-base.k-rounded-md {
	padding: var(--spacing-mode-spacing-component-small, 0.5rem) var(--spacing-mode-spacing-component-base, 1rem) !important;
	gap: var(--spacing-mode-spacing-component-small, 0.5rem) !important;	
}
.button-medium .k-button-text,
.k-upload-button.k-button.k-button-md.k-button-solid.k-button-solid-base.k-rounded-md .button-medium .k-button-text {
	font-size: var(--body-regular-font-size, 1rem) !important;
	line-height: var(--body-regular-line-height, 1.5rem) !important;
}
.button-medium .material-symbols-outlined ,
.k-upload-button.k-button.k-button-md.k-button-solid.k-button-solid-base.k-rounded-md .material-symbols-outlined {
	font-size: var(--body-regular-font-size, 1rem) !important;
	line-height: 1 !important;
}
.button-medium.button-secondary:hover,
.button-medium.button-secondary:active,
/*
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers button.k-button.k-button-md:hover,
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers button.k-button.k-button-md:active,
*/
.k-upload-button.k-button.k-button-md.k-button-solid.k-button-solid-base.k-rounded-md:hover { 
	padding-top: calc(0.5rem - 1px) !important;
	padding-right: calc(1rem - 1px) !important;
	padding-bottom: calc(0.5rem - 1px) !important;
	padding-left: calc(1rem - 1px) !important;
}


/*--------------------------- 
Small 
---------------------------*/
.button-small,
.k-filter-menu-container .k-actions button,
.SubmitInvoiceModal .rowHorizontal.k-form-field .col button.k-button.button-small.button-primary.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base {
	padding: var(--spacing-mode-spacing-component-small, 0.5rem) !important;
	gap: var(--spacing-mode-spacing-component-small, 0.5rem) !important;	
}
.button-small .k-button-text,
.k-filter-menu-container .k-actions button .k-button-text,
.SubmitInvoiceModal .rowHorizontal.k-form-field .col button.k-button.button-small.button-primary.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base .k-button-text {
	font-size: var(--body-small-regular-font-size, 0.875rem) !important;
	line-height: var(--body-small-regular-line-height, 1.25rem) !important;
}
.button-small .material-symbols-outlined,
.k-filter-menu-container .k-actions button .material-symbols-outlined,
.SubmitInvoiceModal .rowHorizontal.k-form-field .col button.k-button.button-small.button-primary.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base .material-symbols-outlined {
	font-size: var(--body-small-regular-font-size, 0.875rem) !important;
	line-height: 1 !important;
}
.button-small.button-secondary:hover,
.button-small.button-secondary:active,
.k-filter-menu-container .k-actions button:last-of-type:hover,
.k-filter-menu-container .k-actions button:last-of-type:active,
.SubmitInvoiceModal .rowHorizontal.k-form-field .col button.k-button.button-small.button-primary.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base:hover,
.SubmitInvoiceModal .rowHorizontal.k-form-field .col button.k-button.button-small.button-primary.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base:active { 
	padding: calc(0.5rem - 1px) !important;
}
/*--------------------------- 
Large 
---------------------------*/
.button-large,
a.button.button-large {
	padding: var(--spacing-mode-spacing-component-small, 0.5rem) var(--spacing-mode-spacing-component-base, 1rem) !important;
	gap: var(--spacing-mode-spacing-component-small, 0.5rem) !important;	
}
.button-large .k-button-text,
a.button.button-large {
	font-size: var(--body-large-font-size, 1.125rem) !important;
	line-height: var(--body-large-line-height, 1.5rem) !important;
}
.button-large .material-symbols-outlined {
	font-size: var(--body-large-font-size, 1.125rem) !important;
	line-height: 1 !important;
}
.button-large.button-secondary:hover,
.button-large.button-secondary:active { 
	padding-top: calc(0.5rem - 1px) !important;
	padding-right: calc(1rem - 1px) !important;
	padding-bottom: calc(0.5rem - 1px) !important;
	padding-left: calc(1rem - 1px) !important;
}


/*
Tiers 
*/
/*--------------------------- 
Primary / Default 
---------------------------*/
/* Default */
button,
.button-primary,
.k-filter-menu-container .k-actions button:first-of-type {
	color: var(--color-mode-text-inverse-primary, #FFF) !important;
	background: var(--color-mode-CTA-primary-fill-default, #0169A7) !important;
	border: none !important;
}
button .k-button-text,
.button-primary .k-button-text,
.k-filter-menu-container .k-actions button:first-of-type .k-button-text {
	color: var(--color-mode-text-inverse-primary, #FFF) !important;
}

/* Focus - TBD */
/* Hover */
button:hover,
.button-primary:hover,
.k-filter-menu-container .k-actions button:first-of-type:hover,
a.button:hover {
    background: var(--color-mode-CTA-primary-fill-hover, #036098) !important;
}
a.button:focus,
a.button:hover,
a.button:active {
	margin-bottom: 0;
}
.k-button:hover::before,
.k-button.k-hover::before,
.k-filter-menu-container .k-actions button:first-of-type:hover::before,
.k-filter-menu-container .k-actions button:first-of-type.k-hover::before {
	display: none !important;
}
/* Active */
button:active,
.button-primary:active,
.k-filter-menu-container .k-actions button:first-of-type:active {
	background: var(--color-mode-CTA-primary-fill-pressed, #004B78) !important;
}
/* Disabled */
button:disabled,
.button-primary.k-disabled,
.k-filter-menu-container .k-actions button:first-of-type.k-disabled {
	background: var(--color-mode-CTA-primary-fill-disabled, #DDE1E3) !important;
}
button:disabled .k-button-text,
.button-primary.k-disabled .k-button-text,
.k-filter-menu-container .k-actions button:first-of-type .k-disabled .k-button-text {
	color: var(--color-mode-text-disabled, #A4ADB2) !important;
}


/*--------------------------- 
Secondary
also upload document button
---------------------------*/
/* Default */
.button-secondary,
.fileselect.importexcelupload.k-upload .k-dropzone .k-upload-button-wrap .k-upload-button,
.holman-drawer-mobile .exportimportsection .k-button.button-small.button-primary,
.k-filter-menu-container .k-actions button:last-of-type {
	color: var(--color-mode-text-link-primary, #0169A7) !important;
	background: var(--color-mode-CTA-secondary-fill-default, rgba(0, 0, 0, 0.00)) !important;
	border: 1px solid var(--color-mode-CTA-secondary-border-default, #0169A7) !important;
}
.button-secondary .k-button-text,
.fileselect.importexcelupload.k-upload .k-dropzone .k-upload-button-wrap .k-upload-button .k-button-text,
.holman-drawer-mobile .exportimportsection .k-button.button-small.button-primary .k-button-text,
.k-filter-menu-container .k-actions button:last-of-type .k-button-text {
	color: var(--color-mode-text-link-primary, #0169A7) !important;
}
/* Focus - TBD */
/* Hover */
.button-secondary:hover,
.fileselect.importexcelupload.k-upload .k-dropzone .k-upload-button-wrap .k-upload-button:hover,
.holman-drawer-mobile .exportimportsection .k-button.button-small.button-primary:hover,
.k-filter-menu-container .k-actions button:last-of-type:hover {
	/*
	margin: -1px !important;
	*/
	border: 2px solid var(--color-mode-CTA-secondary-border-hover, #0169A7) !important;
	/*
	background: var(--color-mode-CTA-secondary-fill-hover, #E9EBEC) !important;
	*/
	background: var(--color-primitives-blue-100, #B0D1E4) !important;
}
/* Active */
.button-secondary:active,
.fileselect.importexcelupload.k-upload .k-dropzone .k-upload-button-wrap .k-upload-button:active,
.holman-drawer-mobile .exportimportsection .k-button.button-small.button-primary:active,
.k-filter-menu-container .k-actions button:last-of-type:active {
	/*
	margin: -1px !important;
	*/
	border: 2px solid var(--color-mode-CTA-secondary-border-pressed, #0169A7) !important;
	background: var(--color-mode-CTA-secondary-fill-pressed, #DDE1E3) !important;
}
/* Disabled */
.button-secondary:disabled,
.button-secondary.k-disabled,
.fileselect.importexcelupload.k-upload .k-dropzone .k-upload-button-wrap .k-upload-button:disabled,
.fileselect.importexcelupload.k-upload .k-dropzone .k-upload-button-wrap .k-upload-button.disabled,
.holman-drawer-mobile .exportimportsection .k-button.button-small.button-primary:disabled,
.holman-drawer-mobile .exportimportsection .k-button.button-small.button-primary.disabled,
.k-filter-menu-container .k-actions button:last-of-type:disabled,
.k-filter-menu-container .k-actions button:last-of-type.disabled {
	color: var(--color-mode-text-disabled, #A4ADB2) !important;
	border: 1px solid var(--color-mode-CTA-secondary-border-disabled, #B5BEC3) !important;
}
.button-secondary:disabled .k-button-text,
.button-secondary.k-disabled .k-button-text,
.fileselect.importexcelupload.k-upload .k-dropzone .k-upload-button-wrap .k-upload-button:disabled .k-button-text,
.fileselect.importexcelupload.k-upload .k-dropzone .k-upload-button-wrap .k-upload-button.disabled .k-button-text,

.holman-drawer-mobile .exportimportsection .k-button.button-small.button-primary:disabled .k-button-text,
.holman-drawer-mobile .exportimportsection .k-button.button-small.button-primary.disabled .k-button-text,

.k-filter-menu-container .k-actions button:last-of-type:disabled .k-button-text,
.k-filter-menu-container .k-actions button:last-of-type.disabled .k-button-text {
	color: var(--color-mode-text-disabled, #A4ADB2) !important;
}


/*--------------------------- 
Tertiary 
---------------------------*/
/* Default */
.button-tertiary,
.button-notabutton {
	color: var(--color-mode-text-link-primary, #0169A7) !important;
	background: none !important;
	/*
	border: 1px solid var(--color-mode-CTA-tertiary-border-default, rgba(255, 255, 255, 0.00)) !important;
	*/
	border: none !important;
}
.button-tertiary .k-button-text,
.button-notabutton .k-button-text {
	color: var(--color-mode-text-link-primary, #0169A7) !important;
}
/* Focus - TBD */
/* Hover */
.button-tertiary:hover,
.button-notabutton:hover,
.button-tertiary:hover .k-button-text,
.button-notabutton:hover .k-button-text {
	/*
	background: var(--color-mode-CTA-tertiary-fill-hover, #E9EBEC) !important;
	*/
	color: #003057 !important;
	background: none !important;
	box-shadow: none !important;
}
/* Focus */
.button-tertiary:focus,
.button-notabutton:focus {
	color: #003057 !important;
	background: none !important;
	box-shadow: none !important;
}
/* Active */
.button-tertiary:active,
.button-notabutton:active {
	/*
	color: var(--color-mode-text-inverse-primary, #ffffff) !important;
	background: var(--color-mode-CTA-secondary-fill-pressed, #DDE1E3) !important;
	*/
	color: #003057 !important;
	background: none !important;
	box-shadow: none !important;
}
.button-tertiary:active .k-button-text,
.button-notabutton:active .k-button-text {
	border: none !important;
	/*
	color: var(--color-mode-text-inverse-primary, #ffffff) !important;
	*/
	color: #003057 !important;
}
/* Disabled */
.button-tertiary:disabled,
.button-tertiary.k-disabled,
.button-notabutton:disabled,
.button-notabutton.k-disabled {
	color: var(--color-mode-text-disabled, #A4ADB2) !important;
	border: none !important;
	box-shadow: none !important;
}
.button-tertiary:disabled .k-button-text,
.button-tertiary.k-disabled .k-button-text,
.button-notabutton:disabled .k-button-text,
.button-notabutton.k-disabled .k-button-text {
	color: var(--color-mode-text-disabled, #A4ADB2) !important;
}
/* Required */
.button-tertiary.required .k-button-text,
.button-tertiary.required .k-button-icon {
	color: var(--color-mode-text-danger, #860212) !important;
}



/*--------------------------- 
Not a Button - when a button has to be used for functionality, but it needs to look (and interact) like a link
same as tertiary except unset below
ex: wizard back button
---------------------------*/
.button-notabutton {
	padding: 0 !important;
	margin: 0 !important;
}
.button-notabutton .k-button-text {
	font-weight: 400 !important;
}
/* Focus TBS */
.button-notabutton:hover {
	background: none !important;
}
.button-notabutton:active {
	background: none !important;
}



/* export to excel */
.file-icon-excel {
	display: flex;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	background: url('../images/small_excel_img.svg');
}



/* 
Exceptions
*/
/*--------------------------- 
Buttons that Are JUST Icons - no text
---------------------------*/
/*
.datagridvendorportal tr td:last-of-type button .k-svg-i-more-vertical,
.datagridvendorportal tr td:last-of-type button.k-button .k-svg-i-more-vertical,
.datagridvendorportal tr td:last-of-type .k-button.k-svg-i-more-vertical {
	color: #1D2433;
}
*/
/* 

ex (svg)
<TelerikButton Class="button-icon" OnClick="@( _ => ShowUpdtForm( (context) as VehicleDTO) )" Icon="@SvgIcon.HyperlinkOpen"></TelerikButton>

or variation (font icon):
VehicleStatusDetailsMobileView.razor
<TelerikButton Class="iconbutton" OnClick="ShowFilters">
	<span class="material-symbols-outlined  custom-lg-icon">filter_alt</span>
</TelerikButton>

*/
button.button-icon, 
.k-button.button-icon,
.k-grid.dashPageGrid button.button-icon,
.k-grid.dashPageGrid .k-button.button-icon,
/* flyout close button */
.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Close"] {
	all: unset !important;
	flex-shrink: 0;
	flex-grow: 0;
	color: #000 !important;
	cursor: pointer !important;
}
button.button-icon svg,
.k-button.button-icon svg, 
.k-grid.dashPageGrid button.button-icon svg,
.k-grid.dashPageGrid .k-button.button-icon svg {
	flex-shrink: 0;
	flex-grow: 0;
	stroke: #000;
	stroke-width: 10;
}
/* Icon Button Size Settings */
.k-grid.dashPageGrid button.button-icon .k-icon,
.k-grid.dashPageGrid button.button-icon .k-icon, svg,
.k-grid.dashPageGrid .k-button.button-icon .k-icon,
.k-grid.dashPageGrid .k-button.button-icon .k-icon, svg {
	width: 0.75rem;
	height: 0.75rem;
}
.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Close"] .k-icon,
.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Close"] .k-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke-width: unset !important;
}
/* Hover */
button.button-icon:hover,
.k-button.button-icon:hover,
button.button-icon:active,
.k-button.button-icon:active,
button.button-icon:hover svg,
.k-button.button-icon:hover svg,
button.button-icon:active svg,
.k-button.button-icon:active svg,
/* Hover in tables */
.k-grid.dashPageGrid button.button-icon:hover,
.k-grid.dashPageGrid .k-button.button-icon:hover,
.k-grid.dashPageGrid button.button-icon:active,
.k-grid.dashPageGrid .k-button.button-icon:active,
.k-grid.dashPageGrid button.button-icon:hover svg,
.k-grid.dashPageGrid .k-button.button-icon:hover svg,
.k-grid.dashPageGrid button.button-icon:active svg,
.k-grid.dashPageGrid .k-button.button-icon:active svg {
	stroke: #0169A7 !important;/* primary button blue */
	color: #0169A7 !important;/* primary button blue */
	stroke: #036098 !important;/* primary button hover blue */
	color: #036098 !important;/* primary button hover blue */
	stroke: #999999 !important; /* the black just lighter - not a variable tho */
	color: #999999 !important;/* the black just lighter - not a variable tho */
}

/* flyout close button 
uses custom icon - customCloseIcon */
.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Close"]:hover,
.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Close"]:active,
.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Close"]:hover svg,
.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Close"]:active svg
/* flyout min and max buttons button 
.windowMin.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Maximize"]:hover,
.windowMin.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Maximize"]:active,
.windowMin.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Maximize"]:hover svg,
.windowMin.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Maximize"]:active svg,

.windowMax.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Restore"]:hover,
.windowMax.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Restore"]:active,
.windowMax.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Restore"]:hover svg,
.windowMax.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Restore"]:active svg*/ {
	color: #999999 !important;/* the black just lighter - not a variable tho */
	stroke: #999999 !important;/* the black just lighter - not a variable tho */
	display: inline-block !important;
}
/*
.customCloseIcon {
	min-width: unset !important;
	min-height: unset !important;
	display: unset !important;
	content: url("data:image/svg+xml; utf8, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z' fill='%23242627' /%3E%3C/svg%3E");
	width: 1.5rem;
	height: 1.5rem;
	display: inline-block !important;
}
.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Close"]:hover .customCloseIcon,
.detailsFlyout .k-button.k-window-titlebar-action.k-icon-button[title="Close"]:active .customCloseIcon {
	content: url("data:image/svg+xml; utf8, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z' fill='%23999999' /%3E%3C/svg%3E");
	width: 1.5rem;
	height: 1.5rem;
}
*/

/* Flyout Expand and Collapse 
from old global.css 
div.k-window-titlebar-actions button[title="Maximize"],
div.k-window-titlebar-actions button[title="Restore"] {
	color: red !important;
	position: absolute !important;
	left: -16px;
	border-radius: 4px !important;
	border: 1px solid #E9EBEC !important;
	background: #FFF !important;
	padding: 8px;
}
*/



/*------------------------------------------------------------------------------ NOT DONE Table Invoice etc BTable Buttons */
/*---------------------------



















/*-------------------------------------------------------------- NOT DONE Form States - text input */
/*------------------------------------------------------------------------ NOT DONE Text Input Sizes Text Input */
/*----------------------------------------------------
Text Input
----------------------------------------------------*/



/*
States 
*/
/* Hover - no hover state */
/* Focus */
input[role=textbox]:focus,
input[role=textbox].k-focus {
	border-color: var(--color-primitives-blue-300, #549BC4);
	box-shadow: 0px 0px 2px 2px rgba(232, 241, 246, 1);
}
/* Error */
input[role=textbox].k-invalid,
input[role=textbox].ng-invalid.ng-touched,
input[role=textbox].ng-invalid.ng-dirty {
	border-color: #F9C6C6;
	box-shadow: 0px 0px 0px 2px #FF8282;
}
/* Disabled */
input[role=textbox].k-disabled {
	/* Don't know how telerik marks disabled dropdowns */
	background: var(--color-mode-surface-accent-disabled, #E9EBEC);
}





/*
.k-textbox.k-input.k-rounded-sm.k-input-solid {
	display: flex;
	padding: var(--spacing-mode-spacing-component-small, 0.5rem);
	align-items: center;
	gap: var(--spacing-mode-spacing-component-xsmall, 0.25rem);
	align-self: stretch;
	border-radius: 0.25rem;
	border: 1px solid var(--color-mode-border-secondary, #CDD3D7);
	background: var(--color-mode-surface-background-primary, #FFF);	
}
input[role="textbox"] {
}
.k-dropdownlist .k-input-inner {
	all: unset;
	
	font-family: var(--body-small-regular-font-family, "Source Sans Pro");
	font-size: var(--body-small-regular-font-size, 0.875rem);
	font-style: var(--body-small-regular-font-style, normal);
	font-weight: var(--body-small-regular-font-weight, 400);
	line-height: var(--body-small-regular-line-height, 1.25rem);
	letter-spacing: var(--body-small-regular-letter-spacing, 0px);
	color: var(--color-mode-text-primary, #242627);

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.k-dropdownlist .k-input-inner .k-input-value-text {
	all: unset;
}
.k-dropdownlist .k-input-button {
	padding: 0;
  	width: 1rem;
	height: 1rem;
}
.k-dropdownlist.k-picker .k-button-md.k-icon-button .k-button-icon svg {
	display: none;
}
.k-dropdownlist.k-picker .k-button-md.k-icon-button {
	background: none !important;
}
.k-dropdownlist.k-picker .k-button-md.k-icon-button .k-button-icon::before {
	content: url("data:image/svg+xml; utf8, <svg ... code here</svg>");
	content: url("data:image/svg+xml; utf8, %3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M11.06 5.53L8 8.58333L4.94 5.53L4 6.47L8 10.47L12 6.47L11.06 5.53Z' fill='%230169A7' /%3E%3C/svg%3E");
  	width: 1rem;
	height: 1rem;
}
.k-dropdownlist.k-picker button {
	background: none !important;
}*/
/* State - Hover - no hover state */
/* State - Focus 
.k-picker-solid:focus,
.k-picker-solid.k-focus {
	border-color: var(--color-primitives-blue-300, #549BC4);
	box-shadow: 0px 0px 2px 2px rgba(232, 241, 246, 1);
}*/
/* State - Error 
.k-picker-solid.k-invalid,
.k-picker-solid.ng-invalid.ng-touched,
.k-picker-solid.ng-invalid.ng-dirty {
	border-color: #F9C6C6;
	box-shadow: 0px 0px 0px 2px #FF8282;
}*/
/* State - Disabled 
.k-picker-solid.k-disabled { Don't know how telerik marks disabled dropdowns 
	background: var(--color-mode-surface-accent-disabled, #E9EBEC);
}*/
















/*----------------------------------------------------

Dropdown - only 1 size

----------------------------------------------------*/
.k-dropdownlist .k-input-button,
.k-dropdownlist.k-picker {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem !important;
	padding: var(--spacing-mode-spacing-component-small, 0.5rem);
	align-items: center;
	gap: var(--spacing-mode-spacing-component-xsmall, 0.25rem);
	align-self: stretch;
	border-radius: 0.25rem;
	/*
	border: 1px solid var(--color-mode-border-secondary, #CDD3D7);
	
	background: var(--color-mode-surface-background-primary, #FFF);	
	*/
}
.k-dropdownlist .k-input-inner {
	all: unset;
	
	font-family: var(--body-small-regular-font-family, "Source Sans Pro");
	font-size: var(--body-small-regular-font-size, 0.875rem);
	font-style: var(--body-small-regular-font-style, normal);
	font-weight: var(--body-small-regular-font-weight, 400);
	line-height: var(--body-small-regular-line-height, 1.25rem);
	letter-spacing: var(--body-small-regular-letter-spacing, 0px);
	color: var(--color-mode-text-primary, #242627);

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.k-dropdownlist .k-input-inner .k-input-value-text {
	all: unset;
}
.k-dropdownlist .k-input-button {
	padding: 0;
  	width: 1rem;
	height: 1rem;
}
.k-dropdownlist.k-picker .k-button-md.k-icon-button .k-button-icon svg {
	display: none;
}
.k-dropdownlist.k-picker .k-button-md.k-icon-button {
	background: none !important;
}
.k-dropdownlist.k-picker .k-button-md.k-icon-button .k-button-icon::before {
	position: absolute;
	right: 0;
	content: url("data:image/svg+xml; utf8, <svg ... code here</svg>");
	content: url("data:image/svg+xml; utf8, %3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M11.06 5.53L8 8.58333L4.94 5.53L4 6.47L8 10.47L12 6.47L11.06 5.53Z' fill='%230169A7' /%3E%3C/svg%3E");
  	width: 1rem;
	height: 1rem;
}
.k-dropdownlist.k-picker button {
	background: none !important;
}
/* hack fix for vehicle confirmation grid card button */
@media (max-width: 767.99px) {
    .dashGrid-desk.dashGrid-desk-VehicleConfirmation td.k-table-td:last-of-type button.k-icon-button .k-icon {
	content: url("data:image/svg+xml; utf8, %3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M11.06 5.53L8 8.58333L4.94 5.53L4 6.47L8 10.47L12 6.47L11.06 5.53Z' fill='%230169A7' /%3E%3C/svg%3E");
  	width: 1rem;
	height: 1rem;
    }
}




/* 
States
*/
/* Hover - no hover state */
/* Focus */
.k-picker-solid:focus,
.k-picker-solid.k-focus {
	border-color: var(--color-primitives-blue-300, #549BC4);
	box-shadow: 0px 0px 2px 2px rgba(232, 241, 246, 1);
}
/* Error */
.k-picker-solid.k-invalid,
.k-picker-solid.ng-invalid.ng-touched,
.k-picker-solid.ng-invalid.ng-dirty {
	border-color: #F9C6C6;
	box-shadow: 0px 0px 0px 2px #FF8282;
}
/* Disabled */
.k-picker-solid.k-disabled { /* Don't know how telerik marks disabled dropdowns */
	background: var(--color-mode-surface-accent-disabled, #E9EBEC);
}





/*---------------------------
The list inside the dropdown
---------------------------*/
/* for the list, inspect at k-list k-list-md, id acafd4ff-f220-4d7b-b86d-445d794372ea */
/* need to be able to add a class, so can target this list, and not every animcation */
/*
Skipping changing the radius b/c would need to assign if opens into top or bottom - and that is decided on the fly by telerik
.k-dropdownlist.k-picker[aria-expanded="true"] {
	border-radius: 0.25rem 0.25rem 0 0;
}

inspect
scroll to bottom of code page
look for what is triggered by dropdown
set all the hover active etc on the parent to prevent it from closing
*/
.k-dropdownlist.k-picker[aria-expanded="true"] .k-button-md.k-icon-button .k-button-icon::before {
	content: url("data:image/svg+xml; utf8, <svg ... code here</svg>");
	content: url("data:image/svg+xml; utf8, %3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M4.94 10.47L8 7.4167L11.06 10.47L12 9.53003L8 5.53003L4 9.53003L4.94 10.47Z' fill='%230169A7' /%3E%3C/svg%3E");
	width: 1rem;
	height: 1rem;
}
.k-animation-container,
.k-animation-container .k-child-animation-container,
.k-animation-container .k-child-animation-container .k-popup.k-list-container.k-dropdownlist-popup {
	height: unset !important;
	box-shadow: none !important;
	border: none !important;
}

	.k-animation-container .k-child-animation-container .k-popup.k-list-container.k-dropdownlist-popup {
		border-radius: 0.25rem;
		border: 1px solid var(--color-mode-border-secondary, #CDD3D7) !important;
		background: var(--color-mode-surface-background-primary, #FFF);
		/*
		height: 200px !important;
		*/
	}
	/*
	trial for overflow - not working
#d4cbd26e-5bb0-4aeb-86d5-2bb31161711b.k-animation-container,
#d4cbd26e-5bb0-4aeb-86d5-2bb31161711b.k-animation-container .k-child-animation-container,
#d4cbd26e-5bb0-4aeb-86d5-2bb31161711b.k-animation-container .k-child-animation-container .k-popup.k-list-container.k-dropdownlist-popup {
	height: 180px !important;
}
	*/
/*
.k-list,
.k-list .k-list-content .k-list-ul {
	border: 1px solid var(--color-mode-border-secondary, #CDD3D7) !important;
	border-radius: 0 0 0.25rem 0.25rem !important;
}
*/
.k-list .k-list-content,
.k-list .k-list-content .k-list-ul,
.k-list .k-list-content .k-list-ul .k-list-item {
	box-shadow: none !important;
	border: none !important;
}
.detailsFlyoutDropdown.k-list .k-list-content .k-list-ul {
	max-height: 200px !important;
}
/*
.k-list .k-list-content .k-list-ul .k-list-item {
	border-right: 1px solid var(--color-mode-border-secondary, #CDD3D7) !important;
	border-left: 1px solid var(--color-mode-border-secondary, #CDD3D7) !important;
}
	
.k-list .k-list-content .k-list-ul li:last-of-type {
	border-top: none !important;
	border-bottom: 1px solid var(--color-mode-border-secondary, #CDD3D7) !important;
	border-radius: 0 0 8px 8px !important;
}

.k-list .k-list-content .k-list-ul .k-list-item,
.k-popup > .k-list {
	border-radius: 0.3rem;
}
		*/
.k-list .k-list-content .k-list-ul .k-list-item.k-selected,
.k-list .k-list-content .k-list-ul .k-list-item.k-focus,
.k-list .k-list-content .k-list-ul .k-list-item.k-selected.k-focus {
	border-color: var(--color-primitives-blue-300, #549BC4) !important;
}
/* Ask Satya why height is set on these */
.k-list.k-list-md .k-list-content .k-list-ul .k-list-item.k-selected:focus,
.k-list.k-list-md .k-list-content .k-list-ul .k-selected.k-list-optionlabel:focus,
.k-list.k-list-md .k-list-content .k-list-ul .k-list-item.k-selected:hover,
.k-list.k-list-md .k-list-content .k-list-ul .k-selected.k-list-optionlabel:hover,
.k-list.k-list-md .k-list-content .k-list-ul .k-list-item.k-selected:active,
.k-list.k-list-md .k-list-content .k-list-ul .k-selected.k-list-optionlabel:active {
	background: var(--color-mode-CTA-primary-fill-default, rgba(1, 105, 167, 1)) !important;
	background: rgba(1, 105, 167, 1) !important;
	background-color: rgba(1, 105, 167, 1) !important;
	border-color: rgba(1, 105, 167, 1) !important;
	color: #fff !important;
}
.k-list.k-list-md .k-list-content .k-list-ul .k-list-item.k-selected,
.k-list.k-list-md .k-list-content .k-list-ul .k-selected.k-list-optionlabel {
	background-color: rgba(1, 105, 167, 1) !important;
	border-color: rgba(1, 105, 167, 1) !important;
	color: #fff !important;

}

/* grey out the "DefaultText" in dropdown for TelerikDropdownList */
.k-list-optionlabel, .k-list-optionlabel.k-hover, .k-list-optionlabel:hover {
	color: #A4ADB2;
	pointer-events: none;
}

/* The (placeholder) "DefaultText" greyed out when selected on default */
.dropdown-default-text .k-input-inner .k-input-value-text {
	color: #A4ADB2;
}


/*-------------------------------------------------------------------- NOT DONE Datepicker - dropdown calendar etc */
/*----------------------------------------------------

Datepicker

Formatting the datepicker Placeholder
Should be MM/DD/YYYY - requires closing tag and adding <DatePickerFormatPlaceholder>
	<TelerikDatePicker Id="dt2"@bind-Value="@OrderToConfirm.ChassisEstimatedDate" Format="d" />
		<DatePickerFormatPlaceholder Year="YYYY" Month="MM" Day="DD"></DatePickerFormatPlaceholder>
	</TelerikDatePicker>

Formatting the datepicker input text
TBD

----------------------------------------------------*/
.k-datepicker,
.dashGrid-mobile .k-master-row.k-table-row .k-table-td .card .k-datepicker,
.dashGrid-mobile .dashGrid-desk .k-master-row.k-table-row .k-table-td .card .k-datepicker {
	max-width: 130px;
}
/* The datepicker dropdown */
.k-popup.k-datepicker-popup.k-calendar-container .k-calendar-header {
	font-family: var(--body-small-regular-font-family, "Source Sans Pro");
	font-size: var(--body-small-regular-font-size, 0.875rem);
	font-style: var(--body-small-regular-font-style, normal);
	font-weight: var(--body-small-regular-font-weight, 400);
	line-height: var(--body-small-regular-line-height, 1.25rem);
	letter-spacing: var(--body-small-regular-letter-spacing, 0px);
	color: var(--color-mode-text-primary, #242627);
}
/* Icon for all Datepickers */
.k-datepicker .k-button-icon.k-icon.k-svg-icon.k-svg-i-calendar > svg {
	display: none;
}
.k-datepicker .k-button-icon.k-icon.k-svg-icon.k-svg-i-calendar::before {
	content: '\ebcc';
	font-family: 'Material Symbols Outlined';
	font-size: 16px;
	color: #0169a7;
}
/*--------------------------- 

---------------------------*/
/* Calendar Popup */
.k-calendar {
	padding: 0 20px !important;
}
.k-calendar > .k-calendar-header {
	padding: 0 !important;
}
.k-calendar > .k-calendar-header > .k-calendar-nav >  button.k-button,
.k-calendar > .k-calendar-header > .k-calendar-nav >  button.k-button {
	color: var(--color-mode-text-link-primary, #0169A7) !important;
	font-weight: 400 !important;
	display: flex;
	padding: var(--spacing-mode-spacing-complex-component-small, 8px) !important;
	gap: var(--spacing-mode-spacing-complex-component-smalll, 8px) !important;
}
.k-calendar > .k-calendar-header > button.k-button.k-calendar-title .k-button-text,
.k-calendar > .k-calendar-header > .k-calendar-nav > button.k-button .k-button-text {
	color: var(--color-mode-text-link-primary, #0169A7) !important;
	font-weight: 400 !important;
	display: flex;
	gap: var(--spacing-mode-spacing-complex-component-smalll, 8px) !important;
}
.k-calendar > .k-calendar-header > button.k-button.k-calendar-title .k-button-text,
.k-calendar > .k-calendar-header > .k-calendar-nav > button.k-button .k-button-text {
	padding: 0 !important;
	margin-top: -2px !important;
}
.k-calendar > .k-calendar-header > button.k-button.k-calendar-title:hover .k-button-text,
.k-calendar > .k-calendar-header > .k-calendar-nav > button.k-button:hover .k-button-text,
.k-calendar > .k-calendar-header > .k-calendar-nav >  button.k-button:hover,
.k-calendar > .k-calendar-header > .k-calendar-nav >  button.k-button:hover {
	/*
	all: unset;
	*/
	color: #003057 !important;
	background: unset !important;

}
.k-calendar .k-calendar-header button.k-button {
	padding: 8px !important;
}
.k-calendar .k-calendar-header button.k-button:focus,
.k-calendar .k-calendar-header button.k-button:hover,
.k-calendar .k-calendar-header button.k-button:active {
	all: unset;
	color: #003057 !important;
	background: unset !important;
}
.k-calendar .k-calendar-header .k-calendar-nav button.k-calendar-nav-today {
	margin: 0 !important;
}
.k-calendar > .k-calendar-header > button.k-button.k-calendar-title:hover .k-button-text,
.k-calendar .k-calendar-header .k-calendar-nav button.k-calendar-nav-today .button-text,
.k-calendar > .k-calendar-header > .k-calendar-nav > button.k-button.k-calendar-nav-today .k-button-text {
	padding: 0 !important;
	margin-top: -2px !important;
}

.k-calendar .k-calendar-table {
	margin: 0;
}

/* actual calendar grid table */
.k-calendar .k-calendar-monthview.k-calendar-view table.k-calendar-table {
	/*
	background: red !important;
	*/
}
.k-calendar > .k-calendar-monthview.k-calendar-view {
	padding: 0 !important;
}
.k-calendar > .k-calendar-monthview.k-calendar-view > table.k-calendar-table {
	width: 100% !important;
	max-width: 100% !important;
	margin-bottom: var(--spacing-mode-spacing-complex-component-small, 8px) !important;
}
.k-month-calendar .k-calendar-th,
.k-calendar-monthview .k-calendar-th,
.k-month-calendar .k-calendar-td,
.k-calendar-monthview .k-calendar-td {
	font-weight: 600 !important;
	color: #383838 !important;
}
.k-calendar .k-calendar-cell-inner,
.k-calendar .k-link {
	font-weight: 600 !important;
}
.k-month-calendar .k-calendar-td.k-selected .k-link,
.k-calendar-monthview .k-calendar-td.k-selected .k-link {
	background: var(--color-mode-CTA-primary-fill-default, #036098) !important;
	border-radius: 1000px !important;
}
.k-month-calendar .k-calendar-td.k-selected:focus .k-link,
.k-calendar-monthview .k-calendar-td.k-selected:focus .k-link,
.k-month-calendar .k-calendar-td.k-selected:hover .k-link,
.k-calendar-monthview .k-calendar-td.k-selected:hover .k-link,
.k-month-calendar .k-calendar-td.k-selected:active .k-link,
.k-calendar-monthview .k-calendar-td.k-selected:active .k-link {
	background: var(--color-mode-CTA-primary-fill-hover) !important;
}
.k-calendar .k-calendar-cell-inner:hover {
	border-radius: 2px !important;
	background: var(--color-mode-surface-accent-info-alt-subtle, #E9EBEC) !important;
	color: var(--color-mode-text-primary, #242627) !important;
}
/*
telerik-blazor k-button k-calendar-title k-button-flat k-rounded-md k-button-md k-button-flat-base
*/

/*
States 
*/
/* Focus */
/* Hover */
.k-datepicker .k-button-icon:hover,
.k-datepicker .k-button-icon.k-hover {
	background: var(--color-mode-CTA-secondary-fill-hover, #E9EBEC) !important;
}
/* Active */
.k-datepicker .k-button-icon:active,
.k-datepicker .k-button-icon.k-active {
	background: var(--color-mode-CTA-secondary-fill-pressed, #DDE1E3) !important;
}
/* Error */
/* Disabled */
.k-datepicker .k-button-icon:disabled,
.k-datepicker .k-button-icon.k-disabled {
	color: var(--color-mode-text-disabled, #A4ADB2) !important;
	border: 1px solid var(--color-mode-CTA-secondary-border-disabled, #B5BEC3) !important;
}
.k-datepicker:disabled input,
.k-datepicker.k-disabled input,
.k-datepicker:disabled .k-button-icon.k-icon.k-svg-icon.k-svg-i-calendar::before,
.k-datepicker.k-disabled .k-button-icon.k-icon.k-svg-icon.k-svg-i-calendar::before {
	color: var(--color-mode-text-disabled, #A4ADB2) !important;
}



/*------------------------------------------ NOT DONE fix naming classes in main tables - NOT dashGrid-desk etc ----- using dashPageGrid in icon button definitions  */
/*--------------------------- 
Datepicker in table 
---------------------------*/
.dashGrid-desk table .k-datepicker,
table .k-datepicker:focus {
	border: 0;
	box-shadow: none;
}
.dashGrid-desk table .k-datepicker .k-input-inner {   
	padding: 0;
	color: var(--color-mode-text-link-primary);
}
.dashGrid-desk table .k-datepicker button {
	padding: 0;
	margin: 0;
}
.dashGrid-desk table .k-datepicker:focus {}
.k-datepicker.k-input .k-icon-button.k-input-button {
    color: var(--color-mode-CTA-primary-fill-default);
	background: none !important;
}
.k-datepicker.k-input .k-icon-button.k-input-button svg path {
	fill: var(--color-mode-CTA-primary-fill-default);
}
/*
States
*/
/* Focus */
/* Hover */
/* Active */
/* Error */
/* Disabled */   /* don't know where class will live .k-disabled */
.dashGrid-desk table .k-datepicker .k-input-inner.k-disabled {
	color: var(--color-mode-text-disabled, rgba(164, 173, 178, 1));
}
.dashGrid-desk table .k-datepicker.k-disabled .k-button-icon.k-icon.k-svg-icon.k-svg-i-calendar::before {
	color: var(--color-mode-text-disabled, rgba(164, 173, 178, 1));
}



/*----------------------------------------------------------------------------------------------- NOT DONE Checkbox */
/*----------------------------------------------------
Checkbox
----------------------------------------------------*/
input.checkbox,
input.k-checkbox,
input.checkbox.k-checkbox,
input.k-checkbox.k-grid-checkbox.telerik-blazor.k-rounded-md.k-checkbox-md,
input.k-checkbox.k-grid-checkbox.telerik-blazor,
input.k-checkbox.telerik-blazor.k-rounded-md.k-checkbox-md,
input.k-checkbox.telerik-blazor {
	width: 1rem;
	height: 1rem;
	margin-right: 5px;
	border-radius: 2px;
	border: 2px solid var(--color-mode-CTA-primary-fill-default, #0169A7);
}
.k-checkbox-wrap::before {
	content: unset;
}
input.k-checkbox:checked,
input.k-checkbox.k-checked {
	background-color: var(--color-mode-CTA-primary-fill-default, #0169A7);
	background-image: url("data:image/svg+xml; utf8, %3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M3.86334 7.58333L1.08334 4.80333L0.136673 5.74333L3.86334 9.47L11.8633 1.47L10.9233 0.529999L3.86334 7.58333Z' fill='white' /%3E%3C/svg%3E");
}
.checkboxlabel .k-floating-label-container {
	padding-top: 0px !important;
}
.vehicleAcknowledgementsHistoricalOrdersRazor-floatRight {
	position: relative;
}





/*----------------------------------------------------
Toggle / Switch in Figma
----------------------------------------------------*/
/* Remove padding from label */
.telerik-blazor.minwidth-maxcontent.k-floating-label-container  {
    padding: 0;
}
.k-switch {
	display: flex !important;
	padding: 0 !important;
	align-items: center !important;
	flex-shrink: 0;
	border-radius: 6.25rem !important;
	border: 0 !important;
}
.k-switch .k-switch-track {
	border-radius: 6.25rem !important;
	border: 0 !important;
}
.k-switch .k-switch-track,
.k-switch.k-switch-off .k-switch-track {
	color: var(--color-primitives-gray-200, rgba(205, 211, 215, 1)) !important;
	background: var(--color-primitives-gray-200, rgba(205, 211, 215, 1)) !important;
}
/* On */
.k-switch.k-switch-on .k-switch-track {
	color: var(--color-mode-surface-accent-success, rgba(8, 94, 25, 1)) !important;
	background: var(--color-mode-surface-accent-success, rgba(8, 94, 25, 1)) !important;
}
.k-switch-label-on::before {
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 400;
	content: '\e5ca';
}
.k-switch-label-on::after {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    content: '\e5ca';
}
/* 
Sizes 
*/
/* Medium / Default */
.k-switch,
.k-switch.k-switch-off .k-switch-track,
.k-switch.k-switch-on .k-switch-track,
.switch-medium,
.k-switch.switch-medium.k-switch-off .k-switch-track,
.k-switch.switch-medium.k-switch-on .k-switch-track {
	width: 2.5rem !important; 
	height: 1.25rem !important;
}
.k-switch.k-switch-on .k-switch-label-on,
.k-switch.switch-medium.k-switch-on .k-switch-label-on {
	width: 0.875rem;
	height: 0.875rem;
	left: 0.25rem !important;
	top: 0.65rem !important;
}
.k-switch .k-switch-thumb-wrap .k-switch-thumb,
.k-switch.switch-medium .k-switch-thumb-wrap .k-switch-thumb {
	border: none !important;
	height: 1rem !important;
	width: 1rem !important;
}
.k-switch.k-switch-off .k-switch-thumb-wrap,
.k-switch.switch-medium.k-switch-off .k-switch-thumb-wrap {
	left: 1rem !important;
}
.k-switch.k-switch-on .k-switch-thumb-wrap,
.k-switch.switch-medium.k-switch-on .k-switch-thumb-wrap {
	left: calc(1.6rem - 2px) !important;
}
.k-switch-label-on::before,
.switch-medium.k-switch-label-on::before {
	font-size: 0.875rem;
}
.k-switch-label-on::after,
.switch-medium.k-switch-label-on::after {
    font-size: 0.875rem;
}
/* Small */
.switch-small,
.k-switch.switch-small.k-switch-off .k-switch-track,
.k-switch.switch-small.k-switch-on .k-switch-track {
	width: 2rem !important;
	height: 1rem !important;
}
.k-switch.switch-small.k-switch-on .k-switch-label-on {
	width: 0.875rem;
	height: 0.875rem;
	left: 0.175rem !important;
	top: 0.5rem !important;
}
.k-switch.switch-small .k-switch-thumb-wrap .k-switch-thumb {
	width: 0.75rem !important;
	height: 0.75rem !important;
	border: none !important;
}
.k-switch.switch-small.k-switch-off .k-switch-thumb-wrap{
	left: 0.85rem !important;
}
.k-switch.switch-small.k-switch-on .k-switch-thumb-wrap {
	left: 1.125rem !important;
}
.switch-small.k-switch-label-on::before,
.switch-small .k-floating-label-container {
	font-size: 0.75rem;
	font-size: 1rem;
}
.switch-small.k-switch-label-on::after,
.filters-switch .k-floating-label-container {
    font-size: 0.75rem;
	font-size: 1rem !important;
	color: #242627 !important;
}

/* Large */
.switch-large,
.k-switch.switch-large.k-switch-off .k-switch-track,
.k-switch.switch-large.k-switch-on .k-switch-track {
	width: 3rem !important;
	height: 1.5rem !important;
}
.k-switch.switch-large.k-switch-on .k-switch-label-on {
	width: 1rem;
	height: 1rem;
	left: 0.35rem !important;
	top: 0.75rem !important;
}
.k-switch.switch-large .k-switch-thumb-wrap .k-switch-thumb {
	width: 1.25rem !important;
	height: 1.25rem !important;
	border: none !important;
}
.k-switch.switch-large.k-switch-off .k-switch-thumb-wrap {
	left: 1.125rem !important;
}
.k-switch.switch-large.k-switch-on .k-switch-thumb-wrap {
	left: 1.85rem !important;
}

.switch-large .k-switch-label-on::before {
	font-size: 1rem;
}
.switch-large .k-switch-label-on::after {
	font-size: 1rem;
}






/*----------------------------------------------------
Switch - Pageswitcher (only 1 size)
----------------------------------------------------*/
.pageswitcher.k-button-group {
    padding:var(--spacing-mode-spacing-complex-component-tiny, 0.125rem) !important;
    background: #fff;
	border: none;
	display: inline-flex;
	padding: 0.125rem;
	align-items: center;
	gap: 0.25rem;
	border-radius: 0.375rem;
    border: 1px solid var(--color-mode-border-primary, #E9EBEC) !important; /* Figma mistake */
    background: var(--color-mode-surface-background-primary, #FFF) !important;
	/*
	background: red !important;
	*/
	cursor: pointer !important;

	width: max-content; /* for flex containers, so this doesn't go full-width */
}
.pageswitcher.k-button-group .k-button.k-button-md {
    display: flex;
	padding: 0.25rem 0.5rem;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;

	border-radius: 4rem;
    border: 1px solid var(--color-mode-border-primary, #E9EBEC) !important; /* Figma mistake */
    border: none !important;
    background: var(--color-mode-surface-background-primary, #FFF) !important;
	cursor: pointer !important;
}
.pageswitcher.k-button-group .k-button.k-button-md .k-button-text {
    font-family: var(--body-small-regular-font-family, "Source Sans Pro") !important;
    font-weight: var(--body-small-regular-font-weight, 400) !important;
    font-size: var(--body-small-regular-font-size, 0.875rem) !important; /* 14px */
	color: var(--color-mode-text-link-primary, rgba(230, 240, 246, 1)) !important;
    letter-spacing: var(--body-small-regular-letter-spacing, 0px) !important;
	/*
    line-height: var(--body-small-regular-line-heigh, 20px) !important;
	*/
	line-height: 19px !important;
    font-style: var(--body-small-regular-font-style, normal) !important;
	cursor: pointer !important;
}
.pageswitcher.k-button-group .k-button.k-button-md.k-selected,
.pageswitcher.k-button-group .k-button.k-selected .k-button-text {
    background: var(--color-mode-surface-accent-info, #004B78) !important;
}
.pageswitcher.k-button-group .k-button.k-button-md.k-selected .k-button-text {
	color: var(--color-mode-text-inverse-primary, rgba(255, 255, 255, 1)) !important;
    font-weight: var(--body-small-bold-font-weight, 600) !important;
}















/*----------------------------------------------------

Tables - Main Dash Page Tables

OnCellRender="@( (e) => e.Class = "center-align" )"
	<GridCheckboxColumn Visible="isActiveView" CheckBoxOnlySelection="true" Width="40px" OnCellRender="@( (e) => e.Class = " center-align" )" />	

MaxResizableWidth
TextAlign

https: //yoksel.github.io/url-encoder/

https: //docs.telerik.com/blazor-ui/components/grid/columns/bound#appearance
----------------------------------------------------*/



/* General */
.telerik-blazor.k-grid.k-grid-md.dashGrid-desk,
.telerik-blazor.k-grid.dashGrid-desk {
	
}


/*
Horizontal Alignment - Headers & Cells 
*/
.telerik-blazor.k-grid.dashGrid-desk tr td.center-align {
	text-align: center !important;
}


.right-align .k-cell-inner > .k-link {
    flex-flow: row-reverse nowrap;
}

/*
Style Cells 
*/
.telerik-blazor.k-grid.dashGrid-desk {
	border: 1px solid #EDEDED;
}
.dashGrid-desk-BulkChassisStatusImportExcel.k-grid.k-grid-md .k-grid-container .k-grid-content {
	border-radius: 8px;
}
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table th,
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table td,
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table tr {
	border: 1px solid #EDEDED;

}

/*-------------------------------------------------------------------------- NOT DONE Rouned Corners, Dash Tables */
/* Rounded Corners 
.telerik-blazor.k-grid.dashGrid-desk table {
	border-collapse: separate;
	border-spacing: 0;
}
.telerik-blazor.k-grid.dashGrid-desk thead {
	border: none;
}
.telerik-blazor.k-grid.dashGrid-desk thead > tr > th,
.telerik-blazor.k-grid.dashGrid-desk tbody > tr > td {
	border: 1px solid red;
	border-style: solid none none solid !important;
}

.telerik-blazor.k-grid.dashGrid-desk thead > tr > th:first-of-type {
	border-radius: 8px 0 0 0;
	border-style: solid none none solid !important;
}
.telerik-blazor.k-grid.dashGrid-desk tbody > tr > td:first-of-type {
	border-style: solid none none solid !important;
}
.telerik-blazor.k-grid.dashGrid-desk tbody > tr:last-of-type > td:first-of-type {
	border-radius: 0 0 0 8px !important;
	border-style: solid none solid solid !important;
}

.telerik-blazor.k-grid.dashGrid-desk thead > tr > th:last-of-type {
	border-radius: 0 8px 0 0;
	border-style: solid solid none solid !important;
}
.telerik-blazor.k-grid.dashGrid-desk tbody > tr > td:last-of-type {
	border-style: solid solid none solid !important;
}
.telerik-blazor.k-grid.dashGrid-desk tbody > tr:last-of-type > td:last-of-type {
	border-radius: 0 0 8px 0;
	border-style: solid  !important;
}
*/

.telerik-blazor.k-grid.dashGrid-desk tbody tr {
	background: #FFF !important;
}
.telerik-blazor.k-grid.dashGrid-desk tr td {
	padding: 10px 8px;
	gap: 8px;
	align-self: stretch;	
	border-color: #EDEDED;
	border-bottom: 1px solid #EDEDED;
}
.telerik-blazor.k-grid.dashGrid-desk tr td .k-floating-label-container {
	padding: 0;
}
/* Hover Row */
.holman-drawer-desktop .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover,
.holman-drawer-desktop .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover {
	background: #F7F8F9;
}
.holman-drawer-desktop .k-grid td.k-selected, 
.holman-drawer-desktop .k-grid .k-table-row.k-selected > td, 
.holman-drawer-desktop .k-grid .k-table-td.k-selected, 
.holman-drawer-desktop .k-grid .k-table-row.k-selected > .k-table-td {
	background: #F7F8F9;
}
/* Hover Cell */
.holman-drawer-desktop .k-grid .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover td:hover,
.holman-drawer-desktop .k-grid .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover td:hover,
.holman-drawer-desktop .k-grid .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover td.k-hover,
.holman-drawer-desktop .k-grid .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover td.k-hover {
	background: #f1f5f7;
}


/* Disable hover on mobile cards */
.holman-drawer-desktop .k-grid .k-grid .k-table-tbody>.k-table-row:not(.k-detail-row):hover td.dashGrid-mobile-card:hover,
.holman-drawer-desktop .k-grid .k-grid .k-table-tbody>.k-table-row:not(.k-detail-row).k-hover td.dashGrid-mobile-card:hover,
.holman-drawer-desktop .k-grid .k-grid .k-table-tbody>.k-table-row:not(.k-detail-row):hover td.dashGrid-mobile-card.k-hover,
.holman-drawer-desktop .k-grid .k-grid .k-table-tbody>.k-table-row:not(.k-detail-row).k-hover td.dashGrid-mobile-card.k-hover,

td.dashGrid-mobile-card:hover,
td.dashGrid-mobile-card.k-hover {
	background: #fff !important;
}

/* Hide default telerik export buttons, since using buttons top right of page */
.telerik-blazor.k-grid.dashGrid-desk .k-toolbar.telerik-blazor.k-grid-toolbar.k-toolbar-md {
	display: none;
}



/* 

Headers 

*/
.telerik-blazor.k-grid.dashGrid-desk thead.k-table-thead tr {
	background: #F1F5F7;
}
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th {
	vertical-align: middle;
	vertical-align: top;

	overflow: unset;
	white-space: wrap;
}
/* turn off text truncation and ellipses */
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th .k-cell-inner,
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th .k-cell-inner .k-link,
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th .k-cell-inner .k-link .k-column-title {
	margin: unset;
	padding: unset;

	overflow: unset;
	white-space: wrap;
}
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th > .k-cell-inner > .k-link > .k-column-title {
	margin-right: 2rem;
}
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th .k-cell-inner .k-link .k-column-title {
	color: #1D2433;

	font-family: var(--body-small-regular-font-family);
	font-size: var(--body-small-regular-font-size);
	line-height: var(--body-small-regular-line-height);
	font-weight: var(--body-small-bold-font-weight);
	letter-spacing: var(--body-small-regular-letter-spacing);
	font-style: var(--body-small-regular-font-style);
}
/* Indicate which header is sorted? Telerik gives
background-color: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 3%, transparent)  */
col.k-sorted,
.k-table-th.k-sorted {

}

/* 
Sort Buttons 
*/
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th .k-cell-inner .k-sort-icon {
	display: none;	/* hide telerik's arrows up and down */
}
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th .k-cell-inner .custom-sort-icon {
	position: absolute;
	top: 10px;
	right: 20px;

	content: url("data:image/svg+xml; utf8, %3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M9.73213 4.41898L14.042 8.25H5.42223L9.73213 4.41898Z' fill='%233B3F40' stroke='%233B3F40' /%3E%3Cpath d='M9.73213 15.581L5.42223 11.75L14.042 11.75L9.73213 15.581Z' fill='%233B3F40' stroke='%233B3F40' /%3E%3C/svg%3E");
	width: 21.25px;
	height: 20px;
}
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th .k-cell-inner .custom-sort-icon:hover,
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th.k-sorted[aria-sort="ascending"] .k-cell-inner .custom-sort-icon:hover,
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th.k-sorted[aria-sort="descending"] .k-cell-inner .custom-sort-icon:hover {
	content: url("data:image/svg+xml; utf8, %3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M9.73213 4.41898L14.042 8.25H5.42223L9.73213 4.41898Z' fill='%23989898' stroke='%23989898' /%3E%3Cpath d='M9.73213 15.581L5.42223 11.75L14.042 11.75L9.73213 15.581Z' fill='%23989898' stroke='%23989898' /%3E%3C/svg%3E");
	width: 21.25px;
	height: 20px;
}
/* Sorted - Ascending (arrow up) */
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th.k-sorted[aria-sort="ascending"] .k-cell-inner .custom-sort-icon {
	content: url("data:image/svg+xml; utf8, %3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M9.73213 4.41898L14.042 8.25H5.42223L9.73213 4.41898Z' fill='%233B3F40' stroke='%233B3F40' /%3E%3Cpath d='M9.73213 15.581L5.42223 11.75L14.042 11.75L9.73213 15.581Z' fill='%23F1F5F7' stroke='%23F1F5F7' /%3E%3C/svg%3E");
	width: 21.25px;
	height: 20px;
}
/* Sorted - Ascending (arrow down) */
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th.k-sorted[aria-sort="descending"] .k-cell-inner .custom-sort-icon {
	content: url("data:image/svg+xml; utf8, %3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M9.73213 4.41898L14.042 8.25H5.42223L9.73213 4.41898Z' fill='%23F1F5F7' stroke='%23F1F5F7' /%3E%3Cpath d='M9.73213 15.581L5.42223 11.75L14.042 11.75L9.73213 15.581Z' fill='%233B3F40' stroke='%233B3F40' /%3E%3C/svg%3E");
	width: 21.25px;
	height: 20px;
}

/* 
Filter Buttons 
*/
.k-grid-filter-menu.k-grid-header-menu {
	all: unset;
}
.k-grid-filter-menu.k-grid-header-menu .k-icon {
	position: absolute;
	top: 10px;
	right: 2px;
	/*	*/
    content: url("data:image/svg+xml; utf8, %3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M5.83751 5.0026H14.1708L9.99584 10.2526L5.83751 5.0026ZM3.54584 4.6776C5.22918 6.83594 8.33751 10.8359 8.33751 10.8359V15.8359C8.33751 16.2943 8.71251 16.6693 9.17084 16.6693H10.8375C11.2958 16.6693 11.6708 16.2943 11.6708 15.8359V10.8359C11.6708 10.8359 14.7708 6.83594 16.4542 4.6776C16.8792 4.1276 16.4875 3.33594 15.7958 3.33594H4.20418C3.51251 3.33594 3.12084 4.1276 3.54584 4.6776Z' fill='%233B3F40' /%3E%3C/svg%3E");
    width: 21.25px;
    height: 20px;
}
.k-grid-filter-menu.k-grid-header-menu.k-active .k-icon {
	content: url("data:image/svg+xml; utf8, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M7.00506 6H17.0051L11.9951 12.3L7.00506 6ZM4.25506 5.61C6.27506 8.2 10.0051 13 10.0051 13V19C10.0051 19.55 10.4551 20 11.0051 20H13.0051C13.5551 20 14.0051 19.55 14.0051 19V13C14.0051 13 17.7251 8.2 19.7451 5.61C20.2551 4.95 19.7851 4 18.9551 4H5.04506C4.21506 4 3.74506 4.95 4.25506 5.61Z' fill='%233B3F40' /%3E%3Cpath d='M11.589 14.2847L12 14.878L12.411 14.2847L17.6072 6.78475L18.1508 6L17.1962 6L6.80385 6L5.84916 6L6.39285 6.78475L11.589 14.2847Z' fill='%233B3F40' stroke='%233B3F40' /%3E%3C/svg%3E");
}
.k-grid-filter-menu.k-grid-header-menu[role="button"],
.k-grid-filter-menu.k-grid-header-menu:hover,
.k-grid-filter-menu.k-grid-header-menu:active {
	all: unset;
}
.k-grid-filter-menu.k-grid-header-menu .k-icon svg {
	display: none;
}
.k-grid-filter-menu.k-grid-header-menu:hover .k-icon,
.k-grid-filter-menu.k-grid-header-menu:active .k-icon {
    content: url("data:image/svg+xml; utf8, %3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M5.8375 5H14.1708L9.99583 10.25L5.8375 5ZM3.54583 4.675C5.22917 6.83333 8.3375 10.8333 8.3375 10.8333V15.8333C8.3375 16.2917 8.7125 16.6667 9.17083 16.6667H10.8375C11.2958 16.6667 11.6708 16.2917 11.6708 15.8333V10.8333C11.6708 10.8333 14.7708 6.83333 16.4542 4.675C16.8792 4.125 16.4875 3.33333 15.7958 3.33333H4.20417C3.5125 3.33333 3.12083 4.125 3.54583 4.675Z' fill='%23989898' /%3E%3C/svg%3E");
    width: 21.25px;
    height: 20px;

}
/* 
Info Icon Button
*/
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th .material-symbols-outlined.tooltip-target.icon-info-color {
	position: absolute;
	top: 10px;
	right: 6px;
	font-size: 16px;
}
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th .material-symbols-outlined.tooltip-target.icon-info-color:hover,
.telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th .material-symbols-outlined.tooltip-target.icon-info-color:active {
	color: #999999;
}


/* 

Filter Dropdown 

*/
.k-popup.k-reset {
	border-radius: 8px;
	box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.10);
}
.k-grid-filter-popup .k-columnmenu-item-wrapper {
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.k-grid-filter-popup .k-columnmenu-item-wrapper > .k-columnmenu-item .k-icon {
	display: none;
}
.k-grid-filter-popup .k-columnmenu-item-wrapper .k-columnmenu-item {
	padding: 0;
    font-size: var(--body-small-regular-font-size, 0.875rem);
    font-weight: 400 !important;
    font-family: var(--body-small-regular-font-family, "Source Sans Pro") !important;
    font-weight: var(--body-regular-font-weight, 400) !important;
    font-style: var(--body-small-regular-font-style, normal) !important;
    letter-spacing: var(--body-small-regular-letter-spacing, 0) !important;
}
.k-grid-filter-popup .k-columnmenu-item-wrapper .k-columnmenu-item-content .k-filter-menu .k-filter-menu-container .k-columnmenu-item,
.k-filter-menu-container {
	display: flex;
	gap: 1rem;
	padding: 0;
}
.k-filter-menu-container > span {
	width: 100% !important;
}
.k-filter-menu-container .k-actions-horizontal {
	flex-direction: row-reverse;
	flex-flow:row-reverse;
}
.k-filter-menu-container .k-actions button .k-button-text { 
	justify-content: center;
}
/*
.k-filter-menu-container .k-actions button {
	flex-direction: row-reverse;
	flex-flow:row-reverse;
}
.k-filter-menu-container .k-actions button:first-of-type {
	flex-direction: row-reverse;
	flex-flow: row-reverse;
}
.k-filter-menu-container .k-actions button:last-of-type {
	flex-direction: row-reverse;
	flex-flow: row-reverse;
}
*/



.button-small {
	padding: var(--spacing-mode-spacing-component-small, 0.5rem) !important;
	gap: var(--spacing-mode-spacing-component-small, 0.5rem) !important;	
}
.button-small .k-button-text {
	font-size: var(--body-small-regular-font-size, 0.875rem) !important;
	line-height: var(--body-small-regular-line-height, 1.25rem) !important;
}
.button-small .material-symbols-outlined {
	font-size: var(--body-small-regular-font-size, 0.875rem) !important;
	line-height: 1 !important;
}



/*To disable the filter menu extra filter options and added not() pseudo-class to exclude Filter and Clear buttons */
.k-filter-menu-container> :nth-child(3):not(.k-actions.k-actions-stretched.k-actions-horizontal),
.k-filter-menu-container> :nth-child(4):not(.k-actions.k-actions-stretched.k-actions-horizontal),
.k-filter-menu-container> :nth-child(5):not(.k-actions.k-actions-stretched.k-actions-horizontal) {
	display: none;
}

/*Removing thead select all option from the filter menu*/
.k-reset .k-multicheck-wrap>li:first-child {
	display: none;
}









/*
Actual buttons in tables (not icon buttons)
like Comments Button (like on Vehicle Confirmation) 
---------------------------*/
.k-button.k-disabled.k-button-flat.k-button-flat-tertiary,
.k-button.k-state-disabled.k-button-flat.k-button-flat-tertiary,
.k-button:disabled.k-button-flat.k-button-flat-tertiary {
	height: unset;
	gap: var(--spacing-mode-spacing-component-small)
}
table .k-button.k-button-flat.k-button-flat-tertiary .k-button-text,
table .k-button.k-button-flat.k-button-flat-tertiary .k-button-text,
table .k-button.k-button-flat.k-button-flat-tertiary .k-button-text {
	/* Body small/Regular */
	font-family: var(--body-small-regular-font-family);
	font-size: var(--body-small-regular-font-size);
	line-height: var(--body-small-regular-line-height);
	font-weight: var(--body-small-bold-font-weight);
	letter-spacing: var(--body-small-regular-letter-spacing);
	font-style: var(--body-small-regular-font-style);

	text-align: left;
}
.k-button.buttonComment.k-button-flat.k-button-flat-tertiary .k-button-text,
.k-button.buttonComment.k-button-flat.k-button-flat-tertiary .k-button-text,
.k-button.buttonCommente.k-button-flat.k-button-flat-tertiary .k-button-text {
	white-space: wrap;
	word-wrap: break-word;
}
.k-button.buttonComment.k-button-flat.k-button-flat-tertiary .k-button-icon {
	margin-top: 0.125rem;
}







/*----------------------------------------------------

Table Pagination - Main Dash Page Tables

GridPagerTemplate - https: //docs.telerik.com/blazor-ui/components/grid/templates/pager
----------------------------------------------------*/
.telerik-blazor.k-grid.k-grid-md.dashGrid-desk .k-pager,
.telerik-blazor.k-grid.dashGrid-desk .k-pager {
	
}
.telerik-blazor.k-grid.dashGrid-desk .k-pager {
	background: none;
}
.k-grid.k-grid-md {
	background: #fff;
}

/* Content Left */
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-sizes span.k-dropdownlist.k-picker .k-input-inner {
	width: 140px !important;
}
/*
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-sizes .k-dropdownlist.k-picker[aria-expanded="true"] {
	border-radius: 0 0 0.25rem 0.25rem;
}
.k-list .k-list-content .k-list-ul li:last-of-type {
	border-radius: 0 0 0.25rem 0.25rem !important;
	background: red !important;
}
*/
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-sizes span.k-dropdownlist.k-picker .k-input-inner:before {
	position: absolute;
	left: 36px;
	content: "items per page";
	width: 71px;
	color: var(--color-mode-text-primary, #242627) !important;
	padding-left: 0.25rem;
}
/* French CA version */
.frenchCanadianContent .telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-sizes span.k-dropdownlist.k-picker {
	width: 175px !important;
}
.frenchCanadianContent .telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-sizes span.k-dropdownlist.k-picker .k-input-inner {
	width: 133.7px !important;
}
.frenchCanadianContent .telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-sizes span.k-dropdownlist.k-picker .k-input-inner:before {
	content: "éléments par page";
	width: 112px;
}
/* hide teleriks's "items per page */
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-sizes span:nth-of-type(2) {
	display: none;
}
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-sizes span.k-dropdownlist.k-picker .k-button-md.k-icon-button .k-button-icon {
	background: url("data:image/svg+xml; utf8, %3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M11.06 5.53L8 8.58333L4.94 5.53L4 6.47L8 10.47L12 6.47L11.06 5.53Z' fill='%230169A7' /%3E%3C/svg%3E");
}
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-sizes span.k-dropdownlist.k-picker  {
	width: 155px;
}
/*
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-sizes span.k-dropdownlist {
	border: none;
}
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-sizes {
	border-radius: 0.25rem;
	border: 1px solid var(--color-mode-border-secondary, #CDD3D7);
	padding-right: var(--spacing-mode-spacing-component-small, 0.5rem);
}
	*/




/* Numbers, right */
.telerik-blazor.k-grid.dashGrid-desk .k-pager {
	margin: 0 !important;
	padding: 1rem !important;
}
.telerik-blazor.k-grid.dashGrid-desk .k-pager,
.dashGrid-desk .k-pager .k-pager-numbers button.k-button {
	font-family: var(--body-small-regular-font-family) !important;
	font-size: var(--body-small-regular-font-size) !important;
	line-height: var(--body-small-regular-line-height) !important;
	font-weight: var(--body-small-regular-font-weight) !important;
	letter-spacing: var(--body-small-regular-letter-spacing) !important;
	font-style: var(--body-small-regular-font-style) !important;
	color: var(--color-mode-text-secondary, #3B3F40) !important;

}
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers button.k-button,
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers .k-button.k-button-flat.k-button-flat-primary.k-button-md,
.k-pager .k-pager-numbers-wrap .k-button.k-pager-nav.k-pager-first::after,
.dashGrid-desk .k-pager .k-pager-numbers button.k-button {
	margin: 0 !important;
	padding: 0.25rem !important;
}
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers .k-pager-numbers-wrap {
	color: var(--color-mode-text-link-primary, #0169A7) !important;
}
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers {
	align-self: center !important;
}
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers .k-button-md.k-icon-button .k-button-icon.k-svg-icon > svg, 
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers .k-button-md.k-icon-button.k-button-md.k-icon-button .k-button-icon.k-icon-md > svg,
.k-pager-nav.k-icon-button .k-button-icon.k-svg-icon > svg, 
.k-pager-nav.k-icon-button .k-button-icon.k-icon-md > svg {
	fill: var(--color-mode-text-link-primary, #0169A7) !important;
}
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers button.k-button,
.k-pager-numbers button.k-button,
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-nav,
.k-pager .k-button::-moz-focus-inner,
.k-button::-moz-focus-inner,
.dashGrid-desk .k-pager .k-pager-numbers button.k-button {
	padding: 0.25rem !important;
	color: var(--color-mode-text-link-primary, #0169A7) !important;
}
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-selected,
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers button.k-button.k-selected,
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers .k-button.k-button-flat.k-button-flat-primary.k-button-md.k-selected {
	border-radius: 2px !important;
	background: var(--color-mode-surface-accent-info-alt-subtle, #E9EBEC) !important;
	color: var(--color-mode-text-primary, #242627) !important;
}
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers button:hover,
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers button.hover,
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers button:active,
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-numbers button.active,
.dashGrid-desk .k-pager .k-pager-numbers button.k-button:hover,
.dashGrid-desk .k-pager .k-pager-numbers button.k-button.hover,
.dashGrid-desk .k-pager .k-pager-numbers button.k-button:active,
.dashGrid-desk .k-pager .k-pager-numbers button.k-button.active {
	background: var(--color-mode-surface-accent-info-alt-subtle, #E9EBEC) !important;
}
/* Arrows, Right */
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-nav.k-disabled,
.telerik-blazor.k-grid.dashGrid-desk .k-pager .k-pager-nav,
.dashGrid-desk .k-pager .k-pager-numbers button.k-button.k-disabled {
	/*
	background: red !important;
	*/
	padding: 0.25rem !important;
	min-height: 28px;
}



/*  Hide default svg, << and >> Not Used  */
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button .k-button-icon svg,
.k-pager-numbers-wrap .k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button.k-pager-first,
.k-pager-numbers-wrap .k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button.k-pager-last {
	display: none !important;
}
/* Shared attributes */
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button {
	height: 28px !important;
}
/*  <  */
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button:nth-of-type(2) {
	width: 80px !important;
}
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button:nth-of-type(2) .k-button-icon:before {
	position: absolute;
	top: -1px;
	left: 10px;
	content: "Previous";
	width: 71px;
	height: 20px;
	color: var(--color-mode-text-link-primary, #0169A7);
}
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button:nth-of-type(2) span.k-button-icon {
	position: absolute;
	left: 0;
    background: url("data:image/svg+xml; utf8, %3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M10.4329 2.19913L9.40041 1.16663L3.56708 6.99996L9.40041 12.8333L10.4329 11.8008L5.63208 6.99996L10.4329 2.19913Z' fill='%230169A7' /%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
    width: 12px;
    height: 12px;
}
/* < Disabled */
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button.k-disabled:nth-of-type(2) span.k-button-icon:before {position: absolute;
	top: -1px;
	left: 10px;
	content: "Previous";
	width: 71px;
	height: 20px;
	color: var(--color-mode-text-disabled, #A4ADB2);
}
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button.k-disabled:nth-of-type(2) .k-button-icon {
	position: absolute;
	left: 0;
	background: url("data:image/svg+xml; utf8, %3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M10.4329 2.19913L9.40041 1.16663L3.56708 6.99996L9.40041 12.8333L10.4329 11.8008L5.63208 6.99996L10.4329 2.19913Z' fill='%23A4ADB2' /%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	width: 12px;
	height: 12px;
}

/*  >  */
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button:nth-of-type(3) {
	width: 50px !important;
}
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button:nth-of-type(3) .k-button-icon:before {
	position: absolute;
	top: -1px;
	right: 10px;
	content: "Next";
	width: 41px;
	height: 20px;
	color: var(--color-mode-text-link-primary, #0169A7);
}
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button:nth-of-type(3) .k-button-icon {
	position: absolute;
	right: 0;
    background: url("data:image/svg+xml; utf8, %3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M3.56708 11.8008L4.59958 12.8333L10.4329 6.99996L4.59958 1.16663L3.56708 2.19913L8.36791 6.99996L3.56708 11.8008Z' fill='%230169A7' /%3E%3C/svg%3E");
    width: 12px;
    height: 12px;
}
/* > Disabled */
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button.k-disabled:nth-of-type(3) span.k-button-icon:before {position: absolute;
	top: -1px;
	right: 10px;
	content: "Next";
	width: 41px;
	height: 20px;
	color: var(--color-mode-text-disabled, #A4ADB2);
}
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button.k-disabled:nth-of-type(3) .k-button-icon {
	background: url("data:image/svg+xml; utf8, %3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M3.56708 11.8008L4.59958 12.8333L10.4329 6.99996L4.59958 1.16663L3.56708 2.19913L8.36791 6.99996L3.56708 11.8008Z' fill='%23A4ADB2' /%3E%3C/svg%3E%0A");
	width: 12px;
	height: 12px;
}
/* Hover State etc */
.k-pager-nav.k-button-flat.k-button.k-button-flat-base.k-button-md.k-icon-button:hover {
	background: var(--color-mode-surface-accent-info-alt-subtle, #E9EBEC) !important;
}





/*--------------------------- 
Cell Alignment (set in columns - old notes
---------------------------*/
/* Guide: 

Regular Cell
---------------------------
TextAlign="ColumnTextAlign.Right"
Left, Right, Center
https: //docs.telerik.com/blazor-ui/components/grid/columns/bound#appearance


Headers - use HeaderClass
---------------------------
Component:
<GridColumn Field="@nameof(Product.Price)" Title="Sorting" Filterable="false"
	HeaderClass="center-me" TextAlign="@ColumnTextAlign.Center" />

CSS:
non-sortable headers 
.k-grid th.center-me {
    text-align: center;
}

sortable headers 
th.center-me .k-cell-inner > .k-link {
    justify-content: center;
}

https: //docs.telerik.com/blazor-ui/knowledge-base/grid-center-column-header-content
*/




/*
States - Rows
*/
/* Hover */
/* Active */



/* Classes for Specialty Columns (cells) */
/* Guide



*/
/* Checkbox */
/* Datepicker */
/* Button */

























/*----------------------------------------------------

Flyouts

----------------------------------------------------*/

/*
leftPostion

Vehicle Status Details View
*/

/* Flyout Height - fixed while content can scroll vertically and horizontally */
.k-window.telerik-blazor.detailsFlyout {
	position: fixed;
	height: 100svh;
	right: 0;
	display: flex;

	padding: 1.5rem 1rem 1.5rem 1.5rem; /* no padding right so scroll bar doesn't cover content - change so scrollbars appear side by side */
	padding: 0; /* can't put padding here b/c buttons need to be full-width b/c box-shadow */
	padding-right: 1rem; /* allow scrollbars to appear side by side */
	box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.04);
}
/* Flyout at Min - Collapsed - Narrow */
.k-window.telerik-blazor.detailsFlyout.windowMin {
	position: fixed;
	width: 100% !important;
	max-width: 445px !important;
}


/* Interior Layout */
.k-window.telerik-blazor.detailsFlyout .k-window-titlebar,
.k-window.telerik-blazor.detailsFlyout .k-window-content {
	padding: 0 1.5rem 0 0; /* no padding b/c buttons have to be full width with shadow */
	padding: 0;
	border: none;

	font-family: var(--body-small-bold-font-family, "Source Sans Pro");
	font-weight: var(--body-small-bold-font-weight, 600);
	font-size: var(--body-small-bold-font-size, 14px);
	letter-spacing: var(--body-small-bold-letter-spacing, 0px);
	line-height: var(--body-small-bold-line-height, 20px);
	font-style: var(--body-small-bold-font-style, normal);

}
.k-window.telerik-blazor.detailsFlyout .k-window-content,
.k-window.telerik-blazor.detailsFlyout .k-window-content .k-form.telerik-blazor.k-form-md,
.k-window.telerik-blazor.detailsFlyout .k-window-content .k-form.telerik-blazor.k-form-md form.k-form.telerik-blazor.k-form-md {
	display: flex;
	flex-direction: column;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content .k-form.telerik-blazor.k-form-md {
	flex: 1 1 auto;
	justify-content: space-between;
}
.k-window.telerik-blazor.detailsFlyout .k-window-titlebar {
	padding: 1.5rem 1.5rem 0 1.5rem !important;
}
.k-window-titlebar {
	background: none;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content .flyout-header {
	padding: 0.5rem 1.5rem 0 1.5rem;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content .flyout-header {
	padding: 0.5rem 1.5rem 0 1.5rem;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content .flyout-header h1 {
	color: var(--color-mode-text-primary, #242627);
	/* note - Vendor Portal h1 = the design system's h3, which is what Figma calls for */
}
.k-window.telerik-blazor.detailsFlyout .k-window-content .flyout-tabs {
	padding: 1.5rem 1.5rem 0 1.5rem;
}
.detailsFlyout-tabs {
	padding: 1.5rem 1.5rem 0;
	padding-right: .75rem;
}

/*To hide the messaging component panel bar header */
.k-window.telerik-blazor .holman-panelbar-right-overlay.flyoutContentSections.QuoteDetailsUpdateRazor li:nth-of-type(2) .k-link,
.k-window.telerik-blazor .holman-panelbar-right-overlay.flyoutContentSections.QuoteDetailsUpdateRazor li:nth-of-type(2) .k-link.k-selected,
.k-window.telerik-blazor .holman-panelbar-right-overlay.flyoutContentSections.QuoteDetailsUpdateRazor li:nth-of-type(2) .k-link.k-selected.k-focus {
	display: none;
}

/*To hide the vehicle details in the minimized view of the flyout when messaging section is selected */
.k-window.telerik-blazor.windowMin .holman-panelbar-right-overlay.flyoutContentSections.QuoteDetailsUpdateRazor li:nth-of-type(1) {
	display: none;
}






/* PanelBars */
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-link {
	padding: 2rem 0 1rem 0;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-link .k-icon,
.holman-panelbar-right-overlay.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link .k-icon.k-svg-icon.k-panelbar-toggle.k-panelbar-expand > svg,
.holman-panelbar-right-overlay.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link .k-icon.k-svg-icon.k-panelbar-toggle.k-panelbar-expand,
.holman-panelbar-right-overlay.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link:hover .k-icon.k-svg-icon.k-panelbar-toggle.k-panelbar-expand > svg {
	color: var(--color-mode-CTA-primary-fill-default, #0169A7);
}
/*
.holman-panelbar-right-overlay.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link.k-hover .k-icon.k-svg-icon.k-panelbar-toggle.k-panelbar-expand > svg, .holman-panelbar-right-overlay.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link.k-state-hover .k-icon.k-svg-icon.k-panelbar-toggle.k-panelbar-expand > svg, .holman-panelbar-right-overlay.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link.k-state-hovered .k-icon.k-svg-icon.k-panelbar-toggle.k-panelbar-expand > svg, .holman-panelbar-right-overlay.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link:hover .k-icon.k-svg-icon.k-panelbar-toggle.k-panelbar-expand > svg
*/
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-link .k-icon svg {
	width: 24px;
	height: 24px;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-link .header-with-chip {
	margin: 0 !important;
}
.k-window.telerik-blazor.detailsFlyout.windowMin .k-window-content form.k-form .k-form-field ul li,
.k-window.telerik-blazor.detailsFlyout.windowMin .k-panelbar-item {
	padding: 0 1.5rem 1.5rem !important;
	padding-right: 0.75rem !important;
	/*
	border-top: 1px solid var(--color-mode-border-primary, #E9EBEC);
	*/
}
.k-panelbar > .k-panelbar-header > .k-link,
.k-window.telerik-blazor.detailsFlyout .k-window-content ul.flyoutContentSections li .k-content .comment-section-flyout .col {
	padding: 0;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li:first-of-type {
	border: none !important;
	/* cannot make this work exactly. some flyouts have an extra, empty li at the bottom - so no matter how this is styled, it cannot work, to have both the last line removed on those AND visible on the flyouts that do not have an extra empty li. */
}

.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body {
	padding: 0 0 0.5rem 0;
	/*
	border-bottom: 1px solid var(--color-mode-border-primary, #E9EBEC);
	*/
}
/*
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li:last-of-type .k-animation-container .k-child-animation-container .k-card-body {
	border-bottom: none;
}
*/
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .rowHorizontal.k-form-field {

}

/* Panel Bar Content - somtimes tables, sometimes not */
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table {
	width: 100%;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td {
	padding: 0.5rem 0;
	vertical-align: middle;
	/*
	border-bottom: 1px solid var(--color-mode-border-secondary, #CDD3D7);
	*/
	border-top: 1px solid #E9EBEC;
}
/* If border needs to be removed in special cases */
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td.noBorder {
	border:  none !important;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td.pt-0 {
	margin-top: -0.25rem;
}

.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td:nth-of-type(2),
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table#CourtesyVehicleDetail tr td {
	text-align: right;
	justify-content: flex-end;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td.allow-click > div {
	display: flex;
	justify-content: flex-end;
}
/* Left Cells */
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td .popoverlabel.k-floating-label-container,
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td .k-floating-label-container,
.k-animation-container .k-child-animation-container .k-card-body table tr td label,
.k-animation-container .k-child-animation-container .k-panel-bar-content .k-card-body .k-label,
.k-animation-container .k-child-animation-container .k-panel-bar-content .k-card-body .k-floating-label-container,

.k-window.telerik-blazor.detailsFlyout .k-form .k-multiselect,
.k-window.telerik-blazor.detailsFlyout .k-form .k-floating-label-container,
.k-window.telerik-blazor.detailsFlyout .k-form .k-daterangepicker .k-dateinput,
.k-window.telerik-blazor.detailsFlyout .k-form .k-signature,

.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .k-form-field,
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .k-form .k-label {
	margin: 0 !important;
	padding: 0 !important;

	font-size: var(--body-small-regular-font-size, 14px) !important;
	font-family: var(--body-small-regular-font-family, "Source Sans Pro") !important;
	font-weight: var(--body-regular-font-weight, 400) !important;
	font-style: var(--body-small-regular-font-style, normal) !important;
	letter-spacing: var(--body-small-regular-letter-spacing, 0) !important;
	color: var(--color-mode-text-primary, #242627) !important;

	text-align: left;
	align-items: flex-start;
}
	.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td .k-floating-label-container.largeRegular {
		padding-top: 2rem !important;
		font-size: var(--body-large-regular-font-size, 18px) !important;
		line-height: var(--body-large-regular-line-height, 24px) !important;
		font-weight: 500 !important;
		letter-spacing: var(--body-large-regular-letter-spacing, 0) !important;
		font-style: var(--body-large-regular-font-style, normal) !important;
		color: var(--color-mode-text-primary, #242627) !important;
	}

/* Right Cells */
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td:nth-of-type(2) .popoverlabel.k-floating-label-container,
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td:nth-of-type(2) .k-floating-label-container,

.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .k-form .k-form-field-wrap {
	font-family: var(--body-small-bold-font-family, "Source Sans Pro") !important;
	font-weight: var(--body-small-bold-font-weight, 600) !important;
	font-size: var(--body-small-bold-font-size, 14px) !important;
	letter-spacing: var(--body-small-bold-letter-spacing, 0px) !important;
	line-height: var(--body-small-bold-line-height, 20px) !important;
	font-style: var(--body-small-bold-font-style, normal) !important;
	color: var(--color-mode-text-primary, #242627);

	text-align: right;
	align-items: flex-end;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td:nth-of-type(2) .k-textbox.k-input,
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td:nth-of-type(2) .k-input,
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td:nth-of-type(2) .k-picker {
	width: 100%;
	max-width: 10rem;
}

.unsetMaxWidth {
	max-width: unset !important;
}

/* If not tables or cells */
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .k-form-field,
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .k-form .k-label,
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .k-form .k-form-field-wrap {
	padding: 0.5rem 0;
}


/* Flyout Main Buttons, Bottom 
see box shadow in Figma
https: //www.figma.com/design/FwdzXcF9TUFERSds1ZOP4j/Vendor-Portal?node-id=2543-71577&t=or6Ftpnixe0o5b0c-4
*/
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-buttons,
.detailsFlyout-buttons-altContainer {
	margin: 0;
	padding-top: 1rem;
	position: sticky;
	right: 0;
	bottom: 0;
	left: calc(100% - 445px);
	z-index: 1000;
	/*
	margin-right: -1rem;
	*/
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-buttons .card-body.detailsFlyout-buttons,
.detailsFlyout-buttons {
	box-shadow: 0px -12px 8px 0px rgba(224, 224, 224, 1);
	box-shadow: 0px -8px 8px 0px rgba(224, 224, 224, 1);
	box-shadow: 0px -6px 4px 0px rgba(224, 224, 224, 1); /* #f4f4f4 */
	box-shadow: 0px -4px 4px 0px rgba(244, 244, 244, 1);
	/*
	padding: 1rem 1.5rem 1.5rem 1.5rem !important;
	*/
	padding: 1.5rem !important;
	padding-right: 0.75rem !important;
	background: #fff;
}
.detailsFlyout-buttons .rowHorizontal {
	gap: 1rem;
}
.detailsFlyout-buttons .rowHorizontal .col {
	display: flex;
	width: 50%;
}
.detailsFlyout-buttons .rowHorizontal .col button {
	flex: 1 1 auto;
}
.k-window.telerik-blazor.detailsFlyout form.k-form .k-form-buttons .card-body,
.k-window.telerik-blazor.detailsFlyout form.k-form .k-form-buttons .card-body .row,
.k-window.telerik-blazor.detailsFlyout form.k-form .k-form-buttons .card-body .row .col {
	padding: 0 !important;
}
.k-window.telerik-blazor.detailsFlyout form.k-form .k-form-buttons .card-body .row {
	gap: 1rem;
}
.k-window.telerik-blazor.detailsFlyout form.k-form .k-form-buttons .card-body .row {
	padding: 0 1rem;
}


/* Comment Section */
.commentDetails {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.commentDetails {
	padding-bottom: 1rem !important;
}


/* 
Files 

Invoice Section with File
https: //www.figma.com/design/FwdzXcF9TUFERSds1ZOP4j/Vendor-Portal?node-id=6757-100475&t=FZrBtm21QaU7guDj-4
 */
.viewdocuments-vertical .file-info {
	flex-direction: column !important;
	/*
	width: 33%;
	*/
	width: 116px;    
	/* derive width from min-width and figma. figma has 121.67, but this does not jive with the actual app width for this element.
	width of flyout content in this row is 380. row is flex-wrap with gap of 16px (1rem). on min-width, 3 should be able to fit. 
	(380 - 32) / 3 = 116px
	*/
	text-wrap: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
 }
.viewdocuments-vertical .file-info .file-icon {
	margin: 0 !important;
}
.viewdocuments-vertical .file-info .file-info-text {
	margin: 0 !important;
	width: 100% !important;
	font-family: var(--body-small-regular-font-family, "Source Sans Pro");
	font-size: var(--body-small-regular-font-size, 14px);
	line-height: var(--body-small-regular-line-height, 20px);
	font-weight: var(--body-small-regular-font-weight, 400);
	letter-spacing: var(--body-small-regular-letter-spacing, 0);
	font-style: var(--body-small-regular-font-style, normal);
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .k-form .file-info,
.k-window.telerik-blazor.detailsFlyout .file-info,
.file-info {
	display: flex;
	flex-direction: row !important;
	align-items: flex-start;
	gap: 8px;
	align-self: stretch;
	align-items: center;

	/*
	margin-top: 1.5rem;
	*/
	padding: 0.5rem;

	border-radius: 4px;
	/*
	border: 1px solid var(--Border-Tertiary, #242627);
	*/
	border: 1px solid #242627;
	width:100%;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .k-form .file-info,
.file-info {
	border: 1px solid #242627;
	border-right: 0;
	border-radius: 4px 0 0 4px;

	width: 50%;
	display: block;
	float: left;
}
.bulkUpload .file-info,
.file-info {
	border: 1px solid #242627;
	border-radius: 4px;
}
.k-window.telerik-blazor.detailsFlyout .SubmitInvoiceModal .file-info {
	width: 100% !important;
}
.bulkUpload .file-info-box,
.file-info-box {
	/*display: flex;*/
	width: fit-content;
	/*flex-direction: row;*/
	max-width:424px;
	padding: var(--spacing-mode-spacing-component-small, 8px);
}



.k-window.telerik-blazor.detailsFlyout .SubmitInvoiceModal .file-info.file-info-box {
	gap: 0 !important;
}
.k-window.telerik-blazor.detailsFlyout .SubmitInvoiceModal .file-info.file-info-box .file-info-text {
	text-align: left;
	/*text-wrap: nowrap;*/
	overflow: hidden;
	text-overflow: ellipsis;
}
.col-file-info {
	width: 100%;
	margin-right:8px;
}


.k-window.telerik-blazor.detailsFlyout .SubmitInvoiceModal label.extra-small {
	font-family: var(--body-extra-small-bold-font-family, "Source Sans Pro") !important;
	font-size: var(--body-extra-small-bold-font-size, 12px) !important;
	line-height: var(--body-extra-small-bold-line-height, 16px) !important;
	font-weight: var(--body-extra-small-bold-font-weight, 600) !important;
	letter-spacing: var(--body-extra-small-bold-letter-spacing, 0) !important;
	font-style: var(--body-extra-small-bold-font-style, normal) !important;

}
.fullWidthFile {
	width: 100%;
	max-width: 100%;
}
.fullWidthFile .file-info-box {
	width: 100%;
}
.fullWidthFile .file-info.file-info-box .file-info-text {
	text-align: left;
}
.bulkUpload .file-info .icon-container,
.file-info .icon-container {
	position: relative;
	align-self: flex-end;
}
.bulkUpload .file-info .icon-container .material-symbols-outlined,
.file-info .icon-container .material-symbols-outlined {
	position: absolute;

	cursor: pointer;

	font-size: 8px;
	color: #414141;

	width: 18px;
	height: 18px;

	background-image: url(../images/cancel-outline3.svg);
	background-repeat: no-repeat;
  	top: -15px;
	right: -15px;
}
.file-info-horizontal {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	align-self: stretch;
	align-items: center;
}
/*
	height: 24px;
	width: 22px;
	background: url('../images/pdf-icon.svg');
	background-repeat: no-repeat;

	margin-right: 0.5rem;

	display: block;
	float: left;
.bulkUpload .file-info .circle-icon {
	background-color: #F1F5F7;
	border: none;
	cursor: pointer;
	font-size: 16px;
	position: absolute;
	top: 0px;
	right: 0px;
}
.bulkUpload .file-info .remove-icon {
	z-index: 1;
	font-size: 12px;
	position: absolute;
	top: 0px;
	right: 0px;
}
*/
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container form > label.invoicelabels {
	padding: 0.5rem;
	padding-top: calc(0.5rem + 2px);
	display: flex;

	text-align: right; 

	border: 1px solid #242627;
	border-left: 0;
	border-radius: 0 4px 4px 0;

	width: 50%;
	display: block;
	float: left;

	height: 42px;
	
}
.file-info .file-icon-container { /* close etc buttons top right */

}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .k-form .file-info .file-icon,
.k-window.telerik-blazor.detailsFlyout .file-info .file-icon,
.file-info .file-icon {
	height: 22px;
	width: 24px;
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 0.5rem;
	display: block;
	float: left;
}
	/* PDF Files */
	.file-info .file-icon.pdf {
		background: url('../images/pdf-icon.svg');
	}

	/* Word Documents */
	.file-info .file-icon.doc,
	.file-info .file-icon.docx {
		background: url('../images/doc-info.svg');
	}

	/* Image Files */
	.file-info .file-icon.jpg,
	.file-info .file-icon.jpeg
	{
		background: url('../images/jpg-icon.svg');
	}

	/* RTF Files */
	.file-info .file-icon.rtf {
		background: url('../images/rtf-icon.svg');
	}

	/* RTF Files */
	.file-info .file-icon.tif {
		background: url('../images/tif-icon.svg');
	}

	/* csv Files */
	.file-info .file-icon.csv {
		background: url('../images/CSV_icon.png');
	}

.bulkUpload .file-info.file-info-box .file-icon,
.file-info.file-info-box .file-icon {
	min-height: 24px;
	width: 22px;
	background-repeat: no-repeat;
	margin-right: 0.5rem;
	display: block;
	float: left;
	background-position-y:center;
	height:100%;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .k-form .file-info .file-info-text.container,
.file-info .file-info-text.container {
	padding: 2px 0 0;

	display: block;
	float: left;

	width: calc(100% - 34px);
}
/* File image in Vehicle Details in flyout was pushing content outside table */
.detailsFlyout.windowMin .flyoutContentSections .viewdocuments.viewdocuments-vertical {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	max-width: 380px;
	width: 100%;
	flex-direction:column;
}
.detailsFlyout.windowMax .flyoutContentSections .viewdocuments.viewdocuments-vertical {
	display: flex;
	flex-wrap: wrap;
	max-width: 425px;
	width: calc(100% - 10px);
	flex-direction: column;
}

.file-info .file-info-text.container {
	text-wrap: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.bulkUpload .file-info.file-info-box .file-info-text,
.file-info.file-info-box .file-info-text {
	margin-left: 0;
	width: calc(100% - 30px);
	white-space: wrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}





/* Comment Form in Flyout - In Progress */
/* moved this to global.css to keep them working */
.comment-section-flyout {
	display: flex !important;
	flex-direction: column;
	gap: 1.5rem;
}
.comment-section-flyout .row {
	padding: 0 !important;
}
.flyout-comments,
.flyout-comments form {
	display: flex;
	flex-direction: column;
	
	gap: 0.5rem; /* in addition to row margin of 1rem */
	flex: 1 1 auto;
}
.flyout-comments {
	width: calc(445px - 3rem);
}
.flyout-comments form textarea {
	width: auto;
}
.flyout-comments form .comment-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-mode-spacing-component-small, 0.5rem);
	flex: 1 1 auto;
	margin-right: 1rem;
}


 .k-window.telerik-blazor.detailsFlyout .comment-section-flyout h6 {
	margin-top: 1.5rem;
 }


.flyout-comments form .k-input-inner {
	padding: var(--spacing-mode-spacing-component-small, 0.5rem);
}
.flyout-comments form label {
}
.comment-section-exchange .col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.comment-section-exchange {
	margin-bottom: 3rem;
}
/* temporary */
.comment-section-exchange-fromClient {
	flex-direction: column;
}

.comment-section-exchange-fromHolman .comment-section-exchange-bubble {
	border-radius: 0.75rem;
	background: var(--color-mode-surface-accent-info-subtle);
}

.comment-section-exchange-fromClient .comment-section-exchange-bubble {
	border-radius: 0.75rem;
	background: var(--color-mode-surface-accent-success-z);
}

.sendmessage .k-form-buttons.k-actions-start {
	display: flex;
	flex-direction: column;
	box-shadow: none;
	margin-top: 0rem;
	padding-top: 0rem;
}

.unread-message-icon {
	font-size: 1rem;
	padding-left: 0.5rem;
	color: var(--color-mode-icon-info)
}

.unread-message-border {
	border: 1px solid var(--color-mode-surface-accent-info);
}

/*----------------------------------------------------

Flyout Expanded - windowMax

----------------------------------------------------*/
/*
.k-window.telerik-blazor.detailsFlyout.windowMax {
	padding: 1.5rem 1.5rem 1.5rem 5.25rem;
}
	*/
.k-window.telerik-blazor.detailsFlyout.windowMax .k-window-titlebar,
.k-window.telerik-blazor.detailsFlyout.windowMax .k-window-content .flyout-header,
.k-window.telerik-blazor.detailsFlyout.windowMax .k-window-content .flyout-tabs,
.k-window.telerik-blazor.detailsFlyout.windowMax .k-window-content .detailsFlyout-tabs
/*.k-window.telerik-blazor.detailsFlyout.windowMax .k-window-content ul.flyoutContentSections li:first-of-type*/ {
	padding-left: 5.25rem !important;
}
.windowMax.detailsFlyout.windowMax .k-button[title="Restore"] {
	top: 24px;
	left: 24px;
}



/* Stacking */
/* Commented out when using left/right side layouts for side panel window
.detailsFlyout.windowMax > .k-window-content > .position-relative,
.detailsFlyout.windowMin > .k-window-content > .position-relative {
	display: flex; 
	height: 100%;
	flex-direction: column;
}
.detailsFlyout.windowMax .k-form-field {
	display: flex;
	flex: 1 1 auto;
	width: 100%;
	flex-direction: column;
}
.detailsFlyout.windowMax .k-window-content form.k-form .k-form-field ul {
	width: 100%;
	height: 100%;
	overflow: scroll;
}
.k-window.telerik-blazor.detailsFlyout.windowMax .k-window-content ul.flyoutContentSections li {
	width: 40%;
	position: relative;
	top: 0; 
	left: 60%;
}
.k-window.telerik-blazor.detailsFlyout.windowMax .k-window-content form.k-form .k-form-field ul li:first-of-type,
.k-window.telerik-blazor.detailsFlyout.windowMax .k-window-content ul.flyoutContentSections li:first-of-type {
	width: 60%;
	height: 100%;
	padding-right: 40px !important;
	left: 0;
	position: absolute;
}*/


/* If in Messages tab */
.k-window.telerik-blazor.detailsFlyout.windowMax ul.flyout-MessageView {
	width: 100%;
}
.k-window.telerik-blazor.detailsFlyout.windowMax ul.flyout-MessageView li:first-of-type,
.k-window.telerik-blazor.windowMax .holman-panelbar-right-overlay.flyoutContentSections.QuoteDetailsUpdateRazor li:nth-of-type(1) {
	display: none;
}
/*.k-window.telerik-blazor.detailsFlyout.windowMax ul.flyout-MessageView li:nth-of-type(2),
.k-window.telerik-blazor.windowMax .holman-panelbar-right-overlay.flyoutContentSections.QuoteDetailsUpdateRazor li:nth-of-type(2)*/
.windowMax .leftSideColumnDiv {
	width: 65%;
	height: 100%;
	padding-right: 40px !important;
	padding-left: 5.25rem !important;
/*	left: 0;
	top: 0;
	position: relative;*/
}

.windowMax .rightSideColumnDiv {
	width: 35%;
	padding-right: .75rem
}

/* END If in Messages tab */
.k-window.telerik-blazor.detailsFlyout.windowMax .k-window-content form.k-form .k-form-field ul li,
.k-window.telerik-blazor.detailsFlyout.windowMax .k-window-content ul.flyoutContentSections li {
	border-top: none;

}
.detailsFlyout.windowMax .k-window-content form.k-form .k-form-field ul {
	padding-bottom: 3rem;
}
.k-window.telerik-blazor.detailsFlyout.windowMax .k-window-content form.k-form .k-form-buttons .detailsFlyout-buttons {
	/*
	padding-left: 60% !important;
	*/

	padding-left:  65% !important;

}





/*----------------------------------------------------

Modals / Dialog

----------------------------------------------------*/
.k-window.k-dialog.modal,
.k-dialog-wrapper .k-window.k-dialog {
	display: flex;
	width: 100%;
	max-width: 480px;
	padding: var(--spacing-mode-spacing-complex-component-med, 24px);
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-mode-spacing-complex-component-base, 16px);
}
.k-window.k-dialog.modal.modal-ReasonForDateChange {
	padding: var(--spacing-mode-spacing-complex-component-med, 24px) 0;
}
.k-window.k-dialog.modal.modal-ReasonForDateChange .k-window-titlebar.k-dialog-titlebar,
.k-window.k-dialog.modal.modal-ReasonForDateChange .k-window-content .reasonForDateChangeCompare {
	display: flex;
	width: 100%;
	padding: 0 var(--spacing-mode-spacing-complex-component-med, 24px) !important;
}
.k-window.k-dialog.modal.modal-ReasonForDateChange .k-window-content .actions-reasonForDateChangeCompare {
	padding:  var(--spacing-mode-spacing-complex-component-med, 24px) var(--spacing-mode-spacing-complex-component-med, 24px) 0 !important;
}


/*
.modal-AddComment,
.modal.modal-ReasonForDateChange .rowHorizontal .col {
	gap: 0 !important;
}
	*/
.modal-AddComment {
	padding: var(--spacing-mode-spacing-complex-component-med, 24px) 0 !important;
}
.modal-AddComment .k-window-titlebar,
.modal-AddComment .k-window-content,
.modal-AddComment .reasonForDateChangeCompare,
.modal-AddComment .k-actions {
	
	padding: 0 var(--spacing-mode-spacing-complex-component-med, 24px) !important;
}
.k-window-titlebar {
	padding: 0 !important;
}
.modal-AddComment .k-actions {
	padding-top: var(--spacing-mode-spacing-complex-component-med, 24px) !important;
}
/*
.k-dialog-wrapper .k-window.k-dialog table,
.reasonForDateChangeCompare table tr th,
.reasonForDateChangeCompare table tr td,
.compare-NewSection .k-floating-label-container,
*/
.reasonForDateChangeCompare {
	display: flex;
	flex-direction: column;
}
.modal.modal-ReasonForDateChange .rowHorizontal,
.modal .rowHorizontal {
	width: 100%;
}
.modal.modal-ReasonForDateChange .rowHorizontal .col,
.modal.modal-ReasonForDateChange .rowHorizontal .col-12,
.modal .rowHorizontal .col,
.modal .rowHorizontal .col-12 {
	width: 100%;

	font-family: var(--body-small-regular-font-family, "Source Sans Pro");
	font-size: var(--body-small-regular-font-size, 14px);
	line-height: var(--body-small-regular-line-height, 20px);
	font-weight: var(--body-small-regular-font-weight, 400);
	letter-spacing: var(--body-small-regular-letter-spacing, 0);
	font-style: var(--body-small-regular-font-style, normal);

	color: var(--color-mode-text-secondary, #3B3F40);
}
.k-window.k-dialog.modal .k-window-title,
.modal-ReasonForDateChange .k-window-title {
	padding: unset;
	padding-block: unset;
	padding-inline: unset;
	margin: unset;
	margin-block: unset;
	margin-inline: unset;
}
/*
.modal-ReasonForDateChange tr td:nth-of-type(2) {
	text-align: right;
}
	
	*/
.modal-ReasonForDateChange .compare-NewSection,
.modal .compare-NewSection {
	padding-top: var(--spacing-mode-spacing-complex-component-base, 16px);
	font-weight: 600 !important;
}
.modal-ReasonForDateChange .compare-NewSection .extra-small-bold,
.modal .compare-NewSection .extra-small-bold {
	font-weight: 600 !important;
}
.modal-ReasonForDateChange .col span:first-of-type,
.modal .col span:first-of-type {
	padding-right: 0.125rem !important;
}
.modal-ReasonForDateChange .col span.modalPaginationNumber,
.modal .col span.modalPaginationNumber {
	padding: 0 !important;
}
.compare-NewSection .k-floating-label-container {
	color: var(--color-mode-text-primary, #242627);
	padding: 0 0 var(--spacing-mode-spacing-component-xsmall, 4px) 0;
	font-family: var(--body-extra-small-bold-font-family, "Source Sans Pro");
	font-size: var(--body-extra-small-bold-font-size, 12px);
	line-height: var(--body-extra-small-bold-line-height, 16px);
	font-weight: var(--body-extra-small-bold-font-weight, 600);
	letter-spacing: var(--body-extra-small-bold-letter-spacing, 0);
	font-style: var(--body-extra-small-bold-font-style, normal);
}
.reasonForDateChangeCompare .k-dropdownlist.k-picker,
.modal-ReasonForDateChange .k-dropdownlist.k-picker,
.modal .k-dropdownlist.k-picker {
	width: 100%;
}
.k-window.k-dialog.modal .k-actions,
.modal-ReasonForDateChange .k-actions,
.modal-ReasonForDateChange .k-actions.actions-reasonForDateChangeCompare,
.modal .k-actions,
.modal .k-actions.actions-reasonForDateChangeCompare {
	width: 100%;
	justify-content: flex-end;
	padding: var(--spacing-mode-spacing-complex-component-med, 24px) 0 0 0;
	border-top: 1px solid var(--color-mode-border-primary, #E9EBEC);
}


/* Panel in Modal */
.modal .k-panelbar .k-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
/* Panel in Modal - disable collapse etc behavior */
.modal .k-panelbar li {
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.modal .k-panelbar .k-panelbar-header .k-link span.k-icon {
	display: none;
}
.modal .k-panelbar .k-panelbar-header .k-datepicker {
	pointer-events: auto;
}
.modal .k-panelbar .k-card-body {
	padding: 0;
}


/* Submit Invoice, and modals structured like it */
.k-dialog-wrapper .k-window.k-dialog .k-window-content.k-dialog-content,
.k-window-content,
.SubmitInvoiceModal,
.SubmitInvoiceModal form,
.k-dialog-wrapper .k-window.k-dialog .rowHorizontal.k-form-field .k-form-field-wrap {
	display: flex;
	width: 100%;
}
.SubmitInvoiceModal,
.k-dialog-wrapper .k-window.k-dialog .rowHorizontal.k-form-field .k-form-field-wrap {
	flex-direction: column;
}
.SubmitInvoiceModal form {
	flex-direction: column;
	gap: 1rem;
}
    .SubmitInvoiceModal .rowHorizontal .col:nth-of-type(2),
    .SubmitInvoiceModal .rowHorizontal.k-form-field .col:nth-of-type(2),
    .SubmitInvoiceModal .rowHorizontal.k-form-field .col:nth-of-type(2) * {
        justify-content: flex-end;
        /* align-self: flex-end; */ /* comment this out since it effects Invoice fields left/right alignment */
        text-align: right; /* for the Invoice Number & Amount fields */
    }
.SubmitInvoiceModal .k-input {
	width: 100%;
}

/* currency symbol left aligned with light to dark transition when number inputted */
.currency-input-wrapper {
	position: relative;
	display: inline-block;
}

.currency-symbol {
	position: absolute;
	left: 10px;
	top: 50%;
	font-weight: 400;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
	transition: font-weight 0.2s, color 0.2s;
}

.currency-symbol-placeholder {
	color: #A4ADB2;
}

.currency-symbol-input {
	color: var(--color-mode-text-primary, #242627);
}

.QuoteinfoCurrency{
	right:144px;
	left:0px;
}

.DeliveryChargesCurrency {
	right: 84px;
	left: 0px;
}

.NewDeliveryChargesCurrency {
	right: 144px;
	left: 0px;
}

.OrderDriveAwayCurrency {
	right: 144px;
	left: 0px;
}

/* placeholder color for textbox */
input:placeholder-shown {
	color: #A4ADB2 !important;
}



/*
.k-dialog-wrapper .k-window.k-dialog .k-window-titlebar.k-dialog-titlebar {
	padding: 0 var(--spacing-mode-spacing-complex-component-med, 24px) !important;
	padding: 0  !important;
}
*/
.k-dialog-wrapper .k-window.k-dialog .k-form-field,
.k-dialog-wrapper .k-label,
.k-dialog-wrapper label.regular {
	all: unset;
}
.k-dialog-wrapper .k-window.k-dialog .rowHorizontal.k-form-field col {
	display: flex !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	gap: var(--spacing-mode-spacing-page-large, 1.5rem) !important;
	justify-content: space-between !important;
	align-items: center !important; /* vertical */
}
.detailsFlyout .SubmitInvoiceModal form {
	gap: 0 !important;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .SubmitInvoiceModal .k-form-field,
.detailsFlyout .SubmitInvoiceModal form .rowHorizontal {
	padding: 0.5rem 0 !important;
	border-top: 1px solid rgb(233, 235, 236);
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .SubmitInvoiceModal .k-form-field:first-of-type {
	border-top: 0;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .SubmitInvoiceModal .k-form-field.no-gap-top {
	padding-top: 0 !important;
	border-top: none !important;
}
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .SubmitInvoiceModal .k-form-field.no-gap-bottom {
	padding-bottom: 0 !important;
	border-bottom: none !important;
}
/* No border on line in flyout */
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body .SubmitInvoiceModal .k-form-field.no-border
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body td.no-border{
	border-top: none !important;
}

.detailsFlyout .SubmitInvoiceModal .k-label.regular,
.detailsFlyout .SubmitInvoiceModal label.regular {
	font-family: var(--body-small-regular-font-family, "Source Sans Pro") !important;
	font-size: var(--body-small-regular-font-size, 14px) !important;
	line-height: var(--body-small-regular-line-height, 20px) !important;
	font-weight: var(--body-small-regular-font-weight, 400) !important;
	letter-spacing: var(--body-small-regular-letter-spacing, 0) !important;
	font-style: var(--body-small-regular-font-style, normal) !important;
}
.detailsFlyout.windowMax .SubmitInvoiceModal .rowHorizontal.k-form-field {
	flex-direction: row !important;
}
.SubmitInvoiceModal .k-upload.k-header.fileselect.importexcelupload {
	margin-top: -0.25rem;
}
.SubmitInvoiceModal .k-upload.k-header.fileselect.importexcelupload .k-file-info {
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*
.SubmitInvoiceModal .file-info.file-info-box {
	display: flex;
	width: 100%;
	border-radius: 4px !important;
	border: 1px solid #242627 !important;

}
.SubmitInvoiceModal .file-info .remove-icon {
	z-index: 1;
	font-size: 12px;
	position: absolute;
	top: 0px;
	right: 0px;
}
*/

/*----------------------------------------------------

Action Center / Home

----------------------------------------------------*/

#actionCenter .row-header,
#actionCenter .row-video {
	margin-bottom: 64px;
}
#actionCenter .row-header,
#actionCenter .row-header .col-12,
#actionCenter .row-header .col-xxl-6 {
	display: flex !important;
	flex-direction: column;
}
#actionCenter .row-header .col-12,
#actionCenter .row-header .col-xxl-6 {
	gap: 0.5rem;
}
#actionCenter h2 {
	font-size: var(--heading-heading-4-24px-font-size, 24px);
	line-height: var(--heading-heading-4-24px-line-height, 32px);
	font-weight: var(--heading-heading-4-24px-font-weight, 500);
	letter-spacing: var(--heading-heading-4-24px-letter-spacing, 0);
	font-style: var(--heading-heading-4-24px-font-style, normal);
}
#actionCenter .actionCenter-feedback p {
	font-size: var(--heading-heading-6-18px-font-size, 18px);
	line-height: var(--heading-heading-6-18px-line-height, 24px);
	font-weight: 400;
	letter-spacing: var(--heading-heading-6-18px-letter-spacing, 0);
	font-style: var(--heading-heading-6-18px-font-style, normal);
}
#actionCenter .actionCenter-feedback p.largeBold,
#actionCenter .row-blank > .col-12 > p.largeBold,
#actionCenter .row-light p.largeBold,
#actionCenter .row-future p.largeBold {
	color: var(--color-primitives-blue-700, #004B77);
	font-weight: 600 !important;
}


#actionCenter iframe {

}


@media (min-width: 1200px) {
	.col-xl-5 {
		width: 20% !important;
	}
}





#actionCenter .row-dark,
#actionCenter .row-light {
	gap: 1rem;
	padding: 64px 24px !important;
	border-radius: 8px;
}
#actionCenter.profile-content .row-blank {
	margin-top: 16px;
	padding: 1rem 0 !important;
	display: flex;
	gap: 1rem;
	flex-direction: column;
}
#actionCenter.profile-content .row-blank .row-nonCardCard {
	display: flex;
	gap: 1.5rem;
}
#actionCenter.profile-content .row-blank .row-nonCardCard .nonCardCard {
	padding: 24px 0 0 0 !important;
	display: flex;
	flex-direction: column;
}
#actionCenter.profile-content .row-light,
#actionCenter.homepage .row-light {
	gap: 1rem;
	padding: 32px 24px !important;
	border-radius: 8px;
}

#actionCenter .row-dark {
	margin-top: 0;
	background-color: #002c46;
	/*
	background: linear-gradient(to bottom, #002c46 0%, #006cac 100%);
	*/
	background: linear-gradient(180deg, #002C46 -62.03%, #006CAC 216.71%);
}
#actionCenter .row-dark .col-12,
#actionCenter .row-dark .card {
	color: #E6F0F6;
	background: none;
	border: 0;
}
#actionCenter .row-dark .card { 
	padding: 24px 24px 0;
}
#actionCenter.profile-content .row-dark {
	--bs-gutter-x: 0;
}
#actionCenter.profile-content .row-dark .card {
	padding: 16px 16px 0;
}
#actionCenter .row-dark .card-body {
	padding: 0 0 24px 0;
	border-bottom: 1px solid #E9EBEC;
}
#actionCenter .row-dark .card-body .card-icon {
	padding-bottom: 32px;
}
#actionCenter .row-dark .card-body .card-icon svg {
	width: 24px;
	height: 24px;
}
@media (min-width: 1399.99px) and (max-width: 1499px) {
	#actionCenter.profile-content .row-dark .card-body .card-title {
		min-height: 48px;
	}
}
@media (max-width: 767.99px) {
	#actionCenter.homepage .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch.p-0 .card-body {
		margin-bottom: 1rem;
	}
	#actionCenter.homepage .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch.p-0:last-of-type .card-body {
		border-bottom: none !important;
	}
}
@media (min-width: 768px) {
	/*
	#actionCenter .row-dark {
		padding-bottom: 32px !important;
	}
	*/
	#actionCenter .row-header,
	#actionCenter .row-video {
		margin-bottom: 48px;
	}
	#actionCenter .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:first-of-type .card-body,
	#actionCenter .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:nth-of-type(2) .card-body,
	#actionCenter .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch:first-of-type .card-body,
	#actionCenter .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch:nth-of-type(2) .card-body {
		border-bottom: 1px solid #E9EBEC;
	}
	#actionCenter .row-dark .col-xl-5 a.button-small {
		width: 100% !important;
		min-width: 100% !important;
	}
	#actionCenter a.button-small.actionCenter-w100  {
		width: 100% !important;
		max-width: 150px !important;
	}


}
@media (max-width: 767.99px) {#actionCenter.profile-content .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:first-of-type .card-body,
	#actionCenter.profile-content .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:nth-of-type(2) .card-body,
	#actionCenter.profile-content .row-dark .col-xs-12.col-md-6.col-xl-5.d-flex.align-items-stretch:first-of-type .card-body,
	#actionCenter.profile-content .row-dark .col-xs-12.col-md-6.col-xl-5.d-flex.align-items-stretch:nth-of-type(2) .card-body,
	#actionCenter.profile-content .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:nth-of-type(3) .card-body,
	#actionCenter.profile-content .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:nth-of-type(4) .card-body {
		padding-bottom: 2rem !important;
		margin-bottom: 2rem !important;
		border-bottom: 1px solid #E9EBEC !important;
	}
	#actionCenter.profile-content .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:last-of-type .card-body {
		border-bottom: none !important;
	}
	#actionCenter.profile-content .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch:first-of-type .card-body {
		margin-bottom: 3rem;
	}
}

@media (min-width: 1200px) {
	#actionCenter .row-dark .card {
		border: 0 !important;
		/*
		border-right: 1px solid #E9EBEC !important;
		*/
	}
	#actionCenter .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch,
	#actionCenter .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch {
		border: 0 !important;
	}
	#actionCenter .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch,
	#actionCenter .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch {
		border-right: 1px solid #E9EBEC !important;
	}
	#actionCenter .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch .card-body,
	#actionCenter .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch .card-body {
		border: 0 !important;
	}
	#actionCenter .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:last-of-type,
	#actionCenter .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch:last-of-type {
		border: 0 !important;
	}
}

@media (max-width: 767.99px) {
	#actionCenter.profile-content .row-dark .card,
	#actionCenter.profile-content .row-dark	.col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch .card  {
		padding-left: 0 !important;
		padding-right: 0 !important;	
	}
	#actionCenter.profile-content .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:first-of-type .card-body,
	#actionCenter.profile-content .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:nth-of-type(2) .card-body,
	#actionCenter.profile-content .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch:first-of-type .card-body,
	#actionCenter.profile-content .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch:nth-of-type(2) .card-body,
	#actionCenter.profile-content .row-dark .card-body {
		padding-bottom: 2rem !important;
		margin-bottom: 2rem !important;
		border-bottom: 1px solid #E9EBEC !important;
	}
	#actionCenter.profile-content .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:last-of-type .card-body {
		border-bottom: none !important;
	}
	#actionCenter.profile-content .row-dark .card-body {
		border: none !important
	}
}
@media (max-width: 991.99px) and (min-width: 768px) {
	#actionCenter.profile-content .row-dark .col-xl-5 a.button-small {
		max-width: 100px !important;
		min-width: 100px !important;
		
	}
	/*
	#actionCenter.profile-content .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:first-of-type .card-body,
	#actionCenter.profile-content .row-dark .col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch:nth-of-type(2) .card-body,
	#actionCenter.profile-content .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch:first-of-type .card-body,
	#actionCenter.profile-content .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch:nth-of-type(2) .card-body,
	#actionCenter.profile-content .row-dark .col-xs-12.col-md-6.col-xl-4.d-flex.align-items-stretch:nth-of-type(3) .card-body {
		padding-bottom: 3rem !important;
		margin-bottom: 2rem !important;
		border-bottom: 1px solid #E9EBEC !important;
	}
		*/
	.supportCard:not(:last-of-type) .card-body {
	 	padding-bottom: 2rem !important;
	 	margin-bottom: 1rem !important;
	 	border-bottom: 1px solid #E9EBEC !important;
	 }
	#actionCenter.profile-content .row-dark .card,
	#actionCenter.profile-content .row-dark	.col-xs-12.col-lg-6.col-xl-5.d-flex.align-items-stretch .card {
		padding-left: 0 !important;
		padding-right: 0 !important;	
		
	}
	.supportCard {
		padding: 0 !important;
	}
	
}
@media (min-width: 992px) and (max-width: 1199.99px) {
	.supportCard:not(:last-of-type) .card-body {
	 	padding-bottom: 2rem !important;
	 	margin-bottom: 1rem !important;
	 	border-bottom: 1px solid #E9EBEC !important;
	 }
	.supportCard {
		padding: 0 !important;
	}
	/*
	.supportCard .card {
		padding: 0 !important;
	}
		*/
	.supportCard:nth-child(odd) .card {
    	padding: 0 1rem 0 0 !important;
	}
	.supportCard:nth-child(even) .card {
    	padding: 0 0 0 1rem !important;
	}
}


#actionCenter .row-light {
	/*
	margin: 0 48px 48px;
	margin-top: -32px;
	*/
	margin-top: 1rem;
	background: #E6F0F6;
}
#actionCenter .row-light h4,
#actionCenter .row-light p {
	/*
	text-align: center;
	*/
}



#actionCenter .row .nonCardCard svg {
	height: 20px;
	width: 20px;
	margin-bottom: 20px;
}
@media (min-width: 1200px) {
	#actionCenter.profile-content .row-dark .card-body {
		border-bottom: none !important;
	}
	#actionCenter.profile-content .row-dark .supportCard {
		border-left: 1px solid #E9EBEC !important;
	}
}
@media (min-width: 1200px) {
	#actionCenter .row .nonCardCard {
		width: calc(15% - 0.5rem);
	}
}
@media (min-width: 992px) and (max-width: 1199.99px) {
	#actionCenter .row .nonCardCard {
		width: calc(32% - 0.5rem);
	}
}
@media (min-width: 500px) and (max-width: 991.99px) {
	#actionCenter .row .nonCardCard {
		width: calc(50% - 1rem);
	}
}
@media (max-width: 499.99px) {
	#actionCenter .row .nonCardCard {
		width: 100%;
	}
}


#actionCenter.profile-content a.button-small.button-primary {
	text-align: center;
}
@media (min-width: 1200px) {
	#actionCenter.profile-content .row-blank a.button-small.button-primary,
	#actionCenter.profile-content .card a.button-small.button-primary {
		width: 100% !important;
	}
}






#actionCenter .row-future .card {
	background: none;
	border: 0;
	padding: 24px 24px 0;
}
#actionCenter .row-future .card-body {
	padding: 0 0 24px 0;
	gap: 32px;
	border-bottom: 1px solid #E9EBEC;
}
#actionCenter .row-future .card svg {
	height: 24px;
	width: 24px;
}
#actionCenter .row-future .card-body {
	padding: 0 0 24px 0;
	border-bottom: 1px solid #E9EBEC !important;
	/*
	border-bottom: 1px solid blue !important;
	*/
}
#actionCenter .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:last-of-type .card-body {
	border: 0 !important;
}

@media (min-width: 768px) {
	#actionCenter .row-future .card-body,
	#actionCenter .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:last-of-type .card-body,
	#actionCenter .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:nth-of-type(3) .card-body {
		border: 0 !important;
	}
	#actionCenter .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:first-of-type .card-body,
	#actionCenter .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:nth-of-type(2) .card-body {
		border-bottom: 1px solid #E9EBEC !important;
		/*
		border-bottom: 1px solid purple !important;
		*/
	}
}
@media (min-width: 1200px) {
	#actionCenter .row-future .card {
		border: 0 !important;
	}
	#actionCenter .row-future.col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch {
		border: 0 !important;
	}
	#actionCenter .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch {
		border-right: 1px solid #E9EBEC !important;
		/*
		border-right: 1px solid red !important;
		*/
	}
	#actionCenter .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch .card-body,
	#actionCenter .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch .card-body:first-of-type {
		border: 0 !important;
	}
	#actionCenter .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:last-of-type {
		border: 0 !important;
	}
}






/*----------------------------------------------------

Settings

----------------------------------------------------


.holman-drawer-mobile .k-drawer,
.holman-drawer-mobile .drawer-container,
.holman-drawer-mobile .k-drawer-wrapper {
	display: none !important;
}
*/


#settings .row-header {
	margin-bottom: 64px;
}
#settings .row-header,
#settings .row-header .col-12,
#settings .row-header .col-xxl-6 {
	display: flex !important;
	flex-direction: column;
}
#settings .row-header .col-12,
#settings .row-header .col-xxl-6 {
	gap: 0.5rem;
}
@media (min-width: 768px) {
	#settings .chooseLanguage-container {
		max-width: 163px;
	}
	#settings .chooseLanguage .k-dropdownlist.k-picker {
		min-width: 150px;
		max-width: 163px;
	}
}
#settings .chooseLanguage .k-dropdownlist.k-picker {
	min-width: 150px;
}

#settings .userDetails,
#simulateUser .userDetails {
	color: var(--color-primitives-blue-700, #004B77);
}


@media (min-width: 768px) {
	#settings .row-light > * {
		justify-content: center !important;
		text-align: center !important;
	}
}


#settings .row-light,
#settings .row-dark {
	gap: 1rem;
	padding: 64px 24px !important;
	border-radius: 8px;
}


#settings .row-light {
	background: #E6F0F6;
}
#settings .row-light .col-12,
#settings .row-light .card {
	background: none;
	border: 0;
}
#settings .row-light .card { 
	padding: 24px 24px 0;
}
#settings .row-light .card-body {
	padding: 0 0 24px 0;
	border-bottom: 1px solid #E9EBEC;
}
#settings .card-icon {
	padding-bottom: 32px;
}
#settings svg {
	width: 48px;
	height: 48px;
}





@media (min-width: 1200px) {
	#settings .row-dark .card-container {
		border-right: 1px solid var(--color-mode-border-primary, #E9EBEC);
		border-radius: 0;
	}
	#settings .row-dark .card-container:last-of-type {
		border: none;
	}
}
@media (min-width: 768px) and (max-width: 1199.99px) {
	#settings .row-dark .card-container {
		padding-top: 2rem;
		padding-top: 0;
	}
	#settings .row-dark .card-container:first-of-type .card-title,
	#settings .row-dark .card-container:nth-of-type(2) .card-title {
		border: 0;
		border-bottom: 1px solid var(--color-mode-border-primary, #E9EBEC);
		border-radius: 0;
		padding-top: 0;
		padding-bottom: 3rem;
		flex: 1 1 auto;
	}
}
@media (max-width: 767.99px) {
	#settings .row-dark .card-container .card-title {
		border-bottom: 1px solid var(--color-mode-border-primary, #E9EBEC);
		border-radius: 0;
		padding-bottom: 3rem;
		
	}
	#settings .row-dark .card-container:last-of-type .card-title {
		border: 0;
		padding-bottom: 0;
	}
}




@media (min-width: 768px) {
	/*
	#settings .row-light {
		padding-bottom: 32px !important;
	}
	*/
	#settings .row-header {
		margin-bottom: 48px;
	}
	#settings .row-light .card-body {
		border: 0;
	}
	#settings .row-light .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:first-of-type .card-body,
	#settings .row-light .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:nth-of-type(2) .card-body {
		border-bottom: 1px solid #E9EBEC;
	}
}
@media (min-width: 1200px) {
	#settings .row-light .card {
		border: 0 !important;
		/*
		border-right: 1px solid #E9EBEC !important;
		*/
	}
	#settings .row-light .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch {
		border: 0 !important;
	}
	#settings .row-light .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch {
		border-right: 1px solid #E9EBEC !important;
	}
	#settings .row-light .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch .card-body {
		border: 0 !important;
	}
	#settings .row-light .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:last-of-type {
		border: 0 !important;
	}
}



#settings .row-dark {
	/*
	margin: 0 48px 48px;
	*/
	margin: 0 48px;
	margin-top: -32px;
	background-color: #002c46;
	background: linear-gradient(to bottom, #002c46 0%, #006cac 100%);
}
#settings .row-dark .col-12,
#settings .row-dark .card {
	color: #E6F0F6;
	background: none;
	border: 0;
}
#settings .row-dark h4,
#settings .row-dark p {
}




#settings .row-future .card {
	background: none;
	border: 0;
	padding: 24px 24px 0;
}
#settings .row-future .card-body {
	padding: 0 0 24px 0;
	gap: 32px;
	border-bottom: 1px solid #E9EBEC;
}
#settings .row-future .card svg {
	height: 24px;
	width: 24px;
}
#settings .row-future .card-body {
	padding: 0 0 24px 0;
	border-bottom: 1px solid #E9EBEC !important;
	/*
	border-bottom: 1px solid blue !important;
	*/
}
#settings .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:last-of-type .card-body {
	border: 0 !important;
}

@media (min-width: 768px) {
	#settings .row-future .card-body,
	#settings .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:last-of-type .card-body,
	#settings .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:nth-of-type(3) .card-body {
		border: 0 !important;
	}
	#settings .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:first-of-type .card-body,
	#settings .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:nth-of-type(2) .card-body {
		border-bottom: 1px solid #E9EBEC !important;
		/*
		border-bottom: 1px solid purple !important;
		*/
	}
}
@media (min-width: 1200px) {
	#settings .row-future .card {
		border: 0 !important;
	}
	#settings .row-future.col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch {
		border: 0 !important;
	}
	#settings .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch {
		border-right: 1px solid #E9EBEC !important;
		/*
		border-right: 1px solid red !important;
		*/
	}
	#settings .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch .card-body,
	#settings .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch .card-body:first-of-type {
		border: 0 !important;
	}
	#settings .row-future .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch:last-of-type {
		border: 0 !important;
	}
}


/*----------------------------------------------------

Simulate User

----------------------------------------------------*/
/*
#simulateUser .row-header {
	margin-bottom: 64px;
}
#simulateUser .row-header,
#simulateUser .row-header .col-12,
#simulateUser .row-header .col-xxl-6 {
	display: flex !important;
	flex-direction: column;
}
#simulateUser .row-header .col-12,
#simulateUser .row-header .col-xxl-6 {
	gap: 0.5rem;
}
	*/
#simulateUser h2 {
	font-size: var(--heading-heading-4-24px-font-size, 24px);
	line-height: var(--heading-heading-4-24px-line-height, 32px);
	font-weight: var(--heading-heading-4-24px-font-weight, 500);
	letter-spacing: var(--heading-heading-4-24px-letter-spacing, 0);
	font-style: var(--heading-heading-4-24px-font-style, normal);
}
/*
#simulateUser .simulateUser-feedback p {
	font-size: var(--heading-heading-6-18px-font-size, 18px);
	line-height: var(--heading-heading-6-18px-line-height, 24px);
	font-weight: 400;
	letter-spacing: var(--heading-heading-6-18px-letter-spacing, 0);
	font-style: var(--heading-heading-6-18px-font-style, normal);
}
#simulateUser .row-future p.largeBold {
	color: var(--color-primitives-blue-700, #004B77);
}
*/

#simulateUser .row-dark {
	gap: 1rem;
	padding: 64px 24px !important;
	border-radius: 8px;
	margin-top: 0;
	background-color: #E6F0F6;
	/*background: linear-gradient(to bottom, #002c46 0%, #006cac 100%);*/
}


	#simulateUser .row-dark .col {
		/*color: #E6F0F6;*/
		background: none;
		border: 0;
	}

#simulateUser .rowHorizontal.row-dark .col {
	display: flex;
	flex-direction: column;
}

#simulateUser {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

	#simulateUser label,
	#simulateUser .k-textbox.k-input.k-input-md.k-rounded-md.k-input-solid {
		height: auto;
		width: 100%;
	}

	#simulateUser .row {
		margin: 0;
		padding: 0 !important;
	}


	#simulateUser .rowHorizontal.row-dark .col {
		gap: 38px;
	}

@media (min-width: 1200px) {
	#simulateUser .row-dark .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch {
		border: 0 !important;
	}

	#simulateUser .row-dark .col-xs-12.col-md-6.col-xl-3.d-flex.align-items-stretch {
		border-right: 1px solid #E9EBEC !important;
	}
}



/*----------------------------------------------------

Progress Bar

https: //docs.telerik.com/blazor-ui/components/progressbar/overview
----------------------------------------------------
.progressBar .k-progressbar.k-progressbar-horizontal {
	display: flex;
	flex: 1 1 auto;
	gap: var(--spacing-mode-spacing-page-med, 1.5rem);
}*/


.progressBar {

}
.progressBar .k-progressbar-horizontal>.k-progressbar-value {
	/*
	width: 2.625rem;
	*/
}
.progressBar-stages {
	display: flex;
	justify-content: space-between;

}
/* Active Stage Text */
.progressBar .popoverdata.k-floating-label-container,
.popoverlabel.k-floating-label-container {
	font-family: var(--body-small-regular-font-family, "Source Sans Pro");
	font-size: var(--body-small-regular-font-size, 14px);
	line-height: var(--body-small-regular-line-height, 20px);
	font-weight: var(--body-small-regular-font-weight, 400);
	letter-spacing: var(--body-small-regular-letter-spacing, 0);
	font-style: var(--body-small-regular-font-style, normal);
	/*
	padding-top: var(--spacing-mode-spacing-component-small, 0.5rem);
	*/
}
.progressBar .popoverdata.k-floating-label-container {
	font-weight: var(--body-small-bold-font-weight, 600);
}




/*----------------------------------------------------

Upload file section (pink)

----------------------------------------------------*/
/* This is a bad hack for bulk upload - that page should be redone so that the browse button etc is inside the dropzone */
/*
.submitinvoice.k-external-dropzone {
	all: unset;
}
*/
.submitinvoice.k-external-dropzone {
	height: 5.125rem; 
}
.submitinvoice.k-external-dropzone .k-dropzone-inner {
	padding: 0;
}
.k-upload.k-header.fileselect.importexcelupload .k-dropzone-hint {
	display: none;
}

.submitinvoice.importexcel.k-external-dropzone,
.k-upload.k-header.fileselect.importexcelupload {
	display: flex;
	padding: var(--spacing-mode-spacing-component-base, 1rem);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-mode-spacing-component-base, 1rem);

	border-radius: var(--tokens-spacing-border-radius-xsmall, 0.25rem);
	border: 1px dashed var(--tokens-color-pink-pink-500, #FF23E9);
	background: var(--tokens-color-pink-pink-50, #FFE9FD) !important;

}
.submitinvoice.importexcel.k-external-dropzone {
	padding-bottom: 0;
	border-bottom: 0;
	border-radius: var(--tokens-spacing-border-radius-xsmall, 0.25rem) var(--tokens-spacing-border-radius-xsmall, 0.25rem) 0 0;
}
.k-upload.k-header.fileselect.importexcelupload {
	padding-top: 0;
	margin-top: -1.5rem;
	border-top: 0;
	border-radius: 0 0 var(--tokens-spacing-border-radius-xsmall, 0.25rem) var(--tokens-spacing-border-radius-xsmall, 0.25rem);
}





/*----------------------------------------------------

Bulk Upload

----------------------------------------------------*/

.bulkUpload-container,
.bulkUpload {
	display: flex;
	flex: 1 1 auto;
	gap: var(--spacing-mode-spacing-page-med, 1.5rem);
	flex-direction: column;
	height:100%;
}
.bulkUpload .nextButton {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
	gap: 1rem;
}
.bulkUpload-mapping .datamapping-table-container {
	display: flex;
	gap: var(--spacing-mode-spacing-page-med, 1.5rem);
}
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper {
	display: flex;
	width: 50%;
}
@media (max-width: 767.99px) {
	.bulkUpload-mapping .datamapping-table-container {
		flex-direction: column;
	}
	.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper {
		width: 100%;
	}
}



/* Horizontal Scrolling - needs proper hack to have cells fit content, and for header to be same as body 
.bulkUpload .dashGrid-desk table th,
.bulkUpload .dashGrid-desk table td {
	width: 45px !important;
}*/



.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table {
	border-collapse: separate;
	border-spacing: 0;
}
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table th,
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table td,
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table tr {
	border: 1px solid #EDEDED;

}



.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table thead > tr > th:first-of-type {
	border-radius: 8px 0 0 0;
	border-style: solid none none solid !important;
}
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table tbody > tr > td:first-of-type {
	border-style: solid none none solid !important;
}
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table tbody > tr:last-of-type > td:first-of-type {
	border-radius: 0 0 0 8px !important;
	border-style: solid none solid solid !important;
}

.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table thead > tr > th:last-of-type {
	border-radius: 0 8px 0 0;
	border-style: solid solid none solid !important;
}
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table tbody > tr > td:last-of-type {
	border-style: solid solid none solid !important;
}
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table tbody > tr:last-of-type > td:last-of-type {
	border-radius: 0 0 8px 0;
	border-style: solid  !important;
}

/*
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table {
	border: 1px solid #EDEDED;
	border-radius: 8px;
	border-color: red;
}
*/
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table th,
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table td {
	background: #fff;
}
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table th:first-of-type,
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table td:first-of-type {
	background: #f1f5f7;
}
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table th,
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table td { 
	padding: 12px 8px;
	vertical-align: middle;
	/*
	width: 200px;
	*/
}
/*
.bulkUpload-mapping .datamapping-table-container .datamapping-table-wrapper table td > span.k-floating-label-container {
	min-height: 60px;
	display: table-cell;
	vertical-align: middle;
}
*/

.bulkUpload-mapping .k-form .k-floating-label-container {
	padding: 0;
	margin: 0;
}

.bulkUpload .k-form-buttons.k-actions-start {
	display: none;
}
/*
.bulkUpload .k-virtual-scroller-content {
	overflow-x: scroll;
}

*/
.bulkUpload .rowVertical {
	gap: 1.5rem !important;
}
@media (max-width: 767.99px) {
	.rowVertical-mobile {
		flex-direction: column !important;
		gap: var(--spacing-mode-spacing-component-small, 0.5rem) !important;
		align-items: unset !important;
	}
}	



/*
These seems to make the main section noverflow its container in Windows Chrome
.k-drawer-expanded .k-drawer-content {
	width: calc(100vw - 224px) !important;
}
.k-drawer-mini .k-drawer-content {
	width: calc(100vw - 48px) !important;
}
*/





/*----------------------------------------------------

Flyout - CourtesyVehicleDetail - Payments

DeliverChargesDetail.razor
----------------------------------------------------*/
#CourtesyVehicleDetail tr:first-of-type td .k-label.small-bold.k-floating-label-container {
	font-family: var(--body-small-bold-font-family, "Source Sans Pro");
	font-size: var(--body-small-bold-font-size, 14px) !important;
	line-height: var(--body-small-bold-line-height, 20px) !important;
	font-weight: var(--body-small-bold-font-weight, 600) !important;
	letter-spacing: var(--body-small-bold-letter-spacing, 0) !important;
	font-style: var(--body-small-bold-font-style, normal) !important;
}
#CourtesyVehicleDetail tr:first-of-type td .k-label.small .k-floating-label-container,
.detailsFlyout .k-animation-container .k-child-animation-container .k-card-body table tr td label {
	font-family: var(--body-small-regular-font-family, "Source Sans Pro");
	font-size: var(--body-small-regular-font-size, 14px) !important;
	line-height: var(--body-small-regular-line-height, 20px) !important;
	font-weight: var(--body-small-regular-font-weight, 400) !important;
	letter-spacing: var(--body-small-regular-letter-spacing, 0) !important;
	font-style: var(--body-small-regular-font-style, normal) !important;
}

#CourtesyVehicleDetail .chargesAmount {
	max-width: 100px;
}


.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table#CourtesyVehicleDetail tr:first-of-type td,
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table#InvoiceFlyoutSection tr:first-of-type td,
.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr:first-of-type td {
	border: none !important;
}
#CourtesyVehicleDetail button.button-icon.deleteChargesAmount {
	padding: 0.5rem !important;
	border-radius: var(--tokens-spacing-border-radius-xsmall, 4px) !important;
	border: 1px solid var(--color-mode-border-tertiary, #242627) !important;
}
/*
#CourtesyVehicleDetail button.button-icon.deleteChargesAmount .material-symbols-outlined {
	font-size: 16px;
	color: red !important;
}
*/

.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td .k-floating-label-container.validationMessage-error,
.k-window.telerik-blazor.detailsFlyout .k-form .k-floating-label-container.validationMessage-error {
	align-self: flex-end !important;
}

.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table tr td.no-border {
	border: none !important;
}


.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li .k-animation-container .k-child-animation-container .k-card-body table.sub-table {
	width: 60%;
	float: right;
}
#CourtesyVehicleDetail .sub-table td {
	border-bottom: 1px solid var(--color-mode-border-secondary, #CDD3D7) !important;
}
/*

.k-window.telerik-blazor.detailsFlyout .k-window-content form.k-form .k-form-field ul li,
.k-window.telerik-blazor.detailsFlyout .k-window-content ul.flyoutContentSections li

#CourtesyVehicleDetail .sub-table td:first-of-type,
.k-animation-container .k-child-animation-container .k-card-body table tr td:nth-of-type(2) .sub-table tr:first-of-type td .k-floating-label-container,
.k-animation-container .k-child-animation-container .k-card-body table tr td:nth-of-type(2) .sub-table tr:nth-of-type(2) td .k-floating-label-container {
	text-align: left !important;
	align-items: flex-start !important;

	font-family: var(--body-small-regular-font-family, "Source Sans Pro") !important;
	font-size: var(--body-small-regular-font-size, 14px) !important;
	line-height: var(--body-small-regular-line-height, 20px) !important;
	font-weight: var(--body-small-regular-font-weight, 400) !important;
	letter-spacing: var(--body-small-regular-letter-spacing, 0) !important;
	font-style: var(--body-small-regular-font-style, normal) !important;
}

.k-animation-container .k-child-animation-container .k-card-body table tr td:nth-of-type(2) .sub-table tr:last-of-type td .k-floating-label-container {
	text-align: left !important;
	align-items: flex-start !important;

}
*/
.k-animation-container .k-child-animation-container .k-card-body table.sub-table tr td .k-floating-label-container {
	font-weight: var(--body-small-regular-font-weight, 400) !important;
}
.k-animation-container .k-child-animation-container .k-card-body table.sub-table tr:last-of-type td .k-floating-label-container {
	font-weight: var(--body-small-bold-font-weight, 600) !important;
}
.k-animation-container .k-child-animation-container .k-card-body table.sub-table tr:last-of-type td {
	font-weight: var(--body-small-bold-font-weight, 600) !important;
	border-bottom: 3px double #000 !important;
}






/*----------------------------------------------------

Flyout - Invoice section

Invoice.razor
----------------------------------------------------*/








/*----------------------------------------------------

Flyout - Registration section

RegistrationInfo.razor
----------------------------------------------------*/
.k-window.telerik-blazor.detailsFlyout .k-form .registrationInfoId .k-floating-label-container.popoverdata.small-bold,
.popoverdata.k-floating-label-container.small-bold,
.popoverdata.k-floating-label-container,
.k-window.telerik-blazor.detailsFlyout #registrationInfoId .k-floating-label-container,
.registrationInfoId .k-floating-label-container {
	font-family: var(--body-small-bold-font-family, "Source Sans Pro") !important;
	font-size: var(--body-small-bold-font-size, 0.875rem) !important;
	font-style: var(--body-small-bold-font-style, normal) !important;
	font-weight: 500 !important;
	line-height: var(--body-small-bold-line-height, 1.25rem) !important;
	letter-spacing: var(--body-small-bold-letter-spacing) !important;

}
.registrationInfoId .k-picker {
	min-width: 160px !important;
}










/*----------------------------------------------------

Horizontal Scroll Fix

----------------------------------------------------*/

.k-drawer-container.k-drawer-push.app-container.holman-drawer-desktop {
	position: fixed;
	height: 100svh;
	overflow: auto;

	width: 100%;
}
main > .k-drawer-container.k-drawer-push.app-container.k-drawer-expanded > .k-drawer.telerik-blazor.k-drawer-start {
	position: unset; /* removed this at horizontal scroll fix */
}
main > .k-drawer-container.k-drawer-push.app-container.k-drawer-expanded > .k-drawer-content {
	margin-left: 0;
}
.holman-drawer-desktop article > section,
.holman-drawer-desktop article > .article-content {
	padding-bottom: var(--spacing-mode-spacing-page-large, 1.5rem);
}

/*
This is the fix for horizontal scrolling in bulk upload
But it also makes the main section overflow its container in Windows Chrome*/
.k-drawer-expanded .k-drawer-content {
	/*
	width: calc(100vw - 224px) !important;
	*/
	overflow-y: overlay;
}
.k-drawer-mini .k-drawer-content {
	/*
	width: calc(100vw - 48px) !important;
	*/
	overflow-y: overlay;
}

/* Fix extra vertical scroll in tables in Windows Chrome
https: //www.telerik.com/forums/set-scrollbar-invisible#5041718 */
    .no-scroll .k-grid-content {
        overflow-y: hidden;
    }

    .no-scroll .k-grid-header {
        padding-right: 0 !important;
    }

    .no-scroll .k-grid-header-wrap {
        border-width: 0px !important;
    }


	/* */
	.dashGrid-desk-DriveawayOrdersView .k-grid-content
	.dashGrid-desk-VehicleConfirmation .k-grid-content
	.dashGrid-desk-VehicleStatusDetailsView .k-grid-content
	.dashGrid-desk-QuotesView .k-grid-content
	.dashGrid-desk-CourtesyRequestDetailsView .k-grid-content {
		overflow-y: hidden;
	}

	.dashGrid-desk-DriveawayOrdersView .k-grid-header
	.dashGrid-desk-VehicleConfirmation .k-grid-header
	.dashGrid-desk-VehicleStatusDetailsView .k-grid-header
	.dashGrid-desk-QuotesView .k-grid-header
	.dashGrid-desk-CourtesyRequestDetailsView .k-grid-header {
		padding-right: 0 !important;
	}

	.dashGrid-desk-DriveawayOrdersView .k-grid-header-wrap
	.dashGrid-desk-VehicleConfirmation .k-grid-header-wrap
	.dashGrid-desk-VehicleStatusDetailsView .k-grid-header-wrap
	.dashGrid-desk-QuotesView .k-grid-header-wrap
	.dashGrid-desk-CourtesyRequestDetailsView  .k-grid-header-wrap {
		border-width: 0px !important;
	}

	




iframe {
	width: 100% !important;
	height: 100% !important;
}

@media (min-width: 1200px) {
	.home-iframe-container {
		width: 770.978px;
		height: 400px;
	}
}
@media (min-width: 768px) and (max-width: 1199.99px) {
	.home-iframe-container {
		width: 770.978px;
		height: 400px;
	}
}

@media (min-width: 576px) and (max-width: 767.99px) {
	.home-iframe-container {
		width: 450px;
		height: 289.117px;
	}
}
/* Navbar Expanded (Open) — icon stacking at 1300px */
@media (min-width: 768px) and (max-width: 1300px) {
    .k-drawer-expanded .telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th .k-cell-inner .custom-sort-icon {
        position: absolute;
        left: 12px;
    }

    .k-drawer-expanded .k-grid-filter-menu.k-grid-header-menu .k-icon {
        position: absolute;
        left: 34px;
    }

    .k-drawer-expanded .telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th > .k-cell-inner > .k-link > .k-column-title {
        margin-right: 0;
        margin-bottom: 1.25rem;
    }
}

/* Navbar Collapsed (Mini) — icon stacking at 1130px */
@media (min-width: 768px) and (max-width: 1130px) {
    .k-drawer-mini .telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th .k-cell-inner .custom-sort-icon {
        position: absolute;
        left: 12px;
    }

    .k-drawer-mini .k-grid-filter-menu.k-grid-header-menu .k-icon {
        position: absolute;
        top: 64px;
        left: 34px;
    }

    .k-drawer-mini .telerik-blazor.k-grid.dashGrid-desk tr th.k-header.k-table-th > .k-cell-inner > .k-link > .k-column-title {
        margin-right: 0;
        margin-bottom: 1.25rem;
    }
}






/*----------------------------------------------------

Vertical Scroll Fix - remove from dash tables

----------------------------------------------------*/

.dashGrid-noScroll {

}



.dashGrid-noScroll .k-grid-content {
	overflow-y: hidden;
}

.dashGrid-noScroll .k-grid-header {
	padding-right: 0 !important;
}

.dashGrid-noScroll .k-grid-header-wrap {
	border-width: 0px !important;
}
/*
.k-animation-container {
    overflow: unset;
}
*/
.k-window.telerik-blazor.detailsFlyout ul li .k-animation-container {
	overflow: unset;
}

.centered-text {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 216px;
	font-family: 'Poppins';
	font-size: 18px;
	font-weight: 500;
	color: #202E39;
	line-height: 24px;
}

.enable-pointer-events {
	pointer-events: all
}
.disable-pointer-events {
	pointer-events: none
}
.holman-panelbar-right-overlay.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link .k-panelbar-item-text,
.k-panelbar > .k-panelbar-header > .k-link .k-icon, .k-panelbar > .k-panelbar-header > .k-link .k-panelbar-item-icon {
	pointer-events: all;
}
.k-window.telerik-blazor.scrollable-dialog-content {
	max-height: 90vh;
	overflow-y: auto;
}
.terms-content {
	display: flex;
	flex-direction:column;
	gap:0.5rem;
}

/* ==========================
   TERMS & CONDITIONS DIALOG 
   ========================== */

.terms-hr-divider {
	height: 10px !important;
}

/* Desktop default: 70% */
.terms-content-dialog-width {
	width: 70vw !important;
	max-width: 70vw !important;
}

/* Mobile: 90% */
@media (max-width: 767.98px) {
	.terms-content-dialog-width {
		width: 90vw !important;
		max-width: 90vw !important;
	}
}

/* --- Single vertical scrollbar + no horizontal scrollbar (zoom/scaling safe) --- */
/* Outer Telerik content: flex column, NEVER scroll */
.k-window.terms-content-dialog-width .k-window-content,
.k-dialog.terms-content-dialog-width .k-dialog-content {
	display: flex;
	flex-direction: column;
	overflow: hidden !important; /* key: outer never scrolls */
	overflow-x: hidden !important; /* no horizontal scroll */

	max-height: 90dvh;
	max-height: 90vh; /* fallback */
}

/* Component root + form fill available space */
.k-window.terms-content-dialog-width .terms-layout,
.k-dialog.terms-content-dialog-width .terms-layout,
.k-window.terms-content-dialog-width form,
.k-dialog.terms-content-dialog-width form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0; /* key for inner scrolling */
	min-width: 0;
}

/* Only the body scrolls */
.k-window.terms-content-dialog-width .terms-body,
.k-dialog.terms-content-dialog-width .terms-body {
	flex: 1 1 auto;
	min-height: 0; /* key */
	min-width: 0; /* key for flex shrink */
	overflow-y: auto; /* ONLY scrollbar */
	overflow-x: hidden; /* no horizontal scroll */
	-webkit-overflow-scrolling: touch;
}

/* Footer stays fixed (no scrolling) */
.k-window.terms-content-dialog-width .terms-footer,
.k-dialog.terms-content-dialog-width .terms-footer {
	flex: 0 0 auto;
}

/* Prevent overflow from flex rows and long content */
.k-window.terms-content-dialog-width .SubmitInvoiceModal,
.k-dialog.terms-content-dialog-width .SubmitInvoiceModal,
.k-window.terms-content-dialog-width .rowHorizontal,
.k-dialog.terms-content-dialog-width .rowHorizontal {
	max-width: 100%;
	min-width: 0;
	overflow-x: hidden;
}

/* Wrap long strings (PDF content, URLs, etc.) */
.k-window.terms-content-dialog-width p,
.k-window.terms-content-dialog-width li,
.k-window.terms-content-dialog-width a,
.k-window.terms-content-dialog-width div,
.k-dialog.terms-content-dialog-width p,
.k-dialog.terms-content-dialog-width li,
.k-dialog.terms-content-dialog-width a,
.k-dialog.terms-content-dialog-width div {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Mobile: prevent flex gap/space-between layouts from pushing width */
@media (max-width: 767.98px) {
	.k-window.terms-content-dialog-width .rowHorizontal,
	.k-dialog.terms-content-dialog-width .rowHorizontal {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

		/* Stack the button row on mobile */
		.k-window.terms-content-dialog-width .rowHorizontal.k-form-field.gap-3,
		.k-dialog.terms-content-dialog-width .rowHorizontal.k-form-field.gap-3 {
			flex-direction: column;
		}
}

/* Style all paragraphs inside .terms-content */
	.terms-content p {
		font-family: var(--body-small-regular-font-family, "Source Sans Pro");
		font-size: var(--body-small-regular-font-size, 14px);
		line-height: var(--body-small-regular-line-height, 20px);
		font-weight: var(--body-small-bold-font-weight, 600);
		letter-spacing: var(--body-small-regular-letter-spacing, 0);
		font-style: var(--body-small-regular-font-style, normal);
		color: var(--color-mode-text-primary);
	}

/* Style ordered lists inside .terms-content */
	.terms-content ol {
		padding-left: 1rem;
	}
	.terms-content br {
		display: none;
	}

/* Style list items inside .terms-content */
	.terms-content li {
		font-family: var(--body-small-regular-font-family, "Source Sans Pro");
		font-size: var(--body-small-regular-font-size, 14px);
		line-height: var(--body-small-regular-line-height, 20px);
		font-weight: var(--body-small-regular-font-weight, 400);
		letter-spacing: var(--body-small-regular-letter-spacing, 0);
		font-style: var(--body-small-regular-font-style, normal);
		color: var(--color-mode-text-primary);
		position: unset !important;
		width: 100% !important;
	}
.k-window.telerik-blazor.detailsFlyout.windowMax .k-panelbar-item .terms-content.mt-4 ol > li {
	padding: 0 !important;
}
.k-window.telerik-blazor.detailsFlyout.windowMin .k-panelbar-item .terms-content.mt-4 ol > li {
	padding: 0 !important;
}
.quick-pay-text {
	display: ruby;
	color: var(--color-mode-text-primary) !important;
}
#quick-pay-form {
	gap: 0.5rem !important;
}

span.text-end > input::placeholder, span.text-end > input {
	text-align: right;
}

.action-center-page {
	display: flex;
	flex-direction: column;
	gap: var(--Spacing-Component-Base, 1rem);
	flex: 1 0 0;
}

	.action-center-page .title {
		color: var(--color-mode-text-primary, #242627);
		/* Heading/Heading 3 - 28px */
		font-family: var(--heading-heading-3-28px-font-family, '"Poppins", Helvetica');
		font-style: var(--heading-heading-3-28px-font-style, "normal");
		font-weight: var(--heading-heading-3-28px-font-weight, 500);
		font-size: var(--heading-heading-3-28px-font-size, 1.75rem);
		line-height: var(--heading-heading-3-28px-line-height, 2.25rem);
	}

	.action-center-page .subtitle {
		align-self: stretch;
		/* Heading/Heading 4 - 24px */
		font-family: var(--heading-heading-4-24px-font-family, '"Poppins", Helvetica');
		font-style: var(--heading-heading-4-24px-font-style, "normal");
		font-weight: var(--heading-heading-4-24px-font-weight, 500);
		font-size: var(--heading-heading-4-24px-font-size, 1.35rem);
		line-height: var(--heading-heading-4-24px-line-height, 2rem);
	}

	.action-center-page .filter-section {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--Spacing-Component-Base, 1rem);
		flex: 1 0 0;
	}

		.action-center-page .filter-section .filter-message {
			color: var(--color-mode-CTA-secondary-fill-default);
			/* Body small/Italic */
			font-family: "Source Sans Pro";
			font-size: 0.875rem;
			font-style: italic;
			font-weight: 400;
			line-height: 1.25rem; /* 142.857% */
		}

	.action-center-page .filter-message {
		color: #000;
		/* Body small/Italic */
		font-family: "Source Sans Pro";
		font-size: 0.875rem;
		font-style: italic;
		font-weight: 400;
		line-height: 1.25rem; /* 142.857% */
	}

	.action-center-page .dummy {
		line-height: 1.25rem; /* 142.857% */
		line-height: 1.25rem; /* 142.857% */
	}

	.action-center-page .notification-section {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

@media (max-width: 767.99px) {
	.action-center-page .notification-section {
		align-self: stretch;
	}
}

.action-center-page .feedback-section {
	border-radius: 0.5rem;
	background: #E6F0F6;
	/* Shadow/Level 1 */
	display: flex;
	padding: 2rem 1.5rem;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 1.5rem;
}

	.action-center-page .feedback-section .feedback-title {
		color: var(--Text-Regular, var(--Gray-900, #242627));
		max-width: 40.3rem;
		text-align: justify;
		/* Heading/Heading 6 - 18px */
		font-family: var(--heading-heading-6-18px-font-family, '"Poppins", Helvetica');
		font-style: var(--heading-heading-6-18px-font-style, "normal");
		font-weight: var(--heading-heading-6-18px-font-weight, 500);
		font-size: var(--heading-heading-6-18px-font-size, 1.125rem);
		line-height: var(--heading-heading-6-18px-line-height, 1.5rem);
	}

	.action-center-page .feedback-section .feedback-questions {
		max-width: 40.3rem;
		text-align: justify;
	}

		.action-center-page .feedback-section .feedback-questions .feedback-question {
			color: var(--Text-Regular, var(--Gray-900, #242627));
			/* Heading/Heading 6 - 18px */
			font-family: var(--heading-heading-6-18px-font-family, '"Poppins", Helvetica');
			font-style: var(--heading-heading-6-18px-font-style, "normal");
			font-weight: var(--heading-heading-6-18px-font-weight, 500);
			font-size: var(--heading-heading-6-18px-font-size, 1.125rem);
			line-height: var(--heading-heading-6-18px-line-height, 1.5rem);
			padding-bottom: 8px;
		}

		.action-center-page .feedback-section .feedback-questions .feedback-answer {
			align-self: stretch;
			color: var(--Text-Regular, var(--Gray-900, #242627));
			/* Body large/Regular */
			font-family: var(--body-large-regular-font-family, '"Source Sans Pro", Helvetica');
			font-style: var(--body-large-regular-font-style, "normal");
			font-weight: var(--body-large-regular-font-weight, 400);
			font-size: var(--body-large-regular-font-size, 1.125rem);
			line-height: var(--body-large-regular-line-height, 1.5rem);
		}

		.action-center-page .feedback-section .feedback-questions .feedback-button {
			color: var(--Text-Inverse-Primary, #FFF);
			/* Label/Medium */
			font-family: "Source Sans Pro";
			font-size: 1rem;
			font-style: normal;
			font-weight: 600;
			line-height: 1.5rem; /* 150% */
			background: var(--CTA-Primary-Fill-Default, #0169A7);
		}

	.action-center-page .feedback-section .feedback-action {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--Spacing-Component-Small, 0.5rem);
		border-radius: var(--Radius-xSmall, 0.25rem);
	}

@media (max-width: 767.99px) {
	.action-center-page .feedback-section .feedback-title, .action-center-page .feedback-section .feedback-questions {
		width: unset;
	}

	.action-center-page .feedback-section .feedback-button {
		width: 100% !important;
	}
}

@media (max-width: 767.99px) {
	.action-center-page {
		flex: 1 1 100%;
	}

		.action-center-page .filters-section {
			display: unset !important;
		}

		.action-center-page .feedback-section {
			align-items: unset !important;
		}

		.action-center-page .filters-section-left .k-dropdownlist.k-picker {
			max-width: unset !important;
		}
}

.notification-category {
	display: flex;
	padding: 0rem 0.625rem;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	align-self: stretch;
	border-left: 4px solid #CCC;
	border-left-color: var(--Surface-Accent-Info, #004B78);
}

	.notification-category.status-warning {
		border-left-color: var(--Surface-Accent-Warning, #AB6D11);
	}

	.notification-category.status-error {
		border-left-color: var(--Surface-Accent-Error, #860212);
	}

@media (max-width: 767.99px) {
	.notification-category {
		padding: 0rem 0.325rem;
	}
}

.notification-tag {
	display: inline-flex;
	padding: 0.625rem;
	align-items: center;
	gap: 0.625rem;
	border-radius: 0.25rem;
	background-color: #E6F0F6;
	/* Heading/Heading 6 - 18px */
	font-family: var(--heading-heading-6-18px-font-family, '"Poppins", Helvetica');
	font-style: var(--heading-heading-6-18px-font-style, "normal");
	font-weight: var(--heading-heading-6-18px-font-weight, 500);
	font-size: var(--heading-heading-6-18px-font-size, 1.125rem);
	line-height: var(--heading-heading-6-18px-line-height, 1.5rem);
}

	.notification-tag svg {
		height: 1rem;
		width: 1rem;
	}

@media (max-width: 767.99px) {
	.notification-tag {
		width: 100%;
		padding: 0.63rem;
	}

		.notification-tag svg {
			height: 1.5rem;
			width: 1.5rem;
		}
}

.status-warning > .notification-tag {
	background-color: var(--Surface-Accent-Warning, #AB6D11);
	color: #FFF;
}

.status-error > .notification-tag {
	background-color: var(--Surface-Accent-error, #860212);
	color: #FFF;
}

.notification-items {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.9375rem;
	font-weight: 600;
}

@media (max-width: 767.99px) {
	.notification-items {
		flex-direction: column;
		align-self: stretch;
	}
}

.notification-badge-style {
	border-radius: var(--Huge, 3rem);
	background: var(--Surface-Accent-Info-subtle, #E6F0F6);
}

.dropdown-alert-dot {
	position:absolute;
	right:1rem;
}

.dropdown-alert-content {
	max-width: 24px;
	max-height: 24px;
	padding: 2px;
	width: 24px;
	height: 24px;
	text-align: center;
	background: var(--Surface-Accent-Error, #860212);
	color: var(--Text-Inverse-Primary, #FFF);
	font-family: "Source Sans Pro";
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 500;
	right: 4px;
}

@media (max-width: 767.99px) {
	.dropdown-alert-content {
		position: absolute;
	}
}

	.notification-item {
	display: flex;
	width: 15rem;
	padding: 1.3rem;
	flex-direction: column;
	/* align-items: flex-start;*/
	gap: 2rem;
	align-self: stretch;
	cursor: pointer;
	border-radius: 0.5rem;
	border: 1px solid var(--Icon-Info, #003A5C);
	background: transparent;
	color: #242627; /* Text Regular */
	transition: background 0.3s, color 0.3s; /* Smooth transition */
}

	.notification-item .notification-badge {
		display: flex;
		padding: var(--Spacing-Component-xSmall, 0.25rem) var(--Spacing-Component-Small, 0.5rem);
		justify-content: center;
		align-items: center;
		gap: var(--Spacing-Component-xSmall, 0.25rem);
	}

	.notification-item .icon {
		width: 32px;
		height: 32px;
		
	}

	.notification-item .icon svg {
			width: 32px;
			height: 32px;
		}

	.notification-item .nav_arrow {
		display: none;
		width: 1.5rem;
		height: 1.5rem;
	}

	.notification-item .nav_arrow svg {
			width: 1.5rem;
			height: 1.5rem;
	}

	.notification-item:hover {
		background: #B0D1E4;
		color: #242627; /* Text Regular */
	}

	.notification-item:active {
		background: #004B77;
		color: #FFFFFF;
	}
	.notification-item:active .notification-badge {
			background: #FFFFFF; 
			color: #000000; 
	}

	@media (max-width: 767.99px) {
				.notification-item {
					flex-direction: row;
					padding: 0.5rem;
					gap: 0.5rem;
					width: unset;
					align-items: center;
					display: unset !important;
				}

					.notification-item svg {
						align-items: center;
					}

					.notification-item .nav_arrow {
						display: unset;
					}
			}
	/*Loading Tile start*/
	.skeleton {
	background-color: #eee;
	border-radius: 4px;
	margin-bottom: 8px;
	animation: pulse 1.5s infinite ease-in-out;
}
	/* Variants for content layout */
	.skeleton.title {
		font-size: x-small !important;
		width: 60%;
		height: 20px;
	}

	.skeleton.line {
		width: 100%;
		height: 12px;
	}

		.skeleton.line.short {
			width: 80%;
			height: 12px;
		}
/* Container style for the tile */
.tile.loading-tile {
}

.loading-file {
	display: flex;
	width: 378px;
	padding: 1rem;
	flex-direction: column;
	/* align-items: flex-start;*/
	gap: 2rem;
	align-self: stretch;
	cursor: pointer;
	border-radius: 0.5rem;
	border: 1px solid var(--Icon-Info, #003A5C);
	background: transparent;
	color: #242627; /* Text Regular */
	transition: background 0.3s, color 0.3s; /* Smooth transition */
}
	.loading-file .notification-badge {
		display: flex;
		padding: var(--Spacing-Component-xSmall, 0.25rem) var(--Spacing-Component-Small, 0.5rem);
		justify-content: center;
		align-items: center;
		gap: var(--Spacing-Component-xSmall, 0.25rem);
	}

	.loading-file .icon {
		width: 32px;
		height: 32px;
	}

		.loading-file .icon svg {
			width: 32px;
			height: 32px;
		}

	.loading-file .nav_arrow {
		display: none;
		width: 1.5rem;
		height: 1.5rem;
	}

		.loading-file .nav_arrow svg {
			width: 1.5rem;
			height: 1.5rem;
		}

	.loading-file:hover {
		background: #B0D1E4;
		color: #242627; /* Text Regular */
	}

	.loading-file:active {
		background: #004B77;
		color: #FFFFFF;
	}

		.loading-file:active .notification-badge {
			background: #FFFFFF;
			color: #000000;
		}

@media (max-width: 767.99px) {
	.loading-file {
		flex-direction: row;
		padding: 0.5rem;
		gap: 0.5rem;
		width: unset;
		align-items: center;
		display: unset !important;
	}

		.loading-file svg {
			align-items: center;
		}

		.loading-file .nav_arrow {
			display: unset;
		}
}

/* Shimmer animation */
@keyframes pulse {
	0% {
		background-color: #eee;
	}

	50% {
		background-color: #ddd;
	}

	100% {
		background-color: #eee;
	}
}
/*Loading Tile end*/


.dropdown-skeleton-alert {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #eee;
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.dropdown-skeleton-alert::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
    animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -40px 0;
    }
    
    100% {
        background-position: 40px 0;
    }
}
/* Make panel bar toggle icons visible and interactive */
.holman-panelbar-right-overlay.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link .k-icon.k-svg-icon.k-panelbar-toggle,
.k-panelbar > .k-panelbar-header > .k-link .k-icon,
.k-panelbar > .k-panelbar-header > .k-link .k-panelbar-item-icon {
    pointer-events: all;
    color: #0169A7;
    opacity: 1;
    visibility: visible;
    display: inline-flex !important;
}

/* Ensure the parent container doesn't prevent interactions with the icon */
.disable-pointer-events .k-panelbar-header .k-link .k-icon {
    pointer-events: all !important;
}

/* Fix SVG visibility within the icon */
.k-panelbar-header .k-link .k-icon svg {
    visibility: visible;
    opacity: 1;
    display: block !important;
}

/* Vehicle Client Info styling */
.VehicleClientDetails {
	padding: 0 !important;
	font-family: var(--body-font-family, "Source Sans Pro");
}



.info-row {
	display: flex;
	justify-content: space-between;
	padding: 0.75rem 0;
	border-bottom: 1px solid #E9EBEC;
}

.time-stamp-info-row {
	display: flex;
	justify-content: space-between;
	padding: 0.75rem 0;
	
}
.VehicleClientDetails .small {
	font-size: 14px;
	line-height: 20px;
	color: #242627;
	font-weight: 400;
}

.VehicleClientDetails .small-bold {
	font-size: 14px;
	line-height: 20px;
	color: #242627;
	font-weight: 600;
}

.solid-blue .k-link,
.hollow-red .k-link,
.hollow-yellow .k-link,
.hollow-blue .k-link {
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
}

.solid-blue .k-link {
	background-color: var(--color-primitives-blue-700, #004B77);
	color: white;
	border: none;
}

.hollow-red .k-link {
	border: 2px solid #C0031A;
	background-color: transparent;
}

.hollow-yellow .k-link {
	border: 2px solid var(--color-mode-surface-accent-warning, #AB6D11);
	background-color: transparent;
}

.hollow-blue .k-link {
	border: 2px solid var(--color-mode-text-info, #003a5c);
	background-color: transparent;
}

/* filled bullets */
.list-disc {
	list-style-type: disc !important;
}
.global-search-textbox {
	height: 3rem !important;
	font-family: var(--body-large-regular-font-family, "Source Sans Pro") !important;
	font-size: var(--body-large-regular-font-size, 18px) !important;
	line-height: var(--body-large-regular-line-height, 24px) !important;
	font-weight: var(--body-large-regular-font-weight, 400) !important;
	letter-spacing: var(--body-large-regular-letter-spacing, 0) !important;
	font-style: var(--body-large-regular-font-style, normal) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--color-mode-border-secondary, #CDD3D7) !important;
	border-radius: 0 !important;
}
	.global-search-textbox.k-focus .k-input-inner {
		border: 0;
		box-shadow: none;
	}
	.global-search-textbox .k-input-inner {
		font-family: var(--body-large-regular-font-family, "Source Sans Pro") !important;
		font-size: var(--body-large-regular-font-size, 18px) !important;
		line-height: var(--body-large-regular-line-height, 24px) !important;
		font-weight: var(--body-large-regular-font-weight, 400) !important;
		font-style: var(--body-large-regular-font-style, normal) !important;
	}
.global-search-dialog .k-window-content{
	padding: 0;
}
.link {
	cursor: pointer;
	text-decoration: underline;
	color: #0169A7;
}

.skeleton {
	display: block;
	height: 1rem;
	border-radius: 4px;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
	background-size: 400% 100%;
	animation: shimmer 1.4s ease infinite;
}

.skeleton-line {
	width: 100%;
	height: 1rem;
}

@keyframes shimmer {
	0% {
		background-position: -400px 0;
	}

	100% {
		background-position: 400px 0;
	}
}
.skeleton-icon {
	width: 20px;
	height: 20px;
	border-radius: 75%;
}

.skeleton-short {
	width: 25%; 
	height: 1rem;
}

.courtesydelivery-title {
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.5rem;
	padding-bottom: 1.5rem;
}

.courtesydelivery-form .deliveryDate-field_label {
	color: var(--Text-Primary, #242627);
	font-family: "Source Sans Pro";
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.25rem;
}


.courtesydelivery-form .deliveryDate-field_value {
	color: var(--color-mode-text-secondary, #3B3F40);
	font-family: "Source Sans Pro";
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px; 
}
.skeleton-rule {
	flex: 1;
	height: 1px;
	margin-left: 8px;
}
.globalsearch-section-header {
	display: flex;
	align-items: center;
	gap: 0.25rem; 
	padding: 0.5rem 0;

}

.globalsearch-section-icon {
	font-size: 1rem;
	line-height: 1;
	color: var(--color-mode-text-primary);
}

.globalsearch-section-title {
	font-weight: var(--body-large-bold-font-weight, 600) !important;
	color: var(--color-mode-text-primary);
	font-size: var(--body-regular-font-size, 16px) !important;
}

.globalsearch-section-rule {
	flex: 1 1 auto; 
	height: 1px;
	background: var(--color-mode-border-secondary, #CDD3D7);
	margin-left: 0.5rem;
	border-radius: 1px;
}

.globalsearch-row {
	cursor: pointer;
	border-radius: 4px; 
	transition: background 0.2s ease;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

	.globalsearch-row:hover {
		background-color: #E8F6FF;
	}

	.globalsearch-row:active {
		background-color: #cce0ff; 
	}
mark.vp-hl {
	border-radius: 3px;
	font-weight: 700;
	background-color: transparent;
	padding: 0;
}

.globalsearch-filter-chip-on {
	cursor: pointer !important;
}

.globalsearch-filter-chip-off {
	background-color: var(--color-primitives-white) !important;
	border-radius: 3rem !important;
	border: 1px solid var(--color-mode-text-info) !important;
	cursor: pointer !important;
}

.upload-img {
	height: 24px;
	width: 24px;
	position: absolute;
	top: 0;
	left: 0;
}

.alert-success {
	display: flex;
	padding: 8px;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-radius: 4px;
	background: var(--Surface-Accent-Success-z, #EEF7EF);
}

.alert-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.alert-message {
	color: var(--Text-Primary, #242627);
	font-size: 14px;
	font-weight: 500;
}

.check-icon svg {
	width: 16px;
	height: 16px;
}

.close-icon {
	display: flex;
	padding: var(--Spacing-Component-Tiny, 2px);
	align-items: flex-start;
	gap: var(--Spacing-Component-None, 0);
	border-radius: var(--Radius-Round, 9999px);
	
	border: none;
	cursor: pointer;
}

	.close-icon svg {
		width: 16px;
		height: 16px;
	}

.upload-img {
	height: 24px;
	width: 24px;
	position: absolute;
	top: 0;
	left: 0;
}

.toaster-body-message {
	color: var(--Text-Inverse-Primary, #FFF);
	font-family: "Source Sans Pro";
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.25rem;
}

.toaster-icon{
	width:1.5rem;
	height:1.5rem;
}

.toaster-success {
	background: var(--Surface-Accent-Info-alt, #242627) !important;
}

.toaster-error {
	background: var(--Surface-Accent-Error, #860212) !important;
}

.toaster-warning {
	background: var(--Surface-Accent-Warning, #AB6D11) !important;
}

.toaster-info {
	background: var(--Surface-Accent-Info, #004B78) !important;
}
.toaster-close-btn{

}
.toaster-close-btn:hover {
	background-color: inherit !important;
	color: inherit !important;
	border-color: inherit !important;
	opacity: 1 !important;
	filter: none !important;
}
.toaster-maximized-offset {
	margin-left: -180%;
}
.tracking-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.copy-icon {
	width: 0.875rem;
	height: 0.875rem;
	cursor: pointer;
	pointer-events: auto;
}

.hide-copy-icon {
	display: none;
}

.split-amount-message {
	align-self: stretch;
	color: var(--Text-Primary, #242627);
	font-family: "Source Sans Pro";
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	line-height: 20px;
}