@charset "utf-8";
/* CSS Document */

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #000;
	font-size: 90%;
	background-color: #fff;
}


body, html {
	height: 100%;
}

.mandatory {
	color: #990000;
	font-weight: bold;
}

#header {
	text-align: center;
	background-color: #8658b2;
	color: #fff;

	h1 {
		display: contents;
		font-size: 1rem;
	}
}

#header a {
	color: #fff;
}

#banner_holder {
	background-color: #d7c9e4;
	width: 100%;
}

#banner_holder .banner_info {
	padding: 25px 25px 25px 280px;
	height: 250px;
	background-repeat: no-repeat;
	float: right;
	width: 32%;
	color: #fff;
	position: relative;
	text-align: left;
}

.banner_info p {
	font-size: 1.7em;
	color: #fff;
	font-weight: normal;
	margin: 40px 0 12px 0;
	text-align: left;
	background-color: #8658b2;
}

.purpleswoop {
	background-image: url("../images/swoop_purple.png");
}

#banner_holder .bannerbg {
	height: 300px;
	padding: 0 12px;
}

#banner_holder .container {
	height: 300px;
	position: relative;
	max-width: 1050px;
	margin: 0 auto;
}

.banner_01 {
	background-image: url("../images/banner_image.jpg");
	background-repeat: no-repeat;
}

#content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#content .text {
	text-align: left;
}

form {
	margin: 0;
	padding: 0;
	width: auto;
	border: 0;
	text-align: left;
}

h1, h2, h3 {
	font-weight: 300;
	margin: 15px 0;
	text-align: center;
	color: #8658b2;
}

h2 {
	font-weight: normal;
}

#accessibility h2, #accessibility h3, #privacy h2, #privacy h3, #streaming h2, #prizefaq h2, #meetteam h2 {
	text-align: left;
}

#meetteam h2 {
	font-size: 1.3em;
	font-weight: bold;
}

.strong {
	font-weight: bold;
}

h1 {
	margin: 15px auto;
	font-size: 2.2em;
}

img.centerimage {
	max-width: 780px;
	height: auto;
}

h1.margb {
	margin-bottom: 35px;
}

h2 {
	margin: 15px 0;
	font-size: 1.6em;
}

h3 {
	margin: 15px 0;
	font-size: 1.5em;
}

#wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#content a {
	text-decoration: underline;
}

#content a:hover {
	text-decoration: none;
}

hr {
	border-top: 1px solid #0d7bc0;
	width: 15%;
	margin: 12px auto 25px auto;
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

hr.margb {
	margin-bottom: 25px;
}

p {
	line-height: 1.5em;
}

p.larger, #help p.firstlarger {
	font-size: 1.6em;
	font-weight: 300;
}

p.larger strong {
	font-weight: 400;
}

span.uppercase {
	text-transform: uppercase;
}

span.block {
	display: block;
}

.nomt {
	margin-top: 0;
}

h3.margt {
	margin-top: 35px;
}


ul, ol {
	margin: 0;
	padding: 0;
}

ol {
	padding: 0 0 0 25px;
}

ol li {
	margin-bottom: 20px;
}

ul.circle {
	padding: 0 0 0 25px;
	margin-bottom: 20px;
}

ul.circle li {
	margin: 0 0 8px 0;
}

a {
	color: #97157d;
	text-decoration: underline;
}

a:hover, button.link:hover {
	text-decoration: none;
}

.table {
	display: table;
	width: 100%;
	margin: 30px 0;
}

.row {
	display: table-row;
}

.col {
	display: table-cell;
}

.buttons {
	text-align: right;
	width: auto;
	float: right;
}

.formitem label {
	display: block;
	padding: 0 0 3px 0;
}

/* THIS IS THE RADIO */
.radiolabels input {
	/* HIDE ME */
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* THESE ARE THE
input.magical + label {
	/* WHEN NOT SELECTED */

.radiolabels input:checked + label {
	/* WHEN SELECTED HIGHLIGHT ME */
	background-color: #f4883b;
}

.radiolabels input + label:hover,
.radiolabels input:focus + label {
	box-shadow: #00000099 0 0 .5em;
}


.radiolabels {
	padding: 0 0 8px 0;
}

.radiolabels p {
	margin: 5px 0 10px 0;
}

.radioitem {
	width: 23%;
	float: left;
	text-align: center;
	padding: 0 1%;
}

.radioitem label {
	color: #000;
	display: block;
	background-color: #fff;
	border: 2px solid #f4883b;
	border-radius: 6px;
	padding: 80px 0 8px 0;
	background-position: center 8px;
	background-repeat: no-repeat;
	cursor: pointer;
	background-size: 80px;
	user-select: none;
}

.validation_input {
	margin: 3px 0 0 0;
}

span.validation_code {
	display: inline-block;
	font-size: 2.4em;
	padding: 6px 10px;
	text-align: left;
	width: auto;
	border: 1px solid #ccc;
	background-color: #f0f1f2;
	margin-top: 12px;
	border-radius: 6px;
}

#page {
	width: 100%;
	margin: 0;
	padding: 0;
}


#page .container, #header .container, #footer .container {
	width: 90%;
	margin: 0 auto;
}

