/*
TODO - look at importing main.css from ui/stylesheets rather than loading all in main.css
@import "{}/imports/ui/stylesheets/not-found.less";
*/

/*
========  SIMPLE CSS START ========
MIT License

Copyright (c) 2020 Simple.css (Kev Quirk)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

/* Set the global variables for everything. Change these to use your own fonts and colours. */#login-buttons {
  display: inline-block;
  margin-right: 0.2px;
  line-height: 1;
}
#login-buttons .login-button {
  position: relative;
}
#login-buttons button.login-button {
  width: 100%;
}
#login-buttons .login-buttons-with-only-one-button {
  display: inline-block;
}
#login-buttons .login-buttons-with-only-one-button .login-button {
  display: inline-block;
}
#login-buttons .login-buttons-with-only-one-button .login-text-and-button {
  display: inline-block;
}
#login-buttons .login-display-name {
  display: inline-block;
  padding-right: 2px;
  line-height: 1.5;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#login-buttons .loading {
  line-height: 1;
  background-image: url(data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA);
  width: 16px;
  background-position: center center;
  background-repeat: no-repeat;
}
#login-buttons .login-button,
.accounts-dialog .login-button {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  padding: 4px 8px;
  font-size: 80%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  background: #596595;
  border: 1px solid #464f75;
  border-radius: 4px;
}
#login-buttons .login-button:hover,
.accounts-dialog .login-button:hover {
  background: #7580ac;
}
#login-buttons .login-button:active,
.accounts-dialog .login-button:active {
  background: #7580ac;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2) inset;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2) inset;
}
#login-buttons .login-button.login-button-disabled,
.accounts-dialog .login-button.login-button-disabled,
#login-buttons .login-button.login-button-disabled:active,
.accounts-dialog .login-button.login-button-disabled:active {
  color: #ddd;
  background: #aaa;
  border: 1px solid #c3c3c3;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.accounts-dialog * {
  padding: 0;
  margin: 0;
  line-height: inherit;
  color: inherit;
  font: inherit;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.accounts-dialog .login-button {
  width: auto;
  margin-bottom: 4px;
}
#login-buttons .login-buttons-padding {
  display: inline-block;
  width: 30px;
}
#login-buttons .login-display-name {
  margin-right: 4px;
}
#login-buttons .configure-button {
  background: #ff2a00;
  border-color: #cc2200;
}
#login-buttons .configure-button:active,
#login-buttons .configure-button:hover {
  background: #ff5533;
  border-color: #ff2a00;
}
#login-buttons .login-image {
  display: inline-block;
  position: absolute;
  left: 6px;
  top: 6px;
  width: 16px;
  height: 16px;
}
#login-buttons .text-besides-image {
  margin-left: 18px;
}
#login-buttons .no-services {
  color: red;
}
#login-buttons .login-link-and-dropdown-list {
  position: relative;
}
#login-buttons .login-close-text {
  float: left;
  position: relative;
  padding-bottom: 8px;
}
#login-buttons .login-text-and-button .loading,
#login-buttons .login-link-and-dropdown-list .loading {
  display: inline-block;
}
#login-buttons.login-buttons-dropdown-align-left #login-dropdown-list .loading {
  float: right;
}
#login-buttons.login-buttons-dropdown-align-right #login-dropdown-list .loading {
  float: left;
}
#login-buttons .login-close-text-clear {
  clear: both;
}
#login-buttons .or {
  text-align: center;
}
#login-buttons .hline {
  text-decoration: line-through;
  color: lightgrey;
}
#login-buttons .or-text {
  font-weight: bold;
}
#login-buttons #signup-link {
  float: right;
}
#login-buttons #forgot-password-link,
#login-buttons #resend-passwordless-code {
  float: left;
}
#login-buttons #back-to-login-link {
  float: right;
}
#login-buttons a,
.accounts-dialog a {
  cursor: pointer;
  text-decoration: underline;
}
#login-buttons.login-buttons-dropdown-align-right .login-close-text {
  float: right;
}
.accounts-dialog {
  border: 1px solid #ccc;
  z-index: 1000;
  background: white;
  border-radius: 4px;
  padding: 8px 12px;
  margin: -8px -12px 0 -12px;
  width: 250px;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
  font-size: 16px;
  color: #333;
}
.accounts-dialog > * {
  line-height: 1.6;
}
.accounts-dialog > .login-close-text {
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
}
.accounts-dialog label,
.accounts-dialog .title {
  font-size: 80%;
  margin-top: 7px;
  margin-bottom: -2px;
}
.accounts-dialog label {
  display: inline;
}
.accounts-dialog input[type=text],
.accounts-dialog input[type=email],
.accounts-dialog input[type=password] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}
.accounts-dialog input[type=text][type],
.accounts-dialog input[type=email][type],
.accounts-dialog input[type=password][type] {
  height: auto;
}
.accounts-dialog .login-button-form-submit {
  margin-top: 8px;
}
.accounts-dialog .message {
  font-size: 80%;
  margin-top: 8px;
  line-height: 1.3;
}
.accounts-dialog .error-message {
  color: red;
}
.accounts-dialog .info-message {
  color: green;
}
.accounts-dialog .additional-link {
  font-size: 75%;
}
.accounts-dialog .accounts-close {
  position: absolute;
  top: 0;
  right: 5px;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  text-decoration: none;
  color: #000;
  opacity: 0.4;
}
.accounts-dialog .accounts-close:hover {
  opacity: 0.8;
}
.accounts-dialog #login-buttons-cancel-reset-password {
  float: right;
}
.accounts-dialog #login-buttons-cancel-enroll-account {
  float: right;
}
#login-dropdown-list {
  position: absolute;
  top: -1px;
  left: -1px;
}
#login-buttons.login-buttons-dropdown-align-right #login-dropdown-list {
  left: auto;
  right: -1px;
}
#login-buttons-message-dialog .message {
  /* we intentionally want it bigger on this dialog since it's the only thing displayed */
  font-size: 100%;
}
.accounts-centered-dialog {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  z-index: 1001;
  position: fixed;
  left: 50%;
  margin-left: -258px / 2;
  top: 50%;
  margin-top: -40px;
  /* = approximately -height/2, though height can change */
}
#configure-login-service-dialog {
  width: 530px;
  margin-left: -538px / 2;
  margin-top: -300px;
  /* = approximately -height/2, though height can change */
}
#configure-login-service-dialog table {
  width: 100%;
}
#configure-login-service-dialog input[type=text] {
  width: 100%;
  font-family: "Courier New", Courier, monospace;
}
#configure-login-service-dialog ol {
  margin-top: 10px;
  margin-bottom: 10px;
}
#configure-login-service-dialog ol li {
  margin-left: 30px;
}
#configure-login-service-dialog .configuration_labels {
  width: 30%;
}
#configure-login-service-dialog .configuration_inputs {
  width: 70%;
}
#configure-login-service-dialog .new-section {
  margin-top: 10px;
}
#configure-login-service-dialog .url {
  font-family: "Courier New", Courier, monospace;
}
#configure-login-service-dialog-save-configuration {
  float: right;
}
.configure-login-service-dismiss-button {
  float: left;
}
#just-verified-dismiss-button,
#messages-dialog-dismiss-button {
  margin-top: 8px;
}
.hide-background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  /* XXX consider replacing with DXImageTransform */
  background-color: #000000;
  /* fallback for IE7-8 */
  background-color: rgba(0, 0, 0, 0.7);
}
#login-buttons input[type=text],
.accounts-dialog input[type=text],
#login-buttons input[type=email],
.accounts-dialog input[type=email],
#login-buttons input[type=password],
.accounts-dialog input[type=password] {
  padding: 4px;
  border: 1px solid #aaa;
  border-radius: 3px;
  line-height: 1;
}
:root {
	/* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
	--base-fontsize: 1.15rem;

	/* Major third scale progression - see https://type-scale.com/ */
	--header-scale: 1.15;

	/* Line height is set to the "Golden ratio" for optimal legibility */
	--line-height: 1.8;

	/* Default (light) theme */
	--bg: #d1f2f8;
	--accent-bg-light: #bce8f0;
	--accent-bg: #476775;
	--text: #212121;
	--text-light: #929292;
	--border: #b3b6c0;
	--accent: #1a087e;
	--accent-light: #6cd6d1;
	--code: #920036;
	--preformatted: #2e2e2e;
	--marked: #9cc700;
	--disabled: #a8a8a8;
	/* Box shadow default */
	--box-shadow: 0px 0.5vh 2vh rgba(128, 127, 127, 0.4);
}

