@font-face {
	font-family: Figtree;
	src: url(/ttf/figtree.ttf);
}

@font-face {
	font-family: Figtree;
	font-style: italic;
	src: url(/ttf/figtree-italic.ttf);
}

* {
	font-family: Figtree,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

p {
	text-align: left;
	line-height: 1.5;
}

.scroll-interior {
	max-height:calc(100vh - 26rem);overflow-y:scroll;-ms-overflow-style: nonescrollbar-width: none;
}

.scroll-interior::-webkit-scrollbar {
  display: none;
}
/*
.material-request-icon {
	background-color: #8cbeb5;
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	vertical-align:middle;
	border-radius: 50%;
	text-align: center;
	font-size: 95%;
	font-weight: bold;
	color: #000;
	font-style:normal;
}
*/

@keyframes glimmer {
	0%   { background-color: #ffffff;}
	17%  { background-color: #ffbf48;}
	33%  { background-color: #ffffff;}
	50%  { background-color: #ffbf48;}
	67%  { background-color: #ffffff;}
	83%	 { background-color: #ffbf48;}
	100% { background-color: #ffffff;}	
}

.glimmer {
	animation-name: glimmer;
	animation-duration: 1.25s;
}

.debug-element {
	display: none;
}

#root {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #FFD0D0;
	box-sizing: border-box;
	max-height: 100vh;
}

#dialogs {
}

#dialogs>div, .nested_dialog, #fadeaways>div {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #00001060;
	overflow-y: scroll;
}

.nested_dialog {
	z-index: +2;
}

.dialog_container_outer {
	min-height:100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.dialog_container {
}
.dialog_pad {
	height: 5rem;
}

#toasts {
	position: fixed;
	top: 1rem;
	right: 1rem;
	display: flex;
	flex-direction: column;
}

.toast {
	width: 100%;
    margin-left: 0;
    margin-right: 0;
    max-height: 100vh;
    overflow-y: scroll;
    padding-bottom: 2rem;
    padding-top: 2rem;
}

#top {
	height: 75px;
	background-color: #2a2a38;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.75rem 1.25rem;
}

#bottom {
	flex-grow:1;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	max-height:100%;
}

#left {
	background-color: #2a2a38;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 0.75rem;
	color: white;
	font-weight: 500;
	gap: 0.75rem;
	height: 100%;
	width: 16rem;
}

#right {
	height: 100%;
	box-sizing: border-box;
	flex-grow:1;
}

#page_container {
	height: calc(100vh - 75px);
	box-sizing: border-box;
	overflow-y: auto;
	background-color: #d9e0ea;
}

div:has(>input), div:has(>select) {
	position: relative;
}

#page {
	padding: 2rem 2rem;
}

#top_right_menu_container {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-right: 1rem;
}

iframe {
	border: 1px solid #bbb;
}

#statusbar {
	z-index: 1000;
	color: #00004080;
	position: fixed;
	bottom: 0.75rem;
	right: 2rem;
}

#connection_info {
	margin-left: 1rem;
}

#connection_info svg {
	display: inline-block;
	vertical-align: middle;
	height: 1.25rem;
}

#watermark {
	pointer-events: none;
}

form>div, .form-row, .form-page>div {
	width:100%;
	box-sizing:border-box;
	margin-top: 0.5rem;
}

.top_right_menu {
	display: flex;
    align-items: center;
    color: white;
    font-weight: 500;
    border-radius: 1.5rem;
    padding: 0.25rem 0.675rem;
    position: relative;
    user-select: none;
	transition: background-color 0.15s;
}

.menu {
	position: absolute;
    top: 1rem;
    right: 0;
	z-index: 100;
    background-color: #f2f6fb;
    display: block;
    padding: 0.625rem 0rem 0.625rem 0rem;
    color: black;
    box-sizing: border-box;
    margin-top: 1.5rem;
    border-radius: .5rem;
    box-shadow: 0px 0.5px 5px #00000060;
    width: 15rem;
}