.container {
	text-align: center;
}

#page .container.smallercontainer {
	max-width: 1050px;
}

.formitem {
	margin: 0 0 35px 0;
}

input:is([type=text],[type=search],[type=email],[type=url],[type=tel]), select, textarea {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #f7f6f6;
	border: 1px solid #c6c6c6;
	border-radius: 6px;
	color: #000;
	font-size: 1em;
	padding: 4px 5px 5px;
	margin-right: 3px;
}

input#agree {
	width: 26px;
	height: 26px;
	display: block;
	padding: 0;
	margin: 0 0 8px 0;
}

label.error_label, p .error_label, p.error_label {
	color: #901601;
	font-style: italic;
	font-weight: bold;
}

.formitem label.error_label + input, .formitem label.error_label + select, .formitem label.error_label + textarea, .formitem.error_formitem input, .formitem.error_formitem select, .formitem.error_formitem textarea {
	border-color: #901601;
	background-color: #f9f0ec;
}

p.question {
	font-weight: bold;
}

.clearfix {
	clear: both;
	height: 1px;
}

.rel {
	position: relative;
}

.literacy, .numeracy {
	text-align: center;
	align-items: center;
}

.literacy img, .numeracy img {
	height: 35px;
	width: auto;
}

#footer {
	padding: 15px 0;
	font-size: 0.96em;
	width: 100%;
	text-align: center;
}

#footer ul {
	padding: 8px 0;
	display: flex;
	justify-content: center;
}

#footer .container ul.centered_content {
	text-align: center;
	display: inline;
}

#footer li {
	display: flex;
	padding: 0;
	margin: 0;
}

#footer .container ul.centered_content li {
	text-align: center;
	display: inline;
}

#footer li span, #footer li a {
	padding: 0;
	display: inline-block;
}

#mobile_main_navigation_toggle {
	display: none;
}

.center, .alignc, h2.alignc {
	text-align: center !important;
}

.right {
	text-align: right;
}

.smallerwraptext {
	font-size: 0.8em;
	display: block;
}

.hidden {
	display: none !important;
}

.show {
	display: block !important;
}

span.quote {
	font-size: 0.9em;
	text-align: right;
	display: block;
}

#footer img, #footer a img {
	border: 0 !important;
	display: inline-block;
}

img.mainimg {
	margin: 15px 0 0 0;
	border: 1px solid #ccc;
	float: right;
	padding: 3px;
	background-color: #f6f7f8;
	border-radius: 8px;
}

.center, .alignc {
	text-align: center;
}

.uppercase {
	text-transform: uppercase;
}

.validation_errors {
	padding: 25px;
}

.validation_errors p {
	font-size: 1.6em;
	font-weight: 300;
}

#close_button a.close, .close_button a.close {
	background-color: #467249 !important;
}

.close_button a.close:hover {
	background-color: #169546;
}

#close_button a strong, .close_button a strong {
	position: absolute;
	top: -9000px;
	left: -9000px;
	display: block;
}

.label_error {
	color: #cc0000 !important;
}

.borderb {
	padding: 0 0 12px 0;
	margin: 0 0 12px 0;
	border-bottom: 1px dotted #1d62af;
}

.conformation {
	min-height: 300px;
}

.conformation h2 {
	font-size: 1.8em;
}

.conformation p {
	font-size: 1.3em;
}


#content.error h1, h1#signup_heading {
	color: #021c86;
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 0;
	font-size: 7em;
	text-align: center;
}

#content.error h2, .conf h2 {
	font-size: 2.8em;
}

h1#signup_heading {
	font-size: 5em;
}

#header img {
	height: auto;
	margin: 10px auto;
	display: inline-block;
	width: 200px;
}

#main_nav {
	text-align: center;
	font-size: 1.1em;
}

#main_nav ul {
	list-style: none;
	padding: 0;
	margin: 10px 0;
	display: flex;
	justify-content: space-between;
}

#main_nav li {
	display: flex;
	font-size: 1.1em;
	margin: 0;
	line-height: 1.8em;
}

#main_nav li a {
	color: #021c86;
	display: inline-block;
	text-decoration: none;
	line-height: normal;
}

#main_nav li a:hover, #footer li a:hover {
	color: #000;
	text-decoration: none;
}

#main_nav li a.selected, #main_nav li.selected a, #footer li a.selected, #footer li.selected a {
	color: #000;
	text-decoration: underline;
	text-underline-offset: 0.28rem;
}

#main_nav li.last {
	margin: 0;
}


input[type=button], input[type=submit], button, a.btn {
	border-radius: 6px;
	border: 1px solid #97157d;
	color: #fff;
	background-color: #97157d;
	padding: 10px 15px;
	display: inline-block;
	font-weight: normal;
	text-align: center;
	font-size: 1.1em;
	line-height: 1.4em;
	text-decoration: none;
	vertical-align: top;
}

.selectbtn:before {
	 content: '';
	 display: inline-block;
	 height: 1.5em;
	 width: 1.5em;
	 margin-right: 4.5px;
	 vertical-align: bottom;
	 background-size: contain;
	 background-color: transparent;
	 background-repeat: no-repeat;
	 background-position: center left;
	 white-space: nowrap;
	 margin-left: -2px;
 }