@font-face {
	font-family: 'Lato';
	src: url('fonts/Lato-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #f0f0f0;
		--accent-bg: #999999;
		--text: #212121;
		--text-light: #585858;
		--border: #d8dae1;
		--accent: #0d47a1;
		--accent-light: #90caf9;
		--code: #d81b60;
		--preformatted: #444;
		--marked: #ffdd33;
		--disabled: #efefef;
	}
}

html {
	/* Set the font globally */
	font-family: 'Lato';
}

/* Make the body a nice central block */
body {
	color: var(--text);
	font-size: var(--base-fontsize);
	line-height: var(--line-height);
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 0 auto;
	overflow-x: hidden;
	word-break: break-word;
	overflow-wrap: break-word;
	letter-spacing: 0.25px;
}

/* Make the header bg full width, but the content inline with body */
header {
	background: var(--accent-bg);
	border-bottom: 1px solid var(--border);
	text-align: center;
	padding: 2rem 0.5rem;
	width: 100vw;
	position: relative;
	box-sizing: border-box;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Remove margins for header text */
header h1,
header p {
	margin: 0;
}

/* Add a little padding to ensure spacing is correct between content and nav */
main {
	padding-top: 1.5rem;
}

/* Fix line height when title wraps */
h1,
h2,
h3 {
	line-height: 1.1;
}

/* Format navigation */
/* nav {
	font-size: 1rem;
	line-height: 2;
	padding: 1rem 0;
} */

/* nav a {
	margin: 1rem 1rem 0 0;
	border: 1px solid var(--border);
	border-radius: 5px;
	color: var(--text) !important;
	display: inline-block;
	padding: 0.1rem 1rem;
	text-decoration: none;
	transition: 0.4s;
} */

nav a:hover {
	color: var(--accent) !important;
	border-color: var(--accent);
}

nav a.current:hover {
	text-decoration: none;
}

footer {
	margin-top: 4rem;
	padding: 2rem 1rem 1.5rem 1rem;
	color: var(--text-light);
	font-size: 0.9rem;
	text-align: center;
	border-top: 1px solid var(--border);
}

/* Format headers */
h1 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
	margin-top: calc(var(--line-height) * 0.7rem);
	margin-bottom: calc(var(--line-height) * 0.7rem);
}

h2 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
	margin-top: 10px;
	margin-bottom: 10px;
}

h3 {
	font-size: var(--base-fontsize);
	margin-top: 10px;
	margin-bottom: 10px;
}

h4 {
	font-size: calc(var(--base-fontsize) * var(--header-scale));
	margin-top: 10px;
	margin-bottom: 10px;
}

h5 {
	font-size: var(--base-fontsize);
	margin-top: 10px;
	margin-bottom: 10px;
}

h6 {
	font-size: calc(var(--base-fontsize) / var(--header-scale));
	margin-top: 10px;
	margin-bottom: 10px;
}

p {
	margin-top: 0;
	margin-bottom: 10px;
}

/* Format links & buttons */
a,
a:visited {
	color: white;
}

a:hover {
	text-decoration: none;
}

.footer-mhid {
	border-left: 5px solid #ea5d4e;
	padding-left: 10px;
}

.footer-sem {
	border-left: 5px solid #6465ab;
	padding-left: 10px;
}

.footer-wisdom {
	border-left: 5px solid #a74794;
	padding-left: 10px;
}

.footer-andy {
	border-left: 5px solid #6bb679;
	padding-left: 10px;
}

.footer-insight {
	border-left: 5px solid #e3336b;
	padding-left: 10px;
}

.footer-aim {
	border-left: 5px solid #2ea9b0;
	padding-left: 10px;
}

.copyright {
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	text-align: left;
	width: 93%;
	float: left;
	box-sizing: border-box;
	margin-left: 4%;
	margin-right: 2%;
}

.footer-logo {
	max-height: 160px;
}

.copyright p {
	font: 400 14px / 2.4rem Lato, Helvetica, Arial, sans-serif;
}

a button,
button,
[role='button'],
input[type='submit'],
input[type='reset'],
input[type='button'] {
	border: none;
	border-radius: 5px;
	background: var(--accent);
	font-size: 1rem;
	color: var(--bg);
	padding: 0.7rem 0.9rem;
	margin: 0.5rem 0;
	transition: 0.4s;
}

a button[disabled],
button[disabled],
[role='button'][aria-disabled='true'],
input[type='submit'][disabled],
input[type='reset'][disabled],
input[type='button'][disabled],
input[type='checkbox'][disabled],
input[type='radio'][disabled],
select[disabled] {
	cursor: default;
	opacity: 0.5;
	cursor: not-allowed;
}

input:disabled,
textarea:disabled,
select:disabled {
	cursor: not-allowed;
	background-color: var(--disabled);
}

input[type='range'] {
	padding: 0;
}

/* Set the cursor to '?' while hovering over an abbreviation */
abbr {
	cursor: help;
}