.menu>a {
	display: block;
    color: black;
    font-size: 11pt;
    line-height: 2.0rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.menu>a:hover {
	background-color: #e1e3e5;
}

.top_right_menu[data-active] {
	cursor: pointer;
    background-color: #18a37fff;
	transition: background-color 0.15s;
}

.top_right_menu:hover
{
	cursor: pointer;
    background-color: #18a37fff;
	transition: background-color 0.15s;
}

.top_right_menu[data-disabled] {
	opacity: 0.4;
	pointer-events: none;
	cursor: not-allowed;
}

.top_right_menu>svg {
	display: block;
    height: 1.25rem;
    margin-right: 0.25rem;
}

svg[data-icon] {
	/* This hack helps keep everything roughly the same shape
	   while rendering is ongoing */
	aspect-ratio:1;
}

.left_navbar_item {
	display: flex;
    align-items: center;
    flex-direction: row;
    text-decoration: none;
    color: white;
    padding: 0.25rem 2.5rem 0.25rem 1.5rem;
    border-radius: 1.5rem;
    margin-right: 0rem;
    background-color: #18a37f00;
    transition: background-color 0.15s;
	user-select: none;
	position:relative;
	box-sizing: border-box;
}
.left_navbar_item:hover{
	background-color: #18a37fff;
    transition: background-color 0.15s;
    cursor: pointer;
}
.left_navbar_item>svg {
	height: 1.5rem;
    box-sizing: border-box;
    margin-right: 1.25rem;
    display: block;
}
#left hr {
	border: none;
    background: #556667;
    height: 1px;
}

#new_request_button {
	display: flex;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(#fcff31, #ffbc49);
    color: black;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.75rem;
    align-items: center;
    box-shadow: 0 0 0 #FFFF0000;
    transition: box-shadow 0.15s;
    box-sizing: border-box;
    margin-left: 1.0rem;
    margin-right: 1.0rem;
}
#new_request_button>svg {
	margin-right: 1rem;
}
#new_request_button:hover {
	box-shadow: 0 0 50px #FFFF00FF;
    transition: box-shadow 0.15s;
    background: #FFDF00FF;
    cursor: pointer;
}

.tabs {
	font-weight:500;
	background-color:#dbe6da; /*dce7f3;*/
	display:flex;
	gap:2rem;
	justify-content:center;
	position:relative;
	left:-1.5rem;
	right:-1.5rem;
	width:1024px;
	padding-top:0.75rem;
	padding-bottom:0.75rem;
}

.tabs>a {
	padding: 0.5rem;
	border-radius: 1.5rem;
	padding: 0.375rem 1.25rem;
	text-decoration: none;
	color: #13171a;
	transition: color 0.15s;
	transition: background-color 0.15s;
	user-select: none;
}

.tabs>a:hover, .tabs>a[data-selected] {
	color: white;
	background-color: #158d79;
	transition: color 0.15s;
	transition: background-color 0.15s;
	cursor: pointer;
}


.tabs>a[data-disabled] {
	color: #a0a0a0;
	background-color: #00000000;
	cursor: not-allowed;
}

.tabs>a[data-disabled]:hover {
	background-color: #00000000;
	color: #a0a0a0;
}

form .row {
	display: flex;
	gap: 1rem;
	width: 100%;
	margin-top: 0.5rem;
}

form .row>div {
	width: 100%;
}

.switch {
	width: 3rem;
	height: 1.625rem;
	background-color: #158d79;
	box-shadow: 0px 0px 3px inset #00000080;
	border-radius: 0.8125rem;
	position:relative;
	cursor: pointer;
}

.switch:hover {
	background-color: #0b5e55;
}

.switch:hover>div {
	/*background-color: #f0f3f5;*/
}

.switch.disabled {
	background-color: #b0B0B0;
	pointer-events: none;
	box-shadow: none;
}

button:has(.upload-leaflet) {
	position: relative;
}

.upload-leaflet {
	border: 1px solid #456;
	background-color: white;
	border-radius: 0.5rem;
	position: absolute;
	top: 2.75rem;
	min-height: 20rem;
	width: 30rem;
	z-index: +1;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 1rem;
}