.selectbtn:before {
	background-image: url("../images/svg/select-btn.svg");
}

#content a.btn, #content input.btn, #content button {
	/*text-decoration: none;*/
}

:is(input[type=button], input[type=submit], button, a.btn):hover {
	text-decoration: none;
	background-color: #be0f9b;
}

input.btn, button {
	cursor: pointer;
	width: auto;
}

a.btn.inactive {
	border: 1px solid #999;
	color: #666;
	background-color: #E6E6E6;
}

a.btn.inactive:hover {
	text-decoration: none;
	background-color: #E6E6E6;
	color: #666;
}

a.btn.warchild {
	background-image: url(../images/warchild-button.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 52px;
	height: 52px;
	border: 0;
	display: inline-block;
	padding: 0;
	text-indent: -9999px;
	min-width: 20px;
	margin-left: 5px;
}

a.btn.prizepage {
	min-width: 20px;
	padding: 0 16px;
	height: 50px;
	line-height: 3em;
}

#twitter-feeds {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.feed {
	display: flex;
	margin-bottom: 25px;
	justify-content: space-between;
}

.feed img {
	max-width: 365px;
	height: auto;
	width: 100%;
}

.intro-circles ul {
	padding: 0;
	list-style-type: none;
	text-align: center;
	margin: 20px auto;
	position: relative;
	/* height: auto; */
	min-height: 152px;
	display: block;
}

.section {
	height: 100%;
}

#nav_clasp_0 {
	display: none;
}

.recapcenter {
	float: left;
	width: auto;
	margin-top: 5px;
}

.buttons a.btn {
	padding-left: 50px;
	margin: 15px 0 0 0;
}

.pulsate {
	-webkit-animation: pulsate 2s ease-out;
	-webkit-animation-iteration-count: infinite;
	opacity: 0.5;
}

@-webkit-keyframes pulsate {
	0% {
		opacity: 0.5;
	}
	50% {
		opacity: 1.0;
	}
	100% {
		opacity: 0.5;
	}
}

.instant-slide {
	-webkit-transition: 0.001s ease !important;
	transition: 0.001s ease !important;
}

.help_area {
	transition: opacity 1s, max-height 1s;
	overflow: hidden;
}

.help_area_show {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	max-height: 1000px;
}

.help_area_hide {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	max-height: 0px;
}

input.error_field {
	border: 1px solid #a4090e;
}

blockquote::before, blockquote::after {
	font-family: 'BIZ UDPMincho', serif;
	color: #0d7bc0;
	position: absolute;
}

blockquote::after {
	content: "\201D";
	right: 0;
	bottom: -25px;
}

blockquote::before {
	content: "\201C";
	left: 0;
	top: 0;
}


ul.circles {
	padding: 0;
	margin: 0 0 5px 0;
	display: inline-block;
	text-align: left;
	list-style-type: none;
}

ul.circles li::before {
	content: '';
	height: 6px;
	width: 6px;
	border: 2.5px solid #021c86;
	border-radius: 50%;
	display: inline-block;
	margin: 0 7px 0 0;
}

ul.circles li::after {
	margin: 0 0 0 3px;
}

ul.circles li {
	margin: 0 0 10px 0;
	list-style: none !important;
}

a.anchor {
	visibility: hidden;
}


.scroll-left {
	position: relative;
	width: 98vw;
	height: 50px;
	overflow: hidden;
}

.scroll-left .inner {
	width: inherit;
	height: inherit;
	position: absolute;
	left: 0%;
	top: 0%;
	animation: primary 6s linear infinite;
}

@keyframes primary {
	from {
		left: 0%;
	}
	to {
		left: -100%;
	}
}

.primary {
	animation: primary 1s linear infinite;
}

.secondary {
	animation: secondary 12s linear infinite;
}

@keyframes primary {
	from {
		left: 0%;
	}
	to {
		left: -100%;
	}
}

@keyframes secondary {
	from {
		left: 100%;
	}
	to {
		left: 0%;
	}
}

/* region SLIDER */
[data-slider] {
	position: relative;
}

[data-slider] > [data-slider-slides] > * {
	position: absolute;
	top: 0;
	left: 0;
}

/* Don't show the controls until the Javascript has set data-slider-init="1" */
[data-slider]:not([data-slider-init="1"]) [data-slider-controls] {
	display: none;
}

[data-slider] [data-slider-controls] {
	z-index: 5;
}

[data-slider][data-slider-show-controls="1"] [data-slider-controls-toggler] [data-slider-controls-toggler-show] {
	display: none;
}

[data-slider]:not([data-slider-show-controls="1"]) [data-slider-controls-toggler] [data-slider-controls-toggler-hide] {
	display: none;
}

[data-slider] [data-slider-controls] ul {
	list-style: none;
}

[data-slider] [data-slider-controls] ul > li {
	display: inline-block;
}

[data-slider] [data-slider-controls] ul > li svg {
	width: 40px;
	display: inline-block;
}

[data-slider] [data-slider-controls] ul > li button:focus svg use:not(.hover),
[data-slider] [data-slider-controls] ul > li button:focus-within svg use:not(.hover),
[data-slider] [data-slider-controls] ul > li button:hover svg use:not(.hover) {
	display: none;
}

