/*******************************************************************************************************************/
/**                                                                                                               **/
/** Microchange static CSS                                                                                        **/
/**                                                                                                               **/
/*******************************************************************************************************************/

/*******************************************************************************************************************/
/** CSS Variables (for themes etc.)                                                                               **/
/*******************************************************************************************************************/

:root, :root[ipr_theme=light] {
	/* Header (and footer) */
	--mc_header-color: rgb(88, 88, 88);
	--mc_header-background-color: rgb(188, 188, 188);
	--mc-header-a-color: rgb(0, 0, 0);
	--mc-header-a-background-color-hover: rgb(222, 222, 222);
	--mc_header_menuitem-color: rgb(88, 88, 88);
	--mc_header_menuitem-color-active: black;
	--mc_header_menuitem-color-hover: rgb(88, 88, 88);
	--mc_header_menu-div-hover: rgb(222, 222, 222);
	--mc_header_menuicon_popupmenu: url(/images/icons/MenuDarkMode.png);
	--mc_header_menuicon_mode: url(/images/icons/DarkMode.png);
	--mc_header_logo-background-image: url(/images/LogoDark_128x56.png);
	--mc_header_logo-background-image-large: url(/images/LogoDark_1024x454.png);
	--mc_header-popupmenu-background-color: rgb(222, 222, 222);
	--mc_header-popupmenu-background-color-hover: rgb(255, 255, 255);

	/* Splash */
	--mc_splash-background-color: rgba(255, 255, 255, 0.2);
	--mc_splash-background-blend-mode: lighten;
	--mc_splash_quote-span-color: rgb(33, 33, 33);
	--mc_splash_quote-span-color-a: rgb(0, 0, 0);
	--mc_splash_quote-span-color-a_hover: rgb(177, 0, 0);
	--mc_splash_bottom-span-color: rgb(88, 88, 88);
	--mc_splash_inner-background-color: rgba(233, 233, 233, 0.80);
	--mc_splash_inner-background-color_hover: rgba(233, 233, 233, 0.95);

	/* Sections */
	--mc_section-color: rgb(88, 88, 88);
	--mc_section-background-color: rgb(233, 233, 233);
	--mc_section-a-color: rgb(22, 22, 111);
	--mc_section-a-color_hover: rgb(44, 44, 222);
	--mc_section-buttondiv-color: rgb(44, 44, 44);
	--mc_section-buttondiv-color_hover: rgb(0, 0, 0);
	--mc_section-buttondiv-background-color: rgb(244, 244, 244);
	--mc_section-buttondiv-background-color_hover: rgb(255, 255, 255);
	--mc_home-background-image: url('/images/backgrounds/Microchange Bubbles Light 2048x3190.png');

	/* Dialogs */
	--mcdialog-overlay-background: rgba(0,0,0,0.4);
	--mcdialog-container-background: rgb(233, 233, 233);
	--mcdialog-titlebar-color: rgb(88, 88, 88);
	--mcdialog-titlebar-background: rgb(188, 188, 188);
	--mcdialog-vspacer-background: rgb(188, 188, 188);
}
:root[ipr_theme=dark] {
	/* Header */
	--mc_header-color: rgb(177, 177, 177);
	--mc_header-background-color: rgb(33, 33, 33);
	--mc-header-a-color: rgb(255, 255, 255);
	--mc-header-a-background-color-hover: rgb(55, 55, 55);
	--mc_header_menuitem-color: rgb(177, 177, 177);
	--mc_header_menuitem-color-active: white;
	--mc_header_menuitem-color-hover: rgb(177, 177, 177);
	--mc_header_menu-div-hover: rgb(55, 55, 55);
	--mc_header_menuicon_popupmenu: url(/images/icons/MenuLightMode.png);
	--mc_header_menuicon_mode: url(/images/icons/LightMode.png);
	--mc_header_logo-background-image: url(/images/LogoLight_128x56.png);
	--mc_header_logo-background-image-large: url(/images/LogoLight_1024x454.png);
	--mc_header-popupmenu-background-color: rgb(55, 55, 55);
	--mc_header-popupmenu-background-color-hover: rgb(33, 33, 33);

	/* Splash */
	--mc_splash-background-color: rgba(0, 0, 0, 0.4);
	--mc_splash-background-blend-mode: darken;
	--mc_splash_quote-span-color: rgb(166, 166, 166);
	--mc_splash_quote-span-color-a: rgb(177, 177, 177);
	--mc_splash_quote-span-color-a_hover: white;
	--mc_splash_bottom-span-color: rgb(166, 166, 166);
	--mc_splash_inner-background-color: rgba(0, 0, 0, 0.50);
	--mc_splash_inner-background-color_hover: rgba(0, 0, 0, 0.75);

	/* Sections */
	--mc_section-color: rgb(166, 166, 166);
	--mc_section-background-color: rgb(22, 22, 22);
	--mc_section-a-color: rgb(177, 177, 131);
	--mc_section-a-color_hover: white;
	--mc_section-buttondiv-color: rgb(177, 177, 177);
	--mc_section-buttondiv-color_hover: rgb(255, 255, 255);
	--mc_section-buttondiv-background-color: rgb(11, 11, 11);
	--mc_section-buttondiv-background-color_hover: rgb(0, 0, 0);
	--mc_home-background-image: url('/images/backgrounds/Microchange Bubbles Dark 2048x3190.png');

	/* Dialogs */
	--mcdialog-overlay-background: rgba(22,22,22,0.8);
	--mcdialog-container-background: rgb(22, 22, 22);
	--mcdialog-titlebar-color: rgb(177, 177, 177);
	--mcdialog-titlebar-background: rgb(33, 33, 33);
	--mcdialog-vspacer-background: rgb(33, 33, 33);
}