.upload-leaflet button {
	max-width: 20rem;
}

.switch>div {
	position:absolute;
	height:1.25rem;
	border-radius: 0.625rem;
	width: 1.25rem;
	background-color: white;

	top: 0.1875rem;
	left: 0.1875rem;
	pointer-events: none;
	transition: left 0.15s;
}

.switch[data-checked]>div {
	left: 1.625rem;
	transition: left 0.15s;
}

option[disabled] {
	font-style: italic;
}

.border_1 {
	border: 1px solid #27c4a6;
    border-radius: 0.75rem;
	padding: 0.5rem 1rem;
}

a {
	color: #18a37f;
	cursor: pointer;
}

.small {
	font-weight: 500;
	font-size: 80%;
	color: #60646f;
	position: relative;
	top: 0rem;
	font-style: italic;
	margin-left: 0.5rem;
}

input[type=text],
input[type=ssn],
input[type=password],
input[type=email],
input[type=date],
input[type=phone],
input[type=number],
textarea,
select {
	border-radius: .375rem;
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-left: 0; margin-right: 0; margin-top: .25rem;
	font-size: 1rem;
	line-height: 1.5rem;
	border: 1px solid #d1d5db;
	padding: .5rem .75rem;
	background-color: #f2f6fb;
	height: 2.6125rem;
}

textarea {
	resize: vertical;
	height: 6rem;
}

button {
	text-transform: uppercase;
	color: white;
	letter-spacing: .1em;
	font-weight: 600;
	background-color: #18a37f;
	border:none;
	text-align: center;
	padding-top: .6rem;
	padding-bottom: .6rem;
	padding-left: 2rem;
	padding-right: 2rem;
	border-radius: .375rem;
	transition: 0.15s background-color;
}

button[data-disabled] {
	background: initial !important;
	background-color: #888 !important;
	color: white !important;
	animation: none !important;
	-webkit-mask-image: none !important;
}

button[data-disabled]:hover {
	background-color: #888;
	box-shadow: none;
	cursor: not-allowed;
}
button:hover {
	cursor:pointer;
	background-color: #158d79;
	transition: 0.15s background-color;
	box-shadow: 0px 1px 3px #00000040;
}
button[data-theme=red] {
	background-color: #8d2f29;
}
button[data-theme=red]:hover {
	background-color: #5f1a1a;
}

#order_origin {
	position:absolute;
	top:1rem;
	left:0.5rem;
	font-weight:500;
	color:#808080;
}
#order_origin svg {
	display: inline-block;
	height: 0.875rem;
}
.pellet {
	position: absolute;
	top: 0.25rem;
	left: 1.5rem;
	transform: translate(-50%,-50%);
	min-width: 1.25rem;
	padding: 0rem 0.2rem;
	height: 1.25rem;
	border-radius: 0.625rem;
	font-size: 85%;
	font-weight: bold;
	color: white;
	display:flex;
	align-items:center;
	justify-content:center;
}

td {
	vertical-align: top;
}

.uploaded-item {
	/*margin-top: 0.5rem;*/
	box-shadow: 0px 3px 5px #00000040;
	border-radius: 1rem;
	display:flex;
	padding:0.75rem;
	background: #18a37f;
	color: white;
}

#supporting_documents .uploaded-item {
	background: #2a2a38;
}

