/* csslint font-sizes: false, qualified-headings: false,*/

.back-to-top {
	cursor: pointer;
	position: fixed;
	bottom: 20px;
	right: 0;
	display: none;
}

/** dev alert banner */
.dev_banner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0.8;
	z-index: 1000;
	pointer-events: none;
}

.dev_banner .alert{
	padding: 0.5rem;
}

/* breadcrumbs */

.cakes {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: var(--gap-small);
}

.breadcrumbs {
	padding: 0;
	margin: 0;
	font-size: 14px;
	font-weight: normal;
}

.breadcrumb-list {
	padding: 0;
	margin: 0 0 0.2rem 0;
}

.breadcrumbs ol {
	margin-bottom: 0;
}

.breadcrumbs li {
	display: inline-block;
	padding-bottom: 0;
}

.breadcrumb-link {
	background-color: transparent;
	padding: 0.2rem !important;
	text-decoration: underline;
	color: var(--theme);
	line-height: 160%;
	/* 22.4px */
}

.breadcrumb-separator {
	padding: 0 0.2rem 0 0.3rem;
}

.breadcrumb-separator::after {
	content: '/';
}

/* Display Name widget */
.display_name {

	display: inline-flex;
	background-color: white;
	color: var(--dark-blue);
	position: fixed;
	top: 36px;
	right: 1rem;
	z-index: 1220;
	padding: 0 1rem 0 1.5rem;
	border-radius: 1rem;
	box-shadow: var(--shadow);
	text-decoration: none;
	min-width: 100px;
}


/* display set by nobile class */
.display_name_text {
	position: relative;
	margin-right: 40px;
	min-height: 28px;
	align-items: center;
	z-index: 2;
}

.display_name_icon {
	position: absolute;
	right: 0;
	top: -2px;
	height: 32px;
	width: 32px;
	border-radius: 50%;
	background-color: var(--theme);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
}


.display_name:hover .fill_blue_to_green {
	fill: white;
}

.display_name:hover .display_name_icon {
	background-color: var(--dark);
}

.dn_links {
	position: absolute;
	top: 28px;
	left: 0.5rem;
	background-color: white;
	z-index: 1;
	min-width: calc(100% - 1rem);
	box-shadow: var(--shadow);
	max-height: 0;
	overflow: hidden;
	transition: var(--transition);
}

.show_dnl .dn_links {
	max-height: 400px;
	transition: var(--transition);
}

@media(min-width: 768px) {
	.display_name:hover .dn_links {
		max-height: 400px;
		transition: var(--transition);
	}
}


.dn_links a {
	display: block;
	padding: 0.5rem;
	color: var(--dark);
	font-size: 0.875rem;
	white-space: nowrap;
}

.fill_icon {
	fill: white;
}


#ttContainer {
	position: fixed;
	right: 18px;
	bottom: 55px;
	background-color: #d7dde4;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
	text-align: center;
	z-index: 999;
	display: none;
	padding: 0 6px;
}

#ttContainer a {
	display: block;
	font-size: 28px;
	color: white;
	padding: 8px 0;
	line-height: 1em;
}

.grey-box {
	background-color: #fafafa;
	margin-bottom: 12px;
	padding: 6px;
}

.card {
	background-color: #fff;
	box-shadow: var(--shadow);
	margin-bottom: 10px;
	border-radius: 0;
	border: none;
	padding: var(--gap-small);
	display: flex;
	flex-direction: column;
}

.contented .card {
	margin-bottom: 0;
}

.task-card {
	border: 1px solid #aaa;
	padding: 6px;
}

.h3-smaller {
	font-size: 1.4rem;
}

.alert-picon {
	height: 48px;
	width: auto;
	margin: 0 10px 10px 5px;
}

.external-link-picon {
	height: 20px;
	width: auto;
	margin: 0 4px 5px 5px;
}

.text-smaller .external-link-picon {
	height: 14px;
	width: auto;
	margin: 3px 2px 5px 2px;
}

.icon-rosette {
	margin: 0 -1px -6px 0;
}

