@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
	font-size: 16px;
	--font-base: 'Open Sans', sans-serif;
	--border-soft: color-mix(in oklch,var(--color-base-content)10%, transparent);
	/* box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10); */
	--shadow: 0 .75rem 1rem -.2rem color-mix(in oklch, var(--color-primary) 5%, rgba(0,0,0,0)), 0 .25rem .5rem -.25rem rgba(0,0,0,.1);

	--color-base-100: oklch(100% 0 0);
	--color-base-200: oklch(97.466% 0.011 259.822);
	--color-base-300: oklch(93.268% 0.016 262.751);
	--color-base-content: oklch(20% 0.053 255.824);
	--color-primary: hsla(216, 100%, 50%, 1);
	--color-primary-content: hsla(0, 0%, 100%, 1);
	--color-secondary: hsla(216, 100%, 35%, 1);
	--color-secondary-content: hsla(230, 100%, 96%, 1);
	--color-accent: hsla(355, 74%, 47%, 1);
	--color-accent-content: hsla(0, 0%, 100%, 1);
	--color-neutral: hsla(217, 61%, 12%, 1);
	--color-neutral-content: hsla(210, 20%, 98%, 1);
	--color-info: hsla(199, 99%, 72%, 1);
	--color-info-content: hsla(201, 98%, 12%, 1);
	/* --color-success: hsla(151, 92%, 34%, 1); */
	/* --color-success-content: #fff; */
	--color-success: hsla(151, 99%, 40%, 1);
	--color-success-content: hsla(139, 73%, 12%, 1);
	--color-warning: oklch(86% 0.189 84.429);
	--color-warning-content: oklch(42% 0.095 57.708);
	--color-error: oklch(64% 0.246 16.439);
	--color-error-content: oklch(100% 0 0);

	/* Sizing */
	--radius-selector: 0.25rem;
	--radius-field: 0.5rem;
	--radius-box: .75rem;
	--size-selector: 0.21875rem;
	--border: 1px;
	--depth: 0;
	--noise: 0;


	--fs-sm: 0.85rem;
	--fs-md: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.25rem;
	--fs-2xl: 1.5rem;
	--fs-3xl: 2rem;
	--fs-4xl: 2.5rem;
}

*, body, body *, .btn {
	font-family: var(--font-base);
}

.btn {
	font-family: var(--font-base) !important;
}

.fa, .fas, .fa:before, .fas:before {
	font-family: 'Font Awesome 5 Pro' !important;
	font-weight: 900 !important;
}

.text-base-100 {
	color: var(--color-base-100) !important;
}
.bg-base-100 {
	background-color: var(--color-base-100) !important;
}
.text-base-200 {
	color: var(--color-base-200) !important;
}
.bg-base-200 {
	background-color: var(--color-base-200) !important;
}
.text-base-300 {
	color: var(--color-base-300) !important;
}
.bg-base-300 {
	background-color: var(--color-base-300) !important;
}
.text-base-content {
	color: var(--color-base-content) !important;
}
.bg-base-content {
	background-color: var(--color-base-content) !important;
}
.text-primary {
	color: var(--color-primary) !important;
}
.bg-primary {
	background-color: var(--color-primary) !important;
}
.text-secondary {
	color: var(--color-secondary) !important;
}
.bg-secondary {
	background-color: var(--color-secondary) !important;
}
.text-accent {
	color: var(--color-accent) !important;
}
.bg-accent {
	background-color: var(--color-accent) !important;
}
.text-neutral {
	color: var(--color-neutral) !important;
}
.bg-neutral {
	background-color: var(--color-neutral) !important;
}
.text-info {
	color: var(--color-info) !important;
}
.bg-info {
	background-color: var(--color-info) !important;
}
.text-error {
	color: var(--color-error) !important;
}
.bg-error {
	background-color: var(--color-error) !important;
}

/* ===================================================================================================== 
HEADER 
===================================================================================================== */

.navbar .nav-links a {
	font-size: var(--fs-sm) !important;
	line-height: 1.75rem !important;
	padding: 1rem 0.75rem !important;
}

.navbar .nav-links .drop-content a {
	font-size: var(--fs-sm) !important;
	line-height: 1.1 !important;
	padding: 1rem 1.5rem !important;
}

@media (max-width: 1200px) {
	.navbar .nav-links a {
		padding: .25rem 0.75rem !important;
		line-height: 1.25 !important;
	}
}