.uploaded-item-name {
	overflow-x: hidden;
	width:11rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.uploaded-item:hover {
}

.uploaded-item-close {
	height: 1.5rem;
	color: white;
	cursor:pointer;
}

.uploaded-item-close:hover {
	color: red;
}

.uploaded-item-close svg {
	display: block;
	height: 1.5rem;
}

.medtest {
	margin-top:0.5rem;
	background-color: #d3e5ff;
	border-radius: 0.75rem;
	border: 1px solid #a3bde1;
	padding: 0.5rem 1.5rem;
	padding-top: 0.25rem;
	margin-top: 1.5rem;
}

.medtest label {
	color #080c0e;
}

.medtest input {
	border-color: #b1b3b7 !important;
}

.medtest input[type=checkbox] {
	background-color: white;
}

div.drag-outer {
	box-sizing:border-box;margin-top:0;min-height:5rem;position:relative;
}

/*div.dragndrop {
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	display: flex;
	align-items:center;
	justify-content:center;
	font-style:italic;
	color: #404040;
	user-select: none;
	box-sizing: border-box;
*/
/*
.instructions {
	display: none;
}

div.drag-outer:has(.upload-button:only-child) .instructions {
	display: block;
}

.instructions2 {
	display: none;
}
*/
div:has(>.instructions2){ 
	top:0;left:0;right:0;bottom:0;
	display: flex;
	align-items:center;
	justify-content:center;
	font-style:italic;
	color: #404040;
	user-select: none;
	box-sizing: border-box;
}
/*
.dragndrop:has(.upload-button:only-child) .instructions2 {
	display: block;
}

.dragndrop:has(.upload-button:only-child) .instructions2 {
	display: block;
}
*/

div.dragndrop-files {
	display: flex;
	gap:0.5rem;
	margin:0.5rem;
	box-sizing:border-box;
	flex-wrap:wrap;
	align-items: center;
}

div.upload-button {
	height:44px;
	/*margin-top:8px;*/
	display:flex;
	align-items:center;
	order:1000;
}

div.upload-button div {
	font-size:200%;
	color:#60cfb2;
	user-select:none;
	z-index:+1;
}

div.upload-button div:hover {
	color:#18a37f;
	cursor:pointer;
}

.nav-menu {
	display:flex;
	align-items:center;
	color:white;
	font-weight:500;
	border-radius: 1.5rem;
	padding: 0.25rem 0.675rem;
	position: relative;
	user-select: none;
	z-index: 6;
}

.folder {
	text-align:center;
	cursor: pointer;
	user-select:none;
}

.folder svg {
	display:inline;
	height:1.25rem;
	float:right;
}

.nav-submenu {
	position:absolute;
	top:1rem;right:0;
	background-color:#f2f6fb;
	z-index: 4;
	display:none;
	padding: 0.625rem 0rem 0.625rem 0rem;
	color: black;
	box-sizing: border-box;
	margin-top: 1.5rem;
	border-radius:.5rem;
	box-shadow: 0px 0.5px 5px #00000060;
	width: 15rem;
}	

.active-menu .nav-submenu {
	display: block;
}

.nav-submenu a {
	display: block;
	color: black;
	font-size: 11pt;
	line-height: 2.0rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.nav-submenu a:hover {
	background-color: #e1e3e5;
}

.nav-menu svg {
	display:block;
	height:1.25rem;
	margin-right:0.25rem;
}

.nav-menu:hover, .active-menu {
	cursor: pointer;
	background-color: #18a37fff;
}

.logged-out-container {
	background-color: #2a2a38;
	display: flex;
	position: fixed;
	top: 0; bottom: 0; left: 0; right: 0;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	z-index: 2;
	overflow-y: auto;
}

.system-banner {
	text-transform: uppercase;
	font-size: 3rem;
	color: #5c5c7b;
}

#stickyshadowholder {
	transition: box-shadow 0.25s;
}

.stuck #stickyshadowholder {
	box-shadow: 0px 5px 5px #00000040;
	border-bottom: 1px solid #a0a0a0;
	transition: box-shadow 0.25s;
}

#stickyfootershadowholder {
	transition: box-shadow 0.25s;
}

.stuck #stickyfootershadowholder {
	box-shadow: 0px -5px 5px #00000040;
	border-top: 1px solid #a0a0a0;
	transition: box-shadow 0.25s;
}

.dialog {
	position: relative;
	display:block;
	background-color: #ffffff;
	padding: 1rem 1.5rem 1rem 1.5rem;
	width: 100%;
	max-width: 1024px;
	box-sizing: border-box;
/*	margin-top: 1.5rem;*/
	border-radius:.5rem;
	box-shadow: 0px 0.5px 5px #00000060;
	margin-left: auto;
	margin-right: auto;
}

