/*
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.618;

	/* Default (light) theme */
	--bg: #f0f0f0;
	--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: 'Nunito';
	src: url('fonts/Nunito-VariableFont_wght.ttf') format('truetype');
	font-weight: normal;
	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;
	}
}

.default{
	color: black;
	background-color: white;
}

.fileContainer{
	margin: auto;
	max-width: 650px;
	width: 100%;
	padding: 30px;
	background-color: white;
	border-radius: 20px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.drag-area{

	height: 100px;
	border: 3px dashed #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 10px auto
}

.drag-area .icon{
	font-size: 50px;
	color: gray;
}

.drag-area .file-button{
	font-size: 20px;
	font-weight: 500px;
	color: rgb(35, 153, 226);
	cursor: pointer;
}

.drag-area.active{
	border: 2px solid lightskyblue;
}

.defaultPadding{
	
	text-align: center;
}

.rowAlt {
  display: flex;
  margin-left: -200px;
  margin-right: -600px;
}

.column {
  flex: 50%;
  padding: 5px;
}

.table-wrap {
  height: auto;
  overflow-y: scroll;
  display: inline-block;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #ffffff;
}



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

/* Make the body a nice central block */
body {
	color: var(--text);
	background: var(--bg);
	font-size: var(--base-fontsize);
	line-height: var(--line-height);
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	flex: 1;
	margin: 0 auto;
	max-width: 78%;
	padding: 0 0.5rem;
	overflow-x: hidden;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* 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: calc(var(--line-height) * 0.7rem);
	margin-bottom: calc(var(--line-height) * 0.7rem);
}

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

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

h5 {
	font-size: var(--base-fontsize);
	margin-top: calc(var(--line-height) * 0.7rem);
	margin-bottom: calc(var(--line-height) * 0.7rem);
}

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

/* Format links & buttons */
a,
a:visited {
	color: var(--accent);
}

a:hover {
	text-decoration: none;
}

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 {
	filter: brightness(1.4);
	cursor: pointer;
}

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

/* Format the expanding box */
details {
	background: var(--accent-bg);
	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: var(--accent-bg);
	font-weight: bold;
}

tr:nth-child(even) {
	/* Set every other cell slightly darker. Improves readability. */
	background: var(--accent-bg);
}

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%;
}

/* 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 {
	color: white;
	transition: color 0.7s;
}

/*
========  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;
}

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

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

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

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

.welcome {
	text-align: center;
	align-content: center;
	text-align: center;
}

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

.information {
	text-align: center;
	align-content: center;
	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-color: #535eff;
	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-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: #000ba1;
	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;
}

.right {
	margin-left: auto;
}

.left {
	margin-right: auto;
}

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

.vertical-centre {
	padding: 5% 0;
}

.reset {
    all: unset !important;
}
/* Might need to change this to 'rowAlt' due to changes from the initial row */
.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;
}

.heading td{
	border: none !important;
}
/*
========  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: black; /* 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*/

/* Toast start */

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

.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: rgb(255, 0, 0);
	--toast-border-col: rgb(208, 97, 97);
}

.toast.success {
	--toast-bg: #09ff00;
	--toast-border-col: rgb(100, 208, 97);
}

.toast.warn {
	--toast-bg: rgb(246, 255, 0);
	--toast-border-col: rgb(201, 208, 97);
}

.toast.info {
	--toast-bg: rgb(0, 255, 251);
	--toast-border-col: rgb(97, 195, 208);
}

/* 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 */

/* Lang start */

.lang-container {
	display: grid;
	grid-template-columns: 49% 49%;
	column-gap: 2%;
	grid-template-rows: 90% 10%;
}

.lang-original {
	height: 110%;
	width: 100%;
	border-radius: 25px;
	border: 2px solid #444;
}

.lang-new {
	height: 110%;
	width: 100%;
	border-radius: 25px;
	border: 2px solid #444;
}

/* .section-list {
	height: 80%;
} */

/* Lang end */

/* Global functional Classes start */

.hidden {
	display: none;
}

.disable {
	pointer-events: none;
}

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

.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 */