[data-slider] [data-slider-controls] ul > li button svg use.hover,
[data-slider] [data-slider-controls] ul > li button svg use.hover,
[data-slider] [data-slider-controls] ul > li button svg use.hover {
	display: none;
}

[data-slider] [data-slider-controls] ul > li button:focus svg use.hover,
[data-slider] [data-slider-controls] ul > li button:focus-within svg use.hover,
[data-slider] [data-slider-controls] ul > li button:hover svg use.hover {
	display: block;
}

[data-slider]:not([data-slider-paused="1"]) [data-slider-controls] [data-slider-controls-play] {
	display: none;
}

[data-slider][data-slider-paused="1"] [data-slider-controls] [data-slider-controls-play] {
}

[data-slider]:not([data-slider-paused="1"]) [data-slider-controls] [data-slider-controls-pause] {
}

[data-slider][data-slider-paused="1"] [data-slider-controls] [data-slider-controls-pause] {
	display: none;
}

[data-islider] {
	position: relative;
}


[data-islider] > [data-islider-slides] {
	display: flex;
	align-items: start;
	list-style: none;
	overflow: clip;
	box-sizing: border-box;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: flex-start;
}

[data-islider] > [data-islider-slides] > * {
	/*position: relative;*/
	/*top: 0;*/
	/*left: 0;*/
}

/* Don't show the controls until the Javascript has set data-slider-init="1" */
[data-islider]:not([data-islider-init="1"]) [data-islider-controls] {
	display: none;
}

[data-islider] [data-islider-controls] {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 5;
}

[data-islider][data-islider-show-controls="1"] [data-islider-controls-toggler] [data-islider-controls-toggler-show] {
	display: none;
}

[data-islider]:not([data-islider-show-controls="1"]) [data-islider-controls-toggler] [data-islider-controls-toggler-hide] {
	display: none;
}


[data-islider] [data-islider-controls] ul {
	list-style: none;
}

[data-islider] [data-islider-controls] ul > li {
	display: inline-block;
}

[data-islider] [data-islider-controls] ul > li svg {
	width: 40px;
	display: inline-block;
}

[data-islider] [data-islider-controls] ul > li button:focus svg use:not(.hover),
[data-islider] [data-islider-controls] ul > li button:focus-within svg use:not(.hover),
[data-islider] [data-islider-controls] ul > li button:hover svg use:not(.hover) {
	display: none;
}

[data-islider] [data-islider-controls] ul > li button svg use.hover,
[data-islider] [data-islider-controls] ul > li button svg use.hover,
[data-islider] [data-islider-controls] ul > li button svg use.hover {
	display: none;
}

[data-islider] [data-islider-controls] ul > li button:focus svg use.hover,
[data-islider] [data-islider-controls] ul > li button:focus-within svg use.hover,
[data-islider] [data-islider-controls] ul > li button:hover svg use.hover {
	display: block;
}

[data-islider]:not([data-islider-paused="1"]) [data-islider-controls] [data-islider-controls-play] {
	display: none;
}

[data-islider][data-islider-paused="1"] [data-islider-controls] [data-islider-controls-play] {
}

[data-islider]:not([data-islider-paused="1"]) [data-islider-controls] [data-islider-controls-pause] {
}

[data-islider][data-islider-paused="1"] [data-islider-controls] [data-islider-controls-pause] {
	display: none;
}

.slider_slide_showing {
	z-index: 1;
	animation: 1s linear 0s 1 crossfade-show;
}


@keyframes crossfade-show {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes crossfade-hide {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes slide-out {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

/* region SLIDER */

#slideswrapper {
	height: 200px;
}

#slides {
	height: 200px;
}

#slides > * {

}

html > body .section::after,
html > body #logincontent::after,
html > body .autoclear::after {
	content: '';
	display: block;
	clear: both;
}

/* WAI things - DO NOT REMOVE */
.visually_hidden:not(:focus):not(:active):not(:focus-within) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* WAI THINGS - VISUALLY HIDDEN BUT IF IT IS INSIDE SOMETHING WITH overflow: auto */
.table_wrapper .visually_hidden:not(:focus):not(:active) {
	position: fixed;
	top: 0;
	left: 0;
}

/* END WAI things */

/* region ----------------------- data-tooltip styles ----------------------- */
.tooltip_outer {
	position: fixed !important;
	width: 200px;
	padding: 10px;

	min-width: 120px;
	max-width: 480px;
	z-index: 1000 !important;
	box-sizing: content-box;

	background-color: #FFFFFFFF;
	color: #111111FF;

	/* Makes the browser handle mousemove events performantly for a tooltip like this */
	backface-visibility: hidden;
	pointer-events: none;

	border: 1px solid #ccc;
	box-shadow: 1px 1px .5em 1px rgba(0, 0, 0, 0.26);
}

.tooltip_outer[popover] {
	width: auto;
	margin: 0;
}

.tooltip_inner {
	text-align: left;
}

.tooltip_inner {
	line-height: 1.5;
}

.tooltip_inner h3, .tooltip_inner table {
	margin-top: 0px;
}