button:focus,
button:enabled:hover,
[role='button']:focus,
[role='button']:not([aria-disabled='true']):hover,
input[type='submit']:focus,
input[type='submit']:enabled:hover,
input[type='reset']:focus,
input[type='reset']:enabled:hover,
input[type='button']:focus,
input[type='button']:enabled:hover,
input[type='checkbox']:focus,
input[type='checkbox']:enabled:hover,
input[type='radio']:focus,
input[type='radio']:enabled:hover {
	cursor: pointer;
}

audio::-webkit-media-controls-panel {
	background-color: white;
}

/* Format the expanding box */
details {
	border: 1px solid var(--border);
	border-radius: 5px;
	margin-bottom: 1rem;
}

summary {
	cursor: pointer;
	font-weight: bold;
	padding: 0.6rem 1rem;
}

details[open] {
	padding: 0.6rem 1rem 0.75rem 1rem;
}

details[open] summary {
	margin-bottom: 0.5rem;
	padding: 0;
}

details[open] > *:last-child {
	margin-bottom: 0;
}

/* Format tables */
table {
	border-collapse: collapse;
	width: 100%;
	margin: 1.5rem 0;
}

td,
th {
	border: 1px solid var(--border);
	text-align: left;
	padding: 0.5rem;
	word-break: normal;
}

th {
	background: #193e72;
	font-weight: bold;
	color: white;
}

/* tr:hover{
	background: #193e72;
	color: #fff;
} */

table caption {
	font-weight: bold;
	margin-bottom: 0.5rem;
}

/* Lists */
ol,
ul {
	padding-left: 3rem;
}
.no-bullet {
	list-style-type: none;
}

/* Format forms */
textarea,
select,
input {
	font-size: inherit;
	font-family: inherit;
	padding: 0.5rem;
	margin-bottom: 0.5rem;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 5px;
	box-shadow: none;
	box-sizing: border-box;
	width: 60%;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Add arrow to  */
select {
	background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%), linear-gradient(135deg, var(--text) 51%, transparent 49%);
	background-position: calc(100% - 20px), calc(100% - 15px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

select[multiple] {
	background-image: none !important;
}

/* checkbox and radio button style */
input[type='checkbox'],
input[type='radio'] {
	vertical-align: bottom;
	position: relative;
}

input[type='radio'] {
	border-radius: 100%;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
	background: var(--accent);
}

input[type='checkbox']:checked::after {
	/* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
	content: ' ';
	width: 0.1em;
	height: 0.25em;
	border-radius: 0;
	position: absolute;
	top: 0.05em;
	left: 0.18em;
	background: transparent;
	border-right: solid var(--bg) 0.08em;
	border-bottom: solid var(--bg) 0.08em;
	font-size: 1.8em;
	transform: rotate(45deg);
}
input[type='radio']:checked::after {
	/* creates a colored circle for the checked radio button  */
	content: ' ';
	width: 0.25em;
	height: 0.25em;
	border-radius: 100%;
	position: absolute;
	top: 0.125em;
	background: var(--bg);
	left: 0.125em;
	font-size: 32px;
}

/* Make the textarea wider than other inputs */
textarea {
	width: 80%;
}

.textarea-flex {
	display: flex;
	flex-direction: column;
	width: 80%;
}

.help-text {
	margin-top: 5px;
	margin-bottom: 5px;
}

.addMeasure-titles {
	margin-top: 5px;
	margin-bottom: 5px;
}

.addmeasure-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0;
}

.addmeasure-item {
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 20px;
	cursor: pointer;
	user-select: none;
	background-color: #f9f9f9;
	transition: all 0.2s ease;
}

.addmeasure-item.selected {
	background-color: #193e72;
	color: white;
	border-color: #193e72;
}

/* Makes input fields wider on smaller screens */
@media only screen and (max-width: 720px) {
	textarea,
	select,
	input {
		width: 100%;
	}
}

/* Ensures the checkbox and radio inputs do not have a set width like other input fields */
input[type='checkbox'],
input[type='radio'] {
	width: auto;
}

/* do not show border around file selector button */
input[type='file'] {
	border: 0;
}

/* Without this any HTML using <fieldset> shows ugly borders and has additional padding/margin. (Issue #3) */
fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

/* Misc body elements */

hr {
	color: var(--border);
	border-top: 1px;
	margin: 1rem auto;
}

mark {
	padding: 2px 5px;
	border-radius: 4px;
	background: var(--marked);
}

main img,
main video {
	max-width: 100%;
	height: auto;
	border-radius: 5px;
}

figure {
	margin: 0;
}

figcaption {
	font-size: 0.9rem;
	color: var(--text-light);
	text-align: center;
	margin-bottom: 1rem;
}

blockquote {
	margin: 2rem 0 2rem 2rem;
	padding: 0.4rem 0.8rem;
	border-left: 0.35rem solid var(--accent);
	opacity: 0.8;
	font-style: italic;
}

cite {
	font-size: 0.9rem;
	color: var(--text-light);
	font-style: normal;
}

/* Use mono font for code like elements */
code,
pre,
pre span,
kbd,
samp {
	font-size: 1.075rem;
	font-family: var(--mono-font);
	color: var(--code);
}

kbd {
	color: var(--preformatted);
	border: 1px solid var(--preformatted);
	border-bottom: 3px solid var(--preformatted);
	border-radius: 5px;
	padding: 0.1rem;
}

pre {
	padding: 1rem 1.4rem;
	max-width: 100%;
	overflow: auto;
	overflow-x: auto;
	color: var(--preformatted);
	background: var(--accent-bg);
	border: 1px solid var(--border);
	border-radius: 5px;
}

/* Fix embedded code within pre */
pre code {
	color: var(--preformatted);
	background: none;
	margin: 0;
	padding: 0;
}

path {
	pointer-events: none;
}

/*
========  SIMPLE CSS END ========
*/

/*
========  Material Icons START ========
*/

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/MaterialIcons-Regular.ttf') format('truetype');
}
.material-icons {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	direction: ltr;
	display: inline-block;
	font-family: 'Material Icons';
	font-feature-settings: 'liga';
	font-size: 3vh;
	font-style: normal;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 1;
	text-rendering: optimizeLegibility;
	text-transform: none;
	vertical-align: middle;
	white-space: nowrap;
	word-wrap: normal;
}
.material-icons.md-18 {
	font-size: 18px;
}
.material-icons.md-24 {
	font-size: 24px;
}
.material-icons.md-36 {
	font-size: 36px;
}
.material-icons.md-48 {
	font-size: 48px;
}
.material-icons.md-96 {
	font-size: 96px;
}
.material-icons.md-dark {
	color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
	color: rgba(0, 0, 0, 0.26);
}
.material-icons.md-light {
	color: rgba(255, 255, 255, 0.1);
}
.material-icons.md-light.md-inactive {
	color: rgba(255, 255, 255, 0.3);
}
.material-icons small {
	display: block;
	font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	font-size: 0.5em;
}
.material-icons:hover {
	cursor: pointer;
	color: #193e72;
}

/*
========  Material Icons END ========
*/