.left-navbar div hr {
	border: none;
	background: #556667;
	height:1px;
}

.inner-container {
	flex-grow:1;
	overflow-y:auto;
	background-color: #d9e0ea;
}

.inner {
	box-sizing: border-box;
	margin-top: 2.5rem;
}


.page {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0; left:0; right:0; bottom:0;
}

.form-checkbox-row {
	display:flex;
	justify-content:start;
	align-items:center;
	margin-top: 0.5rem;
}

.form-horizontal-row {
	display:flex;
	justify-content:start;
	align-items:center;
	gap:1rem;
	margin-top: 0.5rem;
}

.form-horizontal-row>div {
	width:100%;
}

.dialog-container {
	position: fixed;
	top:0;left:0;bottom:0;right:0;
	display:flex;
	flex-direction: column;
	align-items:center;
	justify-content:center;
	z-index:5;
}

.dialog-container>div {
	width:100%;
	margin-left:0;
	margin-right:0;
	/**/
	max-height:100vh;
	overflow-y: scroll;
	padding-bottom: 2rem;
	padding-top: 2rem;
}

.form-checkbox-row input[type="checkbox"] {
	margin-right: 0.675rem;
}


.folding-area {
	border: 1px solid #27c4a6;
	border-radius: 1.5rem;
} 

.folding-area-unstyled {}

.folding-area-header {
	display: flex;
	width: 100%;
	align-items: center;
	height: 2rem;
}

.folding-area-title {
	text-align: center;
	flex-grow: 1;
	cursor:pointer;
}

.folding-area-inner {
	padding: 1rem;
}

.folding-area-unstyled>.folding-area-inner {
	padding: 0px;
}

.folding-area-icon {
/*	flex-basis: 0;*/
	height: 1.5rem;
	width: 1.5rem;
	padding-right: 1rem;
	color: black;
}

.icon-button-blue {
	color: #2c4096;
}
.icon-button-blue:hover {
	background-color:#2c4096;
	color: white;
}

.icon-button-red {
	color: #c54545;
}
.icon-button-red:hover {
	background-color: #c54545;
	color: white;
}

.icon-button-green {
	color: #18a37f;
}
.icon-button-green:hover {
	background-color: #18a37f;
	color: white;
}

.form-row-icon-button {
	background-color: #00000000;
	border-radius: 50%;
	padding: 0.125rem;
	margin-left: 0.125rem;
	cursor: pointer;
}

.form-row-icon-button svg {
	display: block;
	height:1.5rem;
	width:1.5rem;
}

label {
	display: block;
	color: #374151;
	font-weight:500;
	font-size:.875rem;
}

.watermark {
	z-index: 20;
	pointer-events: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	color: #00004080;
}

input[type=checkbox] {
	border: 1px solid #d1d5db;
	border-radius: .375rem;
	height:1.25rem;
	padding:2px;
	appearance:none;
	aspect-ratio:1.025 / 1;
	display:block;
	box-sizing:border-box;
}

input[type=checkbox].specbox {
	background-color: #e4dae6;
	border-color: #000000;
	border-witdth:3px;
}

input[type=checkbox]:checked {
	background-color: #18a37f;
	background-image:url(/images/check.svg);
}

input[type=text]:focus, input[type=ssn]:focus, input[type=password]:focus, input[type=email]:focus, input[type=date]:focus, input[type=phone]:focus, textarea:focus, select:focus {
	outline-color: #27c4a6;
}

label:has(+ div>[required])::after {
	content: "*";
	color:red;
	font-weight:bold;
	font-size:112.5%;
}

input[type=text][data-required-unfilled],
input[type=ssn][data-required-unfilled],
input[type=email][data-required-unfilled],
input[type=date][data-required-unfilled],
input[type=phone][data-required-unfilled],
select[data-required-unfilled] {
	background-color: #fff4dd;
}