.alert-heading {
	line-height: 1.1em;
	margin-top: 10px;
}


.in-panel-heading {
	margin-top: 30px;
}

.cta-text {
	padding: 20px;
	margin: 20px 0;
	min-height: 124px;
	vertical-align: middle;
}


/* faux table */
.faux-table .row {
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
	margin: 0;
}

.faux-table-striped .row:nth-of-type(2n) {
	background-color: rgba(0, 0, 0, 0.05);
}

/* participants table */
#participants-table td {
	vertical-align: middle;
}

.clone {
	display: none;
}

.dob-field {
	min-width: 64px;
	max-width: 64px;
	display: inline-block;
	padding: 4px;
	text-align: center;
}

.dob-year {
	min-width: 78px;
	max-width: 78px;
}

.trainer_form {
	display: none;
	padding: 20px;
	background-color: #fafafa;
}

.booking-trainer-list{
	display: flex;
	flex-direction: column;
	gap: var(--gap-small);
}

.bt-trainer-row {
	border-bottom: 3px solid #fff;
	padding-bottom: var(--gap-small);
}

/* fancy bits. */

.notify {
	position: fixed;
	opacity: .9;
	top: -100px;
	right: 20px;
	-webkit-transition: top 1s, opacity 1s;
	transition: top 1s, opacity 1s;
}

.notify--enter {
	top: 20px;
}

.notify--leave {
	opacity: .0;
}

/* file upload doodahh */
.dm-uploader {
	background-color: #fafafa;
	border: 1px dashed #ccc;
	border-radius: 6px;
	padding: 10px 6px 0;
}

.dm-uploader:hover {
	border-color: goldenrod;
}

@media print {

	*,
	*::before,
	*::after {
		overflow: visible;
		overflow-y: visible;
	}

	body {
		overflow: visible;
		overflow-y: visible;
	}
}

#bookings-alerts-table .custom-control-label:before {
	border-color: #f04124;
}

#bookings-alerts-table .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
	border-color: #999;
	background-color: #43ac6a;
}


.fade_in.htmx-added {
	opacity: 0;
}

.fade_in {
	opacity: 1;
	transition: opacity 1s ease-out;
}


/* login forms uses ui-kit so override with bootstrap */

.ui-button {
	display: inline-block;
	font-weight: 300;
	color: #222;
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.375rem 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	border-radius: 0;
	-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;

	background: #1589c9;
	border-color: #1589c9;
	color: #fff;
	cursor: pointer;

}

.uk-button {
	font-weight: var(--strong);
	text-transform: none;
	font-size: 13.13px;
	line-height: normal;
	padding-block: 4px;
	display: inline-flex;
	gap: 4px;
	align-content: center;
	justify-content: center;
	white-space: nowrap;
	cursor: pointer;
	width: fit-content;
	background: var(--dark);
	border-color: var(--dark);
	color:white;
	border:1px solid currentColor;
}

.uk-button-danger {
	background: var(--red);
	border-color: var(--red);
}

.uk-button-outline {
	background: white;
	border: 1px solid var(--dark);
	color: var(--dark);
}


.uk-button:hover {
	background: var(--theme);
	border: var(--theme);
	color:white;
	transition: var(--transition);
	border:1px solid currentColor;
}


.uk-button-outline:hover {
	border: 1px solid var(--dark);
}

.uk-button-secondary {
	background-color: var(--green);
	border-color: var(--green);
}

.uk-button svg{
	min-width: 16px;
	min-height: 16px;
}