/* 
========  Popups START ========
*/

.popup-container {
	display: flex;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.2);
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.4s;
}

.popup-container.fade-out {
	animation: fadeOut 0.4s;
}

.popup {
	display: flex;
	flex-direction: column;
	background-color: white;
	padding: 5vh;
	border-radius: 5vh;
	width: 50%;
	height: 50%;
	align-items: center;
	overflow: hidden;
}

.popup::-webkit-scrollbar {
	display: none;
}

.close-popup {
	position: absolute;
	align-self: end;
	width: 4vh;
	height: 4vh;
	cursor: pointer;
}

/* 
========  Popups END ========
*/

/*
========  Main CSS ========
*/

.welcome {
	text-align: center;
}

.padding-10 {
	padding: 10px;
}

.padding-20 {
	padding: 20px;
}

.hide {
	display: none;
}

.inline-block {
	display: inline-block;
	vertical-align: middle;
}

.block {
	display: block;
}

.center {
	text-align: center;
}

.text-info {
	color: #00b7ff;
}
.text-warning {
	color: #ff9100;
}
.text-danger {
	color: #b60000d3;
}

.btn {
	background: #fff;
	color: #193e72;
	border: solid 3px #193e72;
	border-radius: 0px;
	padding: 10px 14px;
	cursor: pointer;
	font-size: 0.95rem;
}

.btn:hover {
	background: #193e72;
	color: #fff;
	filter: none;
}

.btn-submit {
	background-color: #fed47a;
	border: none;
	color: #183e72;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	width: fit-content;
	height: 70px;
	border-radius: 0px;
}

.btn-info {
	background-color: #89c4ff;
	border: none;
	color: black;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	width: fit-content;
	border-radius: 12px;
}
.btn-warning {
	background-color: #c45800;
	border: none;
	color: black;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	width: fit-content;
	border-radius: 12px;
}
.btn-danger {
	background-color: #750000;
	border: none;
	color: black;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	width: fit-content;
	border-radius: 12px;
}

.circle-btn {
	background-color: #193e72;
	border: none;
	color: black;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	border-radius: 50%;
	width: fit-content;
}

.float-right {
	float: right;
}

.float-left {
	float: left;
}

.right {
	margin-left: auto;
}

.left {
	margin-right: auto;
}

.centre {
	margin-right: auto;
	margin-left: auto;
}

.white-space-wrap {
	white-space: pre-wrap;
}

.white-space-line {
	white-space: pre-line;
}

.app-body-container {
	display: grid;
	grid-template-rows: auto auto auto auto;
}

.app-body-header {
	padding: 0;
	background: #193e72;
}

.header-container {
	transition: top 0.3s;
	display: flex;
	height: 40px;
	justify-content: flex-end;
	align-items: center;
	padding-right: 8%;
	z-index: 11;
}

.header-links {
	display: flex;
	flex-grow: 1; /* let it take available space */
	align-items: center;
	border-top: transparent;
	font: 400 0.1rem / 2.2rem Lato, Helvetica, Arial, sans-serif;
}

.header-section {
	margin-inline: 0.5rem; /* creates left + right margin */
	border-top: 6px solid transparent; /* Space is always reserved */
}

.header-link {
	color: white !important;
	text-decoration: none;
	font-size: 0.7rem;
	transition: border-top-color 0.3s ease, color 0.3s ease;
	padding: 6px;
}

.burger-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.burger {
	display: none;
	cursor: pointer;
}

.burger-text {
	display: none;
	margin: 0;
	color: #fff;
	font-size: 1rem;
}

.burger-wrapper {
	display: flex;
	align-items: center;
}

.bar1,
.bar2,
.bar3 {
	width: 20px;
	height: 3px;
	background-color: white;
	margin: 2px 0;
	transition: 0.4s;
}

.change .bar1 {
	transform: translate(0, 7px) rotate(-45deg);
}

.change .bar2 {
	opacity: 0;
}

.change .bar3 {
	transform: translate(0, -7px) rotate(45deg);
}

span[aria-current='page'] {
	border-top: 6px solid #2ea9b0;
}

.header-section.mhid:hover {
	border-top: 6px solid #ea5d4e;
}

.header-section.andy:hover {
	border-top: 6px solid #6bb679;
}

.header-section.wisdom:hover {
	border-top: 6px solid #a74794;
}

.header-section.sem:hover {
	border-top: 6px solid #6465ab;
}

.header-section.insight:hover {
	border-top: 6px solid #e3336b;
}

.header-section.aim:hover {
	border-top: 6px solid #2ea9b0;
}

.app-body-navbar {
	background-color: #ffffff;
	height: 4vh;
	width: 100%;
	transition: top 0.3s;
	z-index: 10;
}

.navbar-container {
	display: flex;
	flex-direction: column;
}

.navbar-logos-container {
	display: grid;
	grid-template-columns: 50% 50%;
	padding: 1vh 8%;
}

.navbar-logo-right {
	height: 15vh;
	display: flex;
	justify-content: end;
	align-items: center;
}

.navbar-logo {
	display: flex;
	align-items: center;
	height: 15vh;
	cursor: pointer;
}

.navbar-menu-container {
	display: flex;
	justify-content: flex-end;
	background-color: #f0f1f5;
	--line-height: 0;
	--header-scale: 1;
	padding-right: 8%;
	height: 5vh;
}

.navbar-menu-dropdown {
	position: relative;
	display: inline-block;
}

.navbar-menu-dropdown-content {
	display: none;
	position: absolute;
	top: 100%; /* directly below the parent */
	left: 0;
	background-color: #f1f1f1;
	min-width: 180px;
	z-index: 10;
}

.dropdown-box {
	display: flex;
	align-items: center;
	cursor: pointer;
	color: #000;
	padding-left: 10px;
	border-bottom: 1px solid #c9cad1;
}

.dropdown-box:last-child {
	border-bottom: none;
}

.material-icons:hover {
	color: inherit;
}

.navbar-menu-dropdown-content p {
	font-size: 15px;
	color: #193e72;
	text-decoration: none;
	display: block;
	margin-top: 10px;
}

.dropdown-box:hover * {
	transition: 0.5s ease;
	color: #ffff;
}

.dropdown-box:hover {
	transition: 0.3s ease;
	background-color: #193e72;
}

.navbar-menu-dropdown:hover .navbar-menu-dropdown-content {
	display: block;
}

.navbar-menu-items {
	cursor: pointer;
	transition: background-color 0.3s ease;
	display: flex;
	cursor: pointer;
}

.navbar-menu-item-text {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 15px;
	padding: 15px;
}

.bluebar {
	background-color: #193e72;
}

.nav-burger-text {
	color: #193e72 !important;
	cursor: pointer;
}

.navbar-menu-item {
	color: #193e72;
	cursor: pointer;
	transition: background-color 0.2s ease;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding-left: 10px;
	padding-right: 10px;
}