div.ordered input[type=text]:focus, 
div.ordered input[type=ssn]:focus, 
div.ordered input[type=password]:focus,
div.ordered input[type=email]:focus,
div.ordered input[type=date]:focus, 
div.ordered input[type=phone]:focus,
div.ordered input[type=number]:focus,
div.ordered textarea:focus,
div.ordered select:focus {
	outline-color: #ab4924;
}
div.ordered .border_1, div.ordered .folding-area {
	border: 1px solid #ab4924;
}

div.ordered .tabs {
	background-color:#e6deda; /*dce7f3;*/
}
div.ordered .tabs>a:hover,div.ordered .tabs [data-selected] {
	background-color: #ab4924;
}
div.ordered button.generic-color {
	background-color: #ab4924;
}

div .tabs>#results_tab.glow {
	background:linear-gradient(#fcff31, #ffbc49);
	color:#291b06;
	box-shadow: 0px 0px 3px #00000040;
	position:relative;
}

div .tabs>#results_tab.glow>.glow_mask {
	position:absolute;
	top:0;left:0;width:100%;height:100%;
	background-color:white;
	border-radius: 1.5rem;
	pointer-events: none;
	opacity: 0%;
	transition: opacity 0.125s;
	-webkit-mask-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
	/**/
}

div .tabs>#results_tab.glow:hover>.glow_mask {
	opacity: 100%;
	transition: opacity 0.125s;
	-webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,0) 30%, #000 50%, rgba(0,0,0,0) 70%);
	-webkit-mask-size: 200%;
	animation: shine 2s infinite;
}

div .tabs>#results_tab.glow[data-selected] {
	box-shadow: 0px 0px 5px inset #00000080;
	background:linear-gradient(#ffe668,#fcff31);
	
}

div.dispatched input[type=text]:focus, 
div.dispatched input[type=ssn]:focus, 
div.dispatched input[type=password]:focus,
div.dispatched input[type=email]:focus,
div.dispatched input[type=date]:focus, 
div.dispatched input[type=phone]:focus,
div.dispatched input[type=number]:focus,
div.dispatched textarea:focus,
div.dispatched select:focus {
	outline-color: #703e5f;
}

div.dispatched .folding-area {
	border: 1px solid #703e5f;
}

div.dispatched .tabs {
	background-color:#e4dae6; /*dce7f3;*/
}
div.dispatched .tabs>a:hover,div.dispatched  .tabs>a[data-selected] {
	background-color: #703e5f;
}
div.dispatched button.generic-color {
	background-color: #703e5f;
}

.notification {
	display:block;
	position:fixed;
	top:2rem;
	right:2rem;
	width:20rem;
	max-width:90vw;
	padding:0.75rem;
	background-color:#158d79;
	border-right:0.5rem solid white;
	/*border: 1px solid #0f6556;*/
	color:white;
	border-radius: 0.5rem;
	font-weight:500;
	font-size:112.5%;
	box-shadow: 0px 2px 5px #00000080;
	z-index:50;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.notification * {
	pointer-events: none;
}

.notification svg {
	height: 2rem;
	display: block;
	padding-right: 0.667rem;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}

button.button-flavor-gold {
	background:linear-gradient(#fcff31, #ffbc49);
	color:#291b06;
}

button.button-flavor-gold:hover {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}

button.button-flavor-dispatched {
	background-color: #703e5f;
}

button.button-flavor-dispatched:hover {
	background-color: #562646;
}

button.button-flavor-ordered {
	background-color: #ab4924;
}

button.button-flavor-ordered:hover {
	background-color: #832b0a;
}

button.button-flavor-blue-raspberry {
	background-color: #1969aa;
}

#tricard {
	max-width:40rem;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	gap:3.25rem;
}

#tricard>div {
	box-shadow:0px 3px 6px #00000040;
	border: 1px solid #98adcc;
	border-bottom:solid;
	border-bottom-width:0.75rem;
	border-bottom-color: #000000;
	border-radius:0.5rem;
	background-color:#acbcd4;
	width:33%;
	aspect-ratio:1/1.05;
	display:flex;
	justify-content:center;
	flex-direction:column;
	align-items:center;
	cursor:pointer;
	font-size:5rem;
	font-weight:700;
	user-select: none;
	box-sizing: border-box;
	transition: 0.2s border-bottom-width,
				0.2s border-bottom-color,
				0.2s color,
				0.2s box-shadow;
}