.uk-button-default:disabled, .uk-button-primary:disabled, .uk-button-secondary:disabled, .uk-button-danger:disabled {
	background: var(--grey-light, #CCC);
	color: white;
	border-color:var(--grey-light, #CCC);
}

.uk-button-success {
	background: var(--green);
	color: white;
	border-color: var(--green);
}

.uk-button-success:hover {
	background: var(--dark);
	border-color: var(--dark);
}

.uk-button-success:active, .uk-button-success.uk-active {
	background: var(--active);
	border-color: var(--active);
}

.uk-radio:checked, .uk-checkbox:checked, .uk-checkbox:indeterminate {
    background-color: var(--green);
    border-color: transparent;
}

.contented .uk-table{
	margin-block: 0;
}

.uk-table th{
	text-transform: none;
	font-size: 13.125px;
	color: var(--dark);
	font-weight: var(--heavy);
}

/*=============================
  Alerts - mostly overrides for bootstrap
  but with a pretend dismiss button
=============================*/

.feedback_list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.alert {
    padding: 4px;
    position: relative;
    font-size: 12px;
    opacity: 0.8;
    width: fit-content;
	border-radius: 4px;
}

.alert-success {
	background-color: var(--green);
	color: white !important;
}
.alert-success label{
	color: white !important;
}

.alert-warning {
	background-color: var(--yellow);
	color: white !important;
}
.alert-warning label{
	color: white !important;
}

.alert-danger {
	background-color: var(--red);
	color: white !important;
}

.alert-danger label{
	color: white !important;
}

.alert_dismiss{
	padding: 0.5rem;
	display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
	transition: var(--transition);
	cursor: pointer;
}

.feedback_checkbox_container {
	width:16px;
	height:16px;
	display: block;
	position: relative;
	background-color: rgba(256,256,256,0.7);
	border-radius: 50%
}

.feedback_checkbox_container::after {
	display: inline-block;
	position: absolute;
	top:0;
	left:0;
	width: 16px;
	height: 16px;
	vertical-align: -0.125em;
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59L7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12L5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4'/%3E%3C/svg%3E");
  }

.feedback_checkbox {
	opacity: 0;
	border:0;
	background-color: transparent !important;
	padding:0;
	margin:0;
	color:black;
}

.alert:has(.feedback_checkbox:checked) {
    opacity: 0;
    height: 0;
    overflow: hidden;
    background: transparent;
    transition: all 0.5s ease-in-out;
}

.feedback_container {
	max-width: 64ch;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	justify-content: start;
	align-items: start;
}


.info{
	padding: 0.5rem;
	background-color: var(--grey-very-light);
	border: 1px solid var(--grey-light);
	border-radius: 4px;
}

/* new doc upload form */
.form_container {
	padding: 1rem;
	background-color: var(--grey-very-light);
	border-radius: 4px;
}

.uk-progress{
	margin-top: 8px;
	margin-bottom: 0;
}

.vt_form_container {
	padding: 0 1rem 2rem 1rem;
	color: var(--primary1);
}

@media(min-width: 992px) {
	.vt_form_container {
		padding: 1rem 2rem;
	}
}


.uk-progress{
	margin-bottom: 0;
}
#vt_doc {
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.vt_upload {
	display: flex;
	align-items: center;
	cursor: pointer;
	max-width: 620px;
	border-bottom: 2px dashed #ccc;
}

.vt_upload_image {
	width: 60px;
	height: auto;
}

.vt_upload_image svg {
	max-width: 100%;
	height: auto;
}

.vt_label {
	display: block;
	font-size: 1.125rem;
	font-weight: var(--strong);
	line-height: 1.5;
	margin-top: 1rem;
}

.vt_cat {
	margin: 0.5rem;
}

.vt_cat_label {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.vt_checkbox_title {
	flex: 1;
	display: flex;
}

.vt_checkbox_title_text {
	display: flex;
	align-items: center;
	font-size: 1.125rem;
	padding-left: 0.5rem;
}


/* ajax feedback bits */

#indicator {

	position: fixed;
	top: 90px;
	right: 100px;
	width: 80px;
	height: 80px;
}


.lds-ring {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
	opacity: 0.2;
}

.lds-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 64px;
	height: 64px;
	margin: 8px;
	border: 8px solid var(--theme);
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: var(--theme) transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
	animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
	animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
	animation-delay: -0.15s;
}

@keyframes lds-ring {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


/** buttons **/

/* overrides for bootstrap 
the aim is to be able to ditch BS one day.
*/

.btn,
.butt{
	display: flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	border-radius: var(--border-radius);
	padding: 8px;
	font-size:14px;
	font-weight: var(--strong);
}


.btn-primary {
	--bs-btn-bg: var(--theme);
	--bs-btn-border-color: var(--theme);
	--bs-btn-hover-bg: var(--active);
	--bs-btn-hover-border-color: var(--active);
	--bs-btn-active-bg: var(--active);
	--bs-btn-active-border-color: var(--active);
  }

.butt_secondary{
	background: white;
	border: 2px solid var(--active, #3F88C4);
	color: var(--active, #3F88C4);
}

.btn-success {
	--bs-btn-bg: var(--green);
	--bs-btn-border-color: var(--green);
	--bs-btn-hover-bg: var(--dark);
	--bs-btn-hover-border-color: var(--dark);
	--bs-btn-active-bg: var(--active);
	--bs-btn-active-border-color: var(--active);
}

.btn > svg {
	min-width: 16px;
	min-height: 16px;
}

/* default to having a space for icon */
.butt::before {
	display: block;
	height: 16px;
	aspect-ratio: 1/1;
	content: '';
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 16px;
	background-color: transparent;
}

.butt_no_icon{
	grid-template-columns: 1fr;
	gap: 0;
}

.butt_inline_icon{
	display: flex;
}

.butt_no_icon::before,
.butt_inline_icon::before{
	display: none;
}

.big_butt {
	padding: 8px;
	gap: 6px;
	grid-template-columns: 20px 1fr;
	font-size: 1.125rem;
}

button[disabled] {
	background-color:  var(--grey-light, #CCC);
	cursor: not-allowed;
}

.butt_green {
	background-color: var(--green);
}

.butt_invisible {
	background-color: transparent;
	color: var(--dark);
}

.butt_outline{
	border: 1px solid var(--dark);
	background-color: transparent;
	color: var(--blue);
}

.butt_red {
	background-color: var(--red);
}

.btn:hover,
.butt:hover,
.butt:focus,
button:hover {
	text-decoration: none;
	background-color: var(--dark);
	color: white;
}

.butt:disabled:hover {
	background-color:  var(--grey-light, #CCC);
}

.help{
	color: var(--grey-mid);
	font-size: 12px;
}

/**
These inline fa icons are pulled from the very useful
https://icon-sets.iconify.design/fa/?icon-filter=edit&keyword=awes

... BUT ... we're falling back to inline svg now so these are deprecated
*/
.butt_archive::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 10q-.425 0-.712.288T11 11v3.2l-.9-.9q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.6 2.6q.3.3.7.3t.7-.3l2.6-2.6q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275l-.9.9V11q0-.425-.288-.712T12 10M5 8v11h14V8zm0 13q-.825 0-1.412-.587T3 19V6.525q0-.35.113-.675t.337-.6L4.7 3.725q.275-.35.687-.538T6.25 3h11.5q.45 0 .863.188t.687.537l1.25 1.525q.225.275.338.6t.112.675V19q0 .825-.587 1.413T19 21zm.4-15h13.2l-.85-1H6.25zm6.6 7.5'/%3E%3C/svg%3E");
}

.butt_back::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1472 1600'%3E%3Cpath fill='%23fff' d='M1472 736v128q0 53-32.5 90.5T1355 992H651l293 294q38 36 38 90t-38 90l-75 76q-37 37-90 37q-52 0-91-37L37 890Q0 853 0 800q0-52 37-91L688 59q38-38 91-38q52 0 90 38l75 74q38 38 38 91t-38 91L651 608h704q52 0 84.5 37.5T1472 736'/%3E%3C/svg%3E");
}

.butt_check::before,
.butt_tick::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1280'%3E%3Cpath fill='%23fff' d='M1575 310q0 40-28 68l-724 724l-136 136q-28 28-68 28t-68-28l-136-136L53 740q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295l656-657q28-28 68-28t68 28l136 136q28 28 28 68'/%3E%3C/svg%3E");
}

.butt_delete::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1536'%3E%3Cpath fill='%23fff' d='M512 608v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23V608q0-14 9-23t23-9h64q14 0 23 9t9 23m256 0v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23V608q0-14 9-23t23-9h64q14 0 23 9t9 23m256 0v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23V608q0-14 9-23t23-9h64q14 0 23 9t9 23m128 724V384H256v948q0 22 7 40.5t14.5 27t10.5 8.5h832q3 0 10.5-8.5t14.5-27t7-40.5M480 256h448l-48-117q-7-9-17-11H546q-10 2-17 11zm928 32v64q0 14-9 23t-23 9h-96v948q0 83-47 143.5t-113 60.5H288q-66 0-113-58.5T128 1336V384H32q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h309l70-167q15-37 54-63t79-26h320q40 0 79 26t54 63l70 167h309q14 0 23 9t9 23'/%3E%3C/svg%3E");
}

.butt_edit::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1408'%3E%3Cpath fill='%23fff' d='m888 1056l116-116l-152-152l-116 116v56h96v96zm440-720q-16-16-33 1L945 687q-17 17-1 33t33-1l350-350q17-17 1-33m80 594v190q0 119-84.5 203.5T1120 1408H288q-119 0-203.5-84.5T0 1120V288Q0 169 84.5 84.5T288 0h832q63 0 117 25q15 7 18 23q3 17-9 29l-49 49q-14 14-32 8q-23-6-45-6H288q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113V994q0-13 9-22l64-64q15-15 35-7t20 29m-96-738l288 288l-672 672H640V864zm444 132l-92 92l-288-288l92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68'/%3E%3C/svg%3E");
}

.butt_list::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1408'%3E%3Cpath fill='%23fff' d='M256 1184v192q0 13-9.5 22.5T224 1408H32q-13 0-22.5-9.5T0 1376v-192q0-13 9.5-22.5T32 1152h192q13 0 22.5 9.5t9.5 22.5m0-384v192q0 13-9.5 22.5T224 1024H32q-13 0-22.5-9.5T0 992V800q0-13 9.5-22.5T32 768h192q13 0 22.5 9.5T256 800m0-384v192q0 13-9.5 22.5T224 640H32q-13 0-22.5-9.5T0 608V416q0-13 9.5-22.5T32 384h192q13 0 22.5 9.5T256 416m1536 768v192q0 13-9.5 22.5t-22.5 9.5H416q-13 0-22.5-9.5T384 1376v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5M256 32v192q0 13-9.5 22.5T224 256H32q-13 0-22.5-9.5T0 224V32Q0 19 9.5 9.5T32 0h192q13 0 22.5 9.5T256 32m1536 768v192q0 13-9.5 22.5t-22.5 9.5H416q-13 0-22.5-9.5T384 992V800q0-13 9.5-22.5T416 768h1344q13 0 22.5 9.5t9.5 22.5m0-384v192q0 13-9.5 22.5T1760 640H416q-13 0-22.5-9.5T384 608V416q0-13 9.5-22.5T416 384h1344q13 0 22.5 9.5t9.5 22.5m0-384v192q0 13-9.5 22.5T1760 256H416q-13 0-22.5-9.5T384 224V32q0-13 9.5-22.5T416 0h1344q13 0 22.5 9.5T1792 32'/%3E%3C/svg%3E");
}