.active {
	color: #fff;
	background-color: #193e72;
}

.navbar-menu-item:hover {
	/* bottom: -3vh; */
	color: #fff;
	background-color: #193e72;
	transition: background-color 0.3s ease;
	align-items: center;
	cursor: pointer;
}

.navbar-admin-panel {
	cursor: pointer;
	color: #193e72;
	margin-right: 25px;
	padding: 1px;
}

.navbar-user-profile {
	cursor: pointer;
	color: #193e72;
}
.navbar-user-login {
	cursor: pointer;
	color: #193e72;
}

.sidebar {
	display: none;
}

.app-body-yield {
	position: relative;
	width: 100%;
	top: 18vh;
	bottom: 10vh;
	z-index: 1;
	margin-bottom: 25vh;
}

.app-body-footer {
	background-color: #193e72;
	color: #ffffff;
	z-index: 1;
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
}

.footer-links {
	height: 2%;
}

.app-body-jump {
	/* position: absolute; */
	z-index: 15;
}

#scrollToTopBtn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	border: none;
	width: 48px;
	height: 48px;
	cursor: pointer;
	transition: background-color 0.3s;
	background-color: #2ea9b0;
	border-radius: 0px;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}

.jumpToTop:hover {
	background-color: #193e72 !important;
	filter: none !important;
}

.jumpToTop:hover::before {
	text-indent: 0;
	content: 'Back To Top';
	position: absolute;
	background: #4e4b66;
	color: #fff;
	right: calc(100% + 7px);
	font-size: 12px;
	line-height: 16px;
	width: max-content;
	padding: 4px 8px;
	border-radius: 4px;
	top: 10px;
}

.footer-container {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	margin-left: 4%;
	margin-right: 2%;
	padding: 40px 0;
	opacity: 0;
}

.footer-container-section {
	height: 30vh;
}

.footer-title {
	font: 700 22px / 3.2rem Lato, Helvetica, Arial, sans-serif;
}

.footer-socials {
	padding: 5vh;
	right: 0;
	bottom: 0;
	position: absolute;
}

.home-container {
	display: grid;
	grid-template-rows: auto auto auto auto;
}

.home-intro {
	font-weight: bold;
	font-size: xxx-large;
	color: #183e72;
	padding-top: 10vh;
	padding-left: 2%;
	padding-right: 2%;
}

.home-about {
	display: grid;
	grid-template-columns: 48% 2% 48%;
	gap: 1%;
	background-color: #193e72;
	color: white;
	padding-top: 2%;
	padding-left: 2%;
	padding-right: 2%;
}

.login-form {
	display: flex;
	justify-content: center;
}

.panel {
	width: 100%;
}

.panel-body {
	width: 100%;
	align-items: center;
}

.form-group {
	display: flex;
	flex-direction: column;
}

.form-group input {
	width: 100%;
}

label {
	font-weight: bold;
}

input,
textarea {
	background-color: #ffff;
}

.panel-footer {
	display: flex;
	justify-content: space-between;
}

.repository-container {
	display: grid;
	grid-template-rows: auto auto auto;
}

.repository-title {
	display: grid;
	color: white;
	background-color: #193e72;
	padding: 1rem;
}

.repository-info {
	display: grid;
	grid-template-columns: 50% 50%;
}

.repository-info-background {
	/* Set the image as a background */
	background-image: url('img/books.png');
	background-size: cover; /* Ensures the image covers the entire area */
	background-position: center; /* Centers the image */
	background-repeat: no-repeat; /* Prevents the image from repeating */

	/* Define a height for the background container */
	min-height: 500px; /* Adjust as needed */
	width: 100%; /* Or a specific width */

	/* Enable positioning for the child content */
	position: relative;
}

.repository-info-content {
	/* Position the text to the bottom left */
	position: absolute;
	bottom: 40px; /* Adjust for desired distance from bottom */
	left: 140px; /* Adjust for desired distance from left */
	color: white; /* Example: set text color for better contrast */
	padding: 10px; /* Add some padding around the text */
}

.repository-info-content h1 {
	font-size: 54px;
	font-weight: 900;
}

.repository-info-content p {
	margin-bottom: 5px; /* Adjust spacing between paragraphs */
	font-weight: 500;
	font-size: 20px;
}

.repository-info-left {
	background-color: #ffffff;
	color: black;
	padding-left: 4%;
}

.repository-info-right {
	background-color: #ffffff;
	display: flex;
	align-self: center;
	justify-content: center;
}

.click-btn {
	background-color: #efecec;
	border-radius: 15px;
	cursor: pointer;
	margin-right: 10px;
}

.click-btn:hover {
	background-color: #fed47a;
	border-radius: 15px;
	cursor: pointer;
}

.click-btn-text {
	color: #183e72;
	font-weight: bold;
	padding: 10px;
}

.repository-search {
	padding-top: 2%;
	padding-bottom: 2%;
	display: grid;
	grid-template-rows: auto auto auto;
	background-color: #efecec;
	padding-right: 4%;
	padding-left: 4%;
}

.repository-search-text {
	color: #183e72;
}

.repository-search-text-input {
	width: 94%;
	/* background-image: url('/img/search_icon.png'); */
	background-size: 30px;
	background-position: 99% 55%;
	background-repeat: no-repeat;
	border: 2px solid #000000;
	background-color: white;
	margin-left: 3%;
}

.twitter-typeahead {
	display: block !important;
}

.tt-menu {
	background-color: #fff;
	border: 1px solid #ccc;
	max-height: 200px;
	overflow-y: auto;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	margin-left: 2%;
}

.tt-suggestion {
	padding: 8px;
	cursor: pointer;
}

.tt-suggestion:hover {
	background-color: #193e72;
	color: #fff;
}

.repository-search-dropdowns {
	color: #183e72;
	display: grid;
	grid-template-columns: 22% 22% 22% 22%;
	gap: 4%;
	padding-left: 3%;
	padding-right: 3%;
	margin-top: 20px;
}

.repository-search-dropdown {
	position: relative;
	display: inline-block;
	font-weight: bold;
	background-color: #ffffff;
	border: 2px solid #000000;
	text-align: left;
	padding-left: 5%;
	cursor: pointer;
	height: 35px;
	border-radius: 5px;
}

.repository-search-dropdown-content {
	display: none;
	position: absolute;
	left: 0vw;
	width: 100%;
	top: auto;
	background-color: #f1f1f1;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	height: 200px;
	overflow-y: auto;
}

.repository-search-dropdown-content a {
	color: #193e72;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.repository-search-dropdown-content a:hover {
	background-color: #193e72;
	color: #ffff !important;
}

.repository-search-dropdown:hover .repository-search-dropdown-content {
	display: block;
}

.repository-search-dropdown:hover .dropbtn {
	background-color: #3e8e41;
}