#tricard>div:hover {
	border-bottom-width:1.25rem;
}

#tricard #tricard-ordered {
	color:#ab4924;
	border-bottom-color:#ab4924;	
}

#tricard #tricard-ordered:hover {
	color: #e48d4b;
	border-bottom-color:#e48d4b;
	box-shadow: 0 1.0rem 1.5rem;
	box-shadow-color: #e48d4b;
}

#tricard #tricard-dispatched {
	color:#703e5f;
	border-bottom-color:#703e5f;
}

#tricard #tricard-dispatched:hover {
	color: #b45ec5;
	border-bottom-color:#b45ec5;
	box-shadow: 0 1.0rem 1.5rem;
	box-shadow-color: #b45ec5;
}

#tricard #tricard-resulted {
	color:#158d79;
	border-bottom-color:#158d79;
}

#tricard #tricard-resulted:hover {
	color: #10b7aa;
	border-bottom-color:#10b7aa;
	box-shadow: 0 1.0rem 1.5rem;
	box-shadow-color: #10b7aa;
}


#tricard #tricard-returned {
	color:#155b8d;
	border-bottom-color:#155b8d;
}

#tricard #tricard-returned:hover {
	color: #327be9;
	border-bottom-color:#327be9;
	box-shadow: 0 1.0rem 1.5rem;
	box-shadow-color: #327be9;
}

.tricard-label {
	font-size:1.5rem;
	color:#4b6469;
	font-weight:500;
	pointer-events: none;
	user-select: none;
}

#tricard>div:hover .tricard-label {
	color:#6e9198;
}

.thing1:hover {
	border-bottom: 1.25rem;
	background-color: #697381;
	cursor:pointer;
}

button[disabled] {
	background-color: #c0c4c9;
}

button[disabled]:hover {
	background-color: #c0c4c9;
	cursor: not-allowed;
	box-shadow: none;
}

.invisible { display: none; }


.login-small-text {
	font-size:.875rem;
	line-height:1.5rem;
	color: #4b5563;
	text-decoration: underline;
}

.login-small-text:hover {
	color: #111827;
}

.error {
	background-color:#f7adad;
	border:2.5px solid #c54545;
	border-radius:0.5rem;
	padding:0.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.error-close {
	padding: 0; margin: 0;
	width: 1.125rem;
	color: #600000;
}

.error-close:hover {
	color: #FF0000;
	cursor: pointer;
}

.error-close svg {
	display: block;
}


.no-padding {
	padding: 0 0 0 0;
}

.page-card {
	max-width: 1280px;
}

.dialog h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 18pt;
	font-weight: 500;
	padding: .5rem 1.5rem;
}

.dialog hr {
	border: none;
	height: 1px;
	background-color: #d0d5d7;
	width: 75%;
}

.dialog table {
	width: 100%;
	border-collapse: collapse;
}

.dialog table tr {
	border-top: 1px solid #d0d5d7;
	box-sizing: border-box;
}

ul {
	margin:0;
	padding-left:0.25rem;
}

tr.clickable:hover {
	background-color: #d3e5ff;
	cursor:pointer;
}

.warning {
	background-color: #ffd6af;
	border: 2px solid #ffc047;
	border-radius:1rem;
	color:#2b1306;
	display: flex;
	padding: 1rem 1.5rem;
	gap: 1rem;
	box-sizing: border-box;
}

.warning p {
	margin-top: 0;
}

.warning button {
	background-color: #e78922;
}

.warning button:hover {
	background-color: #d45b00;
}

.warning svg {
	width: 3rem;
	color: #e78922;
}

.dialog thead {
	height: 2.0rem;
}