.butt_star::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1600'%3E%3Cpath fill='%23fff' d='m1137 972l306-297l-422-62l-189-382l-189 382l-422 62l306 297l-73 421l378-199l377 199zm527-357q0 22-26 48l-363 354l86 500q1 7 1 20q0 50-41 50q-19 0-40-12l-449-236l-449 236q-22 12-40 12q-21 0-31.5-14.5T301 1537q0-6 2-20l86-500L25 663Q0 636 0 615q0-37 56-46l502-73L783 41q19-41 49-41t49 41l225 455l502 73q56 9 56 46'/%3E%3C/svg%3E");
}

/*=============================
  Tables
=============================*/

 /* .table_wrapper,
.table-responsive {
	overflow-x: scroll;
}


.table_wrapper>table,
.table-responsive>table {
	min-width: 960px;
} */


table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.125px;
}


th {
	font-weight: var(--heavy);
	background-color: white;
}

th.table_title {
	padding-left: 0;
	color: var(--grey-black, #222);
	font-size: 18px;
	font-weight: var(--heavy);
	line-height: normal;
}

tr {
	border-bottom: 1px solid var(--grey-light)
}

td.centre_butts>.butt,
td.centre_butts .pill {
	margin-inline: auto;
}


button.datatable-sorter {
	background-color: transparent;
	border: 0;
	padding:0 8px 0 0;
}

.datatable-sorter::before {
	border-top: 4px solid var(--theme);
}

.datatable-sorter::after {
	border-bottom: 4px solid var(--theme);
}

.datatable-dropdown label {
	font-size: 13.125px;
}

.iconed {
	padding-left: 32px;
	min-height: 32px;
	display: flex;
	align-items: center;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 24px;
}

.icon_approved {
	background-image: url('/site/assets/images/icons/tick.svg');
}

.icon_dnq {
	background-image: url('/site/assets/images/icons/dnq.svg');
	background-size: 12px;
	background-position-x: 4px;
}

.icon_ready_for_review {
	background-image: url('/site/assets/images/icons/tick.svg');
}

.icon_not_started {
	background-image: url('/site/assets/images/icons/warning.svg');
}

.icon_not_submitted {
	background-image: url('/site/assets/images/icons/waiting.svg');
}

.pill {
	display: flex;
	width: fit-content;
	min-width: 32px;
	align-items: center;
	justify-content: center;
	padding-inline: 8px;
	padding-block: 2px;
	border-radius: 12px;
	font-weight: var(--heavy);
	background-color: var(--grey-mid);
	color: white;
	margin-inline: auto;
}

/*=============================
	Dialog
=============================*/

/** Example dialog stylings **/

.millco_dialog{ 
	display: none;
}

.millco_dialog[open] {
	border: 1px solid white;
	border-radius: 2px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 1230px;
	background-color: #eee;
}

.millco_dialog header{
	display: none;
}

#modialog_content{
	height: 100%;
}