.repository-search-dropdown a:not(:first-of-type) {
	border-top: 1px solid #c9cad1;
}

.repository-search-alt-text {
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: space-between;
	color: #193e72;
	margin-top: 7px;
}

.repository-search-input {
	border: none;
	color: #193e72;
	background-color: inherit;
	width: 100%;
	height: 100%;
	padding: auto 10px;
	font-size: inherit;
	font-family: inherit;
	box-sizing: border-box;
	outline: none;
	box-shadow: none;
}

.repository-search-input::placeholder {
	color: #193e72;
	font-weight: bold;
	font-size: inherit;
}

.pull-right {
	position: absolute;
	right: 2%;
}

.no-pointer-events {
	pointer-events: none;
}

.clearFilters {
	cursor: pointer;
	padding: 10px;
}

.clearFilter {
	margin-right: 10px;
}

.clearFiltersCross {
	margin-left: 10px;
	margin-right: 10px;
}

.clearFiltersCross,
.clearFilter {
	width: 10px;
	cursor: pointer;
}

.repository-search-validation {
	color: #193e72;
}

.repository-summary {
	display: grid;
	grid-template-rows: auto auto;
	background-color: #ffffff;
	padding: 15px;
	margin-left: 6%;
	margin-right: 6%;
}

.repository-summary-top {
	color: #193e72;
}

.repository-summary-table {
	color: #193e72;
}

.repository-summary-table thead th {
	position: sticky;
	top: 0;
}

.measures-table-body-row {
	cursor: pointer;
}

.slider-wrapper {
	width: 50%;
	display: grid;
	grid-template-columns: 8% 86% 8%;
}

.slider-container {
	padding-left: 5vh;
	padding-right: 5vh;
	padding-bottom: 5vh;
	width: 50%;
	display: grid;
	justify-items: center;
	align-items: center;
}

.slider-bar {
	width: 100%;
	height: 50px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
	background-clip: content-box;
	margin-block: 3vh;
	border-radius: 0px;
	background: #fed47a;
	/* background: linear-gradient(to left, #efecec 50%, #fed47a 50%) right; */
}

.slider-marker {
	display: flex;
	background-color: #e4b145;
	width: 50px;
	height: 50px;
	position: relative;
	align-self: center;
	justify-content: center;
	border-radius: 50%;
	top: -8.35vh;
}

.slider-value {
	position: relative;
	pointer-events: none;
	user-select: none;
	animation: fadeIn 0.4s;
	bottom: 5vh;
	white-space: nowrap;
	display: flex;
	justify-content: center;
	background: #c9c9c9;
	flex-direction: column;
	align-items: center;
	min-width: 5vw;
	height: 3vh;
	border-radius: 6vh;
}

.slider-marker:hover {
	cursor: ew-resize;
}

.admin-options-container {
	margin-left: 4%;
	margin-right: 4%;
}

.measure-container {
	display: grid;
	grid-template-rows: auto auto;
	margin-left: 4%;
	margin-right: 4%;
}

.measure-info {
	display: grid;
}

.measure-info h2 {
	font-weight: 900;
}

.measure-info h3 {
	font-weight: 700;
}

.measure-main {
	display: grid;
	grid-template-rows: auto auto auto;
}

.measure-top {
	margin-top: 10px;
	background-color: #f0f1f5;
	color: white;
	display: grid;
	grid-template-columns: auto auto auto auto;
}

.measure-title {
	cursor: pointer;
	color: #193e72;
	text-align: center;
}

.measure-title:hover {
	cursor: pointer;
	background-color: #193e72;
	color: white;
	transition: 0.5s;
}

.measure-divider {
	height: 0;
	width: 95%;
	margin: 0.5rem 0;
	overflow: hidden;
	border-top: 2px solid #2ea9b0;
}

.measure-data {
	background-color: #ffffff;
	color: #183e72;
	padding-top: 2%;
	padding-bottom: 2%;
	padding-left: 10%;
	padding-right: 10%;
	border: solid 1px var(--border);
}

.measure-references {
	font-size: medium;
}

.addMeasureForm,
.inviteForm,
.editMeasureForm {
	margin-left: 6%;
	margin-right: 6%;
}

.validation-container {
	display: grid;
	grid-template-columns: 100% 100%;
	grid-template-rows: 100% 100%;
}

.validation-circle {
	grid-row-start: 1;
	grid-row-end: 1;
	grid-column-start: 1;
	grid-column-end: 1;
}

.validation-text {
	grid-row-start: 1;
	grid-row-end: 1;
	grid-column-start: 1;
	grid-column-end: 1;
	margin-left: 32px;
	margin-top: 10px;
}

.measure-text {
	display: grid;
	grid-template-rows: auto auto;
}

.measure-text-summary {
	background-color: #efecec;
	color: #183e72;
}

.measure-text-questions {
	background-color: #efecec;
	color: #183e72;
}

.measure-text-questions-columns {
	column-count: 3;
	column-width: 33%;
}

.register-form {
	display: flex;
	flex-direction: column;
}

.register-input {
	margin-bottom: 20px;
	margin-left: -6px;
	border-radius: 0px;
}

.register-label {
	background-color: #fed47a;
	color: #183e72;
	padding: 9px;
	font-weight: bold;
}

.register-input-text-area {
	margin-bottom: 20px;
	margin-left: -6px;
	border-radius: 0px;
	height: 100%;
	width: 56%;
}

.register-label-text-area {
	background-color: #fed47a;
	color: #183e72;
	padding: 9px;
	font-weight: bold;
}

.register-form-submit {
	width: 67%;
}

.vertical-divider {
	border: 1px solid #fed47a;
	width: 0px;
	height: 85%;
}

.home-cards {
	display: grid;
	grid-template-columns: 30% 30% 30%;
	gap: 5%;
	padding-left: 2%;
	padding-right: 2%;
}

.card {
	height: 60%;
	margin-top: 20%;
	margin-bottom: 20%;
	background-color: #fed47a;
	color: #183e72;
}

.card-top {
	height: 10%;
	padding-left: 5%;
	background-color: #fed47a;
}

.card-middle {
	height: 45%;
	background-color: white;
	padding: 5%;
}

.card-bottom {
	height: 20%;
	background-color: #fed47a;
	display: grid;
	grid-template-columns: 30% 70%;
}

.card-bottom-left {
	background-color: #fed47a;
}

.card-bottom-left-white {
	background-color: white;
}

.card-bottom-right {
	background-color: white;
}

.card-goto {
	padding-top: 7%;
	padding-left: 25%;
	cursor: pointer;
}

.home-partners {
	background-color: white;
	/* display: grid; */
	padding-left: 2%;
	padding-right: 2%;
}

.home-partners-title {
	width: 100%;
	color: #183e72;
}

.home-partners-container {
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
}

.home-partner {
	padding: 2%;
}