.dialog table th {
	text-align: left;
	/*background-color: #d0d5d7;*/
}

.dialog table td {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.dialog table thead tr:first-child {
	border-top: none;
}

table.wb_table {
	border-radius: 1rem;
}


table.wb_table th {
	background: #2a2a38;
	color: white;
	font-weight: 500;
	border: 1px solid #2a2a38;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

table.wb_table td {
	border: 1px solid #2a2a38;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}


table.wb_table tr:first-child th:first-child {
}

table.wb_table td button {
	width: 100%;
}

.icon-button:not(:hover) .svg-filled {
	display: none;
}

.icon-button:hover .svg-hollow {
	display: none;
}

.order_info_card {
	display: flex;
	justify-content: space-between;
	/*background-color: #524f6d;
	color: white;*/
	font-weight: 600;
	padding: 0.65rem 1.25rem;
	border-radius: 0.5rem;
}

label {
	display: block;
	color: #374151;
	font-weight:500;
	font-size:.875rem;
}

.form-row h1 { 
	text-align: center;
	font-size: 150%;
	text-decoration: underline #eeeeee;
	font-variant: small-caps;
}

input[required].required_highlight {
	border: 3px solid #902929 !important;
}

.close-button {
	position: absolute;
	top: 1.0rem;
	right: 1rem;
	width: 1.5rem;
	height: 1.5rem;
	color: #40000040;
}

#stickyheader .close-button {
	right: 0rem;
}

.close-button:hover {
	color: red;
	cursor: pointer;
}

.smart-complete {
	position: absolute;
	border: 1px solid black;
	background-color: white;
	width: 100%;
	z-index: +10;
}

.smart-complete-item {
	padding: 0.25rem;
	cursor: pointer;
}

.smart-complete-item:hover {
	background-color: darkblue;
	color: white;
}

.glow-button {
	display: flex;
	padding: 0.5rem 1.25rem;
	background:linear-gradient(#fcff31, #ffbc49);
	color:black;
	font-weight:600;
	text-decoration: none;
	border-radius: 0.75rem;
	align-items: center;
	box-shadow: 0 0 0 #FFFF0000;
	transition: box-shadow 0.15s;
	box-sizing: border-box;
	margin-left: 1.0rem;
	margin-right: 1.0rem;
}

.glow-button:hover {
	box-shadow: 0 0 50px #FFFF00FF;
	transition: box-shadow 0.15s;
	background: #FFDF00FF;
	cursor: pointer;
}

[data-list=results] tr {
	display: none;
}

[data-list=results] tr[data-ready-for-results] {
	display: table-row;
}

/* Custom tooltip for edited-after-dispatch indicator */
.edited-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.5rem;
	width: 1rem;
	height: 1rem;
	background: #a71d2a;
	color: white;
	border-radius: 50%;
	font-size: 0.65rem;
	font-weight: bold;
	font-style: italic;
	cursor: pointer;
	position: relative;
}

.edited-indicator::after {
	content: attr(data-tooltip);
	position: absolute;
	top: 50%;
	left: calc(100% + 0.5rem);
	transform: translateY(-50%);
	background-color: #333;
	color: white;
	padding: 0.5rem 0.75rem;
	border-radius: 0.25rem;
	white-space: nowrap;
	font-size: 0.75rem;
	font-weight: normal;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	z-index: 1000;
}

.edited-indicator:hover::after {
	opacity: 1;
}
/* Universal View Toggle Styles */
.universal-view-toggle {
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.toggle-container {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 26px;
}

.toggle-container input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.3s;
	border-radius: 26px;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: 0.3s;
	border-radius: 50%;
}

.toggle-container input:checked + .toggle-slider,
.toggle-container.toggle-checked .toggle-slider {
	background-color: #8cbeb5;
}

.toggle-container input:checked + .toggle-slider:before,
.toggle-container.toggle-checked .toggle-slider:before {
	transform: translateX(22px);
}

.toggle-label {
	font-size: 0.875rem;
	color: #d9e0ea;
	user-select: none;
}