.tooltip_inner table {
	margin: 0;
	border-top: 0;
	width: auto;
}

.tooltip_inner table td {
	padding: 5px 6px;
}

.tooltip_inner h3, .tooltip_inner h4 {
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 1.2em;
	font-weight: normal;
}

.tooltip_inner p, .tooltip_inner ul {
	margin: 0 0 .8em;
	padding: 0;
}

.tooltip_inner table, .tooltip_inner table tbody {
	margin: 0;
	padding: 0;
	line-height: normal;
}

.tooltip_inner ul > li:last-child {
	margin-bottom: 0;
}

.tooltip_outer .tooltip_inner > :first-child {
	margin-top: 0 !important;
}

.tooltip_outer .tooltip_inner > :last-child {
	margin-bottom: 0 !important;
}

/* endregion ----------------------- data-tooltip styles ----------------------- */

/* region ------------------------ Loading/Progress styles ------------------------ */

@keyframes animate-stripes {
	from {
		background-position: 0 0, 0 0, 0 0;
	}
	to {
		background-position: 0 2em, 0 0, 0 0;
	}
}

@media not (prefers-reduced-motion) {

	progress.loading {
		width: 8em;
		height: 2em;
		appearance: none;
		animation: animate-stripes 2s linear 0s 5 normal;
		cursor: progress;
	}

	progress.loading:indeterminate {
		border-radius: 1em;
		box-shadow: inset 2px 2px 2px #ffffff40;
		overflow: hidden;
		background-image: linear-gradient(-45deg, #ffffff1a 0%, #ffffff1a 25%, #ffffff00 25%, #ffffff00 50%, #ffffff1a 50%, #ffffff1a 75%, #ffffff00 75%, #ffffff00 100%),
		linear-gradient(0deg, #ffffff40, #00000040),
		linear-gradient(90deg, hsl(3 33% 66% / 1), hsl(45 64% 83% / 1), hsl(137 33% 69% / 1));
		background-position: inherit;
		background-size: 2em 2em, cover, cover;
		background-repeat: repeat;
	}

	progress.loading:indeterminate::-webkit-progress-inner-element {
		background: transparent;
		opacity: 0;
	}

	progress.loading[value] {
		border-radius: 1em;
		box-shadow: inset 2px 2px 2px #ffffff40;
		overflow: hidden;
		background-position: inherit;
		background-size: 1em 1em, cover, cover;
		background-repeat: repeat;
		border: solid 1px #ffffff0C;
	}

	progress.loading[value]::-webkit-progress-inner-element {
		background-color: transparent;
		background-position: inherit;
	}

	progress.loading[value]::-webkit-progress-bar {
		background-color: transparent;
		background-position: inherit;
	}

	progress.loading[value]::-webkit-progress-value {
		border-radius: 1em;
		background-color: transparent;
		box-shadow: inset 2px 2px 2px #ffffff40;
		overflow: hidden;
		background-image: linear-gradient(-45deg, #ffffff1a 0%, #ffffff1a 25%, #ffffff00 25%, #ffffff00 50%, #ffffff1a 50%, #ffffff1a 75%, #ffffff00 75%, #ffffff00 100%),
		linear-gradient(0deg, #ffffff40, #00000040),
		linear-gradient(90deg, hsl(3 33% 66% / 1), hsl(45 64% 83% / 1), hsl(137 33% 69% / 1));
		background-position: inherit;
		background-size: 2em 2em, cover, cover;
	}

	progress.loading:indeterminate::-moz-progress-bar {
		border-radius: 1em;
		box-shadow: inset 2px 2px 2px #ffffff40;
		overflow: hidden;
		background-image: linear-gradient(-45deg, #ffffff1a 0%, #ffffff1a 25%, #ffffff00 25%, #ffffff00 50%, #ffffff1a 50%, #ffffff1a 75%, #ffffff00 75%, #ffffff00 100%),
		linear-gradient(0deg, #ffffff40, #00000040),
		linear-gradient(90deg, hsl(3 33% 66% / 1), hsl(45 64% 83% / 1), hsl(137 33% 69% / 1));
		background-position: inherit;
		background-size: 2em 2em, cover, cover;
		background-repeat: repeat;
	}

	progress.loading[value]::-moz-progress-bar {
		border-radius: 1em;
		background-color: transparent;
		box-shadow: inset 2px 2px 2px #ffffff40;
		overflow: hidden;
		background-image: linear-gradient(-45deg, #ffffff1a 0%, #ffffff1a 25%, #ffffff00 25%, #ffffff00 50%, #ffffff1a 50%, #ffffff1a 75%, #ffffff00 75%, #ffffff00 100%),
		linear-gradient(0deg, #ffffff40, #00000040),
		linear-gradient(90deg, hsl(3 33% 66% / 1), hsl(45 64% 83% / 1), hsl(137 33% 69% / 1));
		background-position: inherit;
		background-size: 2em 2em, cover, cover;
	}

	progress.loading + label {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

@media (prefers-reduced-motion) {
	/* Disables animation if the browser has it disabled */
	progress.loading {
		vertical-align: middle;
		appearance: none;
		animation: none;
		height: 2em;
		border-radius: 1em;
		box-shadow: inset 2px 2px 2px #ffffff40;
		background-image: linear-gradient(-45deg, #ffffff1a 0%, #ffffff1a 25%, #ffffff00 25%, #ffffff00 50%, #ffffff1a 50%, #ffffff1a 75%, #ffffff00 75%, #ffffff00 100%),
		linear-gradient(0deg, #ffffff40, #00000040),
		linear-gradient(90deg, hsl(3 33% 66% / 1), hsl(45 64% 83% / 1), hsl(137 33% 69% / 1));
		background-position: inherit;
		background-size: 2em 2em, cover, cover;
		background-repeat: repeat;
	}


	progress.loading::-webkit-progress-inner-element {
		opacity: 0;
		background-color: transparent;
		background-position: inherit;
		display: inline-block;
		line-height: 2em;
	}

	progress.loading::-webkit-progress-bar {
		background-color: transparent;
		background-position: inherit;
		display: inline-block;
		line-height: 2em;
	}

	progress.loading::-webkit-progress-value {
		display: inline-block;
		line-height: 2em;
		border-radius: 1em;
		box-shadow: inset 2px 2px 2px #00000040;
		background-color: transparent;
		background-position: inherit;
		background-size: 2em 2em, cover, cover;
	}

	progress.loading::-moz-progress-bar {
		display: inline-block;
		line-height: 2em;
		border-radius: 1em;
		background-color: transparent;
		box-shadow: inset 2px 2px 2px #ffffff40;
		background-image: linear-gradient(-45deg, #ffffff1a 0%, #ffffff1a 25%, #ffffff00 25%, #ffffff00 50%, #ffffff1a 50%, #ffffff1a 75%, #ffffff00 75%, #ffffff00 100%),
		linear-gradient(0deg, #ffffff40, #00000040),
		linear-gradient(90deg, hsl(3 33% 66% / 1), hsl(45 64% 83% / 1), hsl(137 33% 69% / 1));
		background-position: inherit;
		background-size: 2em 2em, cover, cover;
	}

	progress.loading + label {
		vertical-align: middle;
	}
}

/* endregion ------------------------ Loading/Progress styles ------------------------ */

.svg-tpl {
	display: none;
}


/*  ------------------------ Dialog/modul styles ------------------------ */

dialog.dialog_overlay::backdrop {
	background-color: #ffffff99;
	backdrop-filter: blur(6px);
}

dialog.dialog_overlay {
	/* region dialog.dialog_overlay: Sizing */
	box-sizing: border-box;
	margin: 30px auto 0;
	padding: 0;
	width: calc(100% - 4px);
	max-width: 1024px;
	/* endregion dialog.dialog_overlay: Sizing */

	/* region dialog.dialog_overlay: Edges */
	border: 1px solid #021c86;
	/* endregion dialog.dialog_overlay: Edges */
}

dialog.dialog_overlay,
dialog.dialog_overlay .dialog_sect_scrollable {
	overscroll-behavior: none;
}

dialog.dialog_overlay:not(.dialog_overlay_form_wrapper),
dialog.dialog_overlay.dialog_overlay_form_wrapper > form {
	/* region dialog.dialog_overlay: Flex */
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: start;
	align-items: stretch;
	align-content: start;
	overflow: hidden;
	/*gap: 20px;*/
	/* endregion dialog.dialog_overlay: Flex */
}

/* region Special mode: Hide all dialog_overlay except the last one */
/*
[class~="dialog_overlay"],
[class~="dialog_overlay"]::backdrop {
	opacity: 0;
}
[class~="dialog_overlay"]:last-of-type,
[class~="dialog_overlay"]:last-of-type::backdrop {
	opacity: initial;
}
*/
/* endregion Special mode: Hide all dialog_overlay except the last one */

dialog.dialog_overlay.dialog_cal {
	user-select: none;
	border: solid 1px #021c86;
	border-radius: 5px;
	width: 98%;
	max-width: 400px;
}

/* Once the screen width reaches 400px, we lock the calendar width */
@media screen and (min-width: 400px) {
	dialog.dialog_overlay.dialog_cal {
		width: 400px;
		font-size: 1.1em;
	}
}

dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > *,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > * {
	flex: 0 1 auto;
	padding: 20px 20px 10px;
}

dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > * + *,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > * + * {
	padding-top: 10px;
}

dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > :last-child,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > :last-child {
	padding-bottom: 20px;
}

/* Last item inside each "flex section" within the dialog */
dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > * > *:last-child,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > * > *:last-child {
	margin-bottom: 0;
}

/* Each section that is marked as a scrollable. Usually there should be only one */
dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > .dialog_sect_scrollable,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > .dialog_sect_scrollable {
	flex-grow: 1;
	overflow: auto;
}

/* Remove weirdness from paragraph defaults */
dialog.dialog_overlay p {
	margin: 0 0 1em;
	padding: 0;
}


dialog.dialog_overlay {
	border-color: #2980cc;
}

dialog.dialog_overlay.notice {
	border-color: #62b662;
}

dialog.dialog_overlay.prompt {
	border-color: #e69545;
}

dialog.dialog_overlay.error {
	border-color: #b32424;
}

dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > :first-child > *,
dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > :last-child > *,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > :first-child > *,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > :last-child > * {
	margin: 0;
}

dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > .dialog_sect_buttons ul,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > .dialog_sect_buttons ul {
	list-style: none;
	text-align: center;
	margin: 0;
}

dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > .dialog_sect_buttons li,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > .dialog_sect_buttons li {
	display: inline-block;
}

dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > .dialog_sect_buttons .loader,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > .dialog_sect_buttons .loader {
	margin: 10px 20px 10px 0;
}

/* region Headings */

dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > *:first-child > h2,
dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) h2,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > *:first-child > h2,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > h2 {
	font-size: 1.8em;
	text-align: left;
}

dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > *:first-child > h2,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > *:first-child > h2 {
	margin-top: 0;
	background-size: 32px;
	line-height: normal;
	background-position: left center;
	background-repeat: no-repeat;
	color: #333;
}

dialog.dialog_overlay.prompt:not(.dialog_overlay_form_wrapper) > *:first-child > h2::before,
dialog.dialog_overlay.prompt.dialog_overlay_form_wrapper > form > *:first-child > h2::before {
	display: inline-block;
	width: 1em;
	height: 1em;
	content: "";
	background: transparent url(../images/dialog_prompt_icon.png) no-repeat center center;
	background-size: 90% 90%;
	vertical-align: -10%;
	margin-right: 6px;
}

dialog.dialog_overlay.notice:not(.dialog_overlay_form_wrapper) > *:first-child > h2::before,
dialog.dialog_overlay.notice.dialog_overlay_form_wrapper > form > *:first-child > h2::before {
	display: inline-block;
	width: 1em;
	height: 1em;
	content: "";
	background: transparent url("../images/svg/dialog_notice_icon.svg") no-repeat center center;
	background-size: 90% 90%;
	vertical-align: -10%;
	margin-right: 6px;
}

dialog.dialog_overlay.error:not(.dialog_overlay_form_wrapper) > *:first-child > h2::before,
dialog.dialog_overlay.error.dialog_overlay_form_wrapper > form > *:first-child > h2::before {
	display: inline-block;
	width: 1em;
	height: 1em;
	content: "";
	background: transparent url(../images/svg/dialog_error_icon.svg) no-repeat center center;
	background-size: 90% 90%;
	vertical-align: -10%;
	margin-right: 6px;
}

dialog.dialog_overlay.dialog_cal > * {
	/*padding: 0;*/
	font-size: 1em; /* Put back after the other rule increases by 1.1em */
}

dialog.dialog_overlay.dialog_cal > .dialog_sect:not(.dialog_sect_buttons) {
	padding: 0;
}

dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > .dialog_sect_buttons,
dialog.dialog_overlay.dialog_overlay_form_wrapper > form > .dialog_sect_buttons {
	padding: 8px 0 20px 0;
}

dialog.dialog_overlay:not(.dialog_overlay_form_wrapper) > .dialog_sect_buttons button {
	font-size: 1em;
	padding: 8px 15px 8px 8px;

}


/* endregion Headings */

/* region Scrollbars */
/*dialog.dialog_overlay::-webkit-scrollbar-thumb,*/
/*dialog.dialog_overlay > *::-webkit-scrollbar-thumb {*/
/*	background-color: #666666;*/
/*	border: 4px solid transparent;*/
/*	border-radius: 8px;*/
/*	background-clip: padding-box;*/
/*}*/

/*dialog.dialog_overlay::-webkit-scrollbar,*/
/*dialog.dialog_overlay > *::-webkit-scrollbar {*/
/*	width: 16px;*/
/*}*/

dialog.dialog_overlay,
dialog.dialog_overlay > * {
	scrollbar-width: auto;
	scrollbar-color: #444444 #ffffff;
}

dialog.dialog_overlay::-webkit-scrollbar,
dialog.dialog_overlay > *::-webkit-scrollbar {
	width: 16px;
}

dialog.dialog_overlay::-webkit-scrollbar-track,
dialog.dialog_overlay > *::-webkit-scrollbar-track {
	background: #ffffff;
}

dialog.dialog_overlay::-webkit-scrollbar-thumb,
dialog.dialog_overlay > *::-webkit-scrollbar-thumb {
	background-color: #444444;
	border-radius: 8px;
	border: 4px solid transparent;
	background-clip: padding-box;
}

/* endregion Scrollbars */

/* region Custom TLP */
.menubar.simple_btn .btn {
	padding: 5px !important;
	height: auto !important;
	line-height: 1 !important;
	background: #922600;
}

/* endregion Custom TLP */

/* Mirroring font sizes of .mit_alert_inner */
dialog .dialog_sect {
	font-size: 1.1em;
}

/* region ------------------------ Details/summary styles ------------------------ */

details.error_helper {
	background-color: #f9f9f9;
	margin: 0 auto 1rem;
	position: sticky;
	top: 1em;
	box-shadow: 0 0 1em 1em #FFFFFF;
	border: 1px solid #901601;
}


details.error_helper ul.bullets {
	color: #600;
	text-underline-offset: 0.2rem;
	padding: 0 0 0 20px;
	list-style-type: circle;
}

details.error_helper ul.bullets li {
	margin: 0 0 10px 6px;
	padding: 0 0 0 0;
}

.dialog_overlay.error ul.bullets {
	padding: 0 0 0 15px;
	list-style-type: none;
	margin:0 0 20px 0;
}

.dialog_overlay.error ul.bullets li{
	margin:0 0 5px 0;
}

.dialog_overlay.error ul.bullets li:before {
	content: '';
	height: 6px;
	width: 6px;
	border: 1.5px solid #b32424;
	border-radius: 50%;
	display: inline-block;
	margin: 0 7px 0 0;
}

details.error_helper a {
	color: #600;
	text-underline-offset: 0.2rem;

}

details > summary {
	font-size: 1.2rem;
	padding: 1rem;
}

details > div {
	padding: 0 1rem 1rem;
}

details > div > :first-child {
	margin-top: 0;
	padding-top: 0;
	line-height: normal;
}

details > div > :last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

details.error_helper:not([open]) {
	/* Rules to apply to the details tab if it is CLOSED */
}

details.error_helper:not([open]) summary {
	/* Rules to apply to the summary heading if the details section is CLOSED */
}

details.error_helper[open] {
	/* Rules to apply to the details tab if it is open */
}

details.error_helper[open] summary {
	/* Rules to apply to the summary heading if the details section is open */
}

/* endregion ------------------------ Details/summary styles ------------------------ */

/* region ------------------------ LIVE REGION styles ------------------------ */

/* The area itself */
#live_region_area {
	/* Location on screen */
	position: fixed;
	bottom: .8em;
	/*left: .8em;*/
	right: .8em;
	z-index: 100;
	max-width: 320px;

	/* Flex for the wrapper */
	display: flex;
	flex-direction: column;
	row-gap: 0;
	align-items: flex-start;
	justify-content: flex-end;

	max-height: 80%;
	overflow: hidden;
}

#live_region_area[popover] {
	width: auto;
	position: fixed;
	margin: 0;
	bottom: .8em;
	left: unset;
	top: unset;
	right: .8em;
	border: none;
	background: transparent;
	padding: 0;
}

/* The sub-areas: polite and assertive */
#live_region_area > * {
	/* Flex config */
	display: flex;
	flex-direction: column-reverse;
	row-gap: 0;
	align-items: flex-end;
}

/* Basic CSS rules for each individual notification "toast" */
#live_region_area :is([role="alert"], [role="log"]) {
	transition: opacity .5s linear;
	background-color: #ffffffDD;
	padding: 1em;
	box-shadow: #00000033 0 0 .4em;
	border-radius: .4em;
	vertical-align: middle;
	user-select: none;
	margin: .4em;
	cursor:
			url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CjxnIHRyYW5zZm9ybT0ic2NhbGUoMC41IDAuNSkgdHJhbnNsYXRlKC0zIC0zKSI+CjxsaW5lIHgxPSI1LjUiIHgyPSIxMC41IiB5MT0iNS41IiB5Mj0iMTAuNSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZT0iIzAwMDAwMCIvPgo8bGluZSB4MT0iMTAuNSIgeDI9IjUuNSIgeTE9IjUuNSIgeTI9IjEwLjUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2U9IiMwMDAwMDAiLz4KPGxpbmUgeDE9IjUuNSIgeDI9IjEwLjUiIHkxPSI1LjUiIHkyPSIxMC41IiBzdHJva2Utd2lkdGg9IjEuNDUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlPSIjMTExMTExIi8+CjxsaW5lIHgxPSIxMC41IiB4Mj0iNS41IiB5MT0iNS41IiB5Mj0iMTAuNSIgc3Ryb2tlLXdpZHRoPSIxLjQ1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZT0iIzExMTExMSIvPgo8L2c+CjxnIHRyYW5zZm9ybT0icm90YXRlKC0zNiA4IDgpIHRyYW5zbGF0ZSgtMSAwKSBzY2FsZSgxLjI1IDEuMjUpIj4KPHBhdGggZD0iTQo3LjI1LDE0CjguNzUsMTQKOC43NSw4LjUKMTEsOS41CjgsMgo1LDkuNQo3LjI1LDguNQpaIiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMC4yNSIvPgo8L2c+Cjwvc3ZnPg==') 0 0,
			pointer;
}

/* Last toast in its sub-section (using first here because we display in reverse order) */
#live_region_area :is([role="alert"], [role="log"]):first-child {
	margin-bottom: .4em;
}

/* Extra rules if it's specifically an alert */


/* Remove margins from first and last items */
#live_region_area :is([role="alert"], [role="log"]) > :first-child {
	margin-top: 0 !important;
}

#live_region_area :is([role="alert"], [role="log"]) > :last-child {
	margin-bottom: 0 !important;
}

/* Once we set it to transparent, the magic happens and this needs to become opacity 0 */
#live_region_area :is([role="alert"], [role="log"]).transparent {
	opacity: 0;
}

/* Once we set it to transparent, the magic happens and this needs to become opacity 0 - EXCEPT NOT IF WE ARE STILL HOVERING */
#live_region_area :is([role="alert"], [role="log"]).transparent:hover {
	opacity: 1;
}

/* endregion ------------------------ LIVE REGION styles ------------------------ */