.contact-container {
	padding-left: 5%;
	padding-right: 5%;
	display: grid;
	grid-template-columns: 50% 50%;
	gap: 5%;
	color: #183e72;
}

.row:after {
	content: '';
	display: table;
	clear: both;
}
.col-2 {
	float: left;
	width: 50%;
}
.col-3 {
	float: left;
	width: 33.3%;
}
.col-4 {
	float: left;
	width: 25%;
}
.col-5 {
	float: left;
	width: 20%;
}
.col-6 {
	float: left;
	width: 16.6%;
}

.admin-menu {
	position: absolute;
	width: 10%;
	top: 0px;
	right: 0px;
	color: #252525;
	cursor: default;
}
.divider {
	height: 0;
	margin: 0.5rem 0;
	overflow: hidden;
	border-top: 1px solid #888888;
}

.weak {
	font-weight: lighter;
}

.view-text {
	cursor: grab;
	padding: 50px;
}

.cursor-pointer {
	cursor: pointer;
}

.cursor-grab {
	cursor: grab;
}

.centre-container {
	padding-top: 5%;
	width: 50%;
	padding-left: 25%;
}

.super-panel,
.admin-panel {
	font-family: sans-serif;
	background: #f9f9f9;
	padding: 20px;
	margin: auto;
}

.super-panel h3,
.admin-panel h3 {
	margin-top: 0;
}

.section {
	background: white;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.section h4 {
	margin: 0 0 10px;
	font-size: 1.1rem;
}

.button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.button-group button {
	background: #fff;
	color: #193e72;
	border: solid 3px #193e72;
	border-radius: 0px;
	padding: 10px 14px;
	cursor: pointer;
	font-size: 0.95rem;
}

.button-group button:hover {
	background: #193e72;
	color: #fff;
	filter: none;
}

.footer {
	margin-top: 20px;
	font-size: 0.85rem;
	color: #666;
}

/*
========  Main CSS  END========
*/

/* Dropdown menu */
/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #c5c5c5;
	width: 150px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	border-radius: 15px;
	cursor: pointer;
}

/* Links inside the dropdown */
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}
/* Dropdown menu */

/* Burger menu */
#bm {
	z-index: 12;
}

#bm-bar {
	width: 45px;
	height: 40px;
	margin: 30px 0 20px 20px;
	cursor: pointer;
}

.bar {
	height: 5px;
	width: 100%;
	background-color: #000000;
	display: block;
	border-radius: 5px;
	transition: 0.3s ease;
}

#bar1 {
	transform: translateY(-4px);
}

#bar3 {
	transform: translateY(4px);
}

.bm-nav {
	transition: 0.3s ease;
	display: none;
}

.bm-nav ul {
	padding: 0 22px;
}

.bm-nav li {
	list-style: none;
	padding: 12px 0;
}

.bm-nav li a {
	color: white;
	font-size: 20px;
	text-decoration: none;
}

.bm-nav li a:hover {
	font-weight: bold;
}

.bm-bg,
#bm {
	top: 0;
	left: 0;
	position: absolute;
}

.bm-bg {
	z-index: 11;
	width: 0;
	height: 0;
	margin: 30px 0 20px 20px;
	background: radial-gradient(circle, #2300e7, #0051e7);
	border-radius: 50%;
	transition: 0.3s ease;
}

.change {
	display: block;
}

.change .bar {
	background-color: white;
}

.change #bar1 {
	transform: translateY(4px) rotateZ(-45deg);
}

.change #bar2 {
	opacity: 0;
}

.change #bar3 {
	transform: translateY(-6px) rotateZ(45deg);
}

.change-bg {
	width: 620px;
	height: 620px;
	transform: translate(-60%, -30%);
}
/* Burger menu end*/

/* Loading */
.loading-container {
	align-content: center;
	padding: 15% 0;
	margin-right: auto;
	margin-left: auto;
	margin-top: auto;
	margin-bottom: auto;
	text-align: center;
	opacity: 1;
	animation: fadeIn 2s;
}

.loading-gif {
	width: 15vh;
}

.loading-link {
	animation: fadeInLong 5s;
}

/* Loading end*/

/* glossary start */
.glossary {
	white-space: pre-line;
}
/* glossary end */

/* Toast start */

.toast-container {
	position: fixed;
	top: 25px;
	right: 40px;
	width: 250px;
	transition: all 0.2s ease-out;
	z-index: 13;
}

.toast {
	--toast-bg: white;
	--toast-border-col: black;
	display: grid;
	grid-template-columns: 15% 85%;
	font-size: 15px;
	width: 100%;
	position: relative;
	margin: 10px;
	background: var(--toast-bg);
	border-radius: 10px;
	border: 1px solid var(--toast-border-col);
	color: white;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.6);
	transition: all 0.2s ease-out;
	animation: fadeIn 0.2s;
	-webkit-animation: fadeIn 0.2s;
	-moz-animation: fadeIn 0.2s;
	-o-animation: fadeIn 0.2s;
	-ms-animation: fadeIn 0.2s;
}

.toast:hover {
	opacity: 0.5;
}

.toast-icon {
	align-self: center;
	padding: 5px;
}

.toastText {
	align-self: center;
	padding: 5px;
}

.toast.error {
	--toast-bg: #e85e4c;
	--toast-border-col: #e85e4c;
}

.toast.success {
	--toast-bg: #193e72;
	--toast-border-col: #193e72;
}

.toast.warn {
	--toast-bg: #e95c4d;
	--toast-border-col: #e95c4d;
}

.toast.info {
	--toast-bg: #2ea9b0;
	--toast-border-col: #2ea9b0;
}

/* Toast end */

/* ZXCVBN Password checker start */

.zxcvbn-check {
	width: 60%;
	border: 1px solid #b8b8b8;
	display: none;
	text-align: center;
	text-transform: uppercase;
	padding-block: 5px;
	margin-top: 10px;
	font-weight: bold;
	border-radius: 10px;
	transition: all 0.3s;
}

#zxcvbn-suggestions {
	width: 60%;
}

/* ZXCVBN Password checker end */

/* Graph start */

.graphContainer {
	height: 500px;
	width: 800px;
}

/* Graph end */

/* Global functional Classes start */

.hidden {
	display: none;
}

.disable {
	pointer-events: none;
}

.hide-from-print {
	display: none;
}

.fade-in {
	animation: fadeIn 0.8s ease-out forwards;
	opacity: 0;
}

.fade-out {
	animation: fadeOut 0.4s;
}

