/*
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
		types: curtain;
	}
}

html:active-view-transition-type(curtain)::view-transition-old(root) {
	animation: curtain-out 0.25s ease forwards;
}

html:active-view-transition-type(curtain)::view-transition-new(root) {
	animation: curtain-in 0.25s ease forwards;
}

@keyframes curtain-out {
	from {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes curtain-in {
	from {
		clip-path: inset(0 50% 0 50%);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}
*/

:root { box-sizing: border-box; }
*, *::before, *::after, *::marker { box-sizing: inherit; }

html {
	font-synthesis: none;
	text-rendering: geometricPrecision;
	scrollbar-gutter: stable;
	background-color: #edf2fa;
}

html.edit {
	background: repeating-linear-gradient(-45deg,
		hsl(53deg 100% 50% / 25%),
		hsl(53deg 100% 50% / 25%) 25%,
		#edf2fa 25%,
		#edf2fa 50%);
	background-size: 96px 96px;
	background-attachment: fixed;
}

html.dragging {
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

html.dragging.resize-min {
	cursor: e-resize;
}

html.dragging.resize {
	cursor: e-resize;
}

html.dragging.resize-max {
	cursor: w-resize;
}

html :focus-visible {
	outline: revert;
	outline: 3px solid #077bed !important;
	outline-offset: 3px;
}

body {
	font-size: 16px;
	margin: 0;
	background: none;
}

body.blur {
	filter: revert;
}

@font-face {
	font-family: 'Nunito';
	src: url('../font/Nunito-VariableFont_wght.ttf');
}

@font-face {
	font-family: 'Nunito Italic';
	src: url('../font/Nunito-Italic-VariableFont_wght.ttf');
}

@font-face {
	font-family: 'LibreBaskerville';
	src: url('../font/LibreBaskerville-VariableFont_wght.ttf');
}

@font-face {
	font-family: 'LibreBaskerville Italic';
	src: url('../font/LibreBaskerville-Italic-VariableFont_wght.ttf');
}

@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../font/IBMPlexSans-VariableFont_wdth,wght.ttf');
}

@font-face {
	font-family: 'IBM Plex Sans Italic';
	src: url('../font/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf');
}

@font-face {
	font-family: 'Open Sans';
	src: url('../font/OpenSans-VariableFont_wdth,wght.ttf');
}

@font-face {
	font-family: 'Open Sans Italic';
	src: url('../font/OpenSans-Italic-VariableFont_wdth,wght.ttf');
}

@font-face {
	font-family: 'Crete Round';
	src: url('../font/CreteRound-Regular.ttf');
}

@font-face {
	font-family: 'Crete Round Italic';
	src: url('../font/CreteRound-Italic.ttf');
}

@font-face {
	font-family: 'Asap';
	src: url('../font/Asap-VariableFont_wdth,wght.ttf');
}

@font-face {
	font-family: 'Asap Italic';
	src: url('../font/Asap-Italic-VariableFont_wdth,wght.ttf');
}

@font-face {
	font-family: 'Balsamiq Regular';
	src: url('../font/BalsamiqSans-Regular.ttf');
}

@font-face {
	font-family: 'Balsamiq Bold';
	src: url('../font/BalsamiqSans-Bold.ttf');
}

@font-face {
	font-family: 'Balsamiq Italic';
	src: url('../font/BalsamiqSans-Italic.ttf');
}

@font-face {
	font-family: 'Balsamiq Bold Italic';
	src: url('../font/BalsamiqSans-BoldItalic.ttf');
}

:root {
	color-scheme: light dark;
	--select-carat-color: rgba(0, 0, 0, 0.6);
	--button-text-color: #454545;
	--color-input-border-color: rgba(0, 0, 0, 0.15);
}

@media (prefers-color-scheme: light) {
	:root {

	}
}

@media (prefers-color-scheme: dark) {
	:root {

	}
}

* {
	font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

em {
	font-family: "Nunito Italic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.button-link {
	text-align: center;
	font-size: 16px;
	border: 2px solid #f0f0f0;
	padding: 4px 12px;
	border-radius: 6px !important;
	box-shadow: 0 1px 2px 0 #0000008a !important;
	cursor: pointer;
	margin: 4px 4px 4px 0;
	display: inline-block;
	width: fit-content !important;
	background: #fff linear-gradient(to bottom, white 20%, #f4f4f4 40%, #e9e9e9 60%, white);
	color: var(--button-text-color);
	font-weight: 700 !important;
	text-shadow: 0 1px 0 #ffffff;
	user-select: none;
	-webkit-user-select: none;
	text-decoration: none;
}

.button-link.safe {
	border-color: #39b209;
	background: linear-gradient(to bottom, #69e538 20%, #28ce02 40%, #1d9e00 60%, #57d943);
	color: #fff;
	text-shadow: 0 1px 0 #00000055;
}

.button-link.danger {
	border-color: #ff0000;
	background: linear-gradient(to bottom, #ff703c 20%, #ff0000 40%, #fa0000 60%, #ff7f50);
	color: #fff;
	text-shadow: 0 1px 0 #00000055;
}

.button-link.edit {
	border-color: hsl(60deg 100% 42.31%);
  background: linear-gradient(to bottom, hsl(60 77% 56% / 1) 20%, hsl(60 100% 50% / 1) 40%, hsl(60 100% 40% / 1) 60%, hsl(60 100% 50% / 1));
  color: #423d00;
  text-shadow: 0 1px 0 #ffffffbf;
}

.button-link:disabled {
	cursor: default;
	opacity: 40%;
	pointer-events: none;
}

.button-link:active{
	filter: brightness(0.975) saturate(1.25);
	box-shadow: 0 0 2px 0 #0000008a, 0 0 1px #0000006e inset !important;
}

body.blur .button-link {
	opacity: 40%;
	filter: saturate(0);
}

.button-link.inline {
	width: 100%;
	display: block;
}

.item-container {
	background-color: #efefef;
	box-shadow: 0 1px 2px 0 #00000042;
	border-radius: 10px;
	padding: 1px;
}

.item-block {
	background-color: #fff;
	margin: 12px;
	padding: 24px;
	box-shadow: 0 1px 2px 0 #00000042;
	border-radius: 8px;
}

hr {
	margin: 16px !important;
	border: 1px solid #00000030;
	border-bottom-color: #fff;
}

.item-header {
	font-size: 20px;
	font-weight: bold;
}

.item-intro {
	color: #808080;
}

.item-list-header {
	font-size: 16px;
	font-weight: bold;
	color: #808080;
	margin: 16px 0 0 0;
}

.lesson-intro	{
	color: #808080;
	font-weight: bold;
}

.lesson-title {
	font-weight: 600;
}

.rendered-html {
	background-color: #fff;
	margin-top: 36px;
	border: 1px solid #bfbfbf;
	border-top-color: #dedede;
	border-radius: 8px;
	padding: 72px;
	box-shadow: 0 8px 8px #0000003b;
	overflow-wrap: break-word;
	font-size: 18px;
}

.rendered-html.test {
	margin-top: 0;
	overflow: auto;
}

.edit-table .trix-content {
	width: 100%;
	background-color: #fff;
	border: 1px solid #ababab;
	border-radius: 4px;
	padding: 16px;
	box-shadow: 0 1px 2px #00000030 inset;
}

.edit-table .trix-content:focus {
	border-color: #077bed;
}

.trix-style-sans * {
	font-family: "IBM Plex Sans";
}

.trix-style-sans * em {
	font-family: "IBM Plex Sans Italic";
}

.trix-style-serif * {
	font-family: "LibreBaskerville";
}

.trix-style-serif * em {
	font-family: "LibreBaskerville Italic";
}

.trix-style-open * {
	font-family: "Open Sans";
}

.trix-style-open * em {
	font-family: "Open Sans Italic";
}

.trix-style-asap * {
	font-family: "Asap";
}

.trix-style-asap * em {
	font-family: "Asap Italic";
}

.trix-style-crete * {
	font-family: "Crete";
}

.trix-style-crete * em {
	font-family: "Crete Italic";
}

.trix-style-balsamiq * {
	font-family: "Balsamiq Regular";
}

.trix-style-balsamiq * em {
	font-family: "Balsamiq Italic";
}

.trix-content {
	line-height: 1.5;
	font-size: 18px;
}

.trix-content ul {
	margin: 0 0 0 16px !important;
}

.trix-content ol {
	list-style: decimal;
	margin: 0 24px;
}

.trix-content ul {
	list-style: disc;
	margin: 0 0 0 16px;
}

.trix-content ul ul {
	list-style: circle;
}

.trix-content ul ul ul {
	list-style: square;
}

.trix-content ol {
	list-style: numerical;
	margin: 0 24px !important;
}

.trix-content li {
	margin: 8px 0 0 16px !important;
}

.trix-content a {
	text-decoration: underline;
}

.trix-content blockquote {
	margin: 8px 0 8px 16px;
	background-color: #ab57ff26;
	border: 0.5px solid #ab57ff69;
	padding: 16px;
	border-radius: 0 6px 6px 0;
	border-left: 3px solid #ab57ff;
}

.trix-content h1 {
	font-size: 28px !important;
	margin: 0 0 12px 0 !important
}

.trix-content h1 span {
	all: inherit;
}

.trix-content .attachment {
	max-width: 1048px;
}

.trix-content .attachment__caption {
	display: none;
}

.trix-content table tr td {
	border: 1px solid red;
}

trix-toolbar {
	position: sticky;
	top: 90px;
	background-color: #f7f6f6;
	z-index: 3;
	padding: 12px 8px 0 8px;
	margin-bottom: 9px;
	border: 1px solid #ababab;
	border-radius: 4px;
	box-shadow: 0 2px 2px #00000055;
}

trix-toolbar .trix-button-group {
	display: flex;
	margin-bottom: 10px;
	border: 2px solid #f0f0f0;
	border-radius: 3px;
	box-shadow: 0 1px 2px #0000008a;
	background-color: #e6e6e6;
	gap: 1px;
}

trix-toolbar .trix-button {
	user-select: none;
	-webkit-user-select: none;
	color: rgba(0, 0, 0, 0.6);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	padding: 0 0.5em;
	margin: 0;
	outline: none;
	border: 1px solid transparent !important;
	border-radius: 0;
	background: #fff linear-gradient(to bottom, white 20%, #f4f4f4 40%, #e9e9e9 60%, white);
	height: 100%;
	line-height: 26px;
	text-shadow: 0 1px 0 #fff;
}

trix-toolbar .trix-button:focus-visible{
	border-radius: 2px;/*for focus outline */
	z-index: 1;
}

trix-toolbar .trix-button.trix-active {
	background: linear-gradient(to bottom, #7fb5ff 20%, #37a7f3 40%, #0d71d7 60%, #286aff);
	color: #fff;
	border-radius: 2px;
	text-shadow: 0 1px 0 #001ad8;
	border-color: #499ae9 !important;
}

trix-toolbar .trix-button--icon::before {
	background-image: none;
	background-color: #606060;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 28px;
	opacity: 1;
}

trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.2;
}

trix-toolbar .trix-button--icon.trix-active::before {
	background-color: #fff;
}

trix-toolbar .trix-button--icon-bold::before { mask-image: url(../img/trix-bold.svg); }
trix-toolbar .trix-button--icon-italic::before { mask-image: url(../img/trix-italic.svg); }
trix-toolbar .trix-button--icon-strike::before { mask-image: url(../img/trix-strike.svg); }
trix-toolbar .trix-button--icon-underline::before { mask-image: url(../img/trix-underline.svg); }
trix-toolbar .trix-button--icon-link::before { mask-image: url(../img/trix-link.svg); }
trix-toolbar .trix-button--icon-heading-1::before { mask-image: url(../img/trix-heading-1.svg); }
trix-toolbar .trix-button--icon-quote::before { mask-image: url(../img/trix-quote.svg); }
trix-toolbar .trix-button--icon-code::before { mask-image: url(../img/trix-code.svg); }
trix-toolbar .trix-button--icon-bullet-list::before { mask-image: url(../img/trix-bullet-list.svg); }
trix-toolbar .trix-button--icon-number-list::before { mask-image: url(../img/trix-number-list.svg); }
trix-toolbar .trix-button--icon-decrease-nesting-level::before { mask-image: url(../img/trix-decrease-nesting-level.svg); }
trix-toolbar .trix-button--icon-increase-nesting-level::before { mask-image: url(../img/trix-increase-nesting-level.svg); }
trix-toolbar .trix-button--icon-attach::before { mask-image: url(../img/trix-attach-photo.svg); }
trix-toolbar .trix-button--icon-embed::before { mask-image: url(../img/trix-embed-video.svg); mask-size: 29px; mask-position: center -1px; }
trix-toolbar .trix-button--icon-fg::before { mask-image: url(../img/trix-fg.svg); }
trix-toolbar .trix-button--icon-bg::before { mask-image: url(../img/trix-bg.svg); }
trix-toolbar .trix-button--icon-box-info::before { mask-image: url(../img/trix-badge-info.svg); }
trix-toolbar .trix-button--icon-box-warn::before { mask-image: url(../img/trix-badge-warn.svg); }
trix-toolbar .trix-button--icon-box-check::before { mask-image: url(../img/trix-badge-check.svg); }
trix-toolbar .trix-button--icon-align-left::before { mask-image: url(../img/trix-align-left.svg); }
trix-toolbar .trix-button--icon-align-center::before { mask-image: url(../img/trix-align-center.svg); }
trix-toolbar .trix-button--icon-align-right::before { mask-image: url(../img/trix-align-right.svg); }
trix-toolbar .trix-button--icon-undo::before { mask-image: url(../img/trix-undo.svg); }
trix-toolbar .trix-button--icon-redo::before { mask-image: url(../img/trix-redo.svg); }

trix-toolbar .trix-dialog {
	background: #f7f6f6;
  box-shadow: 0 4px 8px 2px #00000055;
  border: 1px solid #ababab;
	border-radius: 10px;
	padding: 24px;
	top: -6px;
	backdrop-filter: blur(10px);
}

/*
trix-toolbar .trix-dialog {
	background: #f7f6f6;
  box-shadow: 0px 4px 8px 2px #00000055;
  border: 1px solid #ababab;
	background: #000000a6;
	box-shadow: 0px 4px 8px 2px #00000055;
	border: 1px solid #ababab;
	border-radius: 10px;
	padding: 24px;
	top: -6px;
	backdrop-filter: blur(8px);
	border: 2px solid #fff;
	border-radius: 16px;
	box-shadow: 0 18px 20px 10px rgb(0 0 0 / 46%), 0 2px 3px rgb(0 0 0 / 46%) inset;
}
*/

trix-toolbar .trix-input--dialog {
	font-size: 14px;
  font-weight: 600;
	border-radius: 6px;
  border: 1px solid #ababab;
	box-shadow: 0 1px 2px #00000030 inset;
}

trix-toolbar .trix-input--dialog:focus {
	border-color: #077bed;
}

trix-toolbar [data-trix-dialog] [data-trix-validate]:invalid {
  background-color: #fef3f2;
  border-color: orangered;
}

input[type="color" i] {
	appearance: none;
	cursor: pointer;
	border: none;
	height: 100%;
	width: 48px;
	background: #fff linear-gradient(to bottom, white 20%, #f4f4f4 40%, #e9e9e9 60%, white);
	border-left: 1px solid #e6e6e6;
	padding: 2px;
}

input[type="color" i]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input[type="color" i]::-webkit-color-swatch {
	border: 1px solid var(--color-input-border-color);
	border-radius: 3px;
}

input[type="color" i]::-moz-color-swatch {
	border: 1px solid var(--color-input-border-color);
	border-radius: 3px;
}

box-info {
	background-color: #0c61ff;
	background-image: url(../img/trix-badge-info.svg);
	background-size: 80px;
	background-repeat: no-repeat;
	padding: 31px 24px 31px 90px;
	background-position: 5px 5px;
	display: block;
	border-radius: 10px;
	border: 4px solid #ffffff;
	color: white;
	box-shadow: 0 1px 4px 0 #00000077;
	font-family: "Nunito" !important;
	line-height: 26px;
	font-size: 22px !important;
	margin-bottom: 16px;
}

box-info:last-child {
	margin-bottom: 0;
}

box-info strong {
	font-family: "Nunito" !important;
	line-height: 26px;
	font-size: 22px !important;
	font-weight: 900;
}

box-info span {
	font-family: "Nunito" !important;
	line-height: 26px;
	font-size: 22px !important;
	font-weight: 600;
}

box-warn {
	background-color: #ff0c4b;
	background-image: url(../img/trix-badge-warn.svg);
	background-size: 80px;
	background-repeat: no-repeat;
	padding: 31px 24px 31px 90px;
	background-position: 5px 5px;
	display: block;
	border-radius: 10px;
	border: 4px solid #ffffff;
	color: white;
	box-shadow: 0 1px 4px 0 #00000077;
	font-family: "Nunito" !important;
	line-height: 26px;
	font-size: 22px !important;
	margin-bottom: 16px;
}

box-warn:last-child {
	margin-bottom: 0;
}

box-warn strong {
	font-family: "Nunito" !important;
	line-height: 26px;
	font-size: 22px !important;font-weight: 900;
}

box-warn span {
	font-family: "Nunito" !important;
	line-height: 26px;
	font-size: 22px !important;font-weight: 600;
}

box-check {
	background-color: #0fb808;
	background-image: url(../img/trix-badge-check.svg);
	background-size: 80px;
	background-repeat: no-repeat;
	padding: 31px 24px 31px 90px;
	background-position: 5px 5px;
	display: block;
	border-radius: 10px;
	border: 4px solid #fff;
	color: #fff;
	box-shadow: 0 1px 4px 0 #00000077;
	line-height: 26px;
	font-family: "Nunito" !important;
	line-height: 26px;
	font-size: 22px !important;
	margin-bottom: 16px;
}

box-check:last-child {
	margin-bottom: 0;
}

box-check strong {
	font-family: "Nunito" !important;
	line-height: 26px;
	font-size: 22px !important;
	font-weight: 900;
}

box-check span {
	font-family: "Nunito" !important;
	line-height: 26px;
	font-size: 22px !important;
	font-weight: 600;
}

align-center {
	text-align: center;
	display: block;
}

align-right {
	text-align: right;
	display: block;
}

.model-grid-container {
	border: 1px solid #d3d3d3;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-row-gap: 36px;
	grid-column-gap: 36px;
	padding: 36px;
	border-radius: 10px;
	background-color: white;
	margin-bottom: 8px;
	box-shadow: 0 2px 3px #0000002e inset;
	overflow: auto;
}

.model-grid-container.mini {
	transform: scale(0.55) translate(-100px, -130px);
	background: none;
	border: none;
	margin: -8px 0 -147px -6px;
	padding: 0;
	width: 270px;
	height: 360px;
	box-shadow: none;
}

.model-grid-container .model {
	border-radius: 10px;
	background-color: #f5f5f5;
	padding: 16px;
	box-shadow: 0 1px 2px 0 #0000008a;
	border: 4px solid white;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	height: 100%;
}

.model-grid-container.mini .model {
	aspect-ratio: 3/4;
}

.model-grid-container .model .labels {
	overflow: hidden;
	/* max-height: 100%; */
}

.model-grid-container .model.marked-complete {
	border-color: #aeff00;
}

.model-grid-container .model.test-progress {
	border-color: #fff;
}

.model-grid-container .model.test-complete {
	border-color: #aeff00;
}

.model-grid-container .model.locked {
	border-color: orangered;
}

.model-grid-container .model .badges {
	position: absolute;
	height: 50px;
	display: flex;
	top: -24px;
	right: -24px;
	z-index: 1;
	gap: 8px;
}

.model-grid-container .model .badge {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 4px solid white;
	box-shadow: 0 4px 8px #00000077;
	background-size: 63%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: grey;
	color: #fff;
	text-align: center;
	vertical-align: text-bottom;
	line-height: 40px;
	font-size: 13px;
	font-weight: 800;
}

.model-grid-container a.draft .model .badge {
	background-color: #ffc500;
	color: #161616;
}

.model-grid-container .model.marked-complete .badge {
	background-color: #73be00;
	background-image: url(../img/marked_complete_badge.svg);
}

.model-grid-container .model.test-progress .badge {
	background-color: #73be00;
	/*background-image: url(../img/test_progress_badge.svg);*/
}

.model-grid-container .model.test-complete .badge {
	background-color: #73be00;
	background-image: url(../img/test_passed_badge.svg);
}

.model-grid-container .model.locked .badge {
	background-color: orangered;
	background-image: url(../img/locked_badge.svg);
}

.model-grid-container .model .name {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	border-radius: 6px;
	backdrop-filter: blur(16px);
	padding: 4px;
	background-color: #00000026;
	border: 1px solid #0000001c;
	text-shadow: 0 1px 2px black;
	color: white;
}

.model-grid-container .model .description {
	margin-top: 16px;
	text-align: center;
	overflow: hidden;
	/* max-height: 230px; */
	background-color: #ffffff42;
	border-radius: 6px;
	backdrop-filter: blur(16px);
	padding: 8px;
	border: 1px solid #00000017;
	white-space: break-spaces;
	font-weight: 200;
	font-size: 14px;
}

.model-grid-container a {
	text-decoration: none;
	color: #000000;
	cursor: pointer;
	border-radius: 16px;
	aspect-ratio: 3/4;
	height: 100%;
}

.model-grid-container a.draft {
	padding: 6px;
	background: repeating-linear-gradient(-45deg, #000, #000 25%, #FFC500 25%, #FFC500 50%);
	background-size: 32px 32px;
}

.model-table-container {
	border: 1px solid #d6d5d5;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px;
	border-radius: 10px;
	background-color: white;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.model-table-container .model {
	border-radius: 10px;
	background-color: #d7f31f;
	padding: 16px;
	box-shadow: 0 1px 2px 0 #0000008a;
	display: flex;
}

.model-table-container .model .name {
	font-size: 18px;
	font-weight: bold;
}

.model-table-container .model .description {
}

.error-block {
	background-color: #fef3f2;
	max-width: 1210px;
	margin: 16px auto;
	padding: 16px 8px 16px 32px;
	border: 3px solid orangered;
	border-radius: 10px;
	color: red;
	font-weight: 800;
}

/* temp */
ul.error-block {
	/*list-style: none;*/
}

.success-block {
	background-color: #f7fdf7;
	max-width: 1210px;
	margin: 16px auto;
	padding: 16px 8px 16px 32px;
	border: 3px solid limegreen;
	border-radius: 10px;
	color: #31c331;
	font-weight: 800;
}

/* temp */
ul.success-block {
	/*list-style: none;*/
}

.login-table {
	margin: auto;
	text-align: left;
	width: 460px;
	color: #2e2e2e;
}

.login-table tr {
	height: 38px;
}

.login-table label {
	font-size: 18px;
	font-weight: 700;
}

.login-table input[type=text],
.login-table input[type=email],
.login-table input[type=password] {
	width: 100%;
	border: 1px solid #ababab;
	border-radius: 4px;
	padding: 4px 8px;
	box-shadow: 0 1px 2px #00000030 inset;
	font-weight: 500;
	font-size: 16px;
	margin: 2px 0 2px 8px;
}

.forgot {
	text-align: left;
	color: #2e2e2e;
	padding: 0 30px;
	margin-bottom: 32px;
}

.forgot h1 {
	text-align: center;
	font-size: 28px !important;
	margin: 0 0 24px 0 !important;
}

.forgot h2 {
	font-size: 10px;
}

.model-block-wrapper {
	margin: 16px 0;
	position: relative;
}

.model-block-wrapper .legend {
	position: absolute;
	top: 6px;
	right: 6px;
	border-color: #fff;
	border-style: solid;
	border-width: 0 0 3px 3px;
	border-radius: 0 20px 0 11px;
	background-color: #ffc500;
	color: black;
	font-weight: 800;
	padding: 2px 13px 2px 8px;
	box-shadow: 0 1px 2px #0000006e;
}

.model-block-wrapper.draft {
	background: red;
	padding: 6px;
	border-radius: 26px;
	background: repeating-linear-gradient(-45deg, #000, #000 25%, #FFC500 25%, #FFC500 50%);
	background-size: 32px 32px;
	margin: 10px -6px;
	background-position: 10px 0;
}

.model-block {
	background-color: #f7f6f6;
	padding: 32px;
	border: 1px solid #d6d5d5;
	border-radius: 21px;
}

body.edit .model-block {
	border-color: #e9e2ac;
}

.model-info {
}

.model-info .name {
	font-weight: bold;
	font-size: 24px;
}

.model-info .desc {
	font-weight: 400;
	font-size: 18px;
	white-space: break-spaces;
}

.gridcaption {
	font-weight: bold;
	margin-bottom: 4px;
}

.edit-table {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr;
	row-gap: 8px;
	column-gap: 10px;
}

.edit-table .colspan2 {
	grid-column: 1 / 3;
}


.edit-table .label,
.edit-table .label label {
	font-weight: 700;
	user-select: none;
	-webkit-user-select: none;
}

.edit-table .value {
	font-weight: 500;
}

.edit-table .value input {
	width: 100%;
	border: 1px solid #ababab;
	border-radius: 4px;
	padding: 4px 8px;
	box-shadow: 0 1px 2px #00000030 inset;
	font-weight: 500;
	font-size: 16px;
}

.edit-table .value .longtime {
	font-size: 11px;
	margin-left: 4px;
	font-weight: 600;
	color: #8d8d8d;
}

.edit-table .value input.dirty {
	border-color: #edd100 !important;
	background: repeating-linear-gradient(-45deg, #ffe10010, #ffe10010 25%, #ffe10030 25%, #ffe10030 50%, #ffe10010 50%);
	background-size: 32px 32px;
}

.edit-table .value input.error {
	border-color: orangered !important;
	background: repeating-linear-gradient(-45deg, #ff45001a, #ff45001a 25%, #ff450026 25%, #ff450026 50%, #ff45001a 50%);
	background-size: 32px 32px;
}

.edit-table .value input[type=checkbox] {
	border-radius: 4px;
	width: 20px;
	height: 20px;
}

.edit-table .value input[type=file] {
	width: auto;
	border: none;
	box-shadow: none;
}

.edit-table .value textarea {
	width: 100%;
	border: 1px solid #ababab;
	border-radius: 4px;
	padding: 4px 8px;
	box-shadow: 0 1px 2px #00000030 inset;
}

.edit-table .value input:focus,
.edit-table .value textarea:focus {
	border-color: #077bed;
}

.edit-table .value input.invalid,
.edit-table .value textarea.invalid {
	border-color: orangered;
	background-color: #fef3f2;
}

.edit-table .inline-error {
	background-color: #ffece7;
	border: 1px solid orangered;
	border-top: none;
	padding: 15px 12px 12px 12px;
	color: #ff0000;
	font-weight: 800;
	margin-top: -3px;
	text-align: center;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 4px #00000055;
}

.trix-container {
	/* max-width: 1032px; */
}

trix-editor {
	background-color: #ffffff;
	box-shadow: 0 1px 2px #00000030 inset;
	border: 1px solid #ababab;
	border-radius: 4px;
	padding: 16px;
}

trix-editor:focus {
	border-color: #077bed;
}

trix-editor.dirty {
	border-color: #edd100 !important;
	background: repeating-linear-gradient(-45deg, #ffe10010, #ffe10010 25%, #ffe10030 25%, #ffe10030 50%, #ffe10010 50%);
	background-size: 32px 32px;
}

.select {
	position: relative;
	display: inline-flex;
	align-items: center;
	/*margin: 4px;*/
}

.select select {
	all: unset;
}

.select select {
	-webkit-appearance: none;
	appearance: none;
	border: 2px solid #f0f0f0;
	background: linear-gradient(to bottom, white 20%, #f4f4f4 40%, #e9e9e9 60%, white);
	color: var(--button-text-color);
	padding: 4px 24px 4px 8px;
	border-radius: 6px;
	font-weight: 700;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	text-shadow: 0 1px 0 #ffffff;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.select select:focus-visible {
	outline: 3px solid #077bed;
	outline-offset: 3px;
}


.select select:hover {
	border-color: #e5e5e5;
}

.select:has(select:disabled) {
	cursor: default;
	opacity: 60%;
	pointer-events: none;
}

.select::after {
	content: "";
	width: 16px;
	height: 16px;
	background-color: var(--select-carat-color);
	clip-path: polygon(20% 40%, 50% 0%, 80% 40%, 20% 40%, 20% 60%, 80% 60%, 50% 100%, 20% 60%);
	position: absolute;
	right: 6px;
}

fieldset {
	border: 0;
}

.answer-input {
	margin: 32px 16px 0 16px;
	font-weight: 600;
	outline: unset;
}

.answer-input input:focus-visible {
	outline: 3px solid #077bed;
	outline-offset: 3px;
}

.answer-input input[type=text],
.answer-input input[type=date] {
	border: 1px solid #ababab;
	border-radius: 4px;
	padding: 4px 8px;
	box-shadow: 0 1px 2px #00000030 inset;
}

.answer-input input[type=text]:focus,
.answer-input input[type=date]:focus {
	border-color: #077bed;
}

.answer-input input[type=checkbox] {
	border-radius: 4px;
}

.answer-input input[type=radio] {
	margin: 8px 0;
}

body.blur .answer-input {
	filter: saturate(0);
}

.test-columns {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 32px;
	margin-top: 32px;
}

.test-columns-self {
	margin-top: 32px;
}

.test-sidebar {
	border: 1px solid #dbdbdb;
	background-color: #f1f1f1;
	border-radius: 10px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: max-content;
	min-width: 200px;
}

.section-container {
	border: 1px solid #d4d4d4;
	border-radius: 6px;
	padding: 8px;
	background-color: #f7f7f7;
}

.section-container .name {
	font-weight: 800;
	padding: 4px 10px;
	margin: -8px -8px 8px -8px;
	background-color: #e4e4e4;
	border-radius: 5px 5px 0 0;
	border-bottom: 1px solid #d4d4d4;
}

.section-container .question {
	padding: 6px 8px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	font-weight: 500;
	text-decoration: none;
	color: #000;
}

.section-container .question.selected {
	background-color: #0470eb;
	color: white;
}

.question-container {
	width: 100%;
}

html:has(dialog[open]:modal) {
	overflow: hidden;
}

/* is-open state */
dialog[open] {
	transform: scaleY(1);
	border: 2px solid #fff;
	border-radius: 16px;
	box-shadow: 0 18px 20px 10px rgb(0 0 0 / 46%), 0 2px 3px rgb(0 0 0 / 46%) inset;
	top: -45%;
	background-color: #000000a6;
	color: white;
	backdrop-filter: blur(8px);
}

/* before-open state */
/* Needs to be after the previous dialog[open] rule to take effect, as the specificity is the same */
@starting-style {
	dialog[open] {
		transform: scaleY(0);
	}
}

/* exit-state */
dialog {
	transform: scaleY(0);
	transition:
		transform 0.1s ease-out,
		overlay 0.5s ease-out,
		display 0.5s ease-out;
	transition-behavior: allow-discrete;
	border: 2px solid #fff;
	border-radius: 16px;
	box-shadow: 0 18px 20px 10px rgb(0 0 0 / 46%), 0 2px 3px rgb(0 0 0 / 46%) inset;
	top: -45%;
	background-color: #000000a6;
	color: white;
	backdrop-filter: blur(8px);
}

/* is-open state */
dialog[open]::backdrop {
	backdrop-filter: blur(3px);
}

/* before-open state */
/* This starting-style rule cannot be nested inside the above selector because the nesting selector cannot represent pseudo-elements. */
@starting-style {
	dialog[open]::backdrop {
		backdrop-filter: blur(0);
	}
}

/* exit-state */
/* Transition the :backdrop when the dialog modal is promoted to the top layer */
dialog::backdrop {
	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0);
	transition:
		display 0.5s,
		overlay 0.5s,
		backdrop-filter 0.5s;
	transition-behavior: allow-discrete;
}

.dialog-content {
	padding: 16px 16px 8px 16px;
	width: 400px;
}

.dialog-content input {
	/*
	border: 1px solid #393939;
	border-radius: 4px;
	padding: 4px 8px;
	box-shadow: 0 1px 2px #000000cf inset;
	color: #000;
	*/
	width: 100%;
}

.dialog-content h1 {
	font-size: 24px;
	font-weight: 800;
	text-shadow: 0 1px 2px  #111;
	text-align: center;
	margin: 0;
}

.dialog-content h2 {
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	margin: 0;
}

.model-list {
	margin-top: 8px;
	padding: 0;
	border: 1px solid #393939;
	border-radius: 5px;
	height: 162px;
	background-color: #3f3f3fb8;
	overflow: auto;
	list-style: none;
}

.model-list li {
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
}

.model-list li:hover {
	background-color: #3d3c3c;
}

.model-list li.selected {
	background-color: #077bed;
}

body.blur .model-list li.selected {
	background-color: #626262;
}

.model-list li.selected:hover {
	background-color: #0770d8;
}

.modal-picker .filter-row {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 24px 0 0 0;
}

.modal-picker .button-row {
	display: flex;
	justify-content: flex-end;
	margin: 16px 0 8px 0;
	gap: 8px;
}

.modal-picker .button-row button {
	margin: 0;
}

.nav-logo {
	width: 300px;
}

main.home {
	min-width: 100vw;
	min-height: 100vh;
	max-width: unset;
	position: absolute;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
}

main.home.registration {
	background-image: url('../img/library.jpg');
}

main.home.resources {
	background-image: url('../img/library3.jpg');
}

.home .content {
	max-width: 1250px;
	margin: 20px auto auto auto;
}

.home-logo {
	margin: 0 0 36px 0;
	box-shadow: 0 28px 28px rgba(0, 0, 0, 0.4);
	padding: 50px 50px 44px 50px;
	border-radius: 123px;
	background-color: rgba(255, 255, 255, 0.6);
}

.home-logo.demo {
	margin-top: -16px;
	padding: 8px 8px 2px 8px;
	border-radius: 31px;
	width: 320px;
}

.home-card {
	font-size: 18px;
	background-color: #ffffffa3;
	border-radius: 64px;
	border: 5px solid #ffffff;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	padding: 48px;
	backdrop-filter: blur(8px);
	margin: 16px 4px 0 4px;
}

.home-card .demo {
	padding: 32px 86px !important;
	font-size: 20px;
	text-align: left !important;
	border-radius: 32px !important;
}

.home-card .demo p::first-letter {
	color: black;
	background-color: #ffc600;
	border-radius: 5px;
	box-shadow: 3px 3px 0 black;
	font-size: 150%;
	padding: 4px 5px 3px 5px;
	margin-right: 5px;
	margin-top: -4px;
	float: left;
	font-weight: 800;
	line-height: 25px;
	display: block;
}

.home-card h1 {
	color: #505050;
	font-size: 57px;
	padding: 0;
	margin: 0;
}

.home-card a {
	color: #0074E8;
	font-weight: 800;
	text-decoration: solid underline #0074E8 2.45px;
}

.home-card a:visited {
	color: #be005f;
	text-decoration-color: #be005f;
}

.right {
	float: right;
}

nav {
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	width: 100%;
	-webkit-user-select: none;
	user-select: none;
	padding: 0 16px;
	justify-content: center;
}

nav ul {
	display: flex;
	justify-content: space-between;
	padding: 4px !important;
	box-shadow: 0 10px 12px 0 #00000042;
	background: linear-gradient(to bottom, #ffffffde, #f3f3f396 27%, #e9e9e980 58%, #f7f7f773 89%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid #00000026;
	border-radius: 16px;
	z-index: 2;
	position: relative;
	width: 1250px;
}

nav ul li {
	vertical-align: middle;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	transition: all 200ms;
}

nav a {
	padding: 4px 23px;
	display: block;
	text-shadow: 0 1px white;
	font-weight: 800;
	line-height: 54px;
	font-size: 18px;
	color: #2e2e2e;
	text-decoration: none;
	border-radius: 11px;/* for focus outline */
}

nav a.teo {
	background-image: url(../img/logo-sign.svg) !important;
	background-size: 231px 54px;
	width: 208px;
	height: 62px;
	background-position: center 5px;
	background-repeat: no-repeat;
}

nav li:hover {
	box-shadow: 0 0 2px #00000050 inset !important;
	border-color: #fff;
}

nav li:hover a {
	color: #303030;
}

nav li:active {
	box-shadow: 0 2px 2px #00000050 inset !important;
	border-color: #fff;
}

nav li.selected {
	border-color: #0000001c;
	box-shadow: 0 1px 1px #fff;
	background: linear-gradient(#ffffff80, 15%, #aaaaaa80, 75%, #ffffff80);
}

nav li.selected a {
	color: #2c2c2c;
}

nav li.selected:hover {
	border-color: #0000001c;
	box-shadow: 0 1px 1px #fff !important;
}

nav li.selected:active {
	border-color: #0000003d;
	box-shadow: 0 1px 2px #bebebe inset !important;
}

nav li:active a {
	padding: 5px 23px 3px 23px;
}

nav.indigo li.selected {
	border-color: #0200ff;
	background: linear-gradient(to bottom, #3d57fc 20%, #002cf4 40%, #000ca8 60%, #457fff);
}

nav.indigo li.selected a{
	color: #ffffff;
	text-shadow: 0 1px #000;
}

.navbg {
	height: 100px;
	top: 0;
	position: absolute;
	width: 100%;
	z-index: 1;
	backdrop-filter: blur(20px);
	mask: linear-gradient(to bottom, black 25%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 100%);
}

header {
	width: 1245px;
	margin: auto;
}

.course-cards {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
}

.course-cards .card {
	border-radius: 10px;
	border: 1px solid #c0c0c0;
	flex-grow: 1;
	text-align: center;
	padding: 32px 0;
	background-color: #fff;
	box-shadow: 0 1px 2px #00000055;
}

main {
	max-width: 1250px;
	margin: auto;
}

main p {
	font: inherit;
	margin: 16px 0;
}

main ul {
	font: inherit;
	margin: 16px 0;
	padding: 0 0 0 40px;
	list-style: disc;
}

main h1 {
	font: inherit;
	margin: 22px 0;
	font-size: 32px;
	font-weight: 800;
}

main h2 {
	font: inherit;
	margin: 20px 0;
	font-size: 24px;
	font-weight: 700;
}

.checklist {
	display: grid;
	grid-template-columns: auto auto auto auto;
	row-gap: 8px;
	justify-content: start;
	align-items: stretch;
}

.checklist.show_na_option {
	grid-template-columns: auto auto auto;
}

.checklist div {
	display: flex; align-items: center;
}

.checklist label {
	margin-left: 4px;
}

.checklist .text {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	padding: 16px;
	border-radius: 8px 0 0 8px;
	background-color: #fff;
}

.checklist .yay {
	background-color: #a7f7a7;
	padding: 0 24px;
	text-align: center;
	border-top: 1px solid #7fc27f;
	border-bottom: 1px solid #7fc27f;
	border-left: 1px solid #93dd93;
}

.checklist .nay {
	background-color: #ffb092;
	padding: 0 24px;
	text-align: center;
	border-top: 1px solid #e3774f;
	border-bottom: 1px solid #e3774f;
	border-left: 1px solid #f68e68;
}

.checklist.show_na_option .nay {
	border-radius: 0 8px 8px 0;
	border-right: 1px solid #f68e68;
}

.checklist .na {
	background-color: #ededed;
	padding: 0 24px;
	text-align: center;
	border-top: 1px solid #b8b3b3;
	border-right: 1px solid #cbcaca;
	border-bottom: 1px solid #cbcaca;
	border-left: 1px solid #fa8f8f;
	border-radius: 0 8px 8px 0;
}

.role-matrix {
	border-right: 1px solid #bbb;
	width: 100%;
	border-collapse: collapse;
}

.role-matrix tr {
	border-bottom: 1px solid #bbb;
}

.role-matrix th {
	border-top: 1px solid #bbb;
	border-left: 1px solid #bbb;
	writing-mode: sideways-lr;
	text-align: start;
	padding: 8px;
}

.role-matrix td {
	border-left: 1px solid #bbb;
	padding: 8px 16px;
	text-align: center;
	background-color: #fff;
}

.role-matrix input[type=checkbox] {
	width: 20px;
	height: 20px;
	border: 1px solid #ababab;
	border-radius: 4px;
	box-shadow: 0 1px 2px #00000030 inset;
	margin: 0;
	accent-color: #077bed;
}

.role-matrix input[type=checkbox]:checked {
	border-color: #2463eb;
}

.role-matrix .legend-corner {
	border-top-color: transparent;
	border-left-color: transparent;
}

.role-matrix .role-name {
	color: #1c1e21;
	font-weight: 600;
	text-align: start;
	background-color: #f2f7ff;
}

.role-matrix .permission-name {
	text-align: end;
	background-color: #f2f7ff;
}

.role-matrix .permission-name a {
	color: #1c1e21;
	font-weight: 600;
	text-decoration: none;
}

.test-answer-indicator {
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-right: 4px;
}

.disabled {
	pointer-events: none;
	opacity: 40%;
}

.question-nav {
	background-color: #f1f1f1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px;
	margin: 16px 0;
	border: 1px solid #dbdbdb;
	border-radius: 10px;
}

.question-info {
	font-weight: 600;
}

.certificate-container {
	width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.certificate-link {
	width: fit-content;
	display: block;
}

.certificate-thumb {
	border: 4px solid #fff;
	border-radius: 10px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
	margin-bottom: 16px;
}

.user-no-account {
	font-weight: 800;
	color: orangered;
}

.test-result-gauge {
	width: 100%;
	position: relative;
}

.test-result-gauge .marks {
	height: 50px;
	border: 1px solid transparent;
	position: relative;
	z-index: 1;
}

.test-result-gauge .mark {
	display: inline-block;
	position: absolute;
	border-left: 3px solid #545454;
	height: 100px;
	padding: 0 0 0 4px;
	font-weight: 700;
	font-size: 16px;
}

/*
.test-result-gauge .mark1 {
	left: 60%;
}

.test-result-gauge .mark2 {
	left: 80%;
}
*/

.test-result-gauge .gauge-container {
	background-color: #fff;
	border: 1px solid #c3c1c1;
	border-radius: 10px;
	overflow: hidden;
	height: 45px;
	position: relative;
	box-shadow: 0 1px 2px #00000030 inset;
}

.test-result-gauge .gauge {
	background: #d7f31f linear-gradient(to bottom, #e4ff32 16%, #e8ff55 30%, #e5f961 42%, #bdd61b);
	height: 100%;
	width: 0;
	border-right: 3px solid #00000000;
	transition: width 3s ease-out;
	box-sizing: content-box;
	position: absolute;
	box-shadow: 0 2px 2px #0000002b inset;
	margin-top: -1px;
	padding-bottom: 1px;
}

.test-result-gauge .ticks {
	position: relative;
	border: 1px solid transparent;
	height: 25px;
	margin-top: -1px;
}

.test-result-gauge .tick {
	position: absolute;
	border-left: 3px solid #b4b4b4;
	padding: 0 0 0 4px;
	font-weight: 400;
	font-size: 14px;
	color: #868686;
}

.test-result-gauge .tick1 {
	left: 25%;
}

.test-result-gauge .tick2 {
	left: 50%;
}

.test-result-gauge .tick3 {
	left: 75%;
}

.unit-test-score {
	font-weight: 600;
}

.result-score {
	text-align: center;
	font-size: 32px;
	font-weight: 800;
	margin-bottom: 24px;
}

.result-indicators {
	background-color: #fdfdfd;
	display: flex;
	flex-direction: column;
	font-size: 16px;
	font-weight: 600;
	padding: 24px;
	border: 1px solid #dbdbdb;
	border-radius: 10px;
	margin: 0 0 24px 0;
}

.result-indicators .desc {
	margin-bottom: 24px;
}

.result-block {
	padding: 24px;
	background-color: #fff;
	border: 1px solid #dbdbdb;
	border-radius: 8px;
	margin-top: 32px;
}

.result-block h1 {
	font-size: 24px;
	font-weight: 800;
	margin: 0;
}

.result-block h2 {
	font-size: 20px;
	font-weight: 700;
	margin: 16px 0 0 0;
}

.result-block h3 {
	font-weight: 600;
	font-size: 18px;
}

.result-block p {
	line-height: 16px;
	margin-block: 1lh;
}

.result-block .nav-button {
	display: flex;
	justify-content: end;
	gap: 8px;
}

.result-incorrect-throb {
	animation-duration: 8s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-name: result-incorrect-throb-anim;
	animation-timing-function: linear;
	animation-delay: 12s;
}

@keyframes result-incorrect-throb-anim {
	 0% { box-shadow: 0 0  0    0   #ff0c4b80, 0 0  0    0   #ff0c4b80, 0 0  0    0   #ff0c4b80; }
	 5% { box-shadow: 0 0  0    0   #ff0c4b80, 0 0  0    0   #ff0c4b80, 0 0  0    5px #ff0c4b80; }
	10% { box-shadow: 0 0  0    0   #ff0c4b80, 0 0  0    5px #ff0c4b80, 0 0  0   10px #ff0c4b40; }
	15% { box-shadow: 0 0  0   5px  #ff0c4b80, 0 0  0   10px #ff0c4b40, 0 0  0   15px #ff0c4b20; }
	20% { box-shadow: 0 0  0   10px #ff0c4b40, 0 0  0   15px #ff0c4b20, 0 0 15px 15px #ff0c4b00; }
	25% { box-shadow: 0 0  0   15px #ff0c4b20, 0 0 15px 15px #ff0c4b00, 0 0 15px 15px #ff0c4b00; }
	30% { box-shadow: 0 0 15px 15px #ff0c4b00, 0 0 15px 15px #ff0c4b00, 0 0 15px 15px #ff0c4b00; }
	35% { box-shadow: 0 0 15px 15px #ff0c4b00, 0 0 15px 15px #ff0c4b00, 0 0 15px 15px #ff0c4b00; }
}

.result-incorrect-legend {
	border-radius: 4px;
	padding: 2px 4px;
	margin: 0 -4px;
}

.lesson-test-info {
	border: 2px dashed limegreen;
	background-color: white;
	padding: 10px 24px 24px 24px;
	border-radius: 10px;
	margin-block: 24px 0;
}

.lesson-test-info.complete {
	border-style: solid;
	background-color: #e2f1e0;
}

.lesson-test-info .header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lesson-test-info .header h1 {
	font-size: 20px;
}

.lesson-test-info p {
	margin: 8px 8px 16px 8px;
}

.lesson-test-info p.ready {
	margin: 16px 0 0 8px;
	font-weight: 800;
}

.lesson-test-info .badge {
	background-color: #989898;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 4px solid white;
	box-shadow: 0 2px 4px #000000aa;
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
	color: #fff;
	text-align: center;
	vertical-align: text-bottom;
	line-height: 43px;
	font-size: 14px;
	font-weight: 800;
}

.lesson-test-info.self-assessment .badge {
	background-image: url(../img/self_assessment_in_progress_badge.svg);
}

.lesson-test-info.self-assessment.complete .badge {
	background-color: #73be00;
	background-image: url(../img/self_assessment_complete_badge.svg);
}

.lesson-test-info.assessment .badge {
	background-image: url(../img/assessment_in_progress_badge.svg);
}

.lesson-test-info.assessment.complete .badge {
	background-color: #73be00;
	background-image: url(../img/assessment_complete_badge.svg);
	background-size: 60%;
}

.lesson-test-info.acknowledgement {
	border-color: #8db8fc;
}

.lesson-test-info.complete.acknowledgement {
	background-color: #e1ecff;
}

.lesson-test-info.acknowledgement .badge {
	background-image: url(../img/acknowledgement_in_progress_badge.svg);
}

.lesson-test-info.acknowledgement.complete .badge {
	background-color: #639cff;
	background-image: url(../img/acknowledgement_complete_badge.svg);
}

.lesson-test-info.acknowledgement.complete p {
	margin-bottom: 0;
}

.lesson-test-header {
	font-size: 18px;
}

.flash {
	position: absolute;
	top: 40px;
	right: 40px;
	background-color: #000000a6;
	color: #fff;
	padding: 22px 26px  22px 72px;
	border: 2px solid white;
	box-shadow: 0 18px 20px 10px rgb(0 0 0 / 46%), 0 2px 3px rgb(0 0 0 / 46%) inset;
	text-shadow: 0 1px 2px  #111;
	border-radius: 16px;
	font-size: 20px;
	font-weight: 800;
	animation: 1s flash-in forwards, 1s flash-out 5s forwards;
	z-index: 1000;
	transform: translate3d(3000px,0,0);
	background-image: url(../img/trix-badge-check.svg);
	background-size: 56px;
	background-repeat: no-repeat;
	background-position: 10px 50%;
	backdrop-filter: blur(5px);
}

@keyframes flash-in {
	0%, 60%, 75%, 90%, to {
   animation-timing-function: cubic-bezier(.215, .61, .355, 1);
	}

	0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
	}

	60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
	}

	75% {
    transform: translate3d(10px, 0, 0);
	}

	90% {
    transform: translate3d(-5px, 0, 0);
	}

	to {
    transform: none;
	}
}

@keyframes flash-out {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

.button-link-file-input {
	margin-left: -6px;
	/* color: transparent; */
}

body.blur .button-link-file-input {
	opacity: 40%;
}

.button-link-file-input::file-selector-button {
	content: 'Change Image';
	display: inline-block;
	background: #fff linear-gradient(to bottom, white 20%, #f4f4f4 40%, #e9e9e9 60%, white);
	outline: none;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
	text-align: center;
	font-size: 16px;
	border: 2px solid #f0f0f0;
	padding: 4px 8px;
	border-radius: 6px !important;
	box-shadow: 0 1px 2px 0 #0000008a !important;
	color: var(--button-text-color);
	font-weight: 700;
	text-shadow: 0 1px 0 #ffffff;
	font-family: "Nunito";
	text-transform: capitalize;
}
/*
.button-link-file-input::before {
	content: 'Change Image';
	display: inline-block;
	background: #fff linear-gradient(to bottom, white 20%, #f4f4f4 40%, #e9e9e9 60%, white);
	outline: none;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
	text-align: center;
	font-size: 16px;
	border: 2px solid #f0f0f0;
	padding: 4px 8px;
	border-radius: 6px !important;
	box-shadow: 0 1px 2px 0 #0000008a !important;
	color: var(--button-text-color);
	font-weight: 700;
	text-shadow: 0 1px 0 #ffffff;
}
*/
.searchbar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 8px;
	gap: 8px;
}

.search-input {
	border-radius: 100px;
	font-size: 16px;
	font-weight: 600;
	box-shadow: 0 1px 2px #00000030 inset;
	border: 1px solid #ababab;
	padding: 2px 12px;
}

.search-input:focus {
	border-color: #077bed;
}

.profile-container {

}

.profile-section {
	background-color: #fafafa;
	margin: 20px 0;
	padding: 52px 64px;
	border-radius: 10px;
	box-shadow: 0 2px 2px #00000055;
}

.profile-section header {
	width: unset;
}

.profile-section h2 {
	margin: 0 0 20px 0;
}

.profile-section section {
	width: 600px;
	background-color: #fff;
	margin: auto;
	padding: 36px;
	border-radius: 10px;
	border: 1px solid #eaeaea;
}

.profile-section section.danger {
	background-color: #fef3f2;
	border-color: orangered;
	border-width: 2px;
}

ul.breadcrumbs {
	display: inline-flex;
  list-style: none;
	padding: 0;
	margin: 4px 8px 0 0;
}

ul.breadcrumbs li {
	filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5));
	margin-right: -4px;
	border-radius: 6px;
}

ul.breadcrumbs li:has(span > a:focus-visible) {
	outline: 3px solid #077bed;
	outline-offset: 3px;
	z-index: 1;
}

ul.breadcrumbs li span {
	background-color: #f0f0f0;
	clip-path: polygon(2px 0px, calc(100% - 15px) -0px, calc(100% - 15px) 0px, calc(100% - 14.4372782667px) 0.026407453488px, calc(100% - 13.8843793056px) 0.104559834624px, calc(100% - 13.3445130549px) 0.232852174416px, calc(100% - 12.8208894528px) 0.409679503872px, calc(100% - 12.3167184375px) 0.633436854px, calc(100% - 11.8352099472px) 0.902519255808px, calc(100% - 11.3795739201px) 1.215321740304px, calc(100% - 10.9530202944px) 1.570239338496px, calc(100% - 10.5587590083px) 1.965667081392px, calc(100% - 10.2px) 2.4px, calc(100% - 0px) calc(50% - 0px), calc(100% - 0px) calc(50% - 0px), calc(100% - 10.2px) calc(100% - 2.4px), calc(100% - 10.2px) calc(100% - 2.4px), calc(100% - 10.5587590083px) calc(100% - 1.9656670707px), calc(100% - 10.9530202944px) calc(100% - 1.5702393216px), calc(100% - 11.3795739201px) calc(100% - 1.2153217209px), calc(100% - 11.8352099472px) calc(100% - 0.9025192368px), calc(100% - 12.3167184375px) calc(100% - 0.6334368375px), calc(100% - 12.8208894528px) calc(100% - 0.4096794912px), calc(100% - 13.3445130549px) calc(100% - 0.2328521661px), calc(100% - 13.8843793056px) calc(100% - 0.1045598304px), calc(100% - 14.4372782667px) calc(100% - 0.026407452299999px), calc(100% - 15px) calc(100% - 0px), 2px calc(100% - 0px), 2px calc(100% - 0px), 1.83779480575px calc(100% - 0.013088313099999px), 1.683922656px calc(100% - 0.050980668799991px), 1.54044242525px calc(100% - 0.1116181917px), 1.409412988px calc(100% - 0.1929420064px), 1.29289321875px calc(100% - 0.2928932375px), 1.192941992px calc(100% - 0.4094130096px), 1.11161818225px calc(100% - 0.5404424473px), 1.050980664px calc(100% - 0.6839226752px), 1.01308831175px calc(100% - 0.8377948179px), 1px calc(100% - 1px), 1px calc(100% - 1px), 1.00209480249px calc(100% - 1.0647043612px), 1.00833707552px calc(100% - 1.1288689216px), 1.01866361743px calc(100% - 1.1923040764px), 1.03301122656px calc(100% - 1.2548202208px), 1.05131670125px calc(100% - 1.31622775px), 1.07351683984px calc(100% - 1.3763370592px), 1.09954844067px calc(100% - 1.4349585436px), 1.12934830208px calc(100% - 1.4919025984px), 1.16285322241px calc(100% - 1.5469796188px), 1.2px calc(100% - 1.6px), 10.65px calc(50% - -1.8px), 10.65px calc(50% - -1.8px), 10.866px calc(50% - -1.4687999928px), 11.034px calc(50% - -1.1183999904px), 11.154px calc(50% - -0.7535999916px), 11.226px calc(50% - -0.3791999952px), 11.25px calc(50% - 0px), 11.226px calc(50% - 0.3791999952px), 11.154px calc(50% - 0.7535999916px), 11.034px calc(50% - 1.1183999904px), 10.866px calc(50% - 1.4687999928px), 10.65px calc(50% - 1.8px), 1.2px 1.6px, 1.2px 1.6px, 1.11314753285px 1.46238285755px, 1.0511381248px 1.3165497264px, 1.01356000095px 1.16538303085px, 1.0000013864px 1.0117651952px, 1.01005050625px 0.85857864375px, 1.0432955856px 0.7087058008px, 1.09932484955px 0.56502909065px, 1.1777265232px 0.4304309376px, 1.27808883165px 0.30779376595px, 1.4px 0.2px, 1.4px 0.2px, 1.45302037364px 0.1628532228717px, 1.50809738912px 0.1293483028096px, 1.56504144128px 0.0995484415079px, 1.62366292496px 0.0735168406608px, 1.683772235px 0.0513167019625px, 1.74517976624px 0.0330112271072px, 1.80769591352px 0.0186636177891px, 1.87113107168px 0.0083370757024px, 1.93529563556px 0.0020948025413px, 2px 2.5950271665712E-33px);
	padding: 0 2.5px 2px 0;
	display: block;
}

ul.breadcrumbs li:first-child span {
	clip-path: polygon(6px 0px, calc(100% - 15px) -0px, calc(100% - 15px) 0px, calc(100% - 14.4372782667px) 0.026407453488px, calc(100% - 13.8843793056px) 0.104559834624px, calc(100% - 13.3445130549px) 0.232852174416px, calc(100% - 12.8208894528px) 0.409679503872px, calc(100% - 12.3167184375px) 0.633436854px, calc(100% - 11.8352099472px) 0.902519255808px, calc(100% - 11.3795739201px) 1.215321740304px, calc(100% - 10.9530202944px) 1.570239338496px, calc(100% - 10.5587590083px) 1.965667081392px, calc(100% - 10.2px) 2.4px, calc(100% - 0px) calc(50% - 0px), calc(100% - 0px) calc(50% - 0px), calc(100% - 10.2px) calc(100% - 2.4px), calc(100% - 10.2px) calc(100% - 2.4px), calc(100% - 10.5587590083px) calc(100% - 1.9656670707px), calc(100% - 10.9530202944px) calc(100% - 1.5702393216px), calc(100% - 11.3795739201px) calc(100% - 1.2153217209px), calc(100% - 11.8352099472px) calc(100% - 0.9025192368px), calc(100% - 12.3167184375px) calc(100% - 0.6334368375px), calc(100% - 12.8208894528px) calc(100% - 0.4096794912px), calc(100% - 13.3445130549px) calc(100% - 0.2328521661px), calc(100% - 13.8843793056px) calc(100% - 0.1045598304px), calc(100% - 14.4372782667px) calc(100% - 0.026407452299999px), calc(100% - 15px) calc(100% - 0px), 6px calc(100% - 0px), 6px calc(100% - 0px), 5.0267688345px calc(100% - 0.078529870499999px), 4.103535936px calc(100% - 0.30588398399999px), 3.2426545515px calc(100% - 0.6697090935px), 2.456477928px calc(100% - 1.157651952px), 1.7573593125px calc(100% - 1.7573593125px), 1.157651952px calc(100% - 2.456477928px), 0.6697090935px calc(100% - 3.2426545515px), 0.305883984px calc(100% - 4.103535936px), 0.0785298705px calc(100% - 5.0267688345px), 9.9333297392696E-32px calc(100% - 6px), 0px 6px, 0px 6px, 0.0785298705px 5.0267688345px, 0.305883984px 4.103535936px, 0.6697090935px 3.2426545515px, 1.157651952px 2.456477928px, 1.7573593125px 1.7573593125px, 2.456477928px 1.157651952px, 3.2426545515px 0.6697090935px, 4.103535936px 0.305883984px, 5.0267688345px 0.0785298705px, 6px 9.9333297392696E-32px);
}

ul.breadcrumbs li:last-child span {
	clip-path: polygon(2px 0px, calc(100% - 6px) 0px, calc(100% - 6px) 0px, calc(100% - 5.0267688345px) 0.0785298705px, calc(100% - 4.103535936px) 0.305883984px, calc(100% - 3.2426545515px) 0.6697090935px, calc(100% - 2.456477928px) 1.157651952px, calc(100% - 1.7573593125px) 1.7573593125px, calc(100% - 1.157651952px) 2.456477928px, calc(100% - 0.6697090935px) 3.2426545515px, calc(100% - 0.30588398399999px) 4.103535936px, calc(100% - 0.078529870500006px) 5.0267688345px, calc(100% - 1.4210854715202E-14px) 6px, calc(100% - 0px) calc(100% - 6px), calc(100% - 0px) calc(100% - 6px), calc(100% - 0.078529870499978px) calc(100% - 5.0267688345px), calc(100% - 0.30588398399999px) calc(100% - 4.103535936px), calc(100% - 0.6697090935px) calc(100% - 3.2426545515px), calc(100% - 1.157651952px) calc(100% - 2.456477928px), calc(100% - 1.7573593125px) calc(100% - 1.7573593125px), calc(100% - 2.456477928px) calc(100% - 1.157651952px), calc(100% - 3.2426545515px) calc(100% - 0.6697090935px), calc(100% - 4.103535936px) calc(100% - 0.305883984px), calc(100% - 5.0267688345px) calc(100% - 0.078529870499999px), calc(100% - 6px) calc(100% - 0px), 2px calc(100% - 0px), 2px calc(100% - 0px), 1.83779480575px calc(100% - 0.013088313099999px), 1.683922656px calc(100% - 0.050980668799991px), 1.54044242525px calc(100% - 0.1116181917px), 1.409412988px calc(100% - 0.1929420064px), 1.29289321875px calc(100% - 0.2928932375px), 1.192941992px calc(100% - 0.4094130096px), 1.11161818225px calc(100% - 0.5404424473px), 1.050980664px calc(100% - 0.6839226752px), 1.01308831175px calc(100% - 0.8377948179px), 1px calc(100% - 1px), 1px calc(100% - 1px), 1.00209480249px calc(100% - 1.0647043612px), 1.00833707552px calc(100% - 1.1288689216px), 1.01866361743px calc(100% - 1.1923040764px), 1.03301122656px calc(100% - 1.2548202208px), 1.05131670125px calc(100% - 1.31622775px), 1.07351683984px calc(100% - 1.3763370592px), 1.09954844067px calc(100% - 1.4349585436px), 1.12934830208px calc(100% - 1.4919025984px), 1.16285322241px calc(100% - 1.5469796188px), 1.2px calc(100% - 1.6px), 10.65px calc(50% - -1.8px), 10.65px calc(50% - -1.8px), 10.866px calc(50% - -1.4687999928px), 11.034px calc(50% - -1.1183999904px), 11.154px calc(50% - -0.7535999916px), 11.226px calc(50% - -0.3791999952px), 11.25px calc(50% - 0px), 11.226px calc(50% - 0.3791999952px), 11.154px calc(50% - 0.7535999916px), 11.034px calc(50% - 1.1183999904px), 10.866px calc(50% - 1.4687999928px), 10.65px calc(50% - 1.8px), 1.2px 1.6px, 1.2px 1.6px, 1.11314753285px 1.46238285755px, 1.0511381248px 1.3165497264px, 1.01356000095px 1.16538303085px, 1.0000013864px 1.0117651952px, 1.01005050625px 0.85857864375px, 1.0432955856px 0.7087058008px, 1.09932484955px 0.56502909065px, 1.1777265232px 0.4304309376px, 1.27808883165px 0.30779376595px, 1.4px 0.2px, 1.4px 0.2px, 1.45302037364px 0.1628532228717px, 1.50809738912px 0.1293483028096px, 1.56504144128px 0.0995484415079px, 1.62366292496px 0.0735168406608px, 1.683772235px 0.0513167019625px, 1.74517976624px 0.0330112271072px, 1.80769591352px 0.0186636177891px, 1.87113107168px 0.0083370757024px, 1.93529563556px 0.0020948025413px, 2px 2.5950271665712E-33px);
	padding-right: 2px;
}

ul.breadcrumbs li a {
	clip-path: polygon(5px 2px, calc(100% - 12.9441411px) 2px, calc(100% - 12.9441411px) 2px, calc(100% - 12.5782798165px) 2.016744624px, calc(100% - 12.218495012px) 2.0663307244px, calc(100% - 11.8667858355px) 2.1477866438px, calc(100% - 11.525151436px) 2.2601407248px, calc(100% - 11.1955909625px) 2.40242131px, calc(100% - 10.880103564px) 2.573656742px, calc(100% - 10.5806883895px) 2.7728753634px, calc(100% - 10.299344588px) 2.9991055168px, calc(100% - 10.0380713085px) 3.2513755448px, calc(100% - 9.7988677px) 3.52871379px, calc(100% - 0px) calc(50% - -1px), calc(100% - 0px) calc(50% - -1px), calc(100% - 9.7988677px) calc(100% - 1.5287138px), calc(100% - 9.7988677px) calc(100% - 1.5287138px), calc(100% - 10.0380713085px) calc(100% - 1.2513755448px), calc(100% - 10.299344588px) calc(100% - 0.9991055104px), calc(100% - 10.5806883895px) calc(100% - 0.7728753536px), calc(100% - 10.880103564px) calc(100% - 0.5736567312px), calc(100% - 11.1955909625px) calc(100% - 0.4024213px), calc(100% - 11.525151436px) calc(100% - 0.2601407168px), calc(100% - 11.8667858355px) calc(100% - 0.1477866384px), calc(100% - 12.218495012px) calc(100% - 0.0663307216px), calc(100% - 12.5782798165px) calc(100% - 0.016744623200005px), calc(100% - 12.9441411px) calc(100% - 0px), 5px calc(100% - 0px), 5px calc(100% - 0px), 4.91889740409px calc(100% - 0.0065441551999967px), 4.84196132992px calc(100% - 0.025490329599993px), 4.77022121483px calc(100% - 0.0558090864px), 4.70470649616px calc(100% - 0.096470988799997px), 4.64644661125px calc(100% - 0.1464466px), 4.59647099744px calc(100% - 0.2047064832px), 4.55580909207px calc(100% - 0.2702212016px), 4.52549033248px calc(100% - 0.3419613184px), 4.50654415601px calc(100% - 0.4188973968px), 4.5px calc(100% - 0.5px), 4.5px calc(100% - 0.5px), 4.50104740138px calc(100% - 0.5323521806px), 4.50416853824px calc(100% - 0.56443446079999px), 4.50933180966px calc(100% - 0.59615203820001px), 4.51650561472px calc(100% - 0.6274101104px), 4.5256583525px calc(100% - 0.658113875px), 4.53675842208px calc(100% - 0.6881685296px), 4.54977422254px calc(100% - 0.7174792718px), 4.56467415296px calc(100% - 0.7459512992px), 4.58142661242px calc(100% - 0.7734898094px), 4.6px calc(100% - 0.8px), 12.25px calc(50% - -4px), 12.25px calc(50% - -4px), 12.609999991px calc(50% - -3.4479999952px), 12.889999984px calc(50% - -2.8639999936px), 13.089999979px calc(50% - -2.2559999944px), 13.209999976px calc(50% - -1.6319999968px), 13.249999975px calc(50% - -1px), 13.209999976px calc(50% - -0.3680000032px), 13.089999979px calc(50% - 0.2559999944px), 12.889999984px calc(50% - 0.8639999936px), 12.609999991px calc(50% - 1.4479999952px), 12.25px calc(50% - 2px), 4.6px 2.8px, 4.6px 2.8px, 4.55657376764px 2.73119142864px, 4.52556906432px 2.65827486272px, 4.50678000268px 2.58269151448px, 4.50000069536px 2.50588259616px, 4.505025255px 2.42928932px, 4.52164779424px 2.35435289824px, 4.54966242572px 2.28251454312px, 4.58886326208px 2.21521546688px, 4.63904441596px 2.15389688176px, 4.7px 2.1px, 4.7px 2.1px, 4.7265101879px 2.08142661242px, 4.754048696px 2.06467415296px, 4.7825207219px 2.04977422254px, 4.8118314632px 2.03675842208px, 4.8418861175px 2.0256583525px, 4.8725898824px 2.01650561472px, 4.9038479555px 2.00933180966px, 4.9355655344px 2.00416853824px, 4.9676478167px 2.00104740138px, 5px 2px);
	padding: 9px 16px 7px 20px;
	background: #fff linear-gradient(to bottom, white 20%, #f4f4f4 40%, #e9e9e9 60%, white);
	font-weight: 700;
  text-shadow: 0 1px 0 #ffffff;
	color: var(--button-text-color);
	text-decoration: none;
	font-size: 16px;
	line-height: 16px;
	display: block;
}

ul.breadcrumbs li:first-child a {
	padding-left: 12px;
	clip-path: polygon(6px 2px, calc(100% - 12.9441411px) 2px, calc(100% - 12.9441411px) 2px, calc(100% - 12.5782798165px) 2.016744624px, calc(100% - 12.218495012px) 2.0663307244px, calc(100% - 11.8667858355px) 2.1477866438px, calc(100% - 11.525151436px) 2.2601407248px, calc(100% - 11.1955909625px) 2.40242131px, calc(100% - 10.880103564px) 2.573656742px, calc(100% - 10.5806883895px) 2.7728753634px, calc(100% - 10.299344588px) 2.9991055168px, calc(100% - 10.0380713085px) 3.2513755448px, calc(100% - 9.7988677px) 3.52871379px, calc(100% - 0px) calc(50% - -1px), calc(100% - 0px) calc(50% - -1px), calc(100% - 10.1326419px) calc(100% - 1.4832071px), calc(100% - 10.1326419px) calc(100% - 1.4832071px), calc(100% - 10.3716526227px) calc(100% - 1.2137048586px), calc(100% - 10.6317340176px) calc(100% - 0.9687008128px), calc(100% - 10.9109751849px) calc(100% - 0.7491066002px), calc(100% - 11.2074652248px) calc(100% - 0.5558338584px), calc(100% - 11.5192932375px) calc(100% - 0.389794225px), calc(100% - 11.8445483232px) calc(100% - 0.2518993376px), calc(100% - 12.1813195821px) calc(100% - 0.1430608338px), calc(100% - 12.5276961144px) calc(100% - 0.064190351200001px), calc(100% - 12.8817670203px) calc(100% - 0.016199527400005px), calc(100% - 13.2416214px) calc(100% - 0px), 6px calc(100% - 0px), 6px calc(100% - 0px), 5.351179223px calc(100% - 0.052353246999996px), 4.735690624px calc(100% - 0.203922656px), 4.161769701px calc(100% - 0.446472729px), 3.637651952px calc(100% - 0.771767968px), 3.171572875px calc(100% - 1.171572875px), 2.771767968px calc(100% - 1.637651952px), 2.446472729px calc(100% - 2.161769701px), 2.203922656px calc(100% - 2.735690624px), 2.052353247px calc(100% - 3.351179223px), 2px calc(100% - 4px), 2px 6px, 2px 6px, 2.052353247px 5.351179223px, 2.203922656px 4.735690624px, 2.446472729px 4.161769701px, 2.771767968px 3.637651952px, 3.171572875px 3.171572875px, 3.637651952px 2.771767968px, 4.161769701px 2.446472729px, 4.735690624px 2.203922656px, 5.351179223px 2.052353247px, 6px 2px);
}
ul.breadcrumbs li:last-child a {
	padding-right: 10px;
	clip-path: polygon(5px 2px, calc(100% - 4px) 2px, calc(100% - 4px) 2px, calc(100% - 3.351179223px) 2.052353247px, calc(100% - 2.735690624px) 2.203922656px, calc(100% - 2.161769701px) 2.446472729px, calc(100% - 1.637651952px) 2.771767968px, calc(100% - 1.171572875px) 3.171572875px, calc(100% - 0.77176796800001px) 3.637651952px, calc(100% - 0.44647272899999px) 4.161769701px, calc(100% - 0.203922656px) 4.735690624px, calc(100% - 0.052353246999999px) 5.351179223px, calc(100% - 1.4210854715202E-14px) 6px, calc(100% - 0px) calc(100% - 4px), calc(100% - 0px) calc(100% - 4px), calc(100% - 0.052353246999985px) calc(100% - 3.351179223px), calc(100% - 0.20392265599999px) calc(100% - 2.735690624px), calc(100% - 0.44647272900001px) calc(100% - 2.161769701px), calc(100% - 0.77176796799999px) calc(100% - 1.637651952px), calc(100% - 1.171572875px) calc(100% - 1.171572875px), calc(100% - 1.637651952px) calc(100% - 0.771767968px), calc(100% - 2.161769701px) calc(100% - 0.446472729px), calc(100% - 2.735690624px) calc(100% - 0.203922656px), calc(100% - 3.351179223px) calc(100% - 0.052353247000006px), calc(100% - 4px) calc(100% - 0px), 5px calc(100% - 0px), 5px calc(100% - 0px), 4.91889740409px calc(100% - 0.0065441551999967px), 4.84196132992px calc(100% - 0.025490329599993px), 4.77022121483px calc(100% - 0.0558090864px), 4.70470649616px calc(100% - 0.096470988799997px), 4.64644661125px calc(100% - 0.1464466px), 4.59647099744px calc(100% - 0.2047064832px), 4.55580909207px calc(100% - 0.2702212016px), 4.52549033248px calc(100% - 0.3419613184px), 4.50654415601px calc(100% - 0.4188973968px), 4.5px calc(100% - 0.5px), 4.5px calc(100% - 0.5px), 4.50104740138px calc(100% - 0.5323521806px), 4.50416853824px calc(100% - 0.56443446079999px), 4.50933180966px calc(100% - 0.59615203820001px), 4.51650561472px calc(100% - 0.6274101104px), 4.5256583525px calc(100% - 0.658113875px), 4.53675842208px calc(100% - 0.6881685296px), 4.54977422254px calc(100% - 0.7174792718px), 4.56467415296px calc(100% - 0.7459512992px), 4.58142661242px calc(100% - 0.7734898094px), 4.6px calc(100% - 0.8px), 12.25px calc(50% - -4px), 12.25px calc(50% - -4px), 12.609999991px calc(50% - -3.4479999952px), 12.889999984px calc(50% - -2.8639999936px), 13.089999979px calc(50% - -2.2559999944px), 13.209999976px calc(50% - -1.6319999968px), 13.249999975px calc(50% - -1px), 13.209999976px calc(50% - -0.3680000032px), 13.089999979px calc(50% - 0.2559999944px), 12.889999984px calc(50% - 0.8639999936px), 12.609999991px calc(50% - 1.4479999952px), 12.25px calc(50% - 2px), 4.6px 2.8px, 4.6px 2.8px, 4.55657376764px 2.73119142864px, 4.52556906432px 2.65827486272px, 4.50678000268px 2.58269151448px, 4.50000069536px 2.50588259616px, 4.505025255px 2.42928932px, 4.52164779424px 2.35435289824px, 4.54966242572px 2.28251454312px, 4.58886326208px 2.21521546688px, 4.63904441596px 2.15389688176px, 4.7px 2.1px, 4.7px 2.1px, 4.7265101879px 2.08142661242px, 4.754048696px 2.06467415296px, 4.7825207219px 2.04977422254px, 4.8118314632px 2.03675842208px, 4.8418861175px 2.0256583525px, 4.8725898824px 2.01650561472px, 4.9038479555px 2.00933180966px, 4.9355655344px 2.00416853824px, 4.9676478167px 2.00104740138px, 5px 2px);
}

ul.breadcrumbs li:only-child span {
	clip-path: none;
	border-radius: 6px;
	padding: 2px;
}

ul.breadcrumbs li:only-child a {
	clip-path: none;
	border-radius: 4px;
	padding-top: 7px;
	padding-left: 10px;
}

ul.breadcrumbs li.selected span,
ul.breadcrumbs li:last-child span {
	background-color: #0200ff;
}

ul.breadcrumbs li.selected a,
ul.breadcrumbs li:last-child a {
	background: linear-gradient(to bottom, #3d57fc 20%, #002cf4 40%, #000ca8 60%, #457fff);
	color: #fff;
	text-shadow: 0 1px 0 #000000;
}

ul.breadcrumbs li.edit span {
	background-color: hsl(60deg 100% 42.31%);
}

ul.breadcrumbs li.edit a {
	background: linear-gradient(to bottom, hsl(60 77% 56% / 1) 20%, hsl(60 100% 50% / 1) 40%, hsl(60 100% 40% / 1) 60%, hsl(60 100% 50% / 1));
  color: #423d00;
	text-shadow: 0 1px 0 #ffffffbf;
}

.test-break p {
	font-size: 19px;
}

.test-break p a {
	color: #0074E8;
	font-weight: 800;
	text-decoration: solid underline #0074E8 2.45px;
}

.test-break p a:visited {
	color: #be005f;
	text-decoration-color: #be005f;
}