/* ===================================================================================================== 
BUTTONS 
===================================================================================================== */

.btn:not(.dropdown-toggle) {
	text-transform: capitalize !important;
	font-size: var(--fs-sm) !important;
	/* color: var(--btn-fg, var(--color-base-content)) !important; */
	/* background-color: var(--btn-color, var(--color-base-200)) !important; */
	border-radius: var(--radius-field) !important;
	border: none !important;
	padding: 0.5rem 1rem !important;
	box-shadow: none !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
	font-weight: 600 !important;

	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	outline-offset: 2px !important;
	webkit-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	padding-inline: var(--btn-p) !important;
	color: var(--btn-fg) !important;
	--tw-prose-links: var(--btn-fg);
	height: var(--size) !important;
	font-size: var(--fontsize, .875rem) !important;
	outline-color: var(--btn-color, var(--color-base-content)) !important;
	background-color: var(--btn-bg) !important;
	background-image: none !important;
	border-width: none !important;
	text-shadow: none !important;
	touch-action: manipulation;
	--size: calc(var(--size-field, .25rem) * 10);
	--btn-bg: var(--btn-color, var(--color-base-200));
	--btn-fg: var(--color-base-content);
	--btn-p: 1rem;
	/* --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); */
	/* border-start-start-radius: var(--join-ss, var(--radius-field));
	border-start-end-radius: var(--join-se, var(--radius-field));
	border-end-end-radius: var(--join-ee, var(--radius-field));
	border-end-start-radius: var(--join-es, var(--radius-field)); */
	flex-wrap: nowrap;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	gap: .375rem;
	transition-property: color, background-color, border-color, box-shadow;
	transition-duration: .2s;
	transition-timing-function: cubic-bezier(0,0,.2,1);
	display: inline-flex;
}

.btn:not(.dropdown-toggle):hover {
	--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
}

.btn:not(.dropdown-toggle):pressed {
	--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
}

.btn:not(.dropdown-toggle):not(.btn-sm):not(.btn-lg) {
	height: 2.5rem !important;
}

.btn.btn-sm {
	--fontsize: .75rem;
	--btn-p: .75rem;
	--size: calc(var(--size-field, .25rem) * 8);
}
.btn.btn-lg {
	--fontsize: 1.125rem;
	--btn-p: 1.25rem;
	--size: calc(var(--size-field, .25rem) * 12);
}
.btn.btn-xl {
	--fontsize: 1.375rem;
	--btn-p: 1.5rem;
	--size: calc(var(--size-field, .25rem) * 14);
}


.btn:is(:disabled,[disabled],.btn-disabled):not(.btn-link,.btn-ghost) {
	background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent) !important;
}

.btn:is(:disabled,[disabled],.btn-disabled) {
	color: color-mix(in oklch, var(--color-base-content) 30%, #0000) !important;
	opacity: 1 !important;
	cursor: not-allowed !important;
}

.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,:disabled,[disabled],.btn-disabled), 
.btn.btn-default:not(.btn-active,:hover,:active:focus,:focus-visible,:disabled,[disabled],.btn-disabled) {
	--btn-fg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 95%, var(--color-base-content));
	--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 10%, var(--color-base-100));
	--btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 10%, var(--color-base-100));
}

.btn.btn-primary, .btn.btn-default {
	--btn-color: var(--color-primary);
	--btn-fg: var(--color-primary-content);
}

.btn.btn-secondary {
	--btn-color: var(--color-secondary);
	--btn-fg: var(--color-secondary-content);
}

.btn.btn-accent {
	--btn-color: var(--color-accent);
	--btn-fg: var(--color-accent-content);
}

.btn.btn-neutral {
	--btn-color: var(--color-neutral);
	--btn-fg: var(--color-neutral-content);
}

.btn.btn-info {
	--btn-color: var(--color-info);
	--btn-fg: var(--color-info-content);
}

.btn.btn-success {
	--btn-color: var(--color-success);
	--btn-fg: var(--color-success-content);
}

.btn.btn-warning {
	--btn-color: var(--color-warning);
	--btn-fg: var(--color-warning-content);
}

.btn.btn-error, .btn.btn-danger {
	--btn-color: var(--color-error);
	--btn-fg: var(--color-error-content);
}