@keyframes fadeInLong {
	0% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-ms-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Functional Classes end */

@media only screen and (max-width: 1500px) {
	.repository-summary-table {
		height: auto;
	}
}

@media only screen and (max-width: 1300px) {
	.footer-container {
		height: 25vh;
	}
}

@media only screen and (max-width: 1270px) {
	.burger {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.burger-text {
		align-items: center;
		margin-inline: 0.5rem;
		padding: 0.3rem 0;
		color: #fff;
		display: flex !important;
		cursor: pointer;
	}

	.header-container {
		padding-right: 2%;
		height: auto;
	}

	span[aria-current='page'] {
		border-top: none;
	}

	.header-section.mhid:hover {
		border-top: none;
	}

	.header-section.andy:hover {
		border-top: none;
	}

	.header-section.wisdom:hover {
		border-top: none;
	}

	.header-section.sem:hover {
		border-top: none;
	}

	.header-section.aim:hover {
		border-top: none;
	}

	.header-links {
		display: none;
		flex-direction: column;
		justify-content: flex-end;
		border-top: none;
		font: 400 0.1rem / 1.8rem Lato, Helvetica, Arial, sans-serif;
	}

	.header-link {
		border-top: none;
		padding-top: 0;
	}

	.header-section {
		padding: 0;
		border-top: none;
		margin-inline: 0;
	}

	.header-links.open {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}

	.navbar-menu-items {
		display: none;
	}

	.navbar-menu-item-text {
		margin-top: 10px;
	}

	.navbar-menu-container {
		padding-right: 2%;
	}

	.navbar-menu-container.open {
		background-color: #193e72; /* or any dark color you prefer */
	}

	.sidebar.open {
		display: flex;
		flex-direction: column;
		padding-left: 30px;
		background-color: #f0f1f5;
		justify-content: space-evenly;
	}

	.sidebar-menu-items {
		cursor: pointer;
	}

	.sidebar p {
		color: #193e72;
	}

	.sidebar-menu-dropdown-content {
		display: none;
	}

	.repository-info-content {
		position: absolute;
		bottom: 40px;
		left: 20px;
		color: white;
		padding: 10px;
		width: 50%;
	}

	.repository-info-content h1 {
		font-size: 36px;
		margin-bottom: 0px;
	}
}

@media only screen and (max-width: 1250px) {
	.repository-container {
		font-size: medium;
	}
}

@media only screen and (max-width: 1185px) {
	.header-links {
		display: none;
		flex-direction: column;
		justify-content: flex-end;
		gap: 1px;
		border-top: none;
	}

	.header-link {
		border-top: none;
		padding-top: 0;
	}

	.header-section {
		padding: 0;
	}

	.header-links.open {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}

	.header-container {
		height: auto;
		padding-right: 2%;
		transition: top 0.3s;
	}

	.app-body-navbar {
		height: auto;
	}

	.navbar-menu-items {
		display: none;
	}

	.navbar-menu-item-text {
		margin-top: 10px;
	}

	.navbar-menu-container {
		padding-right: 2%;
	}

	.navbar-menu-container.open {
		background-color: #193e72; /* or any dark color you prefer */
	}

	.sidebar.open {
		display: flex;
		flex-direction: column;
		padding-left: 30px;
		background-color: #f0f1f5;
		justify-content: space-evenly;
	}

	.sidebar-menu-items {
		cursor: pointer;
	}

	.sidebar p {
		color: #193e72;
	}

	.sidebar-menu-dropdown-content {
		display: none;
	}

	.dropdown-box:hover,
	.dropdown-box:hover * {
		background-color: initial;
		color: #193e72;
	}

	.flex-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 10px;
	}

	.sidebar-menu-dropdown-content.open {
		display: block;
	}

	.material-icons:hover {
		color: inherit;
	}

	.app-body-yield {
		top: 0vh;
		margin-bottom: 0vh;
	}

	.repository-container {
		display: block;
	}

	.repository-info {
		grid-template-columns: none;
	}

	.repository-info-right {
		padding-bottom: 10px;
	}

	.repository-search-alt-text {
		margin-bottom: 0;
	}

	.repository-summary-table {
		height: auto;
	}

	.footer-container-section {
		height: 15vh;
	}

	.repository-info-right img {
		width: 50%;
	}

	.footer-container {
		height: 45vh;
	}

	.copyright {
		float: inherit;
	}

	.footer-container-section {
		font-size: 0.8rem;
		padding-left: 0.5em;
	}

	.footer-logo {
		max-height: 140px;
	}
}

@media only screen and (max-width: 950px) {
	.app-body-container {
		display: block;
	}

	#repository-search-respondent-down,
	#repository-search-respondent-play,
	#repository-search-problemArea-down,
	#repository-search-problemArea-play {
		display: none !important;
	}

	.footer-logo {
		max-height: 100px;
	}
}

@media only screen and (max-width: 850px) {
	.footer-container-section {
		height: 10vh;
	}

	.footer-container {
		height: 35vh;
	}

	/* .repository-container {
        font-size: small;
    } */

	h3 {
		font-size: medium;
	}
}

@media screen and (max-width: 700px) {
	.navbar-logo-right {
		display: none !important;
	}

	.repository-info-content h1 {
		font-size: 24px;
		margin-bottom: 0px;
	}

	.repository-info-content p {
		font-size: 16px;
	}

	.footer-logo {
		max-height: 80px;
	}
}

@media only screen and (max-width: 600px) {
	.repository-search-dropdown-content {
		height: 100px;
	}
	.footer-container-section {
		height: auto;
	}

	.repository-search-dropdown {
		padding-left: 2%;
		height: auto;
	}

	.repository-search-alt-text {
		margin-top: 0px;
		height: 100%;
		width: 100%;
	}

	.measures-table thead {
		display: none;
	}

	.measures-table,
	.measures-table tbody,
	.measures-table tr,
	.measures-table td {
		display: block;
	}

	.measures-table tr {
		margin-bottom: 15px;
	}

	.measures-table td {
		position: relative;
	}

	.measures-table td::before {
		content: attr(data-label);
		position: absolute;
		left: 15px;
		width: 45%;
		padding-left: 10px;
		font-weight: bold;
		text-align: left;
	}

	.repository-container {
		font-size: small;
	}

	h3 {
		font-size: small;
	}

	.footer-container {
		height: 45vh;
	}

	.repository-search-dropdown-content a {
		padding: 0;
		font-size: small;
	}

	.footer-container {
		display: flex;
		height: auto;
		flex-direction: column;
		justify-content: flex-start;
		padding: 20px 0;
	}

	.footer-container-section p,
	.copyright {
		font-size: small;
	}

	.footer-text {
		height: auto;
	}

	.footer-logo {
		max-height: 120px;
	}

	.footer-title {
		font: 700 1.2rem / 0.2rem Lato, Helvetica, Arial, sans-serif;
		margin: 20px 0;
	}

	.copyright {
		padding-top: 10px;
	}
}

@media only screen and (max-height: 800px) {
	.navbar-logo-image {
		height: 100px !important;
	}
}
@media only screen and (max-height: 600px) {
	.navbar-logo-image {
		height: 80px !important;
	}
}
@media only screen and (max-height: 400px) {
	.navbar-logo-image {
		height: 60px !important;
	}
}