/*******************************************************************************************************************/
/** Media queries, basic. Each component CSS may have specifics.                                                  **/
/*******************************************************************************************************************/

/* Above: Default size 16px */
@media (max-width: 1200px) {
  html { font-size: 15px; }
}
@media (max-width: 992px) {
  html { font-size: 14px; }
}
@media (max-width: 768px) {
  html { font-size: 13px; }
}
@media (max-width: 576px) {
  html { font-size: 12px; }
}

/*******************************************************************************************************************/
/** Common CSS                                                                                                    **/
/*******************************************************************************************************************/

html, body {
	font-family: 'Ubuntu', Verdana, Arial, Helvetica, sans-serif;
}
.mc_superscript {
	vertical-align: super;
	font-size: 0.75em;
}
.mc_subscript {
	vertical-align: sub;
	font-size: 0.75em;
}
h1 {
	font-size: 2.5rem;
	font-weight: bold;
}
h2 {
	font-size: 2rem;
	font-weight: bold;
}
h3 {
	font-size: 1.5rem;
	font-weight: bold;
}
h4 {
	font-size: 1.25rem;
	font-weight: bold;
}
h5 {
	font-size: 1.125rem;
	font-weight: bold;
}
a {
	cursor: pointer;
	text-decoration: none;
	color: var(--mc_section-a-color);
	transition: color 0.5s ease;
}
a:hover {
	color: var(--mc_section-a-color_hover);
}
ul {
	margin: 1rem 0 0 0;
	padding: 0;
	text-align: left;
	list-style: none;
}
ul li {
	background-image: url(/favicon.png);
	background-repeat: no-repeat;
	background-size: 1.5rem 1.5rem;
	padding-left: 2rem;
	margin-bottom: 1.5rem;
}

/*******************************************************************************************************************/

.nooverscroll {
	overflow: auto;
	overscroll-behavior: none;
}
.nooverscroll-x {
	overflow-x: auto;
	overscroll-behavior: none;
}
.nooverscroll-y {
	overflow-y: auto;
	overscroll-behavior: none;
}

/*******************************************************************************************************************/
/** Unscoped CSS fragments from components, typically with a CssClass property that doesn't scope.                **/
/*******************************************************************************************************************/

.mc-splashdimmer.container {
	background-color: var(--mc_splash-background-color);
	background-blend-mode: var(--mc_splash-background-blend-mode);
}
.mc_body_link {
	cursor: pointer;
	text-decoration: none;
	color: var(--mc_section-a-color);
	transition: color 0.5s ease;
}
.mc_body_link:hover {
	color: var(--mc_section-a-color_hover);
}
.mc_section-buttondiv {
	display: inline-block;
	cursor: pointer;
	padding: 1rem 2rem;
	border-radius: 2rem;
	font-weight: bold;
	font-size: 1.1rem;
	color: var(--mc_section-buttondiv-color);
	background-color: var(--mc_section-buttondiv-background-color);
	transition: padding 0.5s ease, color 0.5s ease, background-color 0.5s ease;
}
.mc_section-buttondiv:hover {
	padding: 1rem 3rem;
	color: var(--mc_section-buttondiv-color_hover);
	background-color: var(--mc_section-buttondiv-background-color_hover);
}
.mc_section_image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mc_page-background {
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: contain;
	background-image: var(--mc_home-background-image);
}
.mc-address-box-link.container {
	padding: 0.25rem 0.5rem;
	border-radius: 2rem;
	color: var(--mc-header-a-color);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.5s ease;
}
.mc-address-box-link.container:hover {
	background-color: var(--mc-header-a-background-color-hover);
}