/* ===================================================================================================== 
TABS
===================================================================================================== */

.nav-tabs > li > a {
	color: color-mix(in oklch, var(--color-base-content), transparent 50%) !important;
	font-size: var(--fs-sm) !important;
	font-weight: 600 !important;
	border-top-left-radius: var(--radius-field) !important;
	border-top-right-radius: var(--radius-field) !important;
}

.nav-tabs > li > a:hover {
	/* background: color-mix(in oklch, var(--color-base-200), transparent 50%) !important; */
	color: var(--color-base-content) !important;
	background: var(--color-base-100) !important;
}

.nav-tabs > li.active > a {
	color: var(--color-base-content) !important;
	background: var(--color-base-100) !important;
}

/* ===================================================================================================== 
EVERYTHING EVERYWHERE ALL AT ONCE
===================================================================================================== */

.mainContainer {
	box-shadow: none !important;
}

.dx-theme-generic-typography {
	color: var(--color-base-content);
}

.greybox {
	background: color-mix(in oklch, var(--color-base-200), transparent 50%) !important;
	border-radius: var(--radius-box) !important;
	padding: 1rem !important;
	border: none !important;
}

.ddlHolder {
	background: var(--color-base-100) !important;
	border-radius: var(--radius-box) !important;
	padding: 0.5rem !important;
	border: none !important;
	gap: 0.5rem !important;
	display: flex !important;
	flex-direction: column !important;
	box-shadow: var(--shadow) !important;
}

.ddlHolder .selectOption {
	background: none !important;
	padding: 0 !important;
}

.ddlHolder .selectOption button {
	width: 100% !important;
}

.dropdown-menu li a {
	padding: 0.5rem 1rem !important;
	transition: background-color 0.15s ease-in-out !important;
}

.dropdown-menu li a:hover {
	background: color-mix(in oklch, var(--color-primary) 10%, transparent) !important;
}

.dropdown-menu > li.active > a, .dropdown-menu > li.active > a:focus, .dropdown-menu > li.active > a:hover {
	background: var(--color-primary) !important;
	color: var(--color-primary-content) !important;
}

.linkMove {
	color: var(--color-base-content) !important;
	font-weight: 600 !important;
}
.tableLink, .orderLink, .link {
	color: var(--color-primary) !important;
	text-decoration: underline !important;
	font-weight: 600 !important;
	cursor: pointer;
	font-size: var(--fs-sm) !important;
}
.tableLink:hover, .orderLink:hover, .link:hover {
	color: color-mix(in oklch, var(--color-primary) 80%, var(--color-base-content)) !important;
}

/* CARD */

.drp-card, .card, .search-wrapper, .greybox {
	background: var(--color-base-100) !important;
	box-shadow: var(--shadow) !important;
	border-radius: var(--radius-box) !important;
	border: var(--border) solid var(--color-base-300) !important;
	padding: 1.25rem !important;
}

#tabEdiChangeRequest .table-responsive {
	background: var(--color-base-100) !important;
	box-shadow: var(--shadow) !important;
	border-radius: var(--radius-box) !important;
	border: var(--border) solid var(--color-base-300) !important;
	padding: 1.25rem !important;
}

#tabEdiChangeRequest .nested-header-parent th, .custom-th-button tr {
	background: var(--color-base-100) !important;
}

#tabEdiChangeRequest .nested-table-child.odd, .nested-table-child.even {
	background: var(--color-base-200) !important;
}

.border-table {
	border: var(--border) solid var(--color-base-300) !important;
}

tr a {
	color: var(--color-primary) !important;
	text-decoration: underline !important;
	font-weight: 600 !important;
	cursor: pointer;
}

.paginate_button a {
	color: var(--color-primary) !important;
	font-weight: 600 !important;
	background: var(--color-base-100) !important;
	border: var(--border) solid var(--border-soft) !important;
	transition: color background-color 0.3s ease-in-out !important;
	padding: 0.5rem .75rem !important;
}
.paginate_button a:hover {
	background: color-mix(in oklch, var(--color-primary) 10%, transparent) !important;
}
.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
	color: color-mix(in oklch, var(--color-base-content) 50%, transparent) !important;
	background: var(--color-base-100) !important;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
	background: var(--color-primary) !important;
	color: var(--color-primary-content) !important;
}

.dt-buttons.btn-group {
	gap: .5rem;
	display: inline-flex;
}