/* this is our close button and warning text */
.millco_dialog[open] header {
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: end;
	gap: 8px;
	height:40px;
	position: relative;
	top: 10px;
}

/* there's some default text to remind users to save - you can hide it here if you like */
.md_warning{
	color: var(--grey-mid);
	font-size: 12px;
}

/* our close button */
.millco_dialog_close {
	border: 1px solid var(--theme);
	display: flex;
	width: fit-content;
	justify-content: center;
	align-items: center;
	color: white;
	background-color: var(--theme);
	cursor: pointer;
	gap: 8px;
	padding: 4px 8px;
	border-radius: 4px;
}

.millco_dialog_close:hover {
	transition: var(--transition);
	color: white;
	background-color: var(--dark);
	border-color: var(--dark);
}

.millco_dialog_close_icon{
	display: flex;
	align-items: center;
	justify-content: center;
}

/* this is the background behind the dialog  - we're using a fancy gradient here but you can change it to whatever you like */
.millco_dialog::backdrop {
	background-image: linear-gradient(45deg,
			var(--dark),
			var(--grey-dark),
			var(--grey-mid));
	opacity: 0.85;
}

.dialog_embiggen{
	width:90vw;
	height:90vh;
}

/** just trying these htmx view transitions */

@keyframes fade-in {
	from { opacity: 0; }
  }

  @keyframes fade-out {
	to { opacity: 0; }
  }

  @keyframes slide-from-right {
	from { transform: translateX(90px); }
  }

  @keyframes slide-to-left {
	to { transform: translateX(-90px); }
  }

  /* define animations for the old and new content */
  ::view-transition-old(slide-it) {
	animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
	600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }
  ::view-transition-new(slide-it) {
	animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
	600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }

  /* tie the view transition to a given CSS class */
  .slide-transition {
	  view-transition-name: slide-it;
  }


  .dropzone{
	display: block;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 4px;
	border: 1px dashed var(--grey-light);
	border-radius: 4px;
	margin-top:4px;
  }