/*******************************************************************************************************************/
/** Splash components' common unscoped CSS.                                                                       **/
/*******************************************************************************************************************/

.mcsubsplash-outer {
	margin: 10%;
	padding: 5em;
	background-color: var(--mc_splash_inner-background-color);
	transform: scale(0.975);
	transition: background-color 0.5s ease,  transform 0.5s ease;
}
.mcsubsplash-outer:hover {
	background-color: var(--mc_splash_inner-background-color_hover);
	transform: scale(1);
}
.mcsubsplash-outer h1 {
	margin: 0.75rem 0;
	text-align: center;
}
.mcsubsplash-outer h2 {
	margin: 0.75rem 0;
	text-align: center;
}
.mcsubsplash-outer h3 {
	margin: 0.75rem 0;
}
.mcsubsplash-outer p {
	margin: 0.75rem 0;
}
.mcsubsplash-outer ul {
	margin: 0.75rem 0;
}
.mcsubsplash-outer li {
	margin: 0.75rem 0;
}
.mcsubsplash-mccontactustoday {
	margin: 2.5rem 0 0.75rem 0;
	text-align: center;
}
.mcsplash-bottom {
	padding: 0.75rem;
	text-align: right;
	font-size: 1.75rem;
	font-style: italic;
	font-weight: bold;
	color: var(--mc_splash_bottom-span-color);
}

/*******************************************************************************************************************/
/** McSection component unscoped CSS.                                                                             **/
/*******************************************************************************************************************/

.mcsection h1 {
	margin: 0.75rem 0;
	text-align: center;
}
.mcsection h2 {
	margin: 0.75rem 0;
	text-align: center;
}
.mcsection h3 {
	margin: 0.75rem 0;
}
.mcsection p {
	margin: 0.75rem 0;
}
.mcsection ul {
	margin: 0.75rem 0;
}
.mcsection li {
	margin: 0.75rem 0;
}

/*******************************************************************************************************************/
/** Static CSS used for error messages/pages.                                                                     **/
/*******************************************************************************************************************/

.mcerrormessage-outer {
	display: grid;
	grid-template-columns: auto;
	justify-content: center;
	margin-top: 10rem;
	padding: 2rem;
	align-items: center;
}
.mcerrormessage-upper {
	padding: 2rem;
	text-align: center;
}
.mcerrormessage-upper h1, .mcerrormessage-upper h2 {
	margin-bottom: 3rem;
}
.mcerrormessage-upper h3 {
	margin-bottom: 2rem;
}
.mcerrormessage-lower {
	padding: 2rem;
	text-align: center;
}
.mcerrormessage-reqid {
	display: inline-block;
	white-space: nowrap;
	margin-bottom: 3rem;
	border-style: solid;
	border-width: 2px;
	border-color: currentColor;
	padding: 1rem;
}
.mcerrormessage-code {
	font-size: 1.1rem;
}
.mcerrormessage-devmode {
	display: inline-block;
	margin-top: 3rem;
	border-style: solid;
	border-width: 2px;
	border-color: currentColor;
	padding: 3rem;
	max-width: 80%;
}
.mcerrormessage-devmode p {
	text-align: left;
	margin: 0.75rem 0;
}
.mcerrormessage-button {
	display: inline-block;
	border-style: solid;
	border-width: 2px;
	border-color: currentColor;
	border-radius: 3rem;
	padding: 0.5rem 1.5rem;
	cursor: pointer;
	transition: background-color ease 0.6s;
}
.mcerrormessage-button:hover {
  background-color: rgba(128, 128, 128, 0.5);
}

/*******************************************************************************************************************/
/** Misc                                                                                                          **/
/*******************************************************************************************************************/

/* For debugging CSS:
body div {
	border: 1px solid red;
}*/
.redborderdiv, .redborderdivs {
	border: 1px solid red;
}
.redborderdivs div {
	border: 1px solid red;
}


/*******************************************************************************************************************/
/** Orininal CSS from templated project creation (empty Blazor Web App project).                                  **/
/*******************************************************************************************************************/

/*h1:focus {
	outline: none;
}*/
.valid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050;
}
.invalid {
	outline: 1px solid #e50000;
}
.validation-message {
	color: #e50000;
}
.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}
	.blazor-error-boundary::after {
		content: "An error has occurred."
	}
.darker-border-checkbox.form-check-input {
	border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
	color: var(--bs-secondary-color);
	text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
	text-